chore: update theme (#62)

# What 💻 
* update theme

# Why ✋
* latest changes in docs template repo need to be applied.

.env.example

@@ -1,5 +1,2 @@
 # Production license for @nuxt/ui-pro, get one at https://ui.nuxt.com/pro/purchase
 NUXT_UI_PRO_LICENSE=
-
-# Public URL, used for OG Image when running nuxt generate
-NUXT_PUBLIC_SITE_URL=

.github/workflows/checks.yaml

@@ -5,7 +5,7 @@ on:
     branches: [main, staging]
   workflow_dispatch:
 
-jobs: 
+jobs:
   format:
     name: code_format
     runs-on: ubuntu-latest
@@ -53,7 +53,6 @@ jobs:
   link-check:
     env:
       NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }}
-      NUXT_PUBLIC_SITE_URL: ${{ secrets.NUXT_PUBLIC_SITE_URL }}
     name: link_check
     runs-on: ubuntu-latest
     steps:
@@ -69,4 +68,4 @@ jobs:
 
       - uses: untitaker/[email protected]
         with:
-          args: .output/public/ --sources content/
+          args: .output/public/ --sources content/

.github/workflows/deploy-preview.yml

@@ -3,11 +3,13 @@ on:
   pull_request:
   workflow_dispatch:
 
+env:
+  NUXT_SITE_ENV: staging # used for NuxtSEO to disable things like indexing on staging
+
 jobs:
   build_and_preview:
     env:
       NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }}
-      NUXT_PUBLIC_SITE_URL: ${{ secrets.NUXT_PUBLIC_SITE_URL }}
     if: ${{ github.event_name == 'workflow_dispatch' || github.event.pull_request.head.repo.full_name == github.repository }}
     runs-on: ubuntu-latest
     outputs:

.github/workflows/deploy-staging.yml

@@ -4,11 +4,13 @@ on:
     branches: [staging]
   workflow_dispatch:
 
+env:
+  NUXT_SITE_ENV: staging # used for NuxtSEO to disable things like indexing on staging
+
 jobs:
   build_and_deploy:
     env:
       NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }}
-      NUXT_PUBLIC_SITE_URL: ${{ secrets.NUXT_PUBLIC_SITE_URL }}
     if: ${{ github.event.repository.full_name == github.repository }}
     runs-on: ubuntu-latest
     steps:

app.vue

@@ -2,9 +2,10 @@
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types';
 
 const { seo } = useAppConfig();
-const route = useRoute();
 
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation());
+provide('navigation', navigation);
+
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
   default: () => [],
   server: false,
@@ -35,58 +36,26 @@ useSeoMeta({
   titleTemplate: `%s - ${seo?.siteName}`,
   ogSiteName: seo?.siteName,
   ogUrl: 'https://docs.zksync.io/',
-  ogImage: 'https://docs.zksync.io/social-card.png',
   ogImageAlt: 'zkSync — Accelerating the mass adoption of crypto for personal sovereignty.',
-  ogDescription:
+  description:
+    'zkSync Docs bring you all information you need about our protocol, APIs, SDKs, ZK Stack, and ZK Chains. Start with our guides and tutorials, or go deep into our architecture and protocol specification.',
+  twitterTitle: `%s - ${seo?.siteName}`,
+  twitterDescription:
     'zkSync Docs bring you all information you need about our protocol, APIs, SDKs, ZK Stack, and ZK Chains. Start with our guides and tutorials, or go deep into our architecture and protocol specification.',
-  twitterImage: 'https://docs.zksync.io/social-card.png',
   twitterCard: 'summary_large_image',
   twitterSite: '@zksync',
   twitterCreator: '@the_matter_labs',
   twitterImageAlt: 'zkSync — Accelerating the mass adoption of crypto for personal sovereignty.',
 });
 
-provide('navigation', navigation);
-
-const links = computed(() => {
-  return [
-    {
-      label: 'Build',
-      to: '/build',
-      active: route.path.startsWith('/build'),
-    },
-    {
-      label: 'SDK Docs',
-      to: 'https://staging-sdk-docs.zksync.io/',
-    },
-    {
-      label: 'ZK Stack',
-      to: '/zk-stack',
-      active: route.path.startsWith('/zk-stack'),
-    },
-    {
-      label: 'zkSync Node',
-      to: '/zksync-node',
-      active: route.path.startsWith('/zksync-node'),
-    },
-    {
-      label: 'Ecosystem',
-      to: '/ecosystem',
-      active: route.path.startsWith('/ecosystem'),
-    },
-    {
-      label: 'Community Code',
-      to: 'https://community-cookbook-staging.web.app/',
-    },
-  ];
-});
+defineOgImageComponent('OgImageZK');
 </script>
 
 <template>
   <div>
     <NuxtLoadingIndicator />
 
-    <HeaderComponent :links />
+    <HeaderComponent :search="true" />
 
     <UMain>
       <NuxtLayout>

components/layout/DocsBase.vue

@@ -29,10 +29,6 @@ useSeoMeta({
   ogDescription: page.value.description,
 });
 
-defineOgImage({
-  component: 'Docs',
-});
-
 const breadcrumb = computed(() =>
   mapContentNavigation(findPageBreadcrumb(navigation!.value, page.value)).map(({ label }) => ({ label }))
 );

