Merge branch 'staging' of github.com:matter-labs/zksync-docs into db/…

…add-firebase-envs

app.config.ts

@@ -1,7 +1,26 @@
+/**
+ * Nuxt App Configuration that allows for runtime editing.
+ * This content can be accessible in components with the
+ * globally available `useAppConfig()`.
+ */
 export default defineAppConfig({
   ui: {
-    primary: 'green',
-    gray: 'slate',
+    // potential config options: https://github.com/nuxt/ui/tree/dev/src/runtime/ui.config
+    variables: {
+      light: {
+        background: '255 252 255',
+        // foreground: '147 68 68',
+      },
+      dark: {
+        background: '17 20 43',
+        // foreground: 'var(--color-gray-200)',
+      },
+      // header: {
+      //   height: '1rem',
+      // },
+    },
+    primary: 'zkPurple',
+    gray: 'zkSlate',
     footer: {
       bottom: {
         left: 'text-sm text-gray-500 dark:text-gray-400',
@@ -19,79 +38,80 @@ export default defineAppConfig({
     },
   },
   seo: {
-    siteName: 'Nuxt UI Pro - Docs template',
+    siteName: 'zkSync Docs',
   },
   header: {
     logo: {
       alt: '',
-      light: '',
-      dark: '',
+      light: '/logos/zksync_logo_black.svg',
+      dark: '/logos/zksync_logo.svg',
     },
     search: true,
     colorMode: true,
     links: [
       {
         icon: 'i-simple-icons-github',
-        to: 'https://github.com/nuxt-ui-pro/docs',
+        to: 'https://github.com/matter-labs/zksync-docs',
         target: '_blank',
-        'aria-label': 'Docs template on GitHub',
+        'aria-label': 'zkSync Docs on GitHub',
+        title: 'zkSync Docs on GitHub',
       },
     ],
   },
   footer: {
-    credits: 'Copyright © 2023',
+    credits: 'Made with ❤️ by Matter Labs & Community',
     colorMode: false,
     links: [
       {
-        icon: 'i-simple-icons-nuxtdotjs',
-        to: 'https://nuxt.com',
+        icon: 'i-zksync-matterlabs-logo',
+        to: 'https://matter-labs.io',
         target: '_blank',
-        'aria-label': 'Nuxt Website',
+        'aria-label': 'MatterLabs Website',
       },
       {
-        icon: 'i-simple-icons-discord',
-        to: 'https://discord.com/invite/ps2h6QT',
+        icon: 'i-simple-icons-x',
+        to: 'https://x.com/zksync',
         target: '_blank',
-        'aria-label': 'Nuxt UI on Discord',
+        'aria-label': 'zkSync on X',
       },
       {
-        icon: 'i-simple-icons-x',
-        to: 'https://x.com/nuxt_js',
+        icon: 'i-simple-icons-github',
+        to: 'https://github.com/matter-labs',
         target: '_blank',
-        'aria-label': 'Nuxt on X',
+        'aria-label': 'zkSync on GitHub',
       },
       {
-        icon: 'i-simple-icons-github',
-        to: 'https://github.com/nuxt/ui',
+        icon: 'i-simple-icons-discord',
+        to: 'https://join.zksync.dev/',
         target: '_blank',
-        'aria-label': 'Nuxt UI on GitHub',
+        'aria-label': 'zkSync on Discord',
       },
     ],
   },
   toc: {
     title: 'Table of Contents',
     bottom: {
       title: 'Community',
-      edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content',
+      edit: 'https://github.com/matter-labs/zksync-docs/edit/main/content',
       links: [
-        {
-          icon: 'i-heroicons-star',
-          label: 'Star on GitHub',
-          to: 'https://github.com/nuxt/ui',
-          target: '_blank',
-        },
-        {
-          icon: 'i-heroicons-book-open',
-          label: 'Nuxt UI Pro docs',
-          to: 'https://ui.nuxt.com/pro/guide',
-          target: '_blank',
-        },
-        {
-          icon: 'i-simple-icons-nuxtdotjs',
-          label: 'Purchase a license',
-          to: 'https://ui.nuxt.com/pro/purchase',
-          target: '_blank',
-        },
+        // {
+        //   icon: 'i-heroicons-star',
+        //   label: 'Star on GitHub',
+        //   to: 'https://github.com/nuxt/ui',
+        //   target: '_blank',
+        // },
+        // {
+        //   icon: 'i-heroicons-book-open',
+        //   label: 'Nuxt UI Pro docs',
+        //   to: 'https://ui.nuxt.com/pro/guide',
+        //   target: '_blank',
+        // },
+        // {
+        //   icon: 'i-simple-icons-nuxtdotjs',
+        //   label: 'Purchase a license',
+        //   to: 'https://ui.nuxt.com/pro/purchase',
+        //   target: '_blank',
+        // },
       ],
     },
   },

app.vue

@@ -10,7 +10,20 @@ const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
 });
 
 useHead({
-  meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+  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' },
+  ],
   link: [{ rel: 'icon', href: '/favicon.ico' }],
   htmlAttrs: {
     lang: 'en',
@@ -20,9 +33,16 @@ useHead({
 useSeoMeta({
   titleTemplate: `%s - ${seo?.siteName}`,
   ogSiteName: seo?.siteName,
-  ogImage: 'https://docs-template.nuxt.dev/social-card.png',
-  twitterImage: 'https://docs-template.nuxt.dev/social-card.png',
+  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:
+    '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.',
+  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);

assets/zksync-icons.ts

@@ -0,0 +1,16 @@
+export const zksyncIcons = {
+  zksync: {
+    icons: {
+      'zksync-logo': {
+        body: '<svg width="100%" height="100%" viewBox="0 0 1112 656" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g><path fill="currentColor" d="M1043.02,323.053l-277.916,-276.666l-0,202.5l-275.834,202.916l275.834,0l-0,147.917l277.916,-276.667Z"/><path fill="currentColor" d="M63.85,323.053l277.916,276.667l0,-201.25l275.834,-204.583l-275.834,-0l0,-147.917l-277.916,277.083Z"/></g></svg>',
+      },
+      'matterlabs-logo': {
+        // svg body
+        body: '<svg width="100%" height="100%" viewBox="0 0 1441 1146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="0" y="0" width="1440.95" height="1145.22" style="fill:none;"/><g><path d="M1035.11,255.742c0.014,-0 0.028,-0 0.042,-0c37.738,-0 68.792,-31.054 68.792,-68.792c-0,-37.738 -31.054,-68.792 -68.792,-68.792c-37.738,0 -68.792,31.054 -68.792,68.792c0.023,37.713 31.037,68.746 68.75,68.792Z" style="fill:currentColor;fill-rule:nonzero;"/><path d="M401.943,255.742c0.013,-0 0.027,-0 0.041,-0c37.738,-0 68.792,-31.054 68.792,-68.792c-0,-37.738 -31.054,-68.792 -68.792,-68.792c-37.738,0 -68.791,31.054 -68.791,68.792c0.022,37.713 31.036,68.746 68.75,68.792Z" style="fill:currentColor;fill-rule:nonzero;"/><path d="M1035.11,605.283c-37.715,0 -68.75,31.035 -68.75,68.75c0,37.715 31.035,68.75 68.75,68.75c37.715,0 68.75,-31.035 68.75,-68.75c-0.045,-37.698 -31.052,-68.704 -68.75,-68.75Z" style="fill:currentColor;fill-rule:nonzero;"/><path d="M707.515,411.289c37.454,-6.079 72.798,19.393 78.877,56.846c6.08,37.454 -19.392,72.798 -56.846,78.878c-37.454,6.079 -72.798,-19.393 -78.877,-56.846c-6.08,-37.454 19.392,-72.798 56.846,-78.878Z" style="fill:currentColor;"/><path d="M718.526,897.492c-37.715,-0 -68.75,31.034 -68.75,68.75c-0,37.715 31.035,68.75 68.75,68.75c37.715,-0 68.75,-31.035 68.75,-68.75c-0.046,-37.698 -31.052,-68.705 -68.75,-68.75Z" style="fill:currentColor;fill-rule:nonzero;"/><path d="M109.693,897.492c-37.715,-0 -68.75,31.034 -68.75,68.75c-0,37.715 31.035,68.75 68.75,68.75c37.715,-0 68.75,-31.035 68.75,-68.75c-0,-0.042 -0,-0.084 -0,-0.125c-0.114,-37.651 -31.1,-68.58 -68.75,-68.625Z" style="fill:currentColor;fill-rule:nonzero;"/><path d="M1327.32,897.492c-37.7,0.022 -68.709,31.05 -68.709,68.75c0,37.715 31.035,68.75 68.75,68.75c37.716,-0 68.75,-31.035 68.75,-68.75c0,-0.042 0,-0.084 0,-0.125c-0.114,-37.667 -31.125,-68.603 -68.791,-68.625Z" style="fill:currentColor;fill-rule:nonzero;"/><path d="M401.943,605.283c-37.716,0 -68.75,31.035 -68.75,68.75c-0,37.715 31.034,68.75 68.75,68.75c37.715,0 68.75,-31.035 68.75,-68.75c-0.046,-37.698 -31.053,-68.704 -68.75,-68.75Z" style="fill:currentColor;fill-rule:nonzero;"/><path d="M1092.48,270.867c-16.883,11.638 -36.912,17.873 -57.418,17.873c-37.015,-0 -71.189,-20.315 -88.873,-52.832l-172.292,159.042c13.692,8.938 25.016,21.063 33,35.333l143.125,-132.083l10.708,7.375l-205.416,505.667l-12.875,-2.5l-0,-230.667c-15.873,3.916 -32.462,3.916 -48.334,-0l0,229.708l-12.875,2.5l-204.916,-504.708l10.708,-7.375l143.125,132.083c7.98,-14.259 19.288,-26.382 32.958,-35.333l-172.166,-159.042c-17.685,32.517 -51.858,52.832 -88.873,52.832c-20.506,-0 -40.536,-6.235 -57.419,-17.873l-223.292,595.25c30.903,3.539 58.499,21.161 74.709,47.708l153.208,-153c-13.941,-8.529 -25.608,-20.31 -34,-34.333l-121.958,121.75l-11,-7.125l182.541,-486.625l12.917,2.375l-0,219.291c15.872,-3.916 32.461,-3.916 48.333,0l0,-231.541l12.834,-2.5l205.208,505.083l-10.708,7.417l-142.5,-131.667c-7.827,14.352 -19.006,26.604 -32.584,35.708l171.917,158.709c17.855,-31.991 51.739,-51.883 88.375,-51.883c36.636,-0 70.52,19.892 88.375,51.883l171.917,-158.667c-13.59,-9.103 -24.783,-21.354 -32.625,-35.708l-142.875,131.625l-10.709,-7.417l205.334,-505.083l12.875,2.5l-0,231.541c15.872,-3.916 32.461,-3.916 48.333,0l-0,-219.291l12.917,-2.375l182.5,486.625l-10.959,7.041l-121.75,-121.75c-8.407,14.025 -20.089,25.806 -34.041,34.334l153,153.125c16.195,-26.587 43.818,-44.232 74.75,-47.75l-223.209,-595.25Z" style="fill:currentColor;fill-rule:nonzero;"/></g></svg>',
+        // svg width and height, optional
+        width: 24,
+        height: 24,
+      },
+    },
+  },
+};

content/index.yml

@@ -1,70 +1,62 @@
-title: 'Nuxt UI Pro - Docs template'
+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: 'Build your docs in seconds'
-  description: 'Create your documentation in seconds with this template!'
-  orientation: horizontal
+  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: Made with Nuxt UI Pro
-    to: https://ui.nuxt.com/pro
+    label: See what's new in 21.1.0
+    to: https://github.com/matter-labs/zksync-era/releases
     icon: i-heroicons-arrow-top-right-on-square-20-solid
   links:
-    - label: Get started
+    - label: Start building on zkSync
       icon: i-heroicons-arrow-right-20-solid
       trailing: true
       to: '/getting-started'
       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
-  code: |
-    ```bash [Terminal]
-    npx nuxi init -t github:nuxt-ui-pro/docs
-    ```
+    # - label: Use this template
+    #   icon: i-simple-icons-github
+    #   size: lg
+    #   color: gray
+    #   to: https://github.com/nuxt-ui-pro/docs
+    #   target: _blank
 features:
-  title: 'All-in-one docs template'
+  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: '#'
+    - title: 'Develop with zksync-cli'
+      description: 'Boost your development workflow with the zksync-cli tool.'
+      icon: 'i-simple-icons-windowsterminal'
+      to: '#'
+    - title: 'Architecture'
+      description: 'Learn about the zkSync architecture and how it works under the hood.'
+      icon: 'i-heroicons-sparkles-20-solid'
+      to: '#'
+community:
+  title: 'Join the zkSync Community'
   links:
-    - label: 'Explore Nuxt UI Pro'
-      icon: 'i-simple-icons-nuxtdotjs'
+    - label: 'Learn more about zkSync'
+      icon: 'i-zksync-zksync-logo'
       trailingIcon: 'i-heroicons-arrow-right-20-solid'
       color: 'gray'
-      to: 'https://ui.nuxt.com/pro'
-      target: '_blank'
+      to: '#'
       size: lg
   items:
-    - title: 'Nuxt 3'
-      description: 'Powered by Nuxt 3 for optimal performances and SEO.'
-      icon: 'i-simple-icons-nuxtdotjs'
-      to: 'https://nuxt.com'
-      target: '_blank'
-    - title: 'Markdown'
-      description: 'Write your pages with MDC thanks to Nuxt Content.'
-      icon: 'i-simple-icons-markdown'
-      to: 'https://content.nuxt.com'
-      target: '_blank'
-    - title: 'Nuxt UI'
-      description: 'Offers a very large set of full customizable components.'
-      icon: 'i-heroicons-sparkles-20-solid'
-      to: 'https://ui.nuxt.com'
-      target: '_blank'
-    - title: 'TypeScript'
-      description: 'A fully typed development experience.'
-      icon: 'i-simple-icons-typescript'
-      to: 'https://www.typescriptlang.org'
-      target: '_blank'
-    - title: 'Nuxt Studio'
-      description: 'Supported by Nuxt Studio for fast updates and previews.'
-      icon: 'i-simple-icons-nuxtdotjs'
-      to: 'https://nuxt.studio'
-      target: '_blank'
-    - title: 'Search'
-      description: 'A full-text search modal empowered by Fuse.js.'
-      icon: 'i-heroicons-magnifying-glass-20-solid'
-      to: 'https://ui.nuxt.com/pro/components/docs/docs-search'
-      target: '_blank'
+    - title: 'Developer Updates'
+      description: 'Keep up to date with the latest from the zkSync team on X.'
+      icon: 'i-simple-icons-x'
+      to: '#'
+    - title: 'GitHub Discussions'
+      description: 'Get help from the community and contribute to the zkSync project.'
+      icon: 'i-simple-icons-github'
+      to: '#'
+    - title: 'zkSync Discord'
+      description: 'Connect with devs and zkSync enthusiasts on Discord.'
+      icon: 'i-simple-icons-discord'
+      to: '#'

nuxt.config.ts

@@ -1,3 +1,5 @@
+import { getIconCollections } from '@egoist/tailwindcss-icons';
+import { zksyncIcons } from './assets/zksync-icons';
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   extends: ['@nuxt/ui-pro'],
@@ -11,7 +13,12 @@ export default defineNuxtConfig({
     },
   },
   ui: {
-    icons: ['heroicons', 'simple-icons'],
+    icons: {
+      collections: {
+        ...zksyncIcons,
+        ...getIconCollections(['heroicons', 'simple-icons']),
+      },
+    },
   },
   routeRules: {
     '/api/search.json': { prerender: true },

nuxt.schema.ts

@@ -1,5 +1,10 @@
 import { field, group } from '@nuxthq/studio/theme';
+import { type SchemaDefinition } from 'nuxt/schema';
 
+/**
+ * Nuxt Schema is a configuration file that allows you to define properties
+ * from nuxt.config.ts that can then be dynamically edited in Nuxt Studio.
+ */
 export default defineNuxtSchema({
   appConfig: {
     ui: group({
@@ -61,8 +66,11 @@ export default defineNuxtSchema({
           title: 'Primary',
           description: 'Primary color of your UI.',
           icon: 'i-mdi-palette-outline',
-          default: 'green',
+          default: 'zkPurple',
           required: [
+            'zkPurple',
+            'zkBlue',
+            'zkSlate',
             'sky',
             'mint',
             'rose',
@@ -91,7 +99,7 @@ export default defineNuxtSchema({
           title: 'Gray',
           description: 'Gray color of your UI.',
           icon: 'i-mdi-palette-outline',
-          default: 'slate',
+          default: 'zkSlate',
           required: ['slate', 'cool', 'zinc', 'neutral', 'stone'],
         }),
       },
@@ -105,7 +113,7 @@ export default defineNuxtSchema({
           type: 'string',
           title: 'Site Name',
           description:
-            'Name used in ogSiteName and used as second part of your page title (My page title - Nuxt UI Pro).',
+            'Name used in ogSiteName and used as second part of your page title (My page title - {Site Name}).',
           icon: 'i-mdi-web',
           default: [],
         }),
@@ -238,4 +246,4 @@ export default defineNuxtSchema({
       },
     }),
   },
-});
+}) as SchemaDefinition;

package.json

@@ -36,6 +36,8 @@
     "@nuxt/content": "^2.12.1",
     "@nuxt/fonts": "^0.3.0",
     "@nuxt/ui-pro": "^1.0.2",
+    "@tsparticles/slim": "^3.3.0",
+    "@tsparticles/vue3": "^3.0.1",
     "nuxt": "^3.10.3",
     "nuxt-og-image": "^3.0.0-rc.45"
   },