wip: migrate to content v3

Author: BayBreezy

app/components/Docs/Footer.vue

@@ -40,7 +40,7 @@
   const { data: surround } = await useAsyncData("surround", () =>
     queryCollectionItemSurroundings("content", route.path, {
       fields: ["title", "description", "path"],
-    })
+    }).where("path", "NOT LIKE", "%/.navigation")
   );
   const prev = computed(() => surround.value?.[0]);
   const next = computed(() => surround.value?.[1]);

app/components/Docs/Header.vue

@@ -1,7 +1,10 @@
 <template>
-  <div>
-    <h1 class="mb-0 text-4xl">{{ page?.title }}</h1>
-    <p v-if="page?.description" class="text-lg text-muted-foreground">{{ page?.description }}</p>
+  <div class="not-prose">
+    <UiBreadcrumbs :items="items" class="mb-6" />
+    <h1 class="text-4xl font-bold leading-none">{{ page?.title }}</h1>
+    <p v-if="page?.description" class="mb-6 mt-3 text-lg text-muted-foreground">
+      {{ page?.description }}
+    </p>
     <div v-if="page?.links && page?.links?.length" class="not-prose flex flex-wrap gap-2">
       <template v-for="(link, i) in page?.links" :key="i">
         <a
@@ -20,7 +23,16 @@
 </template>
 
 <script lang="ts" setup>