content/00.build/00.index.md

@@ -1,6 +1,6 @@
 ---
 title: Introduction
-description:
+description: Welcome to zkSync Era Docs.
 ---
 
 **zkSync Era** is a Layer 2

content/index.yml

@@ -1,62 +1,47 @@
 title: 'zkSync Docs'
 description:
-  Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt
-  applications in minutes.
 navigation: false
 hero:
   title: 'Unlock the Potential of Layer 2 Scaling with zkSync'
   description: 'Explore comprehensive guides, developer tools, and resources to innovate on the zkSync platform.'
   orientation: vertical
   headline:
-    label: See what's new in 21.1.0
+    label: See what's new in 24.2.0
     to: https://github.com/matter-labs/zksync-era/releases
     icon: i-heroicons-arrow-top-right-on-square-20-solid
   links:
     - label: Start building on zkSync
       icon: i-heroicons-arrow-right-20-solid
       trailing: true
       to: '/build'
-      size: lg
-    # - label: Use this template
-    #   icon: i-simple-icons-github
-    #   size: lg
-    #   color: gray
-    #   to: https://github.com/nuxt-ui-pro/docs
-    #   target: _blank
+      size: xl
 features:
   title: 'Explore zkSync Docs'
   items:
     - title: 'Getting Started with zkSync'
       description: 'Jumpstart your zkSync journey with quickstart guides and fundamental concepts for developers.'
       icon: 'i-zksync-zksync-logo'
-      to: '#'
+      to: '/build/zksync-101'
     - title: 'Develop with zksync-cli'
       description: 'Boost your development workflow with the zksync-cli tool.'
       icon: 'i-simple-icons-windowsterminal'
-      to: '#'
+      to: '/build/tooling/zksync-cli'
     - title: 'Architecture'
       description: 'Learn about the zkSync architecture and how it works under the hood.'
       icon: 'i-heroicons-sparkles-20-solid'
-      to: '#'
+      to: '/zk-stack'
 community:
   title: 'Join the zkSync Community'
-  links:
-    - label: 'Learn more about zkSync'
-      icon: 'i-zksync-zksync-logo'
-      trailingIcon: 'i-heroicons-arrow-right-20-solid'
-      color: 'gray'
-      to: '#'
-      size: lg
   items:
     - title: 'Developer Updates'
       description: 'Keep up to date with the latest from the zkSync team on X.'
       icon: 'i-simple-icons-x'
-      to: '#'
+      to: 'https://x.com/zksync'
     - title: 'GitHub Discussions'
       description: 'Get help from the community and contribute to the zkSync project.'
       icon: 'i-simple-icons-github'
-      to: '#'
+      to: 'https://github.com/zkSync-Community-Hub/zksync-developers/discussions'
     - title: 'zkSync Discord'
       description: 'Connect with devs and zkSync enthusiasts on Discord.'
       icon: 'i-simple-icons-discord'
-      to: '#'
+      to: 'https://join.zksync.dev/'

layouts/ecosystem-section.vue

@@ -12,7 +12,7 @@ const { data: navigation } = await useAsyncData('ecosystem-navigation', () => {
 
   return fetchContentNavigation(query);
 });
-console.log('WUT', navigation.value);
+
 const navTree = (navigation.value && navigation.value[0] && navigation.value[0].children) || [];
 </script>
 

nuxt.config.ts

@@ -1,8 +1,17 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   extends: [['github:matter-labs/docs-nuxt-template', { install: true }]],
-  modules: ['@nuxt/content', '@nuxt/ui', '@nuxt/eslint'],
+  modules: ['@nuxt/content', '@nuxt/ui', '@nuxt/eslint', '@nuxtjs/seo'],
   routeRules: {
     '/api/search.json': { prerender: true },
   },
+  site: {
+    name: 'zkSync Docs',
+    url: process.env.NUXT_SITE_ENV ? 'https://staging-docs.zksync.io' : 'https://docs.zksync.io',
+  },
+  runtimeConfig: {
+    public: {
+      app: 'docs',
+    },
+  },
 });

package.json

@@ -7,8 +7,6 @@
   "author": "Matter Labs",
   "homepage": "https://zksync.io",
   "devDependencies": {
-    "@nuxt/devtools": "^1.1.5",
-    "@nuxtjs/seo": "^2.0.0-rc.10",
     "@types/bun": "^1.0.8",
     "@vue/test-utils": "^2.4.5",
     "cspell": "^8.6.0",
@@ -31,6 +29,7 @@
     "@nuxt/fonts": "^0.3.0",
     "@nuxt/image": "^1.6.0",
     "@nuxt/ui-pro": "^1.0.2",
+    "@nuxtjs/seo": "^2.0.0-rc.10",
     "@tsparticles/slim": "^3.3.0",
     "@tsparticles/vue3": "^3.0.1",
     "nuxt": "^3.11.2",

pages/index.vue

@@ -2,7 +2,6 @@
 const { data: page } = await useAsyncData('index', () => queryContent('/').findOne());
 
 useSeoMeta({
-  titleTemplate: '',
   title: page.value?.title,
   ogTitle: page.value?.title,
   description: page.value?.description,