feat: update layout for algolia search

zkSync-Community-Hub · Aug 27, 2024 · e910a7f · e910a7f
1 parent 2fbc60a
commit e910a7f
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 123 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/composables/useCategory.ts b/composables/useCategory.ts
@@ -0,0 +1,23 @@
+const defaultCategory = 'Community Code';
+
+// Order by most specific to least specific.
+// e.g. `/js/ethers/api/v5` before `/js/ethers`
+const categories = [['/tutorials', 'Community Code Guides']] as const;
+
+/**
+ * Returns the category of the current route.
+ * Primarily this is for the algolia docsearch
+ */
+export const useCategory = () => {
+  const route = useRoute();
+  const category = ref(defaultCategory);
+  // for if we ever have i18n routes, remove the language prefix
+  // const langAgnosticPath = route.path.replace(/\/\w\w(-\w\w)?\//, '');
+  for (const [path, label] of categories) {
+    if (route.path.startsWith(path)) {
+      category.value = label;
+      break;
+    }
+  }
+  return category;
+};
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
   "dependencies": {
     "@matterlabs/docs-nuxt-template": "2.7.0",
     "@nuxt/content": "^2.13.2",
-    "@nuxt/eslint": "^0.3.13",
+    "@nuxt/eslint": "^0.5.3",
     "@nuxt/fonts": "^0.5.1",
     "@nuxt/image": "^1.7.0",
     "@nuxt/ui": "^2.18.4",

diff --git a/pages/tutorials/[...slug].vue b/pages/tutorials/[...slug].vue
@@ -9,11 +9,12 @@ definePageMeta({
 
 const route = useRoute();
 const nav = inject<Ref<NavItem[]>>('navigation');
+const category = useCategory();
 
 const metadata = computed(() => {
   return nav?.value
     .find((item) => item._path === '/tutorials')
-    ?.children?.find((item) => item._path === `/tutorials/${route.params.slug[0]}`);
+    ?.children?.find((item: { _path: string }) => item._path === `/tutorials/${route.params.slug[0]}`);
 });
 const isIndex = ref(route.params.slug.length < 2);
 
@@ -65,7 +66,7 @@ const links = [
   {
     label: metadata.value?.title || 'Guide',
     collapsible: false,
-    children: metadata.value?.children?.map((item) => ({
+    children: metadata.value?.children?.map((item: { title: string; _path: string }) => ({
       label: item.title,
       to: item._path,
     })),
@@ -109,135 +110,146 @@ const communityLinks = [
           <UPageLinks :links="communityLinks" />
         </UAside>
       </template>
-
-      <UPage v-if="isIndex && metadata">
-        <UPageHeader
-          :title="page?.title"
-          :description="page?.description"
-        />
-        <div class="grid grid-cols-8 gap-4 py-5">
-          <div class="col-span-5">
-            <AuthorsList
-              class="mb-4"
-              :authors="metadata.authors"
-              :with-links="true"
-            />
-            <p>
-              {{ metadata.description }}
-            </p>
-            <template v-if="metadata.what_you_will_learn">
-              <h3 class="mt-4 text-xl font-semibold">What you'll learn:</h3>
-              <ul
-                role="list"
-                class="mt-2 list-inside list-disc space-y-1"
-              >
-                <li
-                  v-for="item in metadata.what_you_will_learn"
-                  :key="item"
+      <article>
+        <span
+          id="docsearch-lv0"
+          hidden
+          >{{ category }}</span
+        >
+        <span
+          id="docsearch-lv1"
+          hidden
+          >{{ metadata?.title }}: {{ page?.title }}</span
+        >
+        <UPage v-if="isIndex && metadata">
+          <UPageHeader
+            :title="page?.title"
+            :description="page?.description"
+          />
+          <div class="grid grid-cols-8 gap-4 py-5">
+            <div class="col-span-5">
+              <AuthorsList
+                class="mb-4"
+                :authors="metadata.authors"
+                :with-links="true"
+              />
+              <p>
+                {{ metadata.description }}
+              </p>
+              <template v-if="metadata.what_you_will_learn">
+                <h3 class="mt-4 text-xl font-semibold">What you'll learn:</h3>
+                <ul
+                  role="list"
+                  class="mt-2 list-inside list-disc space-y-1"
                 >
-                  {{ item }}
-                </li>
-              </ul>
-            </template>
-          </div>
-
-          <div class="col-span-3">
-            <UButton
-              v-if="metadata.github_repo"
-              icon="i-simple-icons-github"
-              size="sm"
-              color="white"
-              variant="solid"
-              label="GitHub"
-              target="_blank"
-              :to="metadata.github_repo"
-              :trailing="false"
-            />
-            <template v-if="metadata.tools">
-              <h3 class="my-2 text-lg font-semibold">Tools:</h3>
-              <ul
-                role="list"
-                class="list-inside list-none"
-              >
-                <li
-                  v-for="item in metadata.tools"
-                  :key="item"
+                  <li
+                    v-for="item in metadata.what_you_will_learn"
+                    :key="item"
+                  >
+                    {{ item }}
+                  </li>
+                </ul>
+              </template>
+            </div>
+
+            <div class="col-span-3">
+              <UButton
+                v-if="metadata.github_repo"
+                icon="i-simple-icons-github"
+                size="sm"
+                color="white"
+                variant="solid"
+                label="GitHub"
+                target="_blank"
+                :to="metadata.github_repo"
+                :trailing="false"
+              />
+              <template v-if="metadata.tools">
+                <h3 class="my-2 text-lg font-semibold">Tools:</h3>
+                <ul
+                  role="list"
+                  class="list-inside list-none"
                 >
-                  - {{ item }}
-                </li>
-              </ul>
-            </template>
-            <template v-if="metadata.tags">
-              <div class="mt-4 flex flex-wrap">
-                <UBadge
-                  v-for="tag in metadata.tags"
-                  :key="tag"
-                  :label="tag"
-                  color="blue"
-                  size="sm"
-                  variant="subtle"
-                  class="mb-2 mr-2"
-                />
-              </div>
-            </template>
-            <template v-if="metadata.updated">
-              <strong class="text-md my-2">Last Updated: </strong>{{ lastUpdated }}
-            </template>
+                  <li
+                    v-for="item in metadata.tools"
+                    :key="item"
+                  >
+                    - {{ item }}
+                  </li>
+                </ul>
+              </template>
+              <template v-if="metadata.tags">
+                <div class="mt-4 flex flex-wrap">
+                  <UBadge
+                    v-for="tag in metadata.tags"
+                    :key="tag"
+                    :label="tag"
+                    color="blue"
+                    size="sm"
+                    variant="subtle"
+                    class="mb-2 mr-2"
+                  />
+                </div>
+              </template>
+              <template v-if="metadata.updated">
+                <strong class="text-md my-2">Last Updated: </strong>{{ lastUpdated }}
+              </template>
+            </div>
           </div>
-        </div>
-        <UDivider icon="i-zkicon-zksync" />
-      </UPage>
-
-      <UPage>
-        <UPageHeader
-          v-if="!isIndex"
-          :title="page?.title"
-          :description="page?.description"
-        />
-
-        <UPageBody prose>
-          <ContentRenderer
-            v-if="page?.body"
-            :value="page"
+          <UDivider icon="i-zkicon-zksync" />
+        </UPage>
+
+        <UPage>
+          <UPageHeader
+            v-if="!isIndex"
+            :title="page?.title"
+            :description="page?.description"
           />
 
-          <hr
-            v-if="surround.length > 0"
-            class="mb-4"
-          />
+          <UPageBody prose>
+            <ContentRenderer
+              v-if="page?.body"
+              :value="page"
+            />
 
-          <UContentSurround
-            :surround
-            :ui="{
-              wrapper: 'grid gap-8 sm:grid-cols-2',
-              icon: {
-                prev: 'i-heroicons-arrow-left-20-solid',
-                next: 'i-heroicons-arrow-right-20-solid',
-              },
-              link: {
-                wrapper:
-                  'block px-3 py-4 border not-prose rounded-lg border-gray-200 dark:border-gray-800 hover:bg-gray-100/50 dark:hover:bg-gray-800/50 group flex gap-4 items-center even:flex-row-reverse',
+            <hr
+              v-if="surround.length > 0"
+              class="mb-4"
+            />
+
+            <UContentSurround
+              :surround
+              :ui="{
+                wrapper: 'grid gap-8 sm:grid-cols-2',
                 icon: {
+                  prev: 'i-heroicons-arrow-left-20-solid',
+                  next: 'i-heroicons-arrow-right-20-solid',
+                },
+                link: {
                   wrapper:
-                    'mb-0 inline-flex items-center rounded-full p-1.5 bg-gray-100 dark:bg-gray-800 group-hover:bg-primary/10 ring-1 ring-gray-300 dark:ring-gray-700 group-hover:ring-primary/50',
+                    'block px-3 py-4 border not-prose rounded-lg border-gray-200 dark:border-gray-800 hover:bg-gray-100/50 dark:hover:bg-gray-800/50 group flex gap-4 items-center even:flex-row-reverse',
+                  icon: {
+                    wrapper:
+                      'mb-0 inline-flex items-center rounded-full p-1.5 bg-gray-100 dark:bg-gray-800 group-hover:bg-primary/10 ring-1 ring-gray-300 dark:ring-gray-700 group-hover:ring-primary/50',
+                  },
+                  title: 'font-medium text-gray-900 dark:text-white text-[15px] mb-0',
+                  description: 'display-none',
                 },
-                title: 'font-medium text-gray-900 dark:text-white text-[15px] mb-0',
-                description: 'display-none',
-              },
-            }"
-          />
-        </UPageBody>
-
-        <template
-          v-if="page?.toc !== false"
-          #right
-        >
-          <UContentToc
-            title="Table of contents"
-            :links="page?.body?.toc?.links"
-          />
-        </template>
-      </UPage>
+              }"
+            />
+          </UPageBody>
+
+          <template
+            v-if="page?.toc !== false"
+            #right
+          >
+            <UContentToc
+              title="Table of contents"
+              :links="page?.body?.toc?.links"
+            />
+          </template>
+        </UPage>
+      </article>
     </UPage>
   </UContainer>
 </template>