reduce dependencies, and stop blocking

2024-09-25 03:13:40 -05:00
parent d85b6e7fe8
commit d0fb293c76
16 changed files with 414 additions and 14221 deletions
--- a/components/Nav.vue
+++ b/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>
--- a/components/TableOfContents.vue
+++ b/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>

--- a/components/blog/BlogCard.vue
+++ b/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>
--- a/components/blog/BlogSkeletonCard.vue
+++ b/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>
--- a/components/blog/MiniBlogCard.vue
+++ b/components/blog/MiniBlogCard.vue
--- a/components/blog/index.vue
+++ b/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>
--- a/components/content/ProseCode.vue
+++ b/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>

--- a/components/content/ProseH2.vue
+++ b/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>
--- a/components/content/ProseH3.vue
+++ b/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>