feat: add navigation

.eslintrc.json

@@ -7,6 +7,14 @@
   "extends": ["eslint:recommended", "plugin:vue/vue3-essential", "@nuxt/eslint-config"],
   "plugins": ["vue"],
   "rules": {
-    "quote-props": ["error", "as-needed"]
+    "quote-props": ["error", "as-needed"],
+    "vue/html-self-closing": [
+      "error",
+      {
+        "html": {
+          "void": "always"
+        }
+      }
+    ]
   }
 }

app.vue

@@ -4,6 +4,7 @@ import FooterComponent from './components/FooterComponent.vue';
 import HeaderComponent from './components/HeaderComponent.vue';
 
 const { seo } = useAppConfig();
+const route = useRoute();
 
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation());
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
@@ -48,13 +49,33 @@ useSeoMeta({
 });
 
 provide('navigation', navigation);
+
+const links = computed(() => {
+  return [
+    {
+      label: 'Build',
+      to: '/build/quick-start',
+      active: route.path.startsWith('/build'),
+    },
+    {
+      label: 'ZK Stack',
+      to: '/zk-stack',
+      active: route.path.startsWith('/zk-stack'),
+    },
+    {
+      label: 'External Node',
+      to: '/external-node',
+      active: route.path.startsWith('/external-node'),
+    },
+  ];
+});
 </script>
 
 <template>
   <div>
     <NuxtLoadingIndicator />
 
-    <HeaderComponent />
+    <HeaderComponent :links />
 
     <UMain>
       <NuxtLayout>

components/HeaderComponent.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types';
+import type { Link } from '@nuxt/ui-pro/types';
+
+defineProps<{
+  links: Link[];
+}>();
 
 const navigation = inject<NavItem[]>('navigation', []);
 
 const { header } = useAppConfig();
 </script>
 
 <template>
-  <UHeader>
+  <UHeader :links>
     <template #logo>
       <template v-if="header?.logo?.dark || header?.logo?.light">
         <UColorModeImage v-bind="{ class: 'h-6 w-auto', ...header?.logo }" />
@@ -22,17 +27,10 @@ const { header } = useAppConfig();
       </template>
     </template>
 
-    <template
-      v-if="header?.search"
-      #center
-    >
-      <UContentSearchButton class="hidden lg:flex" />
-    </template>
-
     <template #right>
       <UContentSearchButton
         v-if="header?.search"
-        :label="null"
+        :label="undefined"
         class="lg:hidden"
       />
 
@@ -45,6 +43,8 @@ const { header } = useAppConfig();
           v-bind="{ color: 'gray', variant: 'ghost', ...link }"
         />
       </template>
+
+      <UContentSearchButton class="hidden max-w-[180px] lg:flex" />
     </template>
 
     <template #panel>

components/content/ContentSwitcher.vue

@@ -8,9 +8,11 @@ function onTabChange(index: number) {
   selectedIndex.value = index;
 }
 const route = useRoute();
-// This splits the path into segments and takes the first one
-// TODO: This is a temporary solution, we need to find a better way to get the base path
-const basePath = route.path.split('/')[1];
+const basePath = computed(() => {
+  const path = route.path.split('/');
+  path.pop();
+  return path.join('/');
+});
 </script>
 
 <template>
@@ -26,12 +28,12 @@ const basePath = route.path.split('/')[1];
       :key="item.partial"
     >
       <ContentQuery
-        v-slot="{ data }"
-        :path="basePath"
+        v-slot="dataQuery"
+        :path="`${basePath}/${item.partial}`"
         find="one"
-        :where="{ _partial: true, _path: { $icontains: item.partial } }"
+        :where="{ _partial: true }"
       >
-        <ContentRenderer :value="data" />
+        <ContentRenderer :value="dataQuery.data" />
       </ContentQuery>
     </div>
     <UDivider />

pages/[...slug].vue → components/layout/DocsBase.vue

@@ -2,15 +2,9 @@
 import type { NavItem } from '@nuxt/content/types';
 import { withoutTrailingSlash } from 'ufo';
 
-definePageMeta({
-  layout: 'docs',
-});
-
 const route = useRoute();
-const { toc, seo } = useAppConfig();
-
+const { seo } = useAppConfig();
 const navigation = inject<Ref<NavItem[]>>('navigation', ref([]));
