feat: update layout for algolia search (#203)

# Description

Update layout for algolia search crawler

components/layout/DocsBase.vue

@@ -3,6 +3,7 @@ import type { NavItem } from '@nuxt/content/types';
 import { withoutTrailingSlash } from 'ufo';
 
 const route = useRoute();
+const category = useCategory();
 const navigation = inject<Ref<NavItem[]>>('navigation', ref([]));
 const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne());
 
@@ -50,27 +51,33 @@ const breadcrumb = computed(() => {
 
 <template>
   <UPage v-if="page">
-    <UPageHeader
-      :title="page.title"
-      :description="page.description"
-      :links="page.links"
-    >
-      <template #headline>
-        <UBreadcrumb :links="breadcrumb" />
-      </template>
-    </UPageHeader>
-
-    <UPageBody prose>
-      <ContentRenderer
-        v-if="page.body"
-        :value="page"
-      />
+    <article>
+      <span
+        id="docsearch-lv0"
+        hidden
+        >{{ category }}</span
+      >
+      <UPageHeader
+        :title="page.title"
+        :description="page.description"
+        :links="page.links"
+      >
+        <template #headline>
+          <UBreadcrumb :links="breadcrumb" />
+        </template>
+      </UPageHeader>
 
-      <hr v-if="surround?.length" />
+      <UPageBody prose>
+        <ContentRenderer
+          v-if="page.body"
+          :value="page"
+        />
 
-      <UContentSurround :surround="surround" />
-    </UPageBody>
+        <hr v-if="surround?.length" />
 
+        <UContentSurround :surround="surround" />
+      </UPageBody>
+    </article>
     <template
       v-if="page.toc !== false"
       #right

composables/useCategory.ts

@@ -0,0 +1,37 @@
+const defaultCategory = 'ZKsync Docs';
+
+// Order by most specific to least specific.
+// e.g. `/js/ethers/api/v5` before `/js/ethers`
+const categories = [
+  ['/build/start-coding/quick-start', 'Quick Start ZKsync'],
+  ['/build/start-coding/zksync-101', 'ZKsync 101 Tutorial'],
+  ['/build/zksync-cli', 'ZKsync CLI'],
+  ['/build/tooling/hardhat', 'Hardhat'],
+  ['/build/tooling/foundry', 'Foundry'],
+  ['/build/developer-reference', 'Developer Reference'],
+  ['/build/api-reference', 'ZKsync API'],
+  ['/build/resources', 'Resources'],
+  ['/build', 'Build'],
+  ['/zk-stack/running-a-zk-chain', 'Running a ZK Chain'],
+  ['/zk-stack', 'ZK Stack'],
+  ['/zksync-node', 'ZKsync Node'],
+  ['/ecosystem', 'Ecosystem'],
+] 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;
+};

content/00.build/40.tooling/20.hardhat/10.getting-started.md

@@ -356,4 +356,4 @@ The template project contains another script to interact with the contract.
 
 - To learn more about the ZKsync Hardhat plugins check out the [plugins documentation](/build/tooling/hardhat/getting-started).
 - If you want to know more about how to interact with ZKsync using Javascript,
-check out the [zksync-ethers Javascript SDK documentation](https://sdk.zksync.io/js/ethers/v6/getting-started).
+check out the [zksync-ethers Javascript SDK documentation](https://sdk.zksync.io/js/ethers).

content/00.build/40.tooling/20.hardhat/100.hardhat-zksync-ethers.md

@@ -54,7 +54,7 @@ This plugin creates no additional tasks.
 
 This plugins adds an zksync-ethers object to the Hardhat Runtime Environment.
 
-This object has the same API as [zksync-ethers](https://sdk.zksync.io/js/ethers/v6/getting-started), with some extra Hardhat-specific functionality.
+This object has the same API as [zksync-ethers](https://sdk.zksync.io/js/ethers), with some extra Hardhat-specific functionality.
 
 ## Helpers
 

content/00.build/40.tooling/20.hardhat/20.migrating-to-zksync.md

@@ -262,7 +262,7 @@ You also need to use the `contract ABI` from the `artifacts-zk` folder to instan
 
 Apart from the same classes and methods provided by ethers, zksync-ethers includes additional methods for zksync-specific features.
 
-You can read more in the [`zksync-ethers` documentation](https://sdk.zksync.io/js/ethers/v6/getting-started).
+You can read more in the [`zksync-ethers` documentation](https://sdk.zksync.io/js/ethers).
 
 ## Verify contracts
 

content/10.zk-stack/05.concepts/10.blocks.md

@@ -56,7 +56,7 @@ The properties of an L2 block can be observed when using the `getBlock` method f
 | difficulty       | Always returns `2500000000000000` as ZKsync does not use a proof of work consensus     |
 | gasLimit         | Maximum gas allowed in this block, always returns `2^32-1`                             |
 | gasUsed          | Actual amount of gas used in this block                                                |
-| transactions     | An array of transaction objects - see [TransactionResponse interface](https://sdk.zksync.io/js/ethers/v6/types#transactionresponse)   |
+| transactions     | An array of transaction objects - see [TransactionResponse interface](https://sdk.zksync.io/js/ethers/api/v6/types#transactionresponse)   |
 | baseFeePerGas    | The base fee per gas in the style of EIP1559                                           |
 
 ::callout{icon="i-heroicons-information-circle" color="blue"}

package.json

@@ -23,9 +23,9 @@
     "vue-tsc": "^2.0.6"
   },
   "dependencies": {
-    "@matterlabs/docs-nuxt-template": "2.7.0",
+    "@matterlabs/docs-nuxt-template": "2.7.1",
     "@nuxt/content": "^2.13.2",
-    "@nuxt/eslint": "^0.3.13",
+    "@nuxt/eslint": "^0.5.3",
     "@nuxt/fonts": "^0.3.0",
     "@nuxt/image": "^1.7.0",
     "@nuxt/ui-pro": "^1.4.1",