wip: start v3 migration

Author: BayBreezy

.gitignore

@@ -10,6 +10,7 @@
 
 # Icon must end with two \r
 Icon
+.data/
 
 
 # Thumbnails

app/app.vue

@@ -1,8 +1,10 @@
 <template>
-  <div vaul-drawer-wrapper>
+  <div>
     <NuxtPwaManifest />
     <NuxtLoadingIndicator />
-    <NuxtPage />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
     <UiToastToaster />
     <UiVueSonner />
   </div>

app/components/CommandSearch.vue

@@ -20,11 +20,11 @@
                 :value="child.title"
                 @select="
                   $event.preventDefault();
-                  navigateTo(child._path);
+                  navigateTo(child.path);
                   localModel = false;
                 "
               >
-                <Icon :name="nav.icon" class="h-4 w-4 text-muted-foreground/80" />
+                <Icon v-if="nav.icon" :name="nav.icon" class="h-4 w-4 text-muted-foreground/80" />
                 <span>{{ child.title }}</span>
                 <UiBadge v-if="child.label" class="ml-4 px-2 py-0 text-[10px] dark:bg-lime-500">{{
                   child.label
@@ -51,6 +51,10 @@
 </template>
 
 <script lang="ts" setup>
+  import type { ContentNavigationItem } from "@nuxt/content";
+
+  type L = ContentNavigationItem & { icon?: string };
+
   const props = defineProps<{
     modelValue?: boolean;
   }>();
@@ -65,7 +69,7 @@
   }>();
   const localModel = useVModel(props, "modelValue", emits, { passive: true });
 
-  const { navigation } = useContent();
+  const navigation = inject<Ref<L[]>>("navigation", ref([]));
 
   const colorMode = useColorMode();
   const setTheme = (e: Event, val: string) => {

app/components/Docs/Footer.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="not-prose mt-10 py-10">
-    <div class="grid grid-cols-1 gap-5 md:grid-cols-2 md:items-center md:justify-between">
+    <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
       <NuxtLink
         v-if="prev"
-        :to="prev._path"
-        class="flex basis-full gap-4 rounded-lg border p-5 transition hover:border-primary md:basis-1/2"
+        :to="prev.path"
+        class="flex gap-4 rounded-lg border p-5 transition hover:border-primary"
       >
         <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border">
           <Icon name="lucide:arrow-left" class="h-5 w-5 text-muted-foreground" />
@@ -18,8 +18,8 @@
       </NuxtLink>
       <NuxtLink
         v-if="next"
-        :to="next._path"
-        class="flex basis-full justify-between gap-4 rounded-lg border p-5 transition hover:border-primary md:basis-1/2"
+        :to="next.path"
+        class="flex justify-between gap-4 rounded-lg border p-5 transition hover:border-primary"
       >
         <div class="flex flex-col gap-1">
           <p class="font-semibold lg:text-sm">{{ next.title }}</p>
@@ -36,5 +36,12 @@
 </template>
 
 <script lang="ts" setup>
-  const { prev, next } = useContent();
+  const route = useRoute();
+  const { data: surround } = await useAsyncData("surround", () =>
+    queryCollectionItemSurroundings("content", route.path, {
+      fields: ["title", "description", "path"],
+    })
+  );
+  const prev = computed(() => surround.value?.[0]);
+  const next = computed(() => surround.value?.[1]);
 </script>

app/components/Docs/Header.vue

@@ -20,5 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-  const { page } = useContent();
+  defineProps<{
+    page: any;
+  }>();
 </script>

app/components/Docs/Navlink.vue renamed to app/components/Docs/Nav.vue

@@ -4,8 +4,8 @@
       <div v-if="!l.children" class="flex items-center gap-4">
         <NuxtLink
           class="line-clamp-1 shrink-0 text-ellipsis text-base text-muted-foreground underline-offset-2 hover:underline sm:text-sm"
-          exact-active-class="underline underline-offset-2"
-          :to="l._path"
+          exact-active-class="underline underline-offset-2 text-primary"
+          :to="l.path"
           :title="l.title"
         >
           {{ l.title }}
@@ -20,7 +20,7 @@
           <p class="text-[17px] font-medium sm:text-sm">{{ l.title }}</p>
         </div>
         <div class="pl-7">
-          <DocsNavlink class="gap-4" :links="l.children" />
+          <DocsNav class="gap-4" :links="l.children" />
         </div>
       </div>
     </template>
@@ -29,17 +29,11 @@
 
 <script lang="ts" setup>
   import { tv } from "tailwind-variants";
+  import type { ContentNavigationItem } from "@nuxt/content";
 
-  type Link = {
-    _path: string;
-    title: string;
-    icon?: string;
-    children?: Link[];
-    label?: string;
-  };
-
+  type L = ContentNavigationItem & { icon?: string };
   const props = defineProps<{
-    links?: Link[];
+    links?: L[];
     class?: any;
   }>();
 

app/components/MobileNav.vue

@@ -17,15 +17,17 @@
             </div>
             <UiSeparator class="mt-4" />
           </div>
-          <DocsNavlink :links="navigation" />
+          <DocsNav :links="navigation" />
         </UiScrollArea>
       </template>
     </UiSheetContent>
   </UiSheet>
 </template>
 
 <script lang="ts" setup>
-  const { navigation } = useContent();
+  import type { ContentNavigationItem } from "@nuxt/content";
+
+  const navigation = inject<Ref<ContentNavigationItem[]>>("navigation", ref([]));
 
   const props = defineProps<{
     modelValue?: boolean;

app/components/content/Block/BlockShowcase.vue

@@ -136,6 +136,6 @@
   const { copied, copy } = useClipboard({ copiedDuring: 2500, legacy: true });
 
   const externalViewLink = computed(() => {
-    return `/block-renderer?component=${props.component}&containerClass=${props.containerClass ?? ""}`;
+    return `/block-renderer?component=${props.component}&path=${props.blockPath}&containerClass=${props.containerClass ?? ""}`;
   });
 </script>

app/components/content/Docs/DataTable/DocsDatatableLayout.vue

@@ -90,13 +90,21 @@
     layout: {
       top1: "searchBuilder",
       top1Start: {
-        buttons: true,
+        features: {
+          buttons: true,
+        },
+        className: tw`pb-5`,
       },
       topStart: null,
       topEnd: null,
       bottomStart: null,
       bottomEnd: {
-        paging: true,
+        features: [
+          {
+            paging: true,
+          },
+        ],
+        className: tw`pt-5`,
       },
     },
   };

app/components/content/ShowCase.vue

@@ -23,22 +23,18 @@
         class="mt-3 flex min-h-[300px] items-center justify-center rounded-lg border p-5 lg:p-10"
       >
         <div class="not-prose mx-auto w-full">
-          <component :is="component" />
+          <slot />
         </div>
       </div>
     </TabsContent>
     <TabsContent value="code">
       <div v-if="$slots?.code">
-        <ContentSlot :use="$slots.code" unwrap="p" />
+        <slot name="code" mdc-unwrap="p" />
       </div>
     </TabsContent>
   </TabsRoot>
 </template>
 
 <script lang="ts" setup>
   import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "radix-vue";
-
-  defineProps<{
-    component: string;
-  }>();
 </script>