reduce dependencies, and stop blocking

components/Nav.vue

@@ -1,21 +1,15 @@
 <script setup lang="ts">
-let colorMode = useColorMode();
-
-const changeTheme = () => {
-    if (colorMode.preference === "dark") {
-        // from dark => light
-        colorMode.preference = "light"
-    } else if (colorMode.preference === "light") {
-        // from light => system
-        colorMode.preference = "system";
-    } else {
-        // from system => dark
-        colorMode.preference = "dark";
+const toggleTheme = () => {
+    if (import.meta.client) {
+        if (document.documentElement.classList.contains('dark')) {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+        } else {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+        }
     }
-
-    return;
-}
-
+};
 </script>
 
 <template>
@@ -28,12 +22,12 @@ const changeTheme = () => {
                         <a href="#main">Skip to content</a>
                     </li>
                     <li>
-                        <NuxtLink to="/">
+                        <NuxtLink :prefetch="true" to="/">
                             Home
                         </NuxtLink>
                     </li>
                     <li>
-                        <NuxtLink to="/blog">
+                        <NuxtLink :prefetch="true" to="/blog">
                             Blog
                         </NuxtLink>
                     </li>
@@ -57,11 +51,10 @@ const changeTheme = () => {
                         </a>
                     </li>
                     <li>
-                        <button @click="changeTheme">
-                            <span class="min-w-[22px]" v-if="$colorMode.unknown != true">
-                                <Icon v-if="$colorMode.preference === 'dark'" name="tabler:moon" size="22" />
-                                <Icon v-else-if="$colorMode.preference === 'light'" name="tabler:sun-high" size="22" />
-                                <Icon v-else name="ph:monitor-bold" size="22" />
+                        <button @click="toggleTheme">
+                            <span class="min-w-[22px]">
+                                <Icon class="theme-dark" name="tabler:moon" size="22" />
+                                <Icon class="theme-light" name="tabler:sun-high" size="22" />
                             </span>
                         </button>
                     </li>
@@ -76,4 +69,20 @@ const changeTheme = () => {
 button {
     padding: 0.25rem
 }
+
+.theme-dark {
+    display: none !important;
+}
+
+.theme-light {
+    display: inline !important;
+}
+
+html.dark .theme-light {
+    display: none !important;
+}
+
+html.dark .theme-dark {
+    display: inline !important;
+}
 </style>

components/TableOfContents.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { watchDebounced } from '@vueuse/core'
 import type { Ref } from 'vue';
 
 const props = withDefaults(defineProps<{ doc: any, activeTocId: string | null }>(), {})
@@ -23,22 +22,24 @@ const onClick = (id: string) => {
 const tocHeader = ref();
 const tocIsClosed = ref(false);
 
-watchDebounced(
+watch(
     () => props.activeTocId,
     (newActiveTocId) => {
-        const h2Link = tocLinksH2.value.find((el: HTMLElement) => el.id === `toc-${newActiveTocId}`)
-        const h3Link = tocLinksH3.value.find((el: HTMLElement) => el.id === `toc-${newActiveTocId}`)
+        if (import.meta.client) {
+            const h2Link = tocLinksH2.value.find((el: HTMLElement) => el.id === `toc-${newActiveTocId}`)
+            const h3Link = tocLinksH3.value.find((el: HTMLElement) => el.id === `toc-${newActiveTocId}`)
 
-        // TODO: dont hard code these offsets
-        if (h2Link) {
-            sliderHeight.value = h2Link.offsetHeight
-            sliderTop.value = h2Link.offsetTop - 24
-        } else if (h3Link) {
-            sliderHeight.value = h3Link.offsetHeight
-            sliderTop.value = h3Link.offsetTop - 24
+            // TODO: dont hard code these offsets
+            if (h2Link) {
+                sliderHeight.value = h2Link.offsetHeight
+                sliderTop.value = h2Link.offsetTop - 24
+            } else if (h3Link) {
+                sliderHeight.value = h3Link.offsetHeight
+                sliderTop.value = h3Link.offsetTop - 24
+            }
         }
     },
-    { debounce: 0, immediate: true }
+    { immediate: true }
 )
 </script>
 

components/blog/BlogCard.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+const props = defineProps({
+    article: { type: Object, required: true },
+});
+</script>
+
+<template>
+    <div
+        class="flex flex-col dark:bg-dark-slate bg-touched-lavender max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-soft-lilac dark:border-midnight-slate/30 shadow-md">
+        <NuxtImg v-if="article.image" :src="article.image.src" width="464" densities="1x 2x" quality="80"
+            class="w-full rounded-tl-lg rounded-tr-lg aspect-video" loading="lazy" />
+        <div
+            class="flex-shrink p-3 overflow-hidden pt-2 text-fade dark:before:bg-[linear-gradient(180deg,transparent_0,hsla(0,0%,5%,0)_36%,#0C0B0C_95%,#0C0B0C)] before:bg-[linear-gradient(180deg,transparent_0,hsla(0,0%,5%,0)_36%,#F5EDFE_95%,#F5EDFE)] mb-1 pb-1 relative">
+            <h3>
+                <NuxtLink tabindex="0" class="text-lg" :prefetch="true" :to="article._path">
+                    {{ article.title }}
+                </NuxtLink>
+            </h3>
+            <p class="dark:text-zinc-400 text-zinc-600">
+                {{ article.description }}
+            </p>
+            <p class="text-zinc-500">
+                {{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }} |
+                {{ article.readTime }} minute read
+            </p>
+            <div
+                class="flex flex-wrap w-full gap-2 justify-start my-1 dark:text-zinc-200 text-zinc-800 max-h-[13.75rem]">
+                <IconTag v-for="tag in article.tags" :name="tag" :iconName='tag' isTag="true" />
+            </div>
+            <div class="max-h-full leading-relaxed">
+                <ContentRenderer :value="article">
+                    <ContentRendererMarkdown :value="article" :excerpt="true" />
+                </ContentRenderer>
+            </div>
+        </div>
+    </div>
+</template>

components/blog/BlogSkeletonCard.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+const titleWidth = Math.max(Math.floor(Math.random() * 300), 175); 
+</script>
+
+<template>
+    <div
+        class="flex flex-col dark:bg-dark-slate bg-touched-lavender max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-soft-lilac dark:border-midnight-slate/30 shadow-md">
+        <div class="w-full rounded-tl-lg rounded-tr-lg aspect-video dark:bg-zinc-400 bg-zinc-600 animate-pulse">
+        </div>
+        <div
+            class="flex-shrink p-3 overflow-hidden pt-2 text-fade dark:before:bg-[linear-gradient(180deg,transparent_0,hsla(0,0%,5%,0)_36%,#0C0B0C_95%,#0C0B0C)] before:bg-[linear-gradient(180deg,transparent_0,hsla(0,0%,5%,0)_36%,#F5EDFE_95%,#F5EDFE)] mb-1 pb-1 relative">
+            <div class="h-5 mb-1 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse"
+                :style="{ width: `${titleWidth}px` }"></div>
+            <div class="h-3 mb-1 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse w-36"></div>
+            <div class="h-3 mb-1 rounded-lg bg-zinc-500 animate-pulse w-44"></div>
+            <div
+                class="flex flex-wrap w-full gap-2 justify-start my-1 dark:text-zinc-200 text-zinc-800 max-h-[13.75rem]">
+                <!-- <IconTag v-for="tag in article.tags" :name="tag" :iconName='tag' isTag="true" /> -->
+                <div v-for="i in Math.ceil(Math.random() * 4)"
+                    class="font-inter md:text-lg w-fit max-h-9 min-w-fit dark:bg-obsidian-night bg-[hsl(270,68%,95.47%)] border border-soft-lilac dark:border-midnight-slate/30 py-1 px-2 rounded shadow flex items-center">
+                    <div class="mb-1 rounded bg-zinc-500 animate-pulse w-[20px] h-[20px] mr-2"></div>
+                    <div class="h-3 mb-1 rounded-lg bg-zinc-500 animate-pulse" :style="{ width: `${(i * 10) + 67}px` }">
+                    </div>
+                </div>
+            </div>
+            <div class="max-h-full leading-relaxed">
+                <div v-for="i in 100" class="h-3 my-1 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse"
+                    :style="{ width: `${80 + Math.ceil(Math.random() * 20)}%` }" :class="{
+                        'mb-4':
+                            Math.random() > 0.8
+                    }"></div>
+            </div>
+        </div>
+    </div>
+</template>

components/blog/index.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { withoutTrailingSlash } from 'ufo';
+import MiniBlogCard from './MiniBlogCard.vue';
+
+let copied = ref(false);
+const copy = (text: string) => {
+    if (import.meta.client) {
+        navigator.clipboard.writeText(text)
+        copied.value = true;
+        setTimeout(() => {
+            copied.value = false;
+        }, 2000);
+    }
+};
+
+const activeTocId: Ref<string | null> = ref(null)
+const nuxtContent = ref(null)
+
+const updateActiveHeading = () => {
+    const headings = document.querySelectorAll('#main h2[id], #main h3[id]')
+    const windowHeight = window.innerHeight
+    const windowMidpoint = windowHeight / 2
+
+    headings.forEach((heading) => {
+        const headingRect = heading.getBoundingClientRect()
+        const headingBottom = headingRect.bottom
+
+        if (headingBottom <= windowMidpoint) {
+            activeTocId.value = heading.id
+        }
+    })
+}
+
+onMounted(() => {
+    window.addEventListener('scroll', updateActiveHeading)
+})
+
+onUnmounted(() => {
+    window.removeEventListener('scroll', updateActiveHeading)
+})
+
+let year = new Date().getFullYear();
+let route = useRoute();
+
+const { data: doc } = await useAsyncData(`${route.path}-data`, () => queryContent(route.path).findOne())
+if (!doc.value) {
+    throw createError({ statusCode: 404, statusMessage: 'Article not found', fatal: true })
+}
+
+const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryContent('/blog')
+    .where({ _extension: 'md' })
+    .only(['title', 'description', '_path'])
+    .sort({ date: 1 })
+    .where({ _draft: false })
+    .findSurround(withoutTrailingSlash(route.path))
+)
+
+console.log("SURROUND", surround.value)
+
+useSeoMeta({
+    title: doc.value?.title,
+    description: doc.value?.description,
+    ogTitle: doc.value?.title,
+    ogDescription: doc.value?.description,
+    ogImage: doc.value?.image.src,
+    ogUrl: 'https://juls07.dev',
+    twitterTitle: doc.value?.title,
+    twitterDescription: doc.value?.description,
+    twitterImage: doc.value?.image.src,
+    twitterCard: 'summary_large_image',
+})
+
+useHead({
+    htmlAttrs: {
+        lang: 'en'
+    },
+    meta: [
+        {
+            name: "copyright",
+            content: `© ${year} juls07`
+        },
+        {
+            name: "robots",
+            content: "index, follow"
+        },
+        {
+            name: "keywords",
+            content: doc.value?.tags.join(", ")
+        },
+        {
+            name: "author",
+            content: "juls07",
+        }
+    ],
+    link: [
+        {
+            rel: 'icon',
+            type: 'image/png',
+            href: '/favicon.png'
+        }
+    ]
+})
+</script>
+
+<template>
+    <div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-1">
+        <NuxtImg v-if="doc && doc.image" :src="doc.image.src" class="mb-2 rounded-md drop-shadow w-full" quality="80" />
+        <h1 class="text-3xl dark:text-gray-100 md:text-4xl font-semibold mb-2">{{ doc?.title }}</h1>
+        <p class="mb-1 dark:text-zinc-400 text-zinc-600">
+            {{ doc?.description }}
+        </p>
+        <p class="mb-2 text-zinc-500">
+            {{ new Date(doc?.date).toDateString().split(' ').slice(1).join(' ') }} |
+            {{ doc?.readTime }} minute read
+        </p>
+        <div class="flex flex-wrap w-full gap-2 justify-start mb-3">
+            <IconTag v-for="tag in doc?.tags" :name="tag" :iconName='tag' isTag="true" />
+        </div>
+        <hr class="mb-4 border-[#ECE6E7] dark:border-[#232326] border-t" />
+    </div>
+    <div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-3">
+        <main id="main" class="leading-relaxed">
+            <ContentRenderer ref="nuxtContent" class="dark:text-gray-200 text-gray-800" :value="doc" />
+        </main>
+    </div>
+    <nav
+        class="lg:ml-2 mb-3 lg:mb-0 col-start-2 md:col-start-3 lg:block lg:col-start-10 lg:col-span-2 md:col-span-8 col-span-10 lg:sticky lg:top-8 h-fit order-2 lg:order-4">
+        <TableOfContents :doc="doc" :activeTocId="activeTocId" />
+    </nav>
+    <div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-5">
+        <div class="flex justify-between mt-10">
+            <NuxtLink class="flex items-center text-fuschia hover:underline visited:bg-rose-700" to="/blog">
+                ← Back to Blog
+            </NuxtLink>
+            <button class="flex items-center px-2 py-1" @click="copy('https://juls07.dev' + route.path)">
+                <Icon v-if="copied" name="tabler:check" class="mr-1.5" size="20" />
+                <Icon v-else name="tabler:link" class="mr-1.5" size="20" />
+                Copy Link
+            </button>
+        </div>
+        <hr class="my-6 border-[#ECE6E7] dark:border-[#232326] border-t" />
+        <div v-if="surround && surround.length > 0" class="sm:grid gap-8 sm:grid-cols-2">
+            <MiniBlogCard v-if="surround[0]" :to="surround[0]._path" :title="surround[0].title"
+                :description="surround[0].description" />
+            <MiniBlogCard class="col-start-2" v-if="surround[1]" :to="surround[1]._path" :title="surround[1].title"
+                :right-align="true" :description="surround[1].description" />
+        </div>
+    </div>
+</template>

components/content/ProseCode.vue

@@ -29,9 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core';
-const { copy, copied } = useClipboard();
-const props = withDefaults(
+withDefaults(
     defineProps<{
         code?: string;
         language?: string | null;
@@ -42,6 +40,7 @@ const props = withDefaults(
 );
 
 const codeElm = ref();
+let copied = ref(false);
 
 const copyCode = () => {
     if (!codeElm.value) {
@@ -58,7 +57,13 @@ const copyCode = () => {
         }
     }
 
-    copy(str);
+    if (import.meta.client) {
+        navigator.clipboard.writeText(str);
+        copied.value = true;
+        setTimeout(() => {
+            copied.value = false;
+        }, 2000);
+    }
 };
 </script>
 

components/content/ProseH2.vue

@@ -3,7 +3,7 @@
         <h2 :id="id" class="text-2xl">
             <slot />
         </h2>
-        <button @click="copy(location.origin + location.pathname + '#' + id)"
+        <button @click="copy('https://juls07.dev' + route.path + '#' + id)"
             class="dark:text-white ml-2 group-hover:opacity-100 opacity-0 transition-all">
             <div class="h-5" v-if="copied">
                 <Icon size="20" name="tabler:check" />
@@ -16,8 +16,6 @@
 </template>
 
 <script setup lang="ts">
-import { useBrowserLocation, useClipboard } from '@vueuse/core';
-const { copy, copied } = useClipboard();
 withDefaults(
     defineProps<{
         id?: string;
@@ -25,7 +23,18 @@ withDefaults(
     { id: '' }
 );
 
-const location = useBrowserLocation()
+let copied = ref(false);
+const copy = (text: string) => {
+    if (import.meta.client) {
+        navigator.clipboard.writeText(text)
+        copied.value = true;
+        setTimeout(() => {
+            copied.value = false;
+        }, 2000);
+    }
+};
+
+const route = useRoute();
 </script>
 
 <style scoped>

components/content/ProseH3.vue

@@ -3,7 +3,7 @@
         <h3 :id="id" class="text-xl">
             <slot />
         </h3>
-        <button @click="copy(location.origin + location.pathname + '#' + id)"
+        <button @click="copy('https://juls07.dev' + route.path + '#' + id)"
             class="dark:text-white ml-2 group-hover:opacity-100 opacity-0 transition-all">
             <div class="h-5" v-if="copied">
                 <Icon size="20" name="tabler:check" />
@@ -16,8 +16,6 @@
 </template>
 
 <script setup lang="ts">
-import { useBrowserLocation, useClipboard } from '@vueuse/core';
-const { copy, copied } = useClipboard();
 withDefaults(
     defineProps<{
         id?: string;
@@ -25,7 +23,18 @@ withDefaults(
     { id: '' }
 );
 
-const location = useBrowserLocation()
+let copied = ref(false);
+const copy = (text: string) => {
+    if (import.meta.client) {
+        navigator.clipboard.writeText(text)
+        copied.value = true;
+        setTimeout(() => {
+            copied.value = false;
+        }, 2000);
+    }
+};
+
+const route = useRoute();
 </script>
 
 <style scoped>

nuxt.config.ts

@@ -1,10 +1,20 @@
 import { defineNuxtConfig } from 'nuxt/config';
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+    compatibilityDate: '2024-09-25',
+    ssr: true,
+
     app: {
         head: {
             title: 'Juls07',
-
+            script: [
+                {
+                    vmid: 'themeScript',
+                    hid: 'theme-script',
+                    children: `if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {document.documentElement.classList.add('dark')} else {document.documentElement.classList.remove('dark')}`,
+                    type: 'text/javascript',
+                }
+            ],
             meta: [
                 { charset: 'utf-8' },
                 { name: 'viewport', content: 'width=device-width, initial-scale=1' },
@@ -21,10 +31,6 @@ export default defineNuxtConfig({
         },
     },
 
-    colorMode: {
-        classSuffix: ''
-    },
-
     content: {
         highlight: {
             theme: {
@@ -39,24 +45,24 @@ export default defineNuxtConfig({
         '@/assets/css/main.css',
     ],
 
-
     devtools: {
         enabled: true
     },
 
     experimental: {
-        payloadExtraction: true
+        payloadExtraction: false
     },
 
     image: {
         provider: 'ipx'
     },
 
-    modules: ['nuxt-icon', '@nuxt/content', '@nuxtjs/color-mode', '@nuxt/image'],
+    modules: ['nuxt-icon', '@nuxt/content', '@nuxt/image'],
 
     nitro: {
         plugins: ['plugins/read-time.ts'],
         preset: 'static',
+        minify: true,
         prerender: {
             crawlLinks: true,
             routes: ['/sitemap.xml', '/rss.xml']
@@ -77,4 +83,8 @@ export default defineNuxtConfig({
     },
 
     sourcemap: false,
+
+    webpack: {
+        optimizeCSS: true,
+    },
 })

package.json

@@ -1,30 +1,28 @@
 {
-  "name": "nuxt-app",
-  "private": true,
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
-  },
-  "devDependencies": {
-    "@nuxt/devtools": "^1.1.5",
-    "@nuxt/image": "^1.5.0",
-    "@nuxtjs/color-mode": "^3.4.0",
-    "@types/rss": "^0.0.32",
-    "autoprefixer": "^10.4.15",
-    "nuxt": "^3.7.0",
-    "nuxt-icon": "^0.6.10",
-    "postcss": "^8.4.29",
-    "rss": "^1.2.2",
-    "sitemap": "^7.1.1",
-    "tailwindcss": "^3.3.3"
-  },
-  "dependencies": {
-    "@nuxt/content": "^2.12.1",
-    "@vueuse/core": "^10.9.0",
-    "sharp": "^0.33.3",
-    "xml": "^1.0.1"
-  }
-}
+    "name": "nuxt-app",
+    "private": true,
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare"
+    },
+    "devDependencies": {
+        "@nuxt/devtools": "^1.5.1",
+        "@nuxt/image": "^1.8.0",
+        "@types/rss": "^0.0.32",
+        "autoprefixer": "^10.4.20",
+        "nuxt": "^3.13.2",
+        "nuxt-icon": "^0.6.10",
+        "postcss": "^8.4.47",
+        "rss": "^1.2.2",
+        "sitemap": "^7.1.2",
+        "tailwindcss": "^3.4.13"
+    },
+    "dependencies": {
+        "@nuxt/content": "^2.13.2",
+        "sharp": "^0.33.5",
+        "xml": "^1.0.1"
+    }
+}

pages/blog/[...slug].vue

@@ -1,144 +1,47 @@
-<script setup lang="ts">
-import { withoutTrailingSlash } from 'ufo'
-import { useBrowserLocation, useClipboard } from '@vueuse/core';
-const { copy, copied } = useClipboard();
-const location = useBrowserLocation()
-
-let year = new Date().getFullYear();
-
-let route = useRoute();
-const { data: doc } = await useAsyncData(`${route.path}-data`, () => queryContent(route.path).findOne())
-if (!doc.value) {
-    throw createError({ statusCode: 404, statusMessage: 'Article not found', fatal: true })
-}
-
-const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryContent('/blog')
-    .where({ _extension: 'md' })
-    .only(['title', 'description', '_path'])
-    .sort({ date: 1 })
-    .where({ _draft: false })
-    .findSurround(withoutTrailingSlash(route.path))
-)
-
-const activeTocId: Ref<string | null> = ref(null)
-const nuxtContent = ref(null)
-
-const updateActiveHeading = () => {
-    const headings = document.querySelectorAll('#main h2[id], #main h3[id]')
-    const windowHeight = window.innerHeight
-    const windowMidpoint = windowHeight / 2
-
-    headings.forEach((heading) => {
-        const headingRect = heading.getBoundingClientRect()
-        const headingBottom = headingRect.bottom
-
-        if (headingBottom <= windowMidpoint) {
-            activeTocId.value = heading.id
-        }
-    })
-}
-
-onMounted(() => {
-    window.addEventListener('scroll', updateActiveHeading)
-})
-
-onUnmounted(() => {
-    window.removeEventListener('scroll', updateActiveHeading)
-})
-
-useSeoMeta({
-    title: doc.value?.title,
-    description: doc.value?.description,
-    ogTitle: doc.value?.title,
-    ogDescription: doc.value?.description,
-    ogImage: doc.value?.image.src,
-    ogUrl: 'https://juls07.dev',
-    twitterTitle: doc.value?.title,
-    twitterDescription: doc.value?.description,
-    twitterImage: doc.value?.image.src,
-    twitterCard: 'summary_large_image',
-})
-
-useHead({
-    htmlAttrs: {
-        lang: 'en'
-    },
-    meta: [
-        {
-            name: "copyright",
-            content: `© ${year} juls07`
-        },
-        {
-            name: "robots",
-            content: "index, follow"
-        },
-        {
-            name: "keywords",
-            content: doc.value?.tags.join(", ")
-        },
-        {
-            name: "author",
-            content: "juls07",
-        }
-    ],
-    link: [
-        {
-            rel: 'icon',
-            type: 'image/png',
-            href: '/favicon.png'
-        }
-    ]
-})
-</script>
-
 <template>
     <div class="min-h-screen">
         <Nav />
         <div class="grid grid-cols-12 gap-x-5 justify-center pt-6 mb-4 relative">
-            <div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-1">
-                <NuxtImg v-if="doc.image" :src="doc.image.src" class="mb-2 rounded-md drop-shadow w-full"
-                    quality="80" />
-                <h1 class="text-3xl dark:text-gray-100 md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
-                <p class="mb-1 dark:text-zinc-400 text-zinc-600">
-                    {{ doc.description }}
-                </p>
-                <p class="mb-2 text-zinc-500">
-                    {{ new Date(doc.date).toDateString().split(' ').slice(1).join(' ') }} |
-                    {{ doc.readTime }} minute read
-                </p>
-                <div class="flex flex-wrap w-full gap-2 justify-start mb-3">
-                    <IconTag v-for="tag in doc.tags" :name="tag" :iconName='tag' isTag="true" />
-                </div>
-                <hr class="mb-4 border-[#ECE6E7] dark:border-[#232326] border-t" />
-            </div>
-            <div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-3">
-                <main id="main" class="leading-relaxed">
-                    <ContentRenderer ref="nuxtContent" class="dark:text-gray-200 text-gray-800" :value="doc" />
-                </main>
-            </div>
-            <nav
-                class="lg:ml-2 mb-3 lg:mb-0 col-start-2 md:col-start-3 lg:block lg:col-start-10 lg:col-span-2 md:col-span-8 col-span-10 lg:sticky lg:top-8 h-fit order-2 lg:order-4">
-                <TableOfContents :doc="doc" :activeTocId="activeTocId" />
-            </nav>
-            <div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-5">
-                <div class="flex justify-between mt-10">
-                    <NuxtLink class="flex items-center text-fuschia hover:underline visited:bg-rose-700" to="/blog">
-                        ← Back to Blog
-                    </NuxtLink>
-                    <button class="flex items-center px-2 py-1" @click="copy(location.origin + location.pathname)">
-                        <Icon v-if="copied" name="tabler:check" class="mr-1.5" size="20" />
-                        <Icon v-else name="tabler:link" class="mr-1.5" size="20" />
-                        Copy Link
-                    </button>
-                </div>
-                <hr class="my-6 border-[#ECE6E7] dark:border-[#232326] border-t" />
-                <div v-if="surround" class="sm:grid gap-8 sm:grid-cols-2">
-                    <MiniBlogCard v-if="surround[0]" :to="surround[0]._path" :title="surround[0].title"
-                        :description="surround[0].description" />
-                    <MiniBlogCard class="col-start-2" v-if="surround[1]" :to="surround[1]._path"
-                        :title="surround[1].title" :right-align="true" :description="surround[1].description" />
-                </div>
-            </div>
+            <Suspense>
+                <Blog />
+                <template #fallback>
+                    <div
+                        class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-1">
+                        <div
+                            class="mb-2 rounded-md drop-shadow w-full dark:bg-zinc-400 bg-zinc-600 animate-pulse aspect-video">
+                        </div>
+                        <div class="h-9 mb-2 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse"
+                            :style="{ width: `${Math.max(Math.ceil(Math.random() * 100), 55)}%` }"></div>
+                        <div class="h-4 mb-2 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse"
+                            :style="{ width: `${Math.max(Math.ceil(Math.random() * 65), 15)}%` }"></div>
+                        <div class="h-3 mb-2 rounded-lg bg-zinc-500 animate-pulse"
+                            :style="{ width: `${Math.max(Math.ceil(Math.random() * 50), 10)}%` }"></div>
+                        <div class="flex flex-wrap w-full gap-2 justify-start mb-3">
+                            <div v-for="i in Math.ceil(Math.random() * 4)"
+                                class="font-inter md:text-lg w-fit max-h-9 min-w-fit dark:bg-obsidian-night bg-[hsl(270,68%,95.47%)] border border-soft-lilac dark:border-midnight-slate/30 py-1 px-2 rounded shadow flex items-center">
+                                <div class="mb-1 rounded bg-zinc-500 animate-pulse w-[20px] h-[20px] mr-2"></div>
+                                <div class="h-3 mb-1 rounded-lg bg-zinc-500 animate-pulse"
+                                    :style="{ width: `${(i * 10) + 67}px` }">
+                                </div>
+                            </div>
+                        </div>
+                        <hr class="mb-4 border-[#ECE6E7] dark:border-[#232326] border-t" />
+                        <div
+                            class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-3">
+                            <main id="main" class="leading-relaxed">
+                                <div class="max-h-full leading-relaxed">
+                                    <div v-for="i in 100"
+                                        class="h-3 my-1 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse"
+                                        :style="{ width: `${80 + Math.ceil(Math.random() * 20)}%` }" :class="{
+                                            'mb-4':
+                                                Math.random() > 0.8
+                                        }"></div>
+                                </div>
+                            </main>
+                        </div>
+                    </div>
+                </template>
+            </Suspense>
         </div>
         <footer class="grid grid-cols-12 gap-5 justify-center">
             <div

pages/blog/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import BlogSkeletonCard from '~/components/blog/BlogSkeletonCard.vue';
+
 useHead({
     title: 'Juls07',
 })
@@ -9,45 +11,23 @@ useHead({
         <Nav />
         <main>
             <div id="main" class="gap-4 justify-evenly py-2 grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
-                <ContentQuery path="blog"
-                    :only="['image', '_path', 'title', 'description', 'date', 'tags', 'excerpt', 'readTime']" :sort="{
-                        date: 1
-                    }" :where="{
-                        _draft: false
-                    }" v-slot="{ data }">
-                    <div v-for="article in data" :key="article._path" class="mb-5 px-1.5">
-                        <div
-                            class="flex flex-col dark:bg-dark-slate bg-touched-lavender max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-soft-lilac dark:border-midnight-slate/30 shadow-md">
-                            <NuxtImg v-if="article.image" :src="article.image.src" width="464" densities="1x 2x"
-                                quality="80" class="w-full rounded-tl-lg rounded-tr-lg aspect-video" loading="lazy" />
-                            <div
-                                class="flex-shrink p-3 overflow-hidden pt-2 text-fade dark:before:bg-[linear-gradient(180deg,transparent_0,hsla(0,0%,5%,0)_36%,#0C0B0C_95%,#0C0B0C)] before:bg-[linear-gradient(180deg,transparent_0,hsla(0,0%,5%,0)_36%,#F5EDFE_95%,#F5EDFE)] mb-1 pb-1 relative">
-                                <h3>
-                                    <nuxt-link tabindex="0" class="text-lg" :to="article._path">
-                                        {{ article.title }}
-                                    </nuxt-link>
-                                </h3>
-                                <p class="dark:text-zinc-400 text-zinc-600">
-                                    {{ article.description }}
-                                </p>
-                                <p class="text-zinc-500">
-                                    {{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }} |
-                                    {{ article.readTime }} minute read
-                                </p>
-                                <p class="dark:text-zinc-200 text-zinc-800 max-h-[13.75rem]">
-                                <div class="flex flex-wrap w-full gap-2 justify-start my-1">
-                                    <IconTag v-for="tag in article.tags" :name="tag" :iconName='tag' isTag="true" />
-                                </div>
-                                <div class="max-h-full leading-relaxed">
-                                    <ContentRenderer :value="article">
-                                        <ContentRendererMarkdown :value="article" :excerpt="true" />
-                                    </ContentRenderer>
-                                </div>
-                                </p>
-                            </div>
+                <Suspense>
+                    <ContentQuery path="blog"
+                        :only="['image', '_path', 'title', 'description', 'date', 'tags', 'excerpt', 'readTime']" :sort="{
+                            date: 1
+                        }" :where="{
+                            _draft: false
+                        }" v-slot="{ data }">
+                        <div v-for="article in data" :key="article._path" class="mb-5 px-1.5">
+                            <BlogCard :article="article" />
                         </div>
-                    </div>
-                </ContentQuery>
+                    </ContentQuery>
+                    <template #fallback>
+                        <div v-for="i in 15">
+                            <BlogSkeletonCard />
+                        </div>
+                    </template>
+                </Suspense>
             </div>
         </main>
     </div>

pages/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-let colorMode = useColorMode();
 let today = new Date();
 let age = today.getFullYear() - 2008;
 
@@ -151,21 +150,21 @@ let projects: Project[] = [
                 <h3 class="text-2xl md:text-3xl mb-1.5 ml-0.5">Skills</h3>
                 <section class="flex flex-wrap w-full gap-2 justify-start ml-1">
                     <IconTag name="TypeScript" iconName="skill-icons:typescript" />
-                    <IconTag name="Nuxt.js" :iconName="'skill-icons:nuxtjs-' + $colorMode.value" />
-                    <IconTag name="Vue.js" :iconName="'skill-icons:vuejs-' + $colorMode.value" />
+                    <IconTag name="Nuxt.js" iconName="skill-icons:nuxtjs-dark" />
+                    <IconTag name="Vue.js" iconName="skill-icons:vuejs-dark" />
                     <IconTag name="Ruby on rails" iconName="skill-icons:rails" />
-                    <IconTag name="php" :iconName="'skill-icons:php-' + $colorMode.value" />
-                    <IconTag name="React" :iconName="'skill-icons:react-' + $colorMode.value" />
-                    <IconTag name="Bash" :iconName="'skill-icons:bash-' + $colorMode.value" />
-                    <IconTag name="Tailwindcss" :iconName="'skill-icons:tailwindcss-' + $colorMode.value" />
+                    <IconTag name="php" iconName="skill-icons:php-dark" />
+                    <IconTag name="React" iconName="skill-icons:react-dark" />
+                    <IconTag name="Bash" iconName="skill-icons:bash-dark" />
+                    <IconTag name="Tailwindcss" iconName="skill-icons:tailwindcss-dark" />
                     <IconTag name="Rust" iconName="skill-icons:rust" />
-                    <IconTag name="Node.js" :iconName="'skill-icons:nodejs-' + $colorMode.value" />
+                    <IconTag name="Node.js" iconName="skill-icons:nodejs-dark" />
                     <IconTag name="Svelte" iconName="skill-icons:svelte" />
-                    <IconTag name="Figma" :iconName="'skill-icons:figma-' + $colorMode.value" />
+                    <IconTag name="Figma" iconName="skill-icons:figma-dark" />
                     <IconTag name="Electron" iconName="skill-icons:electron" />
-                    <IconTag name="Cypress" :iconName="'skill-icons:cypress-' + $colorMode.value" />
+                    <IconTag name="Cypress" iconName="skill-icons:cypress-light" />
                     <IconTag name="Prisma" iconName="skill-icons:prisma" />
-                    <IconTag name="Docker" icon-name="skill-icons:docker" />
+                    <IconTag name="Docker" iconName="skill-icons:docker" />
                 </section>
             </section>
             <div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">