chore: wip

matter-labs · Apr 18, 2024 · 5a83626 · 5a83626
1 parent afce1f6
commit 5a83626
Show file tree

Hide file tree

Showing 14 changed files with 227 additions and 374 deletions.
diff --git a/.eslintrc.json b/.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"
+        }
+      }
+    ]
   }
 }
diff --git a/app.config.ts b/app.config.ts
@@ -53,7 +53,7 @@ export default defineAppConfig({
       light: '/logos/zksync_logo_black.svg',
       dark: '/logos/zksync_logo.svg',
     },
-    search: true,
+    search: false,
     colorMode: true,
     links: [
       {

diff --git a/app.vue b/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>

diff --git a/components/HeaderComponent.vue b/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"
       />
 

diff --git a/components/layout/DocsBase.vue b/components/layout/DocsBase.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/types';
+import { withoutTrailingSlash } from 'ufo';
+
+const route = useRoute();
+const { seo } = useAppConfig();
+const navigation = inject<Ref<NavItem[]>>('navigation', ref([]));
+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 }: any = await useAsyncData(`${route.path}-surround`, () =>
+  queryContent()
+    .where({
+      _partial: false,
+      _extension: 'md',
+      navigation: { $ne: false },
+    })
+    .only(['title', 'description', '_path'])
+    .findSurround(withoutTrailingSlash(route.path))
+);
+
+useSeoMeta({
+  title: page.value.title,
+  ogTitle: `${page.value.title} - ${seo?.siteName}`,
+  description: page.value.description,
+  ogDescription: page.value.description,
+});
+
+defineOgImage({
+  component: 'Docs',
+});
+
+const breadcrumb = computed(() =>
+  mapContentNavigation(findPageBreadcrumb(navigation!.value, page.value)).map(({ label }) => ({ label }))
+);
+</script>
+
+<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"
+      />
+
+      <hr v-if="surround?.length" />
+
+      <UContentSurround :surround="surround" />
+    </UPageBody>
+
+    <template
+      v-if="page.toc !== false"
+      #right
+    >
+      <LayoutToc :page />
+    </template>
+  </UPage>
+</template>
diff --git a/components/layout/Toc.vue b/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>
diff --git a/content/10.zk-stack/10.test.md b/content/10.zk-stack/10.test.md
@@ -0,0 +1,5 @@
+---
+title: Test
+---
+
+This is a test page
diff --git a/layouts/external-node.vue → layouts/ExternalNode.vue b/layouts/external-node.vue → layouts/ExternalNode.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-const query = queryContent({
-  _partial: false,
-  where: [
-    {
-      _path: { $contains: '/external-node' },
-    },
-  ],
-});
+const { data: navigation } = await useAsyncData('external-node-navigation', () => {
+  const query = queryContent({
+    _partial: false,
+    where: [
+      {
+        _path: { $contains: 'external-node' },
+      },
+    ],
+  });
 
-const { data: navigation } = await useAsyncData('external-node-navigation', () => fetchContentNavigation(query));
+  return fetchContentNavigation(query);
+});
+const navTree = (navigation.value && navigation.value[0] && navigation.value[0].children) || [];
 </script>
 
 <template>
@@ -17,7 +20,7 @@ const { data: navigation } = await useAsyncData('external-node-navigation', () =
       <template #left>
         <UAside>
           <UNavigationTree
-            :links="mapContentNavigation(navigation || [])"
+            :links="mapContentNavigation(navTree)"
             default-open
             :multiple="false"
           />

diff --git a/layouts/zk-stack.vue → layouts/ZkStack.vue b/layouts/zk-stack.vue → layouts/ZkStack.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-const query = queryContent({
-  _partial: false,
-  where: [
-    {
-      _path: { $contains: '/zk-stack' },
-    },
-  ],
-});
+const { data: navigation } = await useAsyncData('zk-stack-navigation', () => {
+  const query = queryContent({
+    _partial: false,
+    where: [
+      {
+        _path: { $contains: 'zk-stack' },
+      },
+    ],
+  });
 
-const { data: navigation } = await useAsyncData('zk-stack-navigation', () => fetchContentNavigation(query));
+  return fetchContentNavigation(query);
+});
+const navTree = (navigation.value && navigation.value[0] && navigation.value[0].children) || [];
 </script>
 
 <template>
@@ -17,7 +20,7 @@ const { data: navigation } = await useAsyncData('zk-stack-navigation', () => fet
       <template #left>
         <UAside>
           <UNavigationTree
-            :links="mapContentNavigation(navigation || [])"
+            :links="mapContentNavigation(navTree)"
             default-open
             :multiple="false"
           />

diff --git a/layouts/build.vue b/layouts/build.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
-const query = queryContent({
-  _partial: false,
-  where: [
-    {
-      _path: { $contains: 'build' },
-    },
-  ],
+const { data: navigation } = await useAsyncData('build-navigation', () => {
+  const query = queryContent({
+    _partial: false,
+    where: [
+      {
+        _path: { $contains: 'build' },
+      },
+    ],
+  });
+
+  return fetchContentNavigation(query);
 });
-const { data: navigation } = await useAsyncData('build-navigation', () => fetchContentNavigation(query));
+const navTree = (navigation.value && navigation.value[0] && navigation.value[0].children) || [];
 </script>
 
 <template>
@@ -16,7 +20,7 @@ const { data: navigation } = await useAsyncData('build-navigation', () => fetchC
       <template #left>
         <UAside>
           <UNavigationTree
-            :links="mapContentNavigation(navigation || [])"
+            :links="mapContentNavigation(navTree)"
             default-open
             :multiple="false"
           />

diff --git a/nuxt.schema.ts b/nuxt.schema.ts
@@ -241,6 +241,13 @@ export default defineNuxtSchema({
               icon: 'i-mdi-link-variant',
               default: [],
             }),
+            feedback: field({
+              type: 'string',
+              title: 'Feedback Link',
+              description: 'URL of your feedback form.',
+              icon: 'i-ph-note-pencil',
+              default: '',
+            }),
           },
         }),
       },