d0rich · d0rich · Jun 14, 2024 · Jun 13, 2024 · Jun 13, 2024 · Jun 13, 2024
diff --git a/.changeset/dull-timers-divide.md b/.changeset/dull-timers-divide.md
@@ -0,0 +1,5 @@
+---
+'d0xigen': patch
+---
+
+Fix prerendered routes
diff --git a/.changeset/nasty-coats-invent.md b/.changeset/nasty-coats-invent.md
@@ -0,0 +1,5 @@
+---
+'d0xigen': patch
+---
+
+Fix hydration mismatch for navigation
diff --git a/.changeset/perfect-seals-shout.md b/.changeset/perfect-seals-shout.md
@@ -0,0 +1,8 @@
+---
+'@d0rich/nuxt-content-mermaid': minor
+'@d0rich/nuxt-design-system': minor
+'@d0rich/esprit-design': minor
+'d0xigen': minor
+---
+
+Update dependencies
diff --git a/.changeset/rich-bulldogs-dance.md b/.changeset/rich-bulldogs-dance.md
@@ -0,0 +1,5 @@
+---
+'@d0rich/esprit-design': patch
+---
+
+Fix to and href used in NuxtLink simoultaniously warning
diff --git a/.changeset/weak-squids-deliver.md b/.changeset/weak-squids-deliver.md
@@ -0,0 +1,6 @@
+---
+'@d0rich/esprit-design': patch
+'d0xigen': patch
+---
+
+Remove useSafeOnMounted()
diff --git a/.eslintrc b/.eslintrc
@@ -9,7 +9,7 @@
     "parser": "@typescript-eslint/parser"
   },
   "extends": [
-    "@nuxtjs/eslint-config-typescript",
+    "@nuxt/eslint-config",
     "plugin:prettier/recommended"
   ],
   "plugins": [],

diff --git a/.prettierignore b/.prettierignore
@@ -5,6 +5,7 @@ node_modules
 .cache
 .output
 .env
+.turbo
 dist
 build
 *.md
diff --git a/apps/d0rich.me/.env.example b/apps/d0rich.me/.env.example
@@ -0,0 +1,4 @@
+# https://github.com/settings/tokens
+GITHUB_TOKEN=xxx
+# https://app.netlify.com/user/applications
+NETLIFY_TOKEN=xxx
diff --git a/apps/d0rich.me/app.vue b/apps/d0rich.me/app.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-useFaviconAnimation()
 const { key } = useTransitionAnimationWorkaround()
 const route = useRoute()
 
 const description = 'Small web portal of an experienced IT specialist.'
 
