Update docs/wiki metadata composables

apps/web/app/components/ContentLinks.vue

@@ -50,8 +50,8 @@ const props = defineProps({
   page: Object
 });
 
-const { mod: modID } = useDocsMetadata();
-const mod = getMod(modID.value);
+const { mod } = useDocsMetadata();
+
 const editURL = computed(
   () =>
     `https://github.com/blakesmods/web/edit/main/apps/web/content${props.page._path}.${props.page._extension}`

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

@@ -15,9 +15,9 @@
 const { version, mod, isLatestVersion } = useDocsMetadata();
 
 const { data } = await useAsyncData(
-  `${mod.value}-${version.value}-docs-listing`,
+  `${mod.value?.mod_id}-${version.value}-docs-listing`,
   () =>
-    queryContent("docs", version.value, mod.value)
+    queryContent("docs", version.value, mod.value?.mod_id ?? "")
       .only(["title", "_path"])
       .find()
 );

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-4 mr-2">
-    <UFormField v-if="currentMod" label="Select Mod">
+    <UFormField v-if="mod" label="Select Mod">
       <UDropdownMenu
         class="w-full"
         :items="mods"
@@ -11,9 +11,9 @@
           class="w-full"
           trailing-icon="i-heroicons-chevron-down-20-solid"
         >
-          <UAvatar class="flex-shrink-0" size="2xs" :src="currentMod.logo" />
+          <UAvatar class="flex-shrink-0" size="2xs" :src="mod.logo" />
           <span class="w-full text-left">
-            {{ currentMod.name }}
+            {{ mod.name }}
           </span>
         </UButton>
       </UDropdownMenu>
@@ -43,17 +43,14 @@
       </div>
 
       <Alert
-        v-if="currentMod?.has_docs"
+        v-if="mod?.has_docs"
         title="Modpack Developers!"
         icon="i-heroicons-information-circle-solid"
       >
         <span class="flex flex-col gap-4">
           This wiki is for gameplay documentation. For advanced configuration,
           check out the docs.
-          <UButton
-            class="inline-flex mr-auto"
-            :to="`/docs/${currentMod.mod_id}`"
-          >
+          <UButton class="inline-flex mr-auto" :to="`/docs/${mod.mod_id}`">
             View Docs
           </UButton>
         </span>
@@ -70,8 +67,6 @@ const { version, mod, isLatestVersion } = useWikiMetadata();
 const versions = useWikiVersions();
 const mods = useWikiMods();
 
-const currentMod = computed(() => getMod(mod.value));
-
 const pages = await useWikiModArticles();
 
 const recent = computed(() =>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-4 mr-2">
-    <UFormField v-if="currentMod" label="Select Mod">
+    <UFormField v-if="mod" label="Select Mod">
       <UDropdownMenu
         class="w-full"
         :items="mods"
@@ -11,9 +11,9 @@
           class="w-full"
           trailing-icon="i-heroicons-chevron-down-20-solid"
         >
-          <UAvatar class="flex-shrink-0" size="2xs" :src="currentMod.logo" />
+          <UAvatar class="flex-shrink-0" size="2xs" :src="mod.logo" />
           <span class="w-full text-left">
-            {{ currentMod.name }}
+            {{ mod.name }}
           </span>
         </UButton>
       </UDropdownMenu>
@@ -71,12 +71,11 @@ import ArticleLink from "~/components/wiki/ArticleLink.vue";
 
 const route = useRoute();
 
-const { version, category, mod } = useWikiMetadata();
+const { version, mod, category } = useWikiMetadata();
 const versions = useWikiVersions();
 const mods = useWikiMods();
 const articles = await useWikiSidebarLinks();
 
-const currentMod = computed(() => getMod(mod.value));
 const categories = computed(() => Object.keys(articles.value));
 
 const opened = ref([category.value]);

apps/web/app/composables/docs.ts

@@ -4,9 +4,9 @@ export const useDocsMetadata = () => {
   const params = computed(() => parseDocsRouteParams(route.params));
 
   return {
-    version: computed(() => params.value.version),
-    mod: computed(() => params.value.mod),
-    slug: computed(() => params.value.slug),
+    version: computed(() => params.value.version ?? ""),
+    mod: computed(() => getMod(params.value.mod ?? "")),
+    slug: computed(() => params.value.slug ?? ""),
     isLatestVersion: computed(
       () => params.value.version === getDocsLatestVersion()
     )
@@ -17,7 +17,12 @@ export const useDoc = async () => {
   const route = useRoute();
   const { version, mod, slug } = useDocsMetadata();
   const { data: page } = await useAsyncData("doc/" + route.path, () =>
-    queryContent("docs", version.value, mod.value, slug.value).findOne()
+    queryContent(
+      "docs",
+      version.value,
+      mod.value?.mod_id ?? "",
+      slug.value
+    ).findOne()
   );
 
   return page;
@@ -30,7 +35,12 @@ export const useDocsLatestArticleURL = async () => {
   const { data } = await useAsyncData(
     () => `docs-latest-article-url-${route.path}`,
     () =>
-      queryContent("docs", getDocsLatestVersion(), mod.value, slug.value)
+      queryContent(
+        "docs",
+        getDocsLatestVersion(),
+        mod.value?.mod_id ?? "",
+        slug.value
+      )
         .limit(1)
         .count(),
     { watch: [version, mod, slug] }
@@ -42,10 +52,10 @@ export const useDocsLatestArticleURL = async () => {
     }
 
     if (data.value !== 1 || !slug.value) {
-      return `/docs/${mod.value}`;
+      return `/docs/${mod.value.mod_id}`;
     }
 
-    return `/docs/${mod.value}/${slug.value}`;
+    return `/docs/${mod.value.mod_id}/${slug.value}`;
   });
 };
 
@@ -99,7 +109,7 @@ export const useDocsVersions = () => {
           const { mod, slug } = useDocsMetadata();
 
           const doc = await queryContent(
-            `/docs/${v}/${mod.value}/${slug.value}`
+            `/docs/${v}/${mod.value?.mod_id}/${slug.value}`
           )
             .limit(1)
             .count();
@@ -108,20 +118,22 @@ export const useDocsVersions = () => {
             // the first is the latest and doesn't need the version in the URL
             const link =
               i === 0
-                ? `/docs/${mod.value}/${slug.value}`
-                : `/docs/${v}/${mod.value}/${slug.value}`;
+                ? `/docs/${mod.value?.mod_id}/${slug.value}`
+                : `/docs/${v}/${mod.value?.mod_id}/${slug.value}`;
 
             await router.push(link);
           } else {
-            const doc = await queryContent(`/docs/${v}/${mod.value}`)
+            const doc = await queryContent(`/docs/${v}/${mod.value?.mod_id}`)
               .limit(1)
               .count();
 
             // if there is no page for this mod, we'll just redirect to the top level page
             if (doc > 0) {
               // the first is the latest and doesn't need the version in the URL
               const link =
-                i === 0 ? `/docs/${mod.value}` : `/docs/${v}/${mod.value}`;
+                i === 0
+                  ? `/docs/${mod.value?.mod_id}`
+                  : `/docs/${v}/${mod.value?.mod_id}`;
 
               await router.push(link);
             } else {

apps/web/app/composables/wiki.ts

@@ -4,10 +4,10 @@ export const useWikiMetadata = () => {
   const params = computed(() => parseWikiRouteParams(route.path));
 
   return {
-    version: computed(() => params.value.version),
-    mod: computed(() => params.value.mod),
-    category: computed(() => params.value.category),
-    slug: computed(() => params.value.slug),
+    version: computed(() => params.value.version ?? ""),
+    mod: computed(() => getMod(params.value.mod ?? "")),
+    category: computed(() => params.value.category ?? ""),
+    slug: computed(() => params.value.slug ?? ""),
     isLatestVersion: computed(
       () => params.value.version === getWikiLatestVersion()
     )
@@ -24,7 +24,7 @@ export const useWiki = async () => {
       queryContent(
         "wiki",
         version.value,
-        mod.value,
+        mod.value?.mod_id ?? "",
         category.value,
         slug.value
       ).findOne()
@@ -35,12 +35,12 @@ export const useWiki = async () => {
 
 export const useWikiModArticles = async () => {
   const route = useRoute();
-  const { mod, version } = useWikiMetadata();
+  const { version, mod } = useWikiMetadata();
 
   const { data: pages } = await useAsyncData(
     () => `wiki-mod-articles-${route.path}`,
     () =>
-      queryContent("wiki", version.value, mod.value)
+      queryContent("wiki", version.value, mod.value?.mod_id ?? "")
         .sort({ sort: 1, $numeric: true })
         .find(),
     { watch: [version, mod] }
@@ -59,7 +59,7 @@ export const useWikiLatestArticleURL = async () => {
       queryContent(
         "wiki",
         getWikiLatestVersion(),
-        mod.value,
+        mod.value?.mod_id ?? "",
         category.value,
         slug.value
       )
@@ -74,10 +74,10 @@ export const useWikiLatestArticleURL = async () => {
     }
 
     if (data.value !== 1 || !category.value || !slug.value) {
-      return `/wiki/${mod.value}`;
+      return `/wiki/${mod.value.mod_id}`;
     }
 
-    return `/wiki/${mod.value}/${category.value}/${slug.value}`;
+    return `/wiki/${mod.value.mod_id}/${category.value}/${slug.value}`;
   });
 };
 
@@ -89,7 +89,7 @@ export const useWikiSidebarLinks = async () => {
   const { data } = await useAsyncData(
     () => `wiki-sidebar-${route.path}`,
     () =>
-      queryContent("wiki", version.value, mod.value)
+      queryContent("wiki", version.value, mod.value?.mod_id ?? "")
         .only(["title", "category", "icon", "_path", "_dir"])
         .sort({ sort: 1, $numeric: true })
         .find(),
@@ -204,7 +204,7 @@ export const useWikiVersions = () => {
           const { mod, category, slug } = useWikiMetadata();
 
           const doc = await queryContent(
-            `/wiki/${v}/${mod.value}/${category.value}/${slug.value}`
+            `/wiki/${v}/${mod.value?.mod_id}/${category.value}/${slug.value}`
           )
             .limit(1)
             .count();
@@ -213,20 +213,22 @@ export const useWikiVersions = () => {
             // the first is the latest and doesn't need the version in the URL
             const link =
               i === 0
-                ? `/wiki/${mod.value}/${category.value}/${slug.value}`
-                : `/wiki/${v}/${mod.value}/${category.value}/${slug.value}`;
+                ? `/wiki/${mod.value?.mod_id}/${category.value}/${slug.value}`
+                : `/wiki/${v}/${mod.value?.mod_id}/${category.value}/${slug.value}`;
 
             await router.push(link);
           } else {
-            const doc = await queryContent(`/wiki/${v}/${mod.value}`)
+            const doc = await queryContent(`/wiki/${v}/${mod.value?.mod_id}`)
               .limit(1)
               .count();
 
             // if there is no page for this mod, we'll just redirect to the top level page
             if (doc > 0) {
               // the first is the latest and doesn't need the version in the URL
               const link =
-                i === 0 ? `/wiki/${mod.value}` : `/wiki/${v}/${mod.value}`;
+                i === 0
+                  ? `/wiki/${mod.value?.mod_id}`
+                  : `/wiki/${v}/${mod.value?.mod_id}`;
 
               await router.push(link);
             } else {

apps/web/app/pages/wiki/[[version]]/[mod]/[category]/[slug].vue

@@ -101,16 +101,15 @@ definePageMeta({
 const route = useRoute();
 const toggleSidebar = useEventBus("wiki:toggleSidebar");
 
-const { version, mod: modID, isLatestVersion } = useWikiMetadata();
-const mod = getMod(modID.value);
+const { version, mod, isLatestVersion } = useWikiMetadata();
 
 const page = await useWiki();
 
 if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: "Page Not Found" });
 }
 
-const title = `${page.value.title} · ${mod.name} Wiki`;
+const title = `${page.value.title} · ${mod.value.name} Wiki`;
 const description = parseDescription(page.value);
 
 useSeoMeta({
@@ -136,7 +135,7 @@ const breadcrumbs = computed(() =>
       label: version.value
     },
     pathParts.length > 3 && {
-      label: mod.name,
+      label: mod.value.name,
       to: pathParts.length > 4 ? pathParts.slice(0, 4).join("/") : undefined
     },
     pathParts.length > 4 && {

apps/web/app/pages/wiki/[[version]]/[mod]/index.vue

@@ -50,15 +50,14 @@ definePageMeta({
 
 const toggleSidebar = useEventBus("wiki:toggleSidebar");
 
-const { version, mod: modID, isLatestVersion } = useWikiMetadata();
+const { version, mod, isLatestVersion } = useWikiMetadata();
 
-const mod = getMod(modID.value);
 if (!mod) {
   throw createError({ statusCode: 404, statusMessage: "Page Not Found" });
 }
 
-const title = mod.name + " Wiki";
-const description = `View wiki articles about ${mod.name}.`;
+const title = mod.value.name + " Wiki";
+const description = `View wiki articles about ${mod.value.name}.`;
 
 useSeoMeta({
   title,
@@ -102,7 +101,7 @@ const breadcrumbs = computed(() => [
     label: version.value
   },
   {
-    label: mod.name
+    label: mod.value.name
   }
 ]);
 

apps/web/app/utils/docs.ts

@@ -5,9 +5,11 @@ export const getDocsVersions = () => versions;
 export const getDocsLatestVersion = () => versions[0]!;
 
 export function parseDocsRouteParams(params: any) {
-  let version = params.version;
-  let mod = params.mod;
-  let slug = Array.isArray(params.slug) ? params.slug.join("/") : params.slug;
+  let version: string | undefined = params.version;
+  let mod: string | undefined = params.mod;
+  let slug: string | undefined = Array.isArray(params.slug)
+    ? params.slug.join("/")
+    : params.slug;
 
   // the index page doesn't have a slug or version, so we don't want to move
   // the mod id to the slug in this case

apps/web/app/utils/mods.ts

@@ -202,7 +202,7 @@ const mods: Mod[] = [
   }
 ];
 
-export const getMod = (id: ModID) => mods.find(m => m.mod_id === id);
+export const getMod = (id: ModID | string) => mods.find(m => m.mod_id === id);
 export const getMods = () => mods;
 export const getModsExcept = (modIDs: ModID[]) =>
   mods.filter(m => !modIDs.includes(m.mod_id));

apps/web/app/utils/wiki.ts

@@ -12,7 +12,10 @@ export const getWikiCategoryName = (category: keyof typeof categories) =>
 export function parseWikiRouteParams(path: string) {
   const parts = path.split("/").slice(1);
 
-  let version: string, mod: string, category: string, slug: string;
+  let version: string | undefined,
+    mod: string | undefined,
+    category: string | undefined,
+    slug: string | undefined;
 
   // the latest version won't have the version in the url, which means it will
   // be the mod id