Upgrade to Nuxt Content 3

.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/docs/Pagination.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/SidebarContent.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/global/DocsSectionList.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/wiki/ArticleLink.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/Header.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/ListingSidebarContent.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>
 

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

@@ -10,7 +10,7 @@
           alt=""
         />
         <div class="flex flex-col justify-center gap-1 mx-2">
-          <h2 class="text-lg">
+          <h2 class="text-xl!">
             {{ mod.title }}
           </h2>
           <span v-if="!articles[mod.path]" class="opacity-80">
@@ -31,13 +31,17 @@ const { version, isLatestVersion } = useWikiMetadata();
 
 const { data } = await useAsyncData(
   `wiki-mod-directory/${version.value}`,
-  () => queryContent("wiki", version.value).only(["_path"]).find(),
+  () =>
+    queryCollection("wiki")
+      .where("path", "LIKE", createWikiPathSQL(version.value))
+      .select("path")
+      .all(),
   { watch: [version] }
 );
 
 const articles = computed(() =>
   data.value.reduce((acc, val) => {
-    const parts = val._path.split("/");
+    const parts = val.path.split("/");
 
     if (!acc[parts[3]]) {
       acc[parts[3]] = 0;

apps/web/app/components/wiki/Pagination.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"
@@ -45,11 +45,15 @@ const props = defineProps({
 const { version, mod, category, isLatestVersion } = useWikiMetadata();
 
 const { data } = await useAsyncData(
-  "wiki/" + props.current._path + "/pagination",
+  "wiki/" + props.current.path + "/pagination",
   () =>
-    queryContent("wiki", version.value, mod.value.mod_id, category.value)
-      .sort({ sort: 1, $numeric: true })
-      .findSurround(props.current._path)
+    queryCollectionItemSurroundings("wiki", props.current.path)
+      .where(
+        "path",
+        "LIKE",
+        createWikiPathSQL(version.value, mod.value.mod_id, category.value)
+      )
+      .order("sort", "ASC")
 );
 
 const previous = computed(() => data.value[0]);
@@ -58,22 +62,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 = removeWikiVersionFromPath(
-      previous.value._path,
+    previous.value.path = removeWikiVersionFromPath(
+      previous.value.path,
       version.value
     );
   }
 
   if (next.value) {
-    next.value._path = removeWikiVersionFromPath(
-      next.value._path,
-      version.value
-    );
+    next.value.path = removeWikiVersionFromPath(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/wiki/SidebarContent.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>
@@ -56,8 +56,8 @@
           v-for="article in articles[category]"
           :article="article"
           :class="{
-            '!text-primary-500 dark:!text-primary-400 font-semibold':
-              article._path === route.path,
+            'text-primary-500! dark:text-primary-400! font-semibold':
+              article.path === route.path,
             'first:mt-2': true
           }"
         />

apps/web/app/composables/api.ts

@@ -15,7 +15,7 @@ export const useAPI = async (
     const toast = useToast();
 
     toast.add({
-      color: "red",
+      color: "error",
       title: "An unknown error occurred.",
       description: "Please try again later."
     });