Upgrade to Nuxt Content 3 (#66)

* Upgrade to Nuxt Content 3

* Fix search and code blocks

* Fix latest wiki/docs url query paths

* Mark 404 errors in content pages as fatal errors

* Fix description parse function modifying the page contents

Author: BlakeBr0

.gitignore

@@ -92,3 +92,4 @@ sw.*
 .vercel
 .turbo
 .output
+.data

apps/web/app/assets/css/nuxt-content.css

@@ -52,7 +52,7 @@
     }
   }
 
-  pre {
+  .shiki {
     @apply p-4 mt-5 mb-6 bg-neutral-200 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-lg overflow-hidden hover:overflow-auto;
   }
 

apps/web/app/components/ContentLinks.vue

@@ -54,6 +54,6 @@ const { mod } = useDocsMetadata();
 
 const editURL = computed(
   () =>
-    `https://github.com/blakesmods/web/edit/main/apps/web/content${props.page._path}.${props.page._extension}`
+    `https://github.com/blakesmods/web/edit/main/apps/web/content${props.page.path}.${props.page.extension}`
 );
 </script>

apps/web/app/components/content/ProseCode.vue

@@ -5,7 +5,7 @@
   >
     <UButton
       v-if="previous"
-      :to="previous._path"
+      :to="previous.path"
       class="group gap-4"
       size="lg"
       icon="i-heroicons-arrow-left"
@@ -20,7 +20,7 @@
     </UButton>
     <UButton
       v-if="next"
-      :to="next._path"
+      :to="next.path"
       class="ml-auto group gap-4"
       size="lg"
       icon="i-heroicons-arrow-right"
@@ -44,11 +44,9 @@ const props = defineProps({
 
 const { version, isLatestVersion } = useDocsMetadata();
 
-const parts = props.current._path.split("/").slice(1);
-
 const { data } = await useAsyncData(
-  "doc/" + props.current._path + "/pagination",
-  () => queryContent(parts[0], parts[1]).findSurround(props.current._path)
+  "docs/" + props.current.path + "/pagination",
+  () => queryCollectionItemSurroundings("docs", props.current.path)
 );
 
 const previous = computed(() => data.value[0]);
@@ -57,22 +55,19 @@ const next = computed(() => data.value[1]);
 // the latest version doesn't have the version in the url
 if (isLatestVersion.value) {
   if (previous.value) {
-    previous.value._path = removeDocsVersionFromPath(
-      previous.value._path,
+    previous.value.path = removeDocsVersionFromPath(
+      previous.value.path,
       version.value
     );
   }
 
   if (next.value) {
-    next.value._path = removeDocsVersionFromPath(
-      next.value._path,
-      version.value
-    );
+    next.value.path = removeDocsVersionFromPath(next.value.path, version.value);
   }
 }
 
 function formatModName(document) {
-  const modID = document._path.split("/")[isLatestVersion.value ? 2 : 3];
+  const modID = document.path.split("/")[isLatestVersion.value ? 2 : 3];
   const mod = getMod(modID);
   return mod ? mod.name : modID;
 }

apps/web/app/components/docs/Pagination.vue

@@ -39,10 +39,10 @@
           v-for="document in documents[category]"
           class="relative pl-2 py-0.5 text-sm first:mt-2 hover:text-dimmed border-l border-neutral-300 dark:border-neutral-700"
           :class="{
-            '!text-primary-500 dark:!text-primary-400 font-semibold':
-              document._path === route.path
+            'text-primary-500! dark:text-primary-400! font-semibold':
+              document.path === route.path
           }"
-          :to="document._path"
+          :to="document.path"
         >
           {{ document.title }}
         </NuxtLink>

apps/web/app/components/docs/SidebarContent.vue

@@ -4,7 +4,7 @@
     <NuxtLink
       v-for="page in pages"
       class="flex pl-2 py-0.5 md:py-0.5 text-sm border-l border-neutral-300 dark:border-neutral-700"
-      :to="page._path"
+      :to="page.path"
     >
       {{ page.title }}
     </NuxtLink>
@@ -17,15 +17,16 @@ const { version, mod, isLatestVersion } = useDocsMetadata();
 const { data } = await useAsyncData(
   `${mod.value?.mod_id}-${version.value}-docs-listing`,
   () =>
-    queryContent("docs", version.value, mod.value?.mod_id ?? "")
-      .only(["title", "_path"])
-      .find()
+    queryCollection("docs")
+      .where("path", "LIKE", createDocsPathSQL(version.value, mod.value.mod_id))
+      .select("title", "path")
+      .all()
 );
 
 const pages = computed(() =>
   data.value.slice(1).map(doc => {
-    if (isLatestVersion.value && doc._path) {
-      doc._path = removeDocsVersionFromPath(doc._path, version.value);
+    if (isLatestVersion.value && doc.path) {
+      doc.path = removeDocsVersionFromPath(doc.path, version.value);
     }
 
     return doc;

apps/web/app/components/global/DocsSectionList.vue

@@ -1,7 +1,7 @@
 <template>
   <NuxtLink
     class="flex relative py-0.5 pl-2 text-sm border-l border-neutral-300 dark:border-neutral-700"
-    :to="article._path"
+    :to="article.path"
   >
     <UPopover
       v-if="article.icon"

apps/web/app/components/wiki/ArticleLink.vue

@@ -2,7 +2,7 @@
   <header
     class="fixed w-full top-0 z-40 shadow backdrop-blur border-b border-neutral-200 dark:border-neutral-800 bg-neutral-100/75 dark:bg-neutral-900/75"
     :class="{
-      '!bg-neutral-100 dark:!bg-neutral-900': dropdown
+      'bg-neutral-100! dark:bg-neutral-900!': dropdown
     }"
   >
     <div class="container flex h-16 m-auto px-4 justify-between items-center">
@@ -61,7 +61,7 @@
       <div class="container text-center">
         You are viewing the wiki for an older version.
         <NuxtLink
-          class="font-bold !text-warning hover:!underline underline-offset-4"
+          class="font-bold text-warning! hover:underline! underline-offset-4"
           :to="latestURL"
         >
           View Latest ({{ getWikiLatestVersion() }})

apps/web/app/components/wiki/Header.vue

@@ -11,7 +11,7 @@
           class="w-full"
           trailing-icon="i-heroicons-chevron-down-20-solid"
         >
-          <UAvatar class="flex-shrink-0" size="2xs" :src="mod.logo" />
+          <UAvatar class="shrink-0" size="2xs" :src="mod.logo" />
           <span class="w-full text-left">
             {{ mod.name }}
           </span>
@@ -41,7 +41,7 @@
           class="flex items-center gap-1 truncate"
         >
           <ArticleLink :article="article" />
-          <small class="capitalize opacity-80">- {{ article._dir }}</small>
+          <small class="text-muted">- {{ article.category }}</small>
         </div>
       </div>