Merge pull request #10 from zkSync-Community-Hub/improvements

feat: improve nav loading in content

app.vue

@@ -3,22 +3,10 @@ provideHeadlessUseId(() => useId());
 const { seo } = useAppConfig();
 
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation());
+provide('navigation', navigation);
 
 useHead({
-  meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-    {
-      name: 'keywords',
-      content:
-        'Documentation, Developers, Era, zkSync, ZK Stack, Matter Labs, rollup, ZK rollup, zero confirmation, ZKP, zero-knowledge proofs, Ethereum, crypto, blockchain, permissionless, L2, secure payments, scalable',
-    },
-    {
-      name: 'description',
-      content:
-        'zkSync Docs bring you all information you need about our protocol, APIs, SDKs, ZK Stack, and hyperchains. Start with our guides and tutorials, or go deep into our architecture and protocol specification.',
-    },
-    { name: 'author', content: 'https://matter-labs.io' },
-  ],
+  meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
   link: [{ rel: 'icon', href: '/favicon.ico' }],
   htmlAttrs: {
     lang: 'en',
@@ -29,17 +17,20 @@ useSeoMeta({
   titleTemplate: `%s - ${seo?.siteName}`,
   ogSiteName: seo?.siteName,
   ogUrl: 'https://code.zksync.io/',
+  description:
+    'Build together with the zkSync Community. Learn how to build amazing smart contracts and dApps on zkSync Era.',
   ogDescription:
-    'zkSync Docs bring you all information you need about our protocol, APIs, SDKs, ZK Stack, and hyperchains. Start with our guides and tutorials, or go deep into our architecture and protocol specification.',
+    'Build together with the zkSync Community. Learn how to build amazing smart contracts and dApps on zkSync Era.',
+  twitterTitle: `%s`,
+  twitterDescription:
+    'Build together with the zkSync Community. Learn how to build amazing smart contracts and dApps on zkSync Era.',
   twitterCard: 'summary_large_image',
   twitterSite: '@zksync',
-  twitterCreator: '@the_matter_labs',
-  twitterImageAlt: 'zkSync — Accelerating the mass adoption of crypto for personal sovereignty.',
+  twitterCreator: '@zkSyncDevs',
+  twitterImageAlt: 'Hyperscaling Ethereum with ZK tech.',
 });
 
 defineOgImageComponent('OgImageZK');
-
-provide('navigation', navigation);
 </script>
 
 <template>

content/index.yml

@@ -1,5 +1,4 @@
-title: 'zkSync Code Community'
-description: Contribute and share code for the zkSync community!
+title: 'zkSync Community Code'
 features:
   title: 'Community Contributed Guides for zkSync'
   links:

cspell-config/cspell-zksync.txt

@@ -1,6 +1,7 @@
 // zkSync-related words
 boojum
-MatterLabs
+!MatterLabs
+Matter Labs
 Zeek
 Zeeks
 zkcast

nuxt.config.ts

@@ -11,4 +11,9 @@ export default defineNuxtConfig({
       app: 'code',
     },
   },
+  content: {
+    navigation: {
+      fields: ['authors', 'tags', 'summary', 'updated', 'tools', 'featured', 'description'],
+    },
+  },
 });

pages/index.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
+import type { NavItem } from '@nuxt/content/types';
+
 const { data: page } = await useAsyncData('index', () => queryContent('/').findOne());
 
-const { data: guides } = await useAsyncData('tutorials', () =>
-  queryContent('tutorials').where({ _extension: 'yml' }).find()
-);
+const navigation = inject<Ref<NavItem[]>>('navigation');
+
+const guides = computed(() => {
+  const tutorialPath = navigation?.value.find((item) => item._path === '/tutorials') ?? { children: [] };
+
+  return tutorialPath.children;
+});
 
 useSeoMeta({
   titleTemplate: '',
-  title: page.value.title,
-  ogTitle: page.value.title,
-  description: page.value.description,
-  ogDescription: page.value.description,
+  title: page.value?.title,
 });
 </script>
 
@@ -43,7 +46,7 @@ useSeoMeta({
         <SiteLink
           v-for="(guide, index) of guides"
           :key="index"
-          :to="`/tutorials/${guide._dir}`"
+          :to="guide._path"
           class="hover:border-zkPurple-300 rounded-lg border-2 border-transparent transition-colors duration-200 ease-in-out"
         >
           <UCard>

pages/tutorials/[...slug].vue

@@ -1,25 +1,30 @@
 <script setup lang="ts">
 import { withoutTrailingSlash } from 'ufo';
 import dayjs from 'dayjs';
+import type { NavItem } from '@nuxt/content/types';
 
 definePageMeta({
   layout: 'docs',
 });
 
 const route = useRoute();
-const { seo } = useAppConfig();
+const nav = inject<Ref<NavItem[]>>('navigation');
+
+const metadata = computed(() => {
+  return nav?.value
+    .find((item) => item._path === '/tutorials')
+    ?.children?.find((item) => item._path === `/tutorials/${route.params.slug[0]}`);
+});
 
 const isIndex = ref(route.params.slug.length < 2);
-const { data: info } = await useAsyncData(`${route.path}-info`, () =>
-  queryContent(`/tutorials/${route.params.slug[0]}/_info`).findOne()
-);
 
 const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne());
+
 if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
 }
 