+onNuxtReady(() => {
+  useFaviconAnimation()
+})
+
 useHead({
   titleTemplate(title: string | undefined) {
     if (title) return `${title} • d0rich`

diff --git a/apps/d0rich.me/components/AsyncSafeSeoWithOg.vue b/apps/d0rich.me/components/AsyncSafeSeoWithOg.vue
@@ -9,7 +9,9 @@ defineProps<{
 
 <template>
   <Head>
-    <Title v-if="title">{{ title }}</Title>
+    <Title v-if="title">
+      {{ title }}
+    </Title>
     <Meta
       v-if="title || ogTitle"
       property="og:title"

diff --git a/apps/d0rich.me/components/blog/SurroundDocCard.vue b/apps/d0rich.me/components/blog/SurroundDocCard.vue
@@ -24,7 +24,9 @@ defineProps<{
       <DCardTitle v-else class="[&_h3]:!text-cyan-800">
         <Icon name="ic:sharp-arrow-back-ios" />Newer
       </DCardTitle>
-      <h4 class="text-xl font-bold">{{ doc.title }}</h4>
+      <h4 class="text-xl font-bold">
+        {{ doc.title }}
+      </h4>
       <p>{{ doc.description }}</p>
     </DCard>
   </NuxtLink>

diff --git a/apps/d0rich.me/components/homepage/B1Intro.vue b/apps/d0rich.me/components/homepage/B1Intro.vue
@@ -59,15 +59,14 @@ const actions: ActionFanItem<CharacterPose>[] = [
   }
 ]
 
-const root = ref<Element | null>(null)
 const introContainer = ref<Element | null>(null)
 const background = ref<Element | null>(null)
 const textContainer = ref<ComponentPublicInstance | null>(null)
 const svgRef = ref<SVGSVGElement | null>(null)
 const polygonRef = ref<SVGPolygonElement | null>(null)
 const socials = ref<ComponentPublicInstance[]>([])
 
-useSafeOnMounted(root as Ref<HTMLElement>, () => {
+onMounted(() => {
   introAnimations.applyBgTransitionAnimation(
     introContainer,
     background,
@@ -79,24 +78,28 @@ useSafeOnMounted(root as Ref<HTMLElement>, () => {
 </script>
 
 <template>
-  <section
-    v-if="data"
-    :ref="(el) => { root = el as Element }"
-    style="height: 200vh"
-  >
+  <section v-if="data" style="height: 200vh">
     <div class="sticky top-0">
       <div
-        :ref="(el) => { introContainer = el as Element }"
+        :ref="
+          (el) => {
+            introContainer = el as Element
+          }
+        "
         class="relative w-screen max-w-full h-screen"
       >
         <div
-          :ref="(el) => { background = el as Element }"
+          :ref="
+            (el) => {
+              background = el as Element
+            }
+          "
           class="absolute h-full w-full top-0 left-0 bg-[url('~/assets/img/bg/d-bw.webp')] bg-cover bg-center z-[2]"
         />
         <DWrapShape
           :ref="
-            (el) => {
-              textContainer = el as ComponentPublicInstance
+            (el: ComponentPublicInstance) => {
+              textContainer = el
             }
           "
           class="absolute w-fit top-1/3 left-0 right-0 mx-auto z-[3]"
@@ -121,15 +124,23 @@ useSafeOnMounted(root as Ref<HTMLElement>, () => {
             path-class="fill-white"
           />
           <svg
-            :ref="(el) => { svgRef = el as SVGSVGElement }"
+            :ref="
+              (el) => {
+                svgRef = el as SVGSVGElement
+              }
+            "
             height="100%"
             width="100%"
             class="absolute inset-0 w-full max-w-6xl mx-auto h-full sharp-shadow ss-r-4 ss-b-2 ss-neutral-900"
             viewBox="80 0 20 100"
             preserveAspectRatio="xMaxYMax"
           >
             <polygon
-              :ref="(el) => { polygonRef = el as SVGPolygonElement }"
+              :ref="
+                (el) => {
+                  polygonRef = el as SVGPolygonElement
+                }
+              "
               class="fill-white"
             />
           </svg>
@@ -157,7 +168,11 @@ useSafeOnMounted(root as Ref<HTMLElement>, () => {
               <DWrapShape
                 v-for="(socialLink, index) in socialLinks"
                 :key="index"
-                :ref="(el) => { socials[index] = el as ComponentPublicInstance }"
+                :ref="
+                  (el: ComponentPublicInstance) => {
+                    socials[index] = el
+                  }
+                "
                 class="absolute -top-1/3 left-1/2"
                 shape-class="d-chip bg-black"
                 filter-class="sharp-shadow ss-br-2 ss-white"

diff --git a/apps/d0rich.me/components/homepage/B2Sitemap.vue b/apps/d0rich.me/components/homepage/B2Sitemap.vue
@@ -23,15 +23,13 @@ const sectionsLineColor = computed(() => {
 const disconnectObserver = ref(() => {})
 const currentSection = ref<'portfolio' | 'blog' | 'resume' | null>(null)
 
-const rootComponent = ref<ComponentPublicInstance | null>(null)
-const root = computed(() => rootComponent.value?.$el)
 const svgRef = ref<SVGSVGElement | null>(null)
 const polygonRef = ref<SVGPolygonElement | null>(null)
 const sections = ref<Element[]>([])
 const sectionsMasks = ref<ComponentPublicInstance[]>([])
 const sectionsContent = ref<Element[]>([])
 
-useSafeOnMounted(root, () => {
+onMounted(() => {
   sectionsAnimations.applyLineAnimation(svgRef, polygonRef)
   disconnectObserver.value = sectionsAnimations.setupCurrentSectionObserver(
     sections,
@@ -46,7 +44,6 @@ onBeforeUnmount(() => disconnectObserver.value())
 <template>
   <DWrapBackground
     id="sitemap"
-    :ref="(el) => { rootComponent = el as ComponentPublicInstance }"
     tag="section"
     class="bg-[url('~/assets/img/bg/hightech-city.png')] bg-cover bg-center"
     overlay-class="backdrop-saturate-50 bg-neutral-900 bg-opacity-90"
@@ -79,15 +76,23 @@ onBeforeUnmount(() => disconnectObserver.value())
         />
       </div>
       <svg
-        :ref="(el) => { svgRef = el as SVGSVGElement }"
+        :ref="
+          (el) => {
+            svgRef = el as SVGSVGElement
+          }
+        "
         height="100%"
         width="100%"
         class="absolute top-0 w-full h-full sharp-shadow ss-r-4 ss-b-2 ss-neutral-900"
         viewBox="70 0 10 100"
         preserveAspectRatio="xMidYMin"
       >
         <polygon
-          :ref="(el) => { polygonRef = el as SVGPolygonElement }"
+          :ref="
+            (el) => {
+              polygonRef = el as SVGPolygonElement
+            }
+          "
           class="transition-colors"
           :class="sectionsLineColor"
         />
@@ -99,17 +104,25 @@ onBeforeUnmount(() => disconnectObserver.value())
       <div
         v-for="(doc, index) in data"
         :key="doc._id"
-        :ref="el => { sections[index] = el as Element}"
+        :ref="
+          (el) => {
+            sections[index] = el as Element
+          }
+        "
         class="section-description"
       >
         <DMask
-          :ref="el => sectionsMasks[index] = el as ComponentPublicInstance"
+          :ref="
+            (el: ComponentPublicInstance) => {
+              sectionsMasks[index] = el
+            }
+          "
           :mask="doc.mask"
           color
           class="section-description__image"
         />
         <div
-          :ref="el => sectionsContent[index] = el as Element"
+          :ref="(el) => (sectionsContent[index] = el as Element)"
           class="section-description__text"
         >
           <DBigBangButton

diff --git a/apps/d0rich.me/components/homepage/B3Skills.vue b/apps/d0rich.me/components/homepage/B3Skills.vue
@@ -3,28 +3,29 @@ import * as skillsAnimations from '~~/utils/homepage/skills'
 
 const { data } = useAsyncData(() => queryContent('/homepage/skills').find())
 
-const rootComponent = ref<ComponentPublicInstance | null>(null)
-const root = computed(() => rootComponent.value?.$el)
 const skillsGroups = ref<ComponentPublicInstance[]>([])
 const bgSpinner = ref<ComponentPublicInstance | null>(null)
 
-useSafeOnMounted(root, () => {
+onMounted(() => {
   skillsAnimations.applyContentRevealAnimation(skillsGroups)
 })
 </script>
 
 <template>
   <DWrapBackground
     id="skills"
-    :ref="el => rootComponent = el as ComponentPublicInstance"
     tag="section"
     class="overflow-hidden"
     overlay-class="skills__bg-overlay"
   >
     <template #svg>
       <div class="relative w-full h-full max-w-3xl mx-auto">
         <DAnimationHypnosis
-          :ref="el => bgSpinner = el as ComponentPublicInstance"
+          :ref="
+            (el: ComponentPublicInstance) => {
+              bgSpinner = el
+            }
+          "
           class="absolute inset-0 mx-auto right-2/3 top-[12%] w-80 -rotate-12"
         />
         <DAnimationHypnosis
@@ -39,7 +40,11 @@ useSafeOnMounted(root, () => {
       <ContentRenderer
         v-for="(doc, index) in data"
         :key="doc._id"
-        :ref="el => skillsGroups[index] = el as ComponentPublicInstance"
+        :ref="
+          (el: ComponentPublicInstance) => {
+            skillsGroups[index] = el
+          }
+        "
         tag="div"
         class="skills-group"
         :value="doc"

diff --git a/apps/d0rich.me/components/homepage/B4Story.vue b/apps/d0rich.me/components/homepage/B4Story.vue
@@ -10,16 +10,13 @@ const { data } = useAsyncData('homepage', async () => {
   return { intro, blocks }
 })
 
-const rootComponent = ref<ComponentPublicInstance | null>(null)
-const root = computed(() => rootComponent.value?.$el)
-
 const storyContainer = ref<Element | null>(null)
 const svg = ref<(SVGElement & SVGSVGElement) | null>(null)
 const line = ref<SVGPolygonElement | null>(null)
 const linePlaceholder = ref<SVGPolygonElement | null>(null)
 const cards = ref<ComponentPublicInstance[]>([])
 
-useSafeOnMounted(root, () => {
+onMounted(() => {
   storyAnimations.applyProgressAnimation(
     storyContainer,
     svg,
@@ -34,7 +31,6 @@ useSafeOnMounted(root, () => {
   <DWrapBackground
     v-if="data"
     id="story"
-    :ref="el => rootComponent = el as ComponentPublicInstance"
     tag="section"
     overlay-class="story__bg-overlay"
   >
@@ -69,28 +65,51 @@ useSafeOnMounted(root, () => {
         </DWrapShape>
       </div>
     </div>
-    <div :ref="(el) => { storyContainer = el as Element }" class="story-blocks">
+    <div
+      :ref="
+        (el) => {
+          storyContainer = el as Element
+        }
+      "
+      class="story-blocks"
+    >
       <svg
-        :ref="(el) => { svg = el as (SVGElement & SVGSVGElement) }"
+        :ref="
+          (el) => {
+            svg = el as SVGElement & SVGSVGElement
+          }
+        "
         height="100%"
         width="100%"
         class="story-progress"
         viewBox="0 0 10 100"
       >
         <polygon
-          :ref="(el) => { linePlaceholder = el as SVGPolygonElement }"
+          :ref="
+            (el) => {
+              linePlaceholder = el as SVGPolygonElement
+            }
+          "
           class="fill-black"
         />
         <polygon
-          :ref="(el) => { line = el as SVGPolygonElement }"
+          :ref="
+            (el) => {
+              line = el as SVGPolygonElement
+            }
+          "
           class="fill-white"
         />
       </svg>
       <div class="story-blocks__cards">
         <DCard
           v-for="(doc, index) in data.blocks"
           :key="doc._id"
-          :ref="el => cards[index] = el as ComponentPublicInstance"
+          :ref="
+            (el: ComponentPublicInstance) => {
+              cards[index] = el
+            }
+          "
           mode="homepage-story"
           class="my-20"
         >