WIP: chore: update packages and fix warnings

app.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <chakra.div
+    <CBox
       position="absolute"
       z-index="0"
       top="0"

components.d.ts

@@ -3,11 +3,9 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

components/content/prose/ProseCode.vue

@@ -0,0 +1,35 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+defineProps({
+  code: {
+    type: String,
+    default: ''
+  },
+  language: {
+    type: String,
+    default: null
+  },
+  filename: {
+    type: String,
+    default: null
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => []
+  },
+  meta: {
+    type: String,
+    default: null
+  }
+})
+</script>
+
+<style>
+pre code .line {
+  display: block;
+  min-height: 1rem;
+}
+</style>

components/content/prose/ProsePre.vue

@@ -0,0 +1,45 @@
+<template>
+  <ProseCode :code="code" :language="language" :filename="filename" :highlights="highlights" :meta="meta">
+    <pre :class="$props.class" :style="style"><slot /></pre>
+  </ProseCode>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  code: {
+    type: String,
+    default: ''
+  },
+  language: {
+    type: String,
+    default: null
+  },
+  filename: {
+    type: String,
+    default: null
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => []
+  },
+  meta: {
+    type: String,
+    default: null
+  },
+  class: {
+    type: String,
+    default: null
+  },
+  style: {
+    type: [String, Object],
+    default: null
+  }
+})
+</script>
+
+<style>
+pre code .line {
+  display: block;
+  min-height: 1rem;
+}
+</style>

components/navigation/DocLink.vue

@@ -0,0 +1,51 @@
+<template>
+  <chakra.div>
+    <CLink
+      :as="NuxtLink"
+      prefetch
+      :to="props.navItemPath"
+      :aria-current="isCurrent ? 'page' : undefined"
+      text-style="sidebarLink"
+      :sx="{
+        color: 'currentColor',
+        position: 'relative',
+        '&:after': {
+          content: `''`,
+          position: 'absolute',
+          width: '100%',
+          transform: 'scaleX(0)',
+          height: '1px',
+          top: '85%',
+          left: 0,
+          backgroundColor: 'currentColor',
+          transformOrigin: 'bottom right',
+          transition: 'transform .4s cubic-bezier(.86, 0, .07, 1)'
+        },
+        '&:hover::after': {
+          transform: 'scaleX(1)',
+          transformOrigin: 'bottom left'
+        }
+      }"
+      :_hover="{
+        textDecoration: 'none'
+      }"
+    >
+      <slot />
+    </CLink>
+  </chakra.div>
+</template>
+
+<script lang="ts" setup>
+import type { NavItem } from '@nuxt/content/dist/runtime/types';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { chakra } from '@chakra-ui/vue-next';
+const NuxtLink = resolveComponent('nuxt-link') as any;
+
+const props = defineProps<{
+  navItemPath: NavItem['_path'];
+}>();
+
+const route = useRoute();
+const isCurrent = computed(() => route.path === props.navItemPath);
+</script>

components/navigation/TheSidebar.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup async>
+import { CStack } from '@chakra-ui/vue-next'
+import DocLink from '~/components/navigation/DocLink.vue'
+
+/**
+ * Documentation Fetching
+ */
+const { data: navigation } = await useAsyncData('navigation', () =>
+  fetchContentNavigation()
+)
+</script>
+
+<template>
+  <CStack v-if="navigation" as="ul" spacing="0" list-style-type="none" font-size="sm">
+    <li v-for="(item, index) in navigation" :key="index">
+      <DocLink :nav-item-path="item._path">
+        {{ item.title }}
+      </DocLink>
+      <!-- <AppNavigation v-if="item.children" :navigation-tree="item.children" class="sub-navigation" /> -->
+      <CStack
+        v-if="item?.children?.length"
+        as="ul"
+        spacing="0"
+        list-style-type="none"
+      >
+        <DocLink
+          v-for="nestedItem in item.children.filter(
+            (_) => _._path !== item._path
+          )"
+          :key="`path:${nestedItem._path}`"
+          :nav-item-path="nestedItem._path"
+          pl="4"
+        >
+          {{ nestedItem.title }}
+        </DocLink>
+      </CStack>
+    </li>
+  </CStack>
+</template>

components/navigation/top-navigation.vue

@@ -43,14 +43,14 @@ onMounted(() => {
       <!-- content -->
       <CFlex w="100%" h="100%" px="6" align="center" justify="space-between">
         <CFlex align="center">
-          <router-link to="/">
+          <nuxt-link prefetch to="/">
             <chakra.a
               display="block"
               aria-label="Chakra UI Vue, Back to homepage"
             >
               <ChakraLogo />
             </chakra.a>
-          </router-link>
+          </nuxt-link>
         </CFlex>
 
         <!-- nav -->

layouts/default.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { chakra, useColorModeValue } from '@chakra-ui/vue-next';
-import TopNavigation from '~/components/navigation/top-navigation.vue';
-import Sidebar from '~/components/navigation/sidebar.vue';
+import TheNavbar from '~/components/TheNavbar.vue'
+import TheSidebar from '~/components/navigation/TheSidebar.vue';
 
 /**
  * Styling
@@ -11,13 +11,15 @@ const color = useColorModeValue('gray.700', 'white');
 
 <template>
   <chakra.div :min-h="['auto', 'auto', '100vh']" w="100%" :color="color">
-    <TopNavigation />
+    <TheNavbar />
     <chakra.div max-w="8xl" mx="auto" d="flex">
       <!-- Sidebar Navigation -->
-      <chakra.div :display="{ base: 'none', lg: 'block' }" position="fixed" z-index="30" bottom="0" top="6rem"
+      <chakra.div 
+        :display="{ base: 'none', lg: 'block' }" position="fixed" z-index="30" bottom="0" top="6rem"
         left="max(0px, calc(50% - 45rem))" right="auto" width="19.5rem" pb="10" px="8" overflow-y="auto"
-        overscroll-behavior="contain">
-        <sidebar />
+        overscroll-behavior="contain"
+      >
+        <TheSidebar />
       </chakra.div>
       <chakra.main :pl="{ base: 4, lg: '19.5rem' }" pt="4" pb="24" :pr="{ base: 4, xl: 16 }" class="chakra-prose">
         <chakra.div :mr="{ xl: '15.5rem' }" :pl="{ base: 2, lg: '1rem' }">