-  defineProps<{
-    page: any;
+  import { compact, startCase } from "lodash-es";
+  import type { ContentCollectionItem } from "@nuxt/content";
+
+  const props = defineProps<{
+    page: ContentCollectionItem;
   }>();
+
+  const items = computed(() => {
+    const starting = startCase(compact(props.page?.path?.split("/"))[0] || "");
+    const title = startCase(props.page?.title || "");
+    return [{ label: starting }, { label: title }];
+  });
 </script>

app/components/Docs/Nav.vue

@@ -7,12 +7,15 @@
           exact-active-class="underline underline-offset-2 text-primary"
           :to="l.path"
           :title="l.title"
+          @click="mobileNavState = false"
         >
           {{ l.title }}
         </NuxtLink>
-        <UiBadge v-if="l.label" class="px-2 py-0 text-[10px] dark:bg-lime-500">{{
-          l.label
-        }}</UiBadge>
+        <UiBadge
+          v-if="l.label"
+          class="rounded-md px-2 py-0 text-xs dark:bg-lime-500 md:rounded-full md:text-[10px]"
+          >{{ l.label }}</UiBadge
+        >
       </div>
       <div v-else class="flex flex-col gap-4">
         <div class="flex items-center gap-2.5">
@@ -40,4 +43,6 @@
   const styles = tv({
     base: "flex flex-col gap-6 sm:text-sm",
   });
+
+  const mobileNavState = useMobileNavState();
 </script>

app/components/Mainnav.vue

@@ -7,7 +7,7 @@
             size="icon-sm"
             variant="outline"
             class="h-9 w-9 lg:hidden"
-            @click="mobileNav = true"
+            @click="mobileNavState = true"
             ><Icon name="heroicons:bars-2" class="h-4 w-4" />
           </UiButton>
           <NuxtLink to="/" class="text-lg font-bold">UI Thing</NuxtLink>
@@ -118,7 +118,7 @@
         </UiDropdownMenu>
       </div>
     </div>
-    <MobileNav v-model="mobileNav" />
+    <MobileNav />
   </header>
 </template>
 
@@ -131,7 +131,7 @@
 
   const route = useRoute();
 
-  const mobileNav = ref(false);
+  const mobileNavState = useMobileNavState();
 
   const colorMode = useColorMode();
   const setTheme = (val: string) => {

app/components/MobileNav.vue

@@ -1,40 +1,34 @@
 <template>
-  <UiSheet v-model:open="localModel">
-    <UiSheetContent class="p-1">
-      <template #content>
-        <UiSheetTitle title="Mobile menu" class="sr-only" />
-        <UiSheetDescription description="A list of navigation items for mobile" class="sr-only" />
-        <UiScrollArea class="h-[calc(100dvh-20px)] w-full p-5">
-          <div class="sticky top-0 mb-3 w-full bg-background">
-            <div class="flex items-center gap-3.5">
-              <div class="flex h-8 w-8 items-center justify-center rounded bg-foreground/10">
-                <DocsLogo />
-              </div>
-              <p class="text-xl font-bold">UI Thing</p>
-              <UiSheetClose class="ml-auto">
-                <Icon name="lucide:x" />
-              </UiSheetClose>
-            </div>
-            <UiSeparator class="mt-4" />
-          </div>
-          <DocsNav :links="navigation" />
-        </UiScrollArea>
+  <UiDrawer v-model:open="mobileNavState" should-scale-background>
+    <UiDrawerContent class="h-[600px]">
+      <template #knob>
+        <div
+          class="mx-auto my-5 h-1 w-[60px] shrink-0 cursor-grab rounded-full bg-muted active:cursor-grabbing"
+        />
       </template>
-    </UiSheetContent>
-  </UiSheet>
+      <div>
+        <UiDrawerTitle class="sr-only mb-1.5">Mobile Menu</UiDrawerTitle>
+        <UiDrawerDescription class="sr-only">
+          A list of navigation items for mobile
+        </UiDrawerDescription>
+
+        <div class="relative h-[calc(100dvh-230px)] overflow-y-auto pl-6 pr-2">
+          <DocsNav :links="navigation" @clicked="mobileNavState = false" />
+        </div>
+
+        <UiDrawerClose class="absolute right-4 top-3 h-7 w-7" as-child>
+          <UiButton variant="ghost" size="icon-sm" class="opacity-50 hover:opacity-100">
+            <Icon name="lucide:x" />
+          </UiButton>
+        </UiDrawerClose>
+      </div>
+    </UiDrawerContent>
+  </UiDrawer>
 </template>
 
 <script lang="ts" setup>
   import type { ContentNavigationItem } from "@nuxt/content";
 
   const navigation = inject<Ref<ContentNavigationItem[]>>("navigation", ref([]));
-
-  const props = defineProps<{
-    modelValue?: boolean;
-  }>();
-  const emits = defineEmits<{
-    "update:modelValue": [value: boolean];
-  }>();
-
-  const localModel = useVModel(props, "modelValue", emits, { passive: true });
+  const mobileNavState = useMobileNavState();
 </script>

app/components/content/Block/BlockShowcase.vue

@@ -16,45 +16,42 @@
             }
           "
         >
-          <UiToggleGroupItem class="size-6 rounded-sm p-0" value="100">
+          <UiToggleGroupItem v-tippy="'Desktop View'" class="size-6 rounded-sm p-0" value="100">
             <Icon class="size-3.5" name="lucide:monitor" />
           </UiToggleGroupItem>
-          <UiToggleGroupItem class="size-6 rounded-sm p-0" value="60">
+          <UiToggleGroupItem v-tippy="'Tablet View'" class="size-6 rounded-sm p-0" value="60">
             <Icon class="size-3.5" name="lucide:tablet" />
           </UiToggleGroupItem>
-          <UiToggleGroupItem value="40" class="size-6 rounded-sm p-0">
+          <UiToggleGroupItem v-tippy="'Mobile View'" value="40" class="size-6 rounded-sm p-0">
             <Icon class="size-3.5" name="lucide:smartphone" />
           </UiToggleGroupItem>
         </UiToggleGroup>
       </div>
       <div class="flex items-center gap-3">
-        <UiTooltip v-if="externalViewLink">
-          <UiTooltipTrigger as-child>
-            <UiButton
-              target="_blank"
-              :href="externalViewLink"
-              class="size-8 rounded-md"
-              size="icon-sm"
-              variant="outline"
-            >
-              <Icon name="lucide:square-arrow-out-up-right" class="size-3.5" />
-            </UiButton>
-          </UiTooltipTrigger>
-          <UiTooltipContent align="center">External view</UiTooltipContent>
-        </UiTooltip>
-        <UiTooltip v-if="codeBlock">
-          <UiTooltipTrigger as-child>
-            <UiButton
-              class="size-8 rounded-md"
-              size="icon-sm"
-              variant="outline"
-              @click="copy(codeBlock)"
-            >
-              <Icon :name="copied ? 'lucide:check' : 'lucide:copy'" class="size-3.5" />
-            </UiButton>
-          </UiTooltipTrigger>
-          <UiTooltipContent align="center">Click to copy the source code</UiTooltipContent>
-        </UiTooltip>
+        <UiButton
+          v-if="externalViewLink"
+          v-tippy="'External View'"
+          target="_blank"
+          :href="externalViewLink"
+          class="size-8 rounded-md"
+          size="icon-sm"
+          variant="outline"
+        >
+          <Icon name="lucide:square-arrow-out-up-right" class="size-3.5" />
+          <span class="sr-only">External View</span>
+        </UiButton>
+
+        <UiButton
+          v-if="codeBlock"
+          v-tippy="'Copy Source Code'"
+          class="size-8 rounded-md"
+          size="icon-sm"
+          variant="outline"
+          @click="copy(codeBlock)"
+        >
+          <Icon :name="copied ? 'lucide:check' : 'lucide:copy'" class="size-3.5" />
+          <span class="sr-only">Copy Source Code</span>
+        </UiButton>
       </div>
     </div>
 
@@ -118,8 +115,7 @@
       import: "default",
     });
     const path = blockImports[`./${props.blockPath}.vue`];
-    codeBlock.value = await path();
-
+    codeBlock.value = (await path?.()) ?? null;
     isLoading.value = false;
   };