-const { data: surround } = await useAsyncData(`${route.path}-surround`, () =>
+const { data: surroundLinks } = await useAsyncData(`${route.path}-surround`, () =>
   queryContent()
     .where({
       _extension: 'md',
@@ -30,32 +35,26 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () =>
     .findSurround(withoutTrailingSlash(route.path + '/'))
 );
 
-const surroundLinks = computed(() => {
-  return surround.value.length > 0 ? surround.value.filter((item) => item?._type !== 'yaml') : [];
+const surround = computed(() => {
+  return surroundLinks.value ?? [];
 });
 
 const lastUpdated = computed(() => {
-  const date = info.value.updated || info.value.created;
+  const date = metadata.value?.updated || metadata.value?.created;
   return date ? dayjs(date, 'YYYY-MM-DD').format('MMM DD, YYYY') : '';
 });
 
+const { seo } = useAppConfig();
 useSeoMeta({
-  title: info.value.title,
-  ogTitle: `${info.value.title} - ${seo?.siteName}`,
-  description: info.value.summary,
-  ogDescription: info.value.summary,
+  title: metadata.value?.title,
+  ogTitle: `${metadata.value?.title} - ${seo?.siteName}`,
+  description: metadata.value?.summary,
+  ogDescription: metadata.value?.summary,
+  twitterDescription: metadata.value?.summary,
   ogType: 'article',
-  author: info.value.authors[0].name,
-});
-
-const { data: navigation } = await useAsyncData(`${route.path}-sidenav`, () => {
-  const query = queryContent().where({
-    _path: { $contains: route.params.slug[0] },
-    _extension: 'md',
-    _partial: false,
-  });
-
-  return fetchContentNavigation(query);
+  author: metadata.value?.authors
+    .map((author: { name: string; url: string; avatar: string }) => author.name)
+    .join(', '),
 });
 
 const links = [
@@ -65,9 +64,9 @@ const links = [
     to: '/tutorials',
   },
   {
-    label: info.value?.title || 'Guide',
+    label: metadata.value?.title || 'Guide',
     collapsible: false,
-    children: navigation.value[0].children[0].children.map((item) => ({
+    children: metadata.value?.children?.map((item) => ({
       label: item.title,
       to: item._path,
     })),
@@ -106,28 +105,28 @@ const communityLinks = [
         </UAside>
       </template>
 
-      <UPage v-if="isIndex && info">
+      <UPage v-if="isIndex && metadata">
         <UPageHeader
-          :title="page.title"
-          :description="page.description"
+          :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="info.authors"
+              :authors="metadata.authors"
               :with-links="true"
             />
             <p>
-              {{ info.description }}
+              {{ metadata.description }}
             </p>
             <h3 class="mt-4 text-xl font-semibold">What you'll learn:</h3>
             <ul
               role="list"
               class="list-inside list-disc"
             >
               <li
-                v-for="item in info.what_you_will_learn"
+                v-for="item in metadata.what_you_will_learn"
                 :key="item"
               >
                 {{ item }}
@@ -143,7 +142,7 @@ const communityLinks = [
               variant="solid"
               label="GitHub"
               target="_blank"
-              :to="info.github_repo"
+              :to="metadata.github_repo"
               :trailing="false"
             />
             <h3 class="my-2 text-xl font-semibold">Last Updated:</h3>
@@ -154,7 +153,7 @@ const communityLinks = [
               class="list-inside list-disc"
             >
               <li
-                v-for="item in info.tools"
+                v-for="item in metadata.tools"
                 :key="item"
               >
                 {{ item }}
@@ -163,7 +162,7 @@ const communityLinks = [
             <h3 class="my-2 text-xl font-semibold">Tags:</h3>
             <div class="flex flex-wrap">
               <UBadge
-                v-for="tag in info.tags"
+                v-for="tag in metadata.tags"
                 :key="tag"
                 :label="tag"
                 color="blue"
@@ -180,23 +179,23 @@ const communityLinks = [
       <UPage>
         <UPageHeader
           v-if="!isIndex"
-          :title="page.title"
-          :description="page.description"
+          :title="page?.title"
+          :description="page?.description"
         />
 
         <UPageBody prose>
           <ContentRenderer
-            v-if="page.body"
+            v-if="page?.body"
             :value="page"
           />
 
           <hr
-            v-if="surroundLinks.length > 0"
+            v-if="surround.length > 0"
             class="mb-4"
           />
 
           <UContentSurround
-            :surround="surroundLinks"
+            :surround
             :ui="{
               wrapper: 'grid gap-8 sm:grid-cols-2',
               icon: {
@@ -218,12 +217,12 @@ const communityLinks = [
         </UPageBody>
 
         <template
-          v-if="page.toc !== false"
+          v-if="page?.toc !== false"
           #right
         >
           <UContentToc
             title="Table of contents"
-            :links="page.body?.toc?.links"
+            :links="page?.body?.toc?.links"
           />
         </template>
       </UPage>