mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
Docs Cleanup
This commit is contained in:
David Haz
@@ -13,12 +13,10 @@ import DisplayHeader from '@/components/landing/DisplayHeader/DisplayHeader.vue'
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const isCategoryPage = computed(() => /^\/[^/]+\/[^/]+$/.test(route.path));
|
||||
|
||||
const activeItem = computed(() => {
|
||||
if (route.path === '/') return 'home';
|
||||
return null;
|
||||
});
|
||||
|
||||
const isCategoryPage = computed(() => {
|
||||
return /^\/[^/]+\/[^/]+$/.test(route.path);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -28,10 +28,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!snippet" class="no-code">
|
||||
<div v-else class="no-code">
|
||||
<span>Nothing here yet!</span>
|
||||
|
||||
<i class="pi pi-face-sad"></i>
|
||||
<i class="pi pi-face-sad" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,7 +46,6 @@ const props = defineProps<{
|
||||
}>();
|
||||
|
||||
const skipKeys = ['cli'];
|
||||
|
||||
const expandedSections = ref<Set<string>>(new Set());
|
||||
|
||||
const codeEntries = computed(() => {
|
||||
@@ -72,102 +70,29 @@ const toggleExpanded = (name: string) => {
|
||||
};
|
||||
|
||||
const getDisplayName = (name: string) => {
|
||||
if (name === 'code') return 'Code';
|
||||
if (name === 'cli') return 'CLI Command';
|
||||
if (name === 'utility') return 'Utility';
|
||||
if (name === 'usage') return 'Usage';
|
||||
if (name === 'installation') return 'Installation';
|
||||
return name.charAt(0).toUpperCase() + name.slice(1);
|
||||
const displayNames: Record<string, string> = {
|
||||
code: 'Code',
|
||||
cli: 'CLI Command',
|
||||
utility: 'Utility',
|
||||
usage: 'Usage',
|
||||
installation: 'Installation'
|
||||
};
|
||||
return displayNames[name] || name.charAt(0).toUpperCase() + name.slice(1);
|
||||
};
|
||||
|
||||
const getLanguage = (name: string) => {
|
||||
if (name === 'cli') return 'bash';
|
||||
if (name === 'code') return 'html';
|
||||
if (name === 'usage') return 'html';
|
||||
if (name === 'installation') return 'bash';
|
||||
return 'javascript';
|
||||
const languageMap: Record<string, string> = {
|
||||
cli: 'bash',
|
||||
code: 'html',
|
||||
utility: 'typescript',
|
||||
usage: 'html',
|
||||
installation: 'bash'
|
||||
};
|
||||
return languageMap[name] || 'typescript';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.code-example {
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.code-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.code-container {
|
||||
position: relative;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.code-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid #142216;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.code-wrapper.collapsed {
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.fade-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60%;
|
||||
background: linear-gradient(to bottom, transparent, #0b0b0b);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.expand-button {
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
right: 0.75rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 12px;
|
||||
height: 2.5rem;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
background-color: #0b0b0b;
|
||||
border: 1px solid #142216;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.expand-button:hover {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.expand-button:active {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.no-code {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #a1a1aa;
|
||||
font-style: italic;
|
||||
padding: 2rem;
|
||||
background: #0b0b0b;
|
||||
border: 1px solid #142216;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
:deep(.v-code-block) {
|
||||
background: #0b0b0b;
|
||||
border-radius: 15px;
|
||||
|
||||
@@ -1,30 +1,12 @@
|
||||
<template>
|
||||
<Button
|
||||
:style="{
|
||||
fontWeight: 500,
|
||||
borderRadius: '0.75rem',
|
||||
border: '1px solid #142216',
|
||||
padding: '1rem',
|
||||
position: 'fixed',
|
||||
right: '2.3em',
|
||||
zIndex: 98,
|
||||
boxShadow: '10px 0 25px rgba(0, 0, 0, 0.2)',
|
||||
transition: '0.3s ease',
|
||||
opacity: visible ? 1 : 0,
|
||||
bottom: visible ? '2.5em' : '1em',
|
||||
cursor: visible ? 'pointer' : 'default'
|
||||
}"
|
||||
class="back-to-top"
|
||||
@click="visible && scrollToTop()"
|
||||
>
|
||||
<button :class="['back-to-top', { visible }]" @click="visible && scrollToTop()">
|
||||
<i class="pi pi-arrow-up" style="color: #fff; font-size: 1rem"></i>
|
||||
</Button>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import Button from 'primevue/button';
|
||||
|
||||
const toast = useToast();
|
||||
const visible = ref(false);
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
<div class="contribute-buttons">
|
||||
<a :href="bugReportUrl" target="_blank" rel="noreferrer" class="contribute-button">
|
||||
<i class="pi pi-exclamation-triangle"></i>
|
||||
|
||||
<span>Report an issue</span>
|
||||
</a>
|
||||
|
||||
@@ -13,7 +12,6 @@
|
||||
|
||||
<a :href="featureRequestUrl" target="_blank" rel="noreferrer" class="contribute-button">
|
||||
<i class="pi pi-lightbulb"></i>
|
||||
|
||||
<span>Request a feature</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="demo-title">Customize</h2>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="preview-color">
|
||||
<span class="color-label">{{ title }}</span>
|
||||
|
||||
<input :value="modelValue" @input="handleColorChange" type="color" :disabled="disabled" class="color-input" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -66,28 +66,6 @@ import ContributionSection from './ContributionSection.vue';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tabbed-layout {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #142216;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
height: 36px;
|
||||
color: #ffffff;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-header:hover {
|
||||
background: #142216;
|
||||
}
|
||||
|
||||
:deep(.p-tablist),
|
||||
:deep(.p-tablist-tab-list) {
|
||||
display: flex;
|
||||
|
||||
@@ -116,7 +116,6 @@
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
@@ -133,7 +132,6 @@
|
||||
border-radius: 50px;
|
||||
width: 100px;
|
||||
font-weight: 600;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -146,15 +144,24 @@
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-button:hover span img {
|
||||
transform: scale(1.2);
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.landing-nav-items {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-cta-group {
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.header {
|
||||
padding: 0 2em;
|
||||
@@ -295,16 +302,3 @@
|
||||
margin-right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.landing-nav-items {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-cta-group {
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,30 +67,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.features-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.features-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.features-header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.features-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.features-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bento-grid {
|
||||
max-width: 1200px;
|
||||
display: grid;
|
||||
@@ -99,73 +75,6 @@
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
.bento-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.25em;
|
||||
}
|
||||
|
||||
.card1 {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.card2 {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.card4 {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 50rem) {
|
||||
.bento-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(3, auto);
|
||||
gap: 1.5em;
|
||||
}
|
||||
|
||||
.card1 {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.card2 {
|
||||
grid-column: 3 / 5;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
.card4 {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 49.99rem) {
|
||||
.bento-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.25em;
|
||||
}
|
||||
|
||||
.card1 {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.card2 {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
.card4 {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
user-select: none;
|
||||
background: #0b0b0b;
|
||||
@@ -324,136 +233,24 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.components-gif-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover .components-gif-wrapper {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.components-gif {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
opacity: 0.2;
|
||||
mix-blend-mode: lighten;
|
||||
display: block;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.components-gif-wrapper::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 20%;
|
||||
background: linear-gradient(to top, #0b0b0b 0%, transparent 100%);
|
||||
border-radius: 0 0 8px 8px;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.components-gif-wrapper::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 20%;
|
||||
background: linear-gradient(to bottom, #0b0b0b 0%, transparent 100%);
|
||||
border-radius: 8px 8px 0 0;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.messages-gif-wrapper {
|
||||
position: absolute;
|
||||
mix-blend-mode: lighten;
|
||||
top: 0.5rem;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
width: 50%;
|
||||
border-radius: 8px;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover .messages-gif-wrapper {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.messages-gif {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 0;
|
||||
opacity: 0.3;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.messages-gif-wrapper::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 20%;
|
||||
background: linear-gradient(to top, #0b0b0b 0%, transparent 100%);
|
||||
border-radius: 0 0 8px 8px;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.messages-gif-wrapper::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 20%;
|
||||
background: linear-gradient(to bottom, #0b0b0b 0%, transparent 100%);
|
||||
border-radius: 8px 8px 0 0;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.components-gif-wrapper,
|
||||
.messages-gif-wrapper,
|
||||
.switch-gif-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 1rem;
|
||||
width: 40%;
|
||||
mix-blend-mode: lighten;
|
||||
border-radius: 8px;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover .components-gif-wrapper,
|
||||
.feature-card:hover .messages-gif-wrapper,
|
||||
.feature-card:hover .switch-gif-wrapper {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.switch-gif {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 0;
|
||||
opacity: 0.3;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.components-gif-wrapper::after,
|
||||
.messages-gif-wrapper::after,
|
||||
.switch-gif-wrapper::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -467,6 +264,8 @@
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.components-gif-wrapper::before,
|
||||
.messages-gif-wrapper::before,
|
||||
.switch-gif-wrapper::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -480,43 +279,50 @@
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
.features-section {
|
||||
padding: 4rem 1rem 2rem;
|
||||
padding-bottom: 0;
|
||||
margin-top: 4em;
|
||||
}
|
||||
.components-gif-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bento-grid {
|
||||
gap: 1rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
.messages-gif-wrapper {
|
||||
mix-blend-mode: lighten;
|
||||
top: 0.5rem;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
width: 50%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
min-height: 160px;
|
||||
padding: 1.25rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.switch-gif-wrapper {
|
||||
top: 0;
|
||||
right: 1rem;
|
||||
width: 40%;
|
||||
mix-blend-mode: lighten;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.components-gif,
|
||||
.messages-gif,
|
||||
.switch-gif {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
opacity: 0.2;
|
||||
mix-blend-mode: lighten;
|
||||
display: block;
|
||||
filter: grayscale(100%);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.feature-card h2 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.messages-gif,
|
||||
.switch-gif {
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@media (max-width: 49.99rem) {
|
||||
.components-gif-wrapper,
|
||||
.messages-gif-wrapper,
|
||||
.switch-gif-wrapper {
|
||||
@@ -557,11 +363,87 @@
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
}
|
||||
|
||||
.components-gif-wrapper,
|
||||
.messages-gif-wrapper,
|
||||
.switch-gif-wrapper {
|
||||
display: none !important;
|
||||
@media (max-width: 479px) {
|
||||
.features-section {
|
||||
padding: 4rem 1rem 2rem;
|
||||
padding-bottom: 0;
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
.features-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.features-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.bento-grid {
|
||||
gap: 1rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
min-height: 160px;
|
||||
padding: 1.25rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.feature-card h2 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
.bento-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.25em;
|
||||
}
|
||||
|
||||
.card1 {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.card2 {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.card4 {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.features-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.features-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.features-header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -588,11 +470,27 @@
|
||||
.feature-card p {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
}
|
||||
|
||||
.components-gif-wrapper,
|
||||
.messages-gif-wrapper,
|
||||
.switch-gif-wrapper {
|
||||
display: none !important;
|
||||
@media (min-width: 768px) and (max-width: 49.99rem) {
|
||||
.bento-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.25em;
|
||||
}
|
||||
|
||||
.card1 {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.card2 {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
.card4 {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -603,6 +501,27 @@
|
||||
margin-top: 8em;
|
||||
}
|
||||
|
||||
.bento-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(3, auto);
|
||||
gap: 1.5em;
|
||||
}
|
||||
|
||||
.card1 {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.card2 {
|
||||
grid-column: 3 / 5;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
.card4 {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
min-height: 220px;
|
||||
padding: 2rem;
|
||||
@@ -620,12 +539,6 @@
|
||||
.feature-card p {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.components-gif-wrapper,
|
||||
.messages-gif-wrapper,
|
||||
.switch-gif-wrapper {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
|
||||
@@ -3,52 +3,39 @@
|
||||
<div class="features-container">
|
||||
<div class="features-header">
|
||||
<h3 class="features-title">Zero cost, all the cool.</h3>
|
||||
|
||||
<p class="features-subtitle">Everything you need to add flair to your websites</p>
|
||||
</div>
|
||||
|
||||
<GlobalSpotlight v-if="gridRef" :grid-ref="gridRef" :disable-animations="isMobile" />
|
||||
|
||||
<div class="bento-grid" ref="gridRef">
|
||||
<ParticleCard class="feature-card card1" :disable-animations="isMobile">
|
||||
<div className="messages-gif-wrapper">
|
||||
<img src="/assets/messages.gif" alt="Messages animation" className="messages-gif" />
|
||||
<div class="messages-gif-wrapper">
|
||||
<img src="/assets/messages.gif" alt="Messages animation" class="messages-gif" />
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
<template v-if="isMobile">100</template>
|
||||
|
||||
<CountUp v-else :to="100" />
|
||||
%
|
||||
</h2>
|
||||
|
||||
<h3>Free & Open Source</h3>
|
||||
|
||||
<p>Loved by developers around the world</p>
|
||||
</ParticleCard>
|
||||
|
||||
<ParticleCard class="feature-card card2" :disable-animations="isMobile">
|
||||
<div className="components-gif-wrapper">
|
||||
<img src="/assets/components.gif" alt="Components animation" className="components-gif" />
|
||||
<div class="components-gif-wrapper">
|
||||
<img src="/assets/components.gif" alt="Components animation" class="components-gif" />
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
<template v-if="isMobile">40</template>
|
||||
|
||||
<CountUp v-else :to="40" />
|
||||
+
|
||||
</h2>
|
||||
|
||||
<h3>Curated Components</h3>
|
||||
|
||||
<p>Growing weekly & only getting better</p>
|
||||
</ParticleCard>
|
||||
|
||||
<ParticleCard class="feature-card card4" :disable-animations="isMobile">
|
||||
<h2>Modern</h2>
|
||||
|
||||
<h3>Technologies</h3>
|
||||
|
||||
<p>TypeScript + Tailwind, ready to ship</p>
|
||||
</ParticleCard>
|
||||
</div>
|
||||
@@ -200,102 +187,4 @@ const ParticleCard = defineComponent({
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const GlobalSpotlight = defineComponent({
|
||||
name: 'GlobalSpotlight',
|
||||
props: {
|
||||
gridRef: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
disableAnimations: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const spotlightRef = ref<HTMLDivElement | null>(null);
|
||||
const isInsideSectionRef = ref(false);
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!spotlightRef.value || !props.gridRef.value) return;
|
||||
const section = props.gridRef.value.closest('.features-section');
|
||||
const rect = section?.getBoundingClientRect();
|
||||
const inside =
|
||||
rect && e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
|
||||
|
||||
isInsideSectionRef.value = inside;
|
||||
const cards = props.gridRef.value.querySelectorAll('.feature-card');
|
||||
|
||||
if (!inside) {
|
||||
gsap.to(spotlightRef.value, { opacity: 0, duration: 0.3, ease: 'power2.out' });
|
||||
cards.forEach((card: HTMLElement) => card.style.setProperty('--glow-intensity', '0'));
|
||||
return;
|
||||
}
|
||||
|
||||
let minDist = Infinity;
|
||||
const prox = 100,
|
||||
fade = 150;
|
||||
cards.forEach((card: HTMLElement) => {
|
||||
const r = card.getBoundingClientRect();
|
||||
const cx = r.left + r.width / 2;
|
||||
const cy = r.top + r.height / 2;
|
||||
const d = Math.hypot(e.clientX - cx, e.clientY - cy) - Math.max(r.width, r.height) / 2;
|
||||
const ed = Math.max(0, d);
|
||||
minDist = Math.min(minDist, ed);
|
||||
|
||||
const rx = ((e.clientX - r.left) / r.width) * 100;
|
||||
const ry = ((e.clientY - r.top) / r.height) * 100;
|
||||
let glow = 0;
|
||||
if (ed <= prox) glow = 1;
|
||||
else if (ed <= fade) glow = (fade - ed) / (fade - prox);
|
||||
card.style.setProperty('--glow-x', `${rx}%`);
|
||||
card.style.setProperty('--glow-y', `${ry}%`);
|
||||
card.style.setProperty('--glow-intensity', String(glow));
|
||||
});
|
||||
|
||||
gsap.to(spotlightRef.value, { left: e.clientX, top: e.clientY, duration: 0.1, ease: 'power2.out' });
|
||||
const target = minDist <= prox ? 0.8 : minDist <= fade ? ((fade - minDist) / (fade - prox)) * 0.8 : 0;
|
||||
gsap.to(spotlightRef.value, { opacity: target, duration: target > 0 ? 0.2 : 0.5, ease: 'power2.out' });
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
isInsideSectionRef.value = false;
|
||||
props.gridRef.value
|
||||
?.querySelectorAll('.feature-card')
|
||||
.forEach((card: HTMLElement) => card.style.setProperty('--glow-intensity', '0'));
|
||||
if (spotlightRef.value) {
|
||||
gsap.to(spotlightRef.value, { opacity: 0, duration: 0.3, ease: 'power2.out' });
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (props.disableAnimations || !props.gridRef?.value) return;
|
||||
|
||||
const spotlight = document.createElement('div');
|
||||
spotlight.className = 'global-spotlight';
|
||||
spotlight.style.cssText = `
|
||||
position:fixed;width:800px;height:800px;border-radius:50%;pointer-events:none;
|
||||
background:radial-gradient(circle,rgba(132,0,255,.15) 0%,rgba(132,0,255,.08) 15%,
|
||||
rgba(132,0,255,.04) 25%,rgba(132,0,255,.02) 40%,rgba(132,0,255,.01) 65%,transparent 70%);
|
||||
z-index:200;opacity:0;transform:translate(-50%,-50%);mix-blend-mode:screen;
|
||||
`;
|
||||
document.body.appendChild(spotlight);
|
||||
spotlightRef.value = spotlight;
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseleave', handleMouseLeave);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseleave', handleMouseLeave);
|
||||
if (spotlightRef.value?.parentNode) {
|
||||
spotlightRef.value.parentNode.removeChild(spotlightRef.value);
|
||||
}
|
||||
});
|
||||
|
||||
return () => null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<a href="https://davidhaz.com/" target="_blank" class="footer-creator-link">this guy</a>
|
||||
</p>
|
||||
|
||||
<p class="footer-copyright">© {{ currentYear }} Vue Bits</p>
|
||||
<p class="footer-copyright">© {{ new Date().getFullYear() }} Vue Bits</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-links">
|
||||
@@ -21,9 +21,7 @@
|
||||
</a>
|
||||
|
||||
<router-link to="/text-animations/split-text" class="footer-link">Docs</router-link>
|
||||
|
||||
<a href="https://www.jsrepo.com/" target="_blank" class="footer-link">CLI</a>
|
||||
|
||||
<a href="https://reactbits.dev/" target="_blank" class="footer-link">React Bits</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -32,10 +30,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import vueBitsLogo from '../../../assets/logos/vue-bits-logo.svg';
|
||||
import FadeContent from '@/content/Animations/FadeContent/FadeContent.vue';
|
||||
import './Footer.css';
|
||||
|
||||
const currentYear = computed(() => new Date().getFullYear());
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
<div class="start-building-container">
|
||||
<div class="start-building-card">
|
||||
<h2 class="start-building-title">Start exploring Vue Bits</h2>
|
||||
|
||||
<p class="start-building-subtitle">Animations, components, backgrounds - it's all here</p>
|
||||
|
||||
<router-link to="/text-animations/split-text" class="start-building-button">Browse Components</router-link>
|
||||
|
||||
@@ -12,31 +12,14 @@
|
||||
|
||||
<Toast
|
||||
position="bottom-right"
|
||||
:closeButtonProps="{ style: { right: '0', margin: '0', outline: 'none', border: 'none' } }"
|
||||
:pt="{
|
||||
message: {
|
||||
style: {
|
||||
borderRadius: '10px',
|
||||
border: '1px solid #142216',
|
||||
backgroundColor: '#0b0b0b'
|
||||
}
|
||||
},
|
||||
messageContent: {
|
||||
style: {
|
||||
alignItems: 'center'
|
||||
}
|
||||
},
|
||||
messageIcon: {
|
||||
style: {
|
||||
display: 'none'
|
||||
}
|
||||
}
|
||||
}"
|
||||
:closeButtonProps="customToastStyles.customToastCloseButton"
|
||||
:pt="customToastStyles"
|
||||
/>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { customToastStyles } from '@/utils/utils';
|
||||
import Header from '../navs/Header.vue';
|
||||
import Sidebar from '../navs/Sidebar.vue';
|
||||
</script>
|
||||
|
||||
@@ -35,8 +35,6 @@
|
||||
</div>
|
||||
|
||||
<div class="drawer-body">
|
||||
<!-- Navigation Categories -->
|
||||
|
||||
<div class="drawer-navigation">
|
||||
<div class="categories-container">
|
||||
<Category
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<template>
|
||||
<!-- Mobile Drawer -->
|
||||
|
||||
<div v-if="isDrawerOpen" class="drawer-overlay" @click="closeDrawer">
|
||||
<div class="drawer-content" :class="{ 'drawer-open': isDrawerOpen }" @click.stop>
|
||||
<div class="drawer-header sidebar-logo">
|
||||
@@ -60,8 +58,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Sidebar -->
|
||||
|
||||
<nav
|
||||
ref="sidebarContainerRef"
|
||||
class="sidebar"
|
||||
@@ -69,8 +65,6 @@
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<div ref="sidebarRef" class="sidebar-content">
|
||||
<!-- Active line indicator -->
|
||||
|
||||
<div
|
||||
class="active-line"
|
||||
:style="{
|
||||
@@ -80,8 +74,6 @@
|
||||
}"
|
||||
></div>
|
||||
|
||||
<!-- Hover line indicator -->
|
||||
|
||||
<div
|
||||
class="hover-line"
|
||||
:style="{
|
||||
|
||||
@@ -25,8 +25,28 @@ body {
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
background: #0b0b0b !important;
|
||||
background: #0b0b0b;
|
||||
aspect-ratio: 1;
|
||||
font-weight: 500;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid #142216;
|
||||
width: 50px;
|
||||
position: fixed;
|
||||
right: 2.3em;
|
||||
z-index: 98;
|
||||
box-shadow: 10px 0 25px rgba(0, 0, 0, 0.2);
|
||||
transition:
|
||||
opacity 0.3s ease,
|
||||
bottom 0.3s ease;
|
||||
opacity: 0;
|
||||
bottom: 1em;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.back-to-top.visible {
|
||||
opacity: 1;
|
||||
bottom: 2.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
@@ -212,6 +212,106 @@ div:has(> .props-table) {
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.tabbed-layout {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #142216;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
height: 36px;
|
||||
color: #ffffff;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-header:hover {
|
||||
background: #142216;
|
||||
}
|
||||
|
||||
.code-example {
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.code-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.code-container {
|
||||
position: relative;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.code-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid #142216;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.code-wrapper.collapsed {
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.fade-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60%;
|
||||
background: linear-gradient(to bottom, transparent, #0b0b0b);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.expand-button {
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
right: 0.75rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 12px;
|
||||
height: 2.5rem;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
background-color: #0b0b0b;
|
||||
border: 1px solid #142216;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.expand-button:hover {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.expand-button:active {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.no-code {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #a1a1aa;
|
||||
font-style: italic;
|
||||
padding: 2rem;
|
||||
background: #0b0b0b;
|
||||
border: 1px solid #142216;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-weight: 900;
|
||||
font-size: 1.6rem;
|
||||
|
||||
16
src/main.ts
16
src/main.ts
@@ -8,21 +8,17 @@ import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
|
||||
import PrimeVue from 'primevue/config';
|
||||
import Aura from '@primeuix/themes/aura';
|
||||
import Button from 'primevue/button';
|
||||
import Toast from 'primevue/toast';
|
||||
import Select from 'primevue/select';
|
||||
import ToastService from 'primevue/toastservice';
|
||||
import Aura from '@primeuix/themes/aura';
|
||||
import PrimeVue from 'primevue/config';
|
||||
import Button from 'primevue/button';
|
||||
import Select from 'primevue/select';
|
||||
import Toast from 'primevue/toast';
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(router);
|
||||
app.use(PrimeVue, {
|
||||
theme: {
|
||||
preset: Aura
|
||||
}
|
||||
});
|
||||
app.use(PrimeVue, { theme: { preset: Aura } });
|
||||
app.use(ToastService);
|
||||
|
||||
app.component('Button', Button);
|
||||
|
||||
@@ -24,7 +24,6 @@ import { useRoute } from 'vue-router';
|
||||
import { componentMap } from '../constants/Components';
|
||||
import { decodeLabel } from '../utils/utils';
|
||||
import BackToTopButton from '@/components/common/BackToTopButton.vue';
|
||||
import '../css/category.css';
|
||||
|
||||
const route = useRoute();
|
||||
const scrollRef = ref<HTMLDivElement | null>(null);
|
||||
@@ -48,9 +47,9 @@ const SubcategoryComponent = computed(() => {
|
||||
|
||||
watch(
|
||||
decodedLabel,
|
||||
newLabel => {
|
||||
if (newLabel) {
|
||||
document.title = `Vue Bits - ${newLabel}`;
|
||||
label => {
|
||||
if (label) {
|
||||
document.title = `Vue Bits - ${label}`;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
|
||||
@@ -10,13 +10,9 @@
|
||||
</div>
|
||||
|
||||
<PlasmaWave :y-offset="-300" :x-offset="100" :rotation-deg="-30" />
|
||||
|
||||
<Hero />
|
||||
|
||||
<FeatureCards />
|
||||
|
||||
<StartBuilding />
|
||||
|
||||
<Footer />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -32,3 +32,27 @@ export const decodeLabel = (label: string): string => {
|
||||
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(' ');
|
||||
};
|
||||
|
||||
/**
|
||||
* Custom styles for PrimeVue Toast component
|
||||
*/
|
||||
export const customToastStyles = {
|
||||
message: {
|
||||
style: {
|
||||
borderRadius: '10px',
|
||||
border: '1px solid #142216',
|
||||
backgroundColor: '#0b0b0b'
|
||||
}
|
||||
},
|
||||
messageContent: {
|
||||
style: {
|
||||
alignItems: 'center'
|
||||
}
|
||||
},
|
||||
messageIcon: {
|
||||
style: {
|
||||
display: 'none'
|
||||
}
|
||||
},
|
||||
customToastCloseButton: { style: { right: '0', margin: '0', outline: 'none', border: 'none' } }
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user