-
 const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne());
 
 if (!page.value) {
@@ -19,7 +13,11 @@ if (!page.value) {
 
 const { data: surround }: any = await useAsyncData(`${route.path}-surround`, () =>
   queryContent()
-    .where({ _extension: 'md', navigation: { $ne: false } })
+    .where({
+      _partial: false,
+      _extension: 'md',
+      navigation: { $ne: false },
+    })
     .only(['title', 'description', '_path'])
     .findSurround(withoutTrailingSlash(route.path))
 );
@@ -33,31 +31,11 @@ useSeoMeta({
 
 defineOgImage({
   component: 'Docs',
-  title: page.value.title,
-  description: page.value.description,
 });
 
 const breadcrumb = computed(() =>
   mapContentNavigation(findPageBreadcrumb(navigation!.value, page.value)).map(({ label }) => ({ label }))
 );
-
-const links = computed(() =>
-  [
-    toc?.bottom?.edit && {
-      icon: 'i-heroicons-pencil-square',
-      label: 'Edit this page',
-      to: `${toc.bottom.edit}/${page?.value?._file}`,
-      target: '_blank',
-    },
-    toc?.bottom?.feedback && {
-      icon: 'i-heroicons-chat-bubble-oval-left-ellipsis',
-      label: 'Share feedback',
-      to: `${toc.bottom.feedback}&title=Feedback for ${page?.value?.title}&body=Page: ${page?.value?._path}`,
-      target: '_blank',
-    },
-    ...(toc?.bottom?.links || []),
-  ].filter(Boolean)
-);
 </script>
 
 <template>
@@ -87,30 +65,7 @@ const links = computed(() =>
       v-if="page.toc !== false"
       #right
     >
-      <UContentToc
-        :title="toc?.title"
-        :links="page.body?.toc?.links"
-      >
-        <template
-          v-if="toc?.bottom"
-          #bottom
-        >
-          <div
-            class="hidden space-y-6 lg:block"
-            :class="{ '!mt-6': page.body?.toc?.links?.length }"
-          >
-            <UDivider
-              v-if="page.body?.toc?.links?.length"
-              type="dashed"
-            />
-
-            <UPageLinks
-              :title="toc.bottom.title"
-              :links="links"
-            />
-          </div>
-        </template>
-      </UContentToc>
+      <LayoutToc :page />
     </template>
   </UPage>
 </template>

components/layout/Toc.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { ParsedContent } from '@nuxt/content/types';
+
+const { toc } = useAppConfig();
+
+const props = defineProps<{
+  page: ParsedContent;
+}>();
+
+const links = computed(() =>
+  [
+    toc?.bottom?.edit && {
+      icon: 'i-heroicons-pencil-square',
+      label: 'Edit this page',
+      to: `${toc.bottom.edit}/${props.page?.value?._file}`,
+      target: '_blank',
+    },
+    toc?.bottom?.feedback && {
+      icon: 'i-heroicons-chat-bubble-oval-left-ellipsis',
+      label: 'Share feedback',
+      to: `${toc.bottom.feedback}&title=Feedback for ${props.page?.value?.title}&body=Page: ${props.page?.value?._path}`,
+      target: '_blank',
+    },
+    ...(toc?.bottom?.links || []),
+  ].filter(Boolean)
+);
+</script>
+
+<template>
+  <UContentToc
+    :title="toc?.title"
+    :links="page.body?.toc?.links"
+  >
+    <template
+      v-if="toc?.bottom"
+      #bottom
+    >
+      <div
+        class="hidden space-y-6 lg:block"
+        :class="{ '!mt-6': page.body?.toc?.links?.length }"
+      >
+        <UDivider
+          v-if="page.body?.toc?.links?.length"
+          type="dashed"
+        />
+
+        <UPageLinks
+          :title="toc.bottom.title"
+          :links="links"
+        />
+      </div>
+    </template>
+  </UContentToc>
+</template>

content/10.quick-start/00.index.md → content/00.build/10.quick-start/00.index.md

@@ -165,7 +165,7 @@ To deploy contracts, you'll need to securely add your wallet's private key to th
 
 You should now have a fully working local environment to build new projects on zkSync!
 
-- Continue to [Hello zkSync!](/quick-start/hello-zksync) to begin the series on building a crowdfunding campaign for Zeek.
+- Continue to [Hello zkSync!](/build/quick-start/hello-zksync) to begin the series on building a crowdfunding campaign for Zeek.
 <!-- TODO: add a link to other guides -->
 - This setup provides you everything you need to build in zkSync.
 You can skip on to creating your own projects using `zksync-cli` with your fully set up local dev environment.

content/10.quick-start/10.hello-zksync.md → content/00.build/10.quick-start/10.hello-zksync.md

@@ -20,7 +20,7 @@ Let's dive in and start your developer journey on zkSync!
 
 This Quickstart series requires some initial setup of tools to elevate your
 development experience building for zkSync.
-Make sure to go through the setup provided in the initial [Getting Started](/quick-start) section.
+Make sure to go through the setup provided in the initial [Getting Started](/build/quick-start) section.
 
 Select the framework you want to get started using zkSync Era with.
 
@@ -49,7 +49,7 @@ Having successfully deployed your first contract on zkSync, you're well on your
 a proficient zkSync developer. To expand your expertise:
 
 - **Explore Contract Factories:** Enhance your project by building a contract factory
-for the `CrowdfundingCampaign` contract in the [next guide](/quick-start/contract-factory). This will allow you to efficiently
+for the `CrowdfundingCampaign` contract in the [next guide](/build/quick-start/contract-factory). This will allow you to efficiently
 manage multiple crowdfunding campaigns, each with its own unique parameters.
 - **Dive Deeper into zkSync Features:** Investigate advanced zkSync features such as account abstraction,
 and paymasters.

content/10.quick-start/30.testing.md → content/00.build/10.quick-start/30.testing.md

@@ -47,7 +47,7 @@ that enhance the testing process.
 With a solid foundation in contract testing, you're well-equipped to advance your zkSync
 development journey. Consider the following steps to further your expertise:
 
-- **Upgradeability**: Delve into the [next guide](/quick-start/upgrading) focusing on contract upgradability.
+- **Upgradeability**: Delve into the [next guide](/build/quick-start/upgrading) focusing on contract upgradability.
 Learning to make your contracts upgradeable will enable you to update and improve your smart contracts
 over time without losing state or funds.
 - **Advanced zkSync Integrations:** Explore deeper into zkSync's ecosystem by

content/10.quick-start/40.upgrading.md → content/00.build/10.quick-start/40.upgrading.md

@@ -46,7 +46,7 @@ functionalities evolve. This approach provides a resilient framework for your dA
 
 ## Next Steps
 
-- **Exploring Paymasters:** Continue on to the next guide focused on [using paymasters](/quick-start/paymaster)
+- **Exploring Paymasters:** Continue on to the next guide focused on [using paymasters](/build/quick-start/paymaster)
 with your smart contracts. Paymasters abstract gas payments in transactions,
 offering new models for transaction fee management and enhancing user experience in dApps.
 - **Advanced zkSync Integrations:** Explore deeper into zkSync's ecosystem by

content/10.quick-start/_deploy_factory/_foundry_deploy_contract_factory.md → content/00.build/10.quick-start/_deploy_factory/_foundry_deploy_contract_factory.md

@@ -12,7 +12,7 @@ git checkout db/deploy-contract-factory
 
 ## Set up your wallet
 
-:display-partial{path="quick-start/_partials/_setup-wallet"}
+:display-partial{path="build/quick-start/_partials/_setup-wallet"}
 
 ---
 

content/10.quick-start/_deploy_factory/_hardhat_deploy_contract_factory.md → content/00.build/10.quick-start/_deploy_factory/_hardhat_deploy_contract_factory.md

@@ -35,7 +35,7 @@ bun install
 
 ## Set up your wallet
 
-:display-partial{path="quick-start/_partials/_setup-wallet"}
+:display-partial{path="build/quick-start/_partials/_setup-wallet"}
 
 ---
 

content/10.quick-start/_hello-zksync/_foundry_deploy_contract.md → content/00.build/10.quick-start/_hello-zksync/_foundry_deploy_contract.md

@@ -6,7 +6,7 @@ title: Foundry | Deploy Contract
 
 ## Set up your wallet
 
-:display-partial{path = "/quick-start/_partials/_setup-wallet"}
+:display-partial{path = "/build/quick-start/_partials/_setup-wallet"}
 
 ## Compile your first contract
 

content/10.quick-start/_hello-zksync/_hardhat_deploy_contract.md → content/00.build/10.quick-start/_hello-zksync/_hardhat_deploy_contract.md

@@ -36,7 +36,7 @@ bun install
 
 ## Set up your wallet
 
-:display-partial{path="quick-start/_partials/_setup-wallet"}
+:display-partial{path="build/quick-start/_partials/_setup-wallet"}
 
 ## Compile the CrowdfundingCampaign.sol contract
 

content/10.quick-start/_partials/_setup-wallet.md → content/00.build/10.quick-start/_partials/_setup-wallet.md

@@ -5,6 +5,6 @@ title: Set up your wallet
 Deploying contracts on the zkSync Sepolia testnet requires having testnet ETH.
 If you're working within the local development environment,
 you can utilize pre-configured rich wallets and skip this step.
-For testnet deployments, you should have your wallet funded from the [previous step](/quick-start#fund-your-wallet).
+For testnet deployments, you should have your wallet funded from the [previous step](/build/quick-start#fund-your-wallet).
 
-Ensure your project is configured to [use your wallet via the `.env` file](/quick-start#fund-your-wallet).
+Ensure your project is configured to [use your wallet via the `.env` file](/build/quick-start#fund-your-wallet).