diff --git a/eslint.config.ts b/eslint.config.ts index 140c745..0acea8e 100644 --- a/eslint.config.ts +++ b/eslint.config.ts @@ -2,11 +2,6 @@ import { globalIgnores } from 'eslint/config' import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript' import pluginVue from 'eslint-plugin-vue' -// To allow more languages other than `ts` in `.vue` files, uncomment the following lines: -// import { configureVueProject } from '@vue/eslint-config-typescript' -// configureVueProject({ scriptLangs: ['ts', 'tsx'] }) -// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup - export default defineConfigWithVueTs( { name: 'app/files-to-lint', diff --git a/index.html b/index.html index 9e2887c..a66ddfa 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,94 @@ - - + + - - - + + + + + + + - + + + + + + + - Vue Bits + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Vue Bits - Animated UI Components For Vue diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 0000000..93f7955 Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 0000000..de29b6c Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..44bdbb1 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..1e1dff3 Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..77455eb Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..91deef0 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/og-pic.png b/public/og-pic.png new file mode 100644 index 0000000..4dc2511 Binary files /dev/null and b/public/og-pic.png differ diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 0000000..45dc8a2 --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/scripts/generateComponent.js b/scripts/generateComponent.js new file mode 100644 index 0000000..9611f3e --- /dev/null +++ b/scripts/generateComponent.js @@ -0,0 +1,43 @@ +import fs from "fs"; +import path from "path"; +import process from "process"; + +import { fileURLToPath } from "url"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const args = process.argv.slice(2); +if (args.length < 2) { + console.error("Usage: npm run generate:component "); + process.exit(1); +} + +const [componentType, componentName] = args; +const componentNameLower = componentName.charAt(0).toLowerCase() + componentName.slice(1); + +const paths = { + content: path.join(__dirname, "../src/content", componentType, componentName), + demo: path.join(__dirname, "../src/demo", componentType), + constants: path.join(__dirname, "../src/constants/code", componentType), +}; + +Object.values(paths).forEach((dir) => { + if (!fs.existsSync(dir)) { + fs.mkdirSync(dir, { recursive: true }); + } +}); + +const files = [ + path.join(paths.content, `${componentName}.vue`), + path.join(paths.demo, `${componentName}Demo.jsx`), + path.join(paths.constants, `${componentNameLower}Code.js`), +]; + +files.forEach((file) => { + if (!fs.existsSync(file)) { + fs.writeFileSync(file, ""); + } +}); + +console.log(`Component "${componentName}" structure created successfully under "${componentType}".`); diff --git a/src/components/landing/PlasmaWave/PlasmaWave.vue b/src/components/landing/PlasmaWave/PlasmaWave.vue index 1b88875..7310aa9 100644 --- a/src/components/landing/PlasmaWave/PlasmaWave.vue +++ b/src/components/landing/PlasmaWave/PlasmaWave.vue @@ -117,17 +117,13 @@ void mainImage(out vec4 C, in vec2 U) { vec3 c = max(cos(d * pi2) - s * sqrt(d) - k, 0.0); - // Vue.js colors: #42B883 (green) and #35495e (dark gray) vec3 vueGreen = vec3(0.259, 0.722, 0.514); // #42B883 vec3 vueDark = vec3(0.208, 0.286, 0.369); // #35495e - // Use different colors for different wave components vec3 finalColor = vec3(0.0); if (k.x < k.y) { - // First wave component - Vue green finalColor = vueGreen * c.x; } else { - // Second wave component - Vue dark gray finalColor = vueDark * c.y; } diff --git a/src/components/navs/Header.vue b/src/components/navs/Header.vue index 8509155..91952b9 100644 --- a/src/components/navs/Header.vue +++ b/src/components/navs/Header.vue @@ -94,7 +94,6 @@ const stars = useStars() const route = useRoute() const router = useRouter() -// Helper function const slug = (str: string) => str.replace(/\s+/g, "-").toLowerCase() const toggleDrawer = () => { @@ -134,7 +133,6 @@ const handleKeyDown = (e: KeyboardEvent) => { } } -// Category Component const Category = defineComponent({ name: 'Category', props: { diff --git a/src/components/navs/Sidebar.vue b/src/components/navs/Sidebar.vue index 6b7abfe..90c039c 100644 --- a/src/components/navs/Sidebar.vue +++ b/src/components/navs/Sidebar.vue @@ -82,7 +82,6 @@ import '../../css/sidebar.css' const HOVER_TIMEOUT_DELAY = 150 -// Reactive data const isDrawerOpen = ref(false) const linePosition = ref(null) const isLineVisible = ref(false) @@ -95,14 +94,12 @@ const isTransitioning = ref(false) const sidebarRef = ref() const sidebarContainerRef = ref() -// Timeouts let hoverTimeoutRef: number | null = null let hoverDelayTimeoutRef: number | null = null const route = useRoute() const router = useRouter() -// Helper functions const scrollToTop = () => window.scrollTo(0, 0) const slug = (str: string) => str.replace(/\s+/g, "-").toLowerCase() @@ -115,7 +112,6 @@ const findActiveElement = () => { return activePath === expectedPath }) if (activeItem) { - // Try to find the element within the sidebar const selector = `.sidebar a[href="${activePath}"]` const element = document.querySelector(selector) as HTMLElement return element @@ -145,7 +141,6 @@ const handleTransitionNavigation = async (path: string) => { pendingActivePath.value = path - // Simple navigation without transition for now // TODO: Implement transition when available await router.push(path) scrollToTop() @@ -158,7 +153,6 @@ const handleMobileTransitionNavigation = async (path: string) => { closeDrawer() pendingActivePath.value = path - // Simple navigation without transition for now // TODO: Implement transition when available await router.push(path) scrollToTop() @@ -201,7 +195,6 @@ const handleScroll = () => { const updateActiveLine = async () => { await nextTick() - // Wait a bit more to ensure DOM is fully updated setTimeout(() => { const activeEl = findActiveElement() @@ -220,7 +213,6 @@ const updateActiveLine = async () => { }, 100) } -// Category Component const Category = defineComponent({ name: 'Category', props: { @@ -311,11 +303,9 @@ const Category = defineComponent({ } }) -// Watchers watch(() => route.path, updateActiveLine) watch(pendingActivePath, updateActiveLine) -// Lifecycle onMounted(() => { updateActiveLine() if (sidebarContainerRef.value) { diff --git a/src/composables/useStars.ts b/src/composables/useStars.ts index c7500f2..beb8d9d 100644 --- a/src/composables/useStars.ts +++ b/src/composables/useStars.ts @@ -32,7 +32,6 @@ export function useStars() { } catch (error) { console.error('Error fetching stars:', error) - // Fall back to cached data if available const cachedData = localStorage.getItem(CACHE_KEY) if (cachedData) { const { count } = JSON.parse(cachedData) diff --git a/src/content/TextAnimations/SplitText/SplitText.vue b/src/content/TextAnimations/SplitText/SplitText.vue index be2bde2..f96457a 100644 --- a/src/content/TextAnimations/SplitText/SplitText.vue +++ b/src/content/TextAnimations/SplitText/SplitText.vue @@ -60,7 +60,6 @@ const splitterRef = ref(null) const initializeAnimation = async () => { if (typeof window === 'undefined' || !textRef.value || !props.text) return - // Wait for DOM to be fully updated await nextTick() const el = textRef.value @@ -174,7 +173,6 @@ onUnmounted(() => { cleanup() }) -// Watch for prop changes and reinitialize animation watch( [ () => props.text, diff --git a/src/main.ts b/src/main.ts index f43b296..1f7802d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -8,7 +8,6 @@ import { createApp } from 'vue' import App from './App.vue' import router from './router' -// PrimeVue imports import PrimeVue from 'primevue/config' import Aura from '@primeuix/themes/aura' import Button from 'primevue/button' @@ -26,7 +25,6 @@ app.use(PrimeVue, { }) app.use(ToastService) -// Global components app.component('Button', Button) app.component('Toast', Toast) app.component('Select', Select) diff --git a/src/pages/CategoryPage.vue b/src/pages/CategoryPage.vue index b762d8f..e481db5 100644 --- a/src/pages/CategoryPage.vue +++ b/src/pages/CategoryPage.vue @@ -8,7 +8,7 @@ @@ -17,54 +17,50 @@ - \ No newline at end of file