feat: adds deployment pipeline for preview / staging / prod & address…

…es lint issues (#6)

# What 💻 
* Adds preview / staging / deployment actions for firebase
* Runs eslint and corrections 
* Updates checks.yaml file

# Why ✋
* For setting up initial deployment environments 
* Clean code is good
* Adds eslint to checker

# Evidence 📷
Include screenshots, screen recordings, or `console` output here
demonstrating that your changes work as intended
![Screenshot 2024-03-25 at 9 26
48 AM](https://github.com/matter-labs/zksync-docs/assets/29983536/b7886245-de14-4f8e-b63a-5f6323803ef7)

<!-- All sections below are optional. You can uncomment any section
applicable to your Pull Request. -->

<!-- # Notes 📝
* Any notes/thoughts that the reviewers should know prior to reviewing
the code? -->

.firebaserc

@@ -0,0 +1,7 @@
+{
+  "projects": {
+    "default": "zksync-docs-staging-5eb09",
+    "prod": "zksync-docs"
+  },
+  "etags": {}
+}

.github/workflows/checks.yaml

@@ -1,41 +1,51 @@
-name: clean 🧹
+name: check 🕵️
 
 on:
   pull_request:
     branches: [main, staging]
-
   workflow_dispatch:
 
 jobs:
   format:
-    name: format
+    name: code_format
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v1
-      - name: Runs prettier formatter
-        run: |
-          bun install
-          bun run lint:prettier
+      - name: Install Dependencies
+        run: bun install
+      - name: Runs Prettier Formatter
+        run: bun run lint:prettier
 
   spelling:
     name: spelling
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v1
-      - name: Runs cspell spell checker 
-        run: |
-           bun install
-           bun run lint:spelling
+      - name: Install Dependencies
+        run: bun install
+      - name: Runs cSpell Spell Checker
+        run: bun run lint:spelling
+
+  markdown-lint:
+    name: markdown_lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+      - name: Install Dependencies
+        run: bun install
+      - name: Runs Markdown Linter
+        run: bun run lint:markdown
 
-  lint:
-    name: lint markdown
+  eslint:
+    name: code_lint
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v1
-      - name: Runs mdl markdown linter
-        run: |
-            bun install
-            bun run lint:markdown
+      - name: Install Dependencies
+        run: bun install
+      - name: Runs ESLint
+        run: bun run lint:eslint

.github/workflows/deploy-preview.yml

@@ -0,0 +1,30 @@
+name: "preview builder 👀"
+on:
+  pull_request:
+  workflow_dispatch:
+
+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:
+      output_urls: "${{ steps.preview_deploy.outputs.urls }}"
+    steps:
+      - uses: actions/checkout@v4 # v4
+
+      - uses: oven-sh/setup-bun@v1
+
+      - name: "Install dependencies"
+        run: bun install
+      - name: "Deploy target: staging"
+        run: bun run build && bun run generate 
+
+      - name: "Deploy preview"
+        uses: matter-labs/action-hosting-deploy@main
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZKSYNC_DOCS_STAGING_5EB09 }}"
+          projectId: zksync-docs-staging-5eb09

.github/workflows/deploy-prod.yml

@@ -0,0 +1,56 @@
+name: "deploy 🚀"
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build_and_deploy:
+    env:
+      NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }}
+    if: ${{ github.event.repository.full_name == github.repository }}
+    runs-on: ubuntu-latest
+    environment: prod
+    steps:
+      - uses: actions/checkout@v4 # v4
+        with:
+          fetch-depth: 0
+          # Whether to configure the token or SSH key with the local git config
+          # Default: true
+          persist-credentials: false # <--- checking this in commit context
+
+      - uses: oven-sh/setup-bun@v1
+
+      - name: "Install dependencies"
+        run: bun install
+      - name: "Deploy target: staging"
+        run: bun run build && bun run generate 
+        # TODO: ask about below
+        # env:
+        #   RUDDERSTACK_WRITE_KEY: "${{ secrets.RUDDERSTACK_WRITE_KEY }}"
+        #   RUDDERSTACK_DATA_PLANE_URL: "${{ secrets.RUDDERSTACK_DATA_PLANE_URL }}"
+
+      - uses: matter-labs/action-hosting-deploy@main
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZKSYNC_DOCS }}"
+          target: prod
+          projectId: zksync-docs
+          channelId: live
+
+      # TODO: re-enable once we are closer to production deployment
+      # - name: Purge cf cache
+      #   uses: nathanvaughn/actions-cloudflare-purge@db8c58f61ba4c3ec77229c8fa14ddebb3b59932f # v3.1.0
+      #   with:
+      #     cf_zone: ${{ secrets.CLOUDFLARE_ZONE }}
+      #     cf_auth: ${{ secrets.CLOUDFLARE_AUTH_KEY }}
+      #     hosts: |
+      #       docs.zksync.io
+      #       era.zksync.io
+      #       v2-docs.zksync.io
+
+      # TODO: Implement reindex task tracking instead of blindly exiting on task submit
+      # - name: Trigger Algolia reindex
+      #   run: |
+      #     curl -X POST "${{ secrets.ALGOLIA_CRAWLER_BASE_URL }}/crawlers/${{ secrets.ALGOLIA_CRAWLER_ID }}/reindex" \
+      #       -H "Content-Type: application/json" \
+      #       --user "${{ secrets.ALGOLIA_CRAWLER_USER_ID }}:${{ secrets.ALGOLIA_CRAWLER_API_KEY }}"

.github/workflows/deploy-staging.yml

@@ -0,0 +1,30 @@
+name: "deploy staging 🏗️"
+on:
+  push:
+    branches: [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:
+      - uses: actions/checkout@v4 # v4
+        with:
+          ref: "${{ github.event.inputs.ref }}"
+
+      - uses: oven-sh/setup-bun@v1
+
+      - name: "Install dependencies"
+        run: bun install
+      - name: "Deploy target: staging"
+        run: bun run build && bun run generate 
+
+      - uses: matter-labs/action-hosting-deploy@main
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZKSYNC_DOCS_STAGING_5EB09 }}"
+          projectId: zksync-docs-staging-5eb09
+          channelId: live

.github/workflows/secrets_scanner.yaml

@@ -1,9 +1,9 @@
-name: Leaked Secrets Scan
+name: scan 🔍
 on:
   pull_request:
   merge_group:
 jobs:
-  TruffleHog:
+  secrets:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code

.gitignore

@@ -99,3 +99,4 @@ yarn.lock
 .nitro
 .cache
 dist
+.firebase

.markdownlint.json

@@ -13,5 +13,9 @@
     "line_length": 120,
     "tables": false
   },
-  "MD033": false
+  "MD033": false,
+  "MD003": false,
+  "MD034": false,
+  "MD024": false,
+  "MD022": false
 }

app.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types';
+import FooterComponent from './components/FooterComponent.vue';
+import HeaderComponent from './components/HeaderComponent.vue';
 
 const { seo } = useAppConfig();
 
@@ -52,15 +54,15 @@ provide('navigation', navigation);
   <div>
     <NuxtLoadingIndicator />
 
-    <Header />
+    <HeaderComponent />
 
     <UMain>
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>
     </UMain>
 
-    <Footer />
+    <FooterComponent />
 
     <ClientOnly>
       <LazyUContentSearch

content/10.getting-started/1.index.md

@@ -34,22 +34,28 @@ There are already many websites based on this template:
 
 You can start playing with this template in your browser using our online sandboxes:
 
-::u-button
-
-class: mr-4 icon: i-simple-icons-stackblitz label: Play on StackBlitz target: \_blank to:
-[stackblitz](https://stackblitz.com/github/nuxt-ui-pro/docs/)
-
+::card
 ---
-
+title: Play on StackBlitz
+icon: i-simple-icons-stackblitz
+to: https://stackblitz.com/github/nuxt-ui-pro/docs/
+target: _blank
+---
+Explore Nuxt built-in components for pages, layouts, head, and more.
 ::
 
-::u-button
-
-class: mt-2 sm:mt-0 icon: i-simple-icons-codesandbox label: Play on CodeSandbox target: \_blank to:
-[codesandbox](https://codesandbox.io/s/github/nuxt-ui-pro/docs/)
-
 ---
 
+::card
+---
+title: Play on CodeSandbox
+icon: i-simple-icons-codesandbox
+to: https://codesandbox.io/s/github/nuxt-ui-pro/docs/
+target: _blank
+---
+Explore Nuxt built-in components for pages, layouts, head, and more.
 ::
 
+---
+
 Or open [Nuxt UI playground](https://ui.nuxt.com/playground).

content/10.getting-started/2.installation.md

@@ -4,9 +4,9 @@ description: Get started with Nuxt UI Pro documentation template.
 layout: docs
 ---
 
-## ::callout
-
-icon: i-heroicons-light-bulb target: \_blank to: [nuxt studio](https://nuxt.studio/themes/docs)
+::callout{icon="i-heroicons-light-bulb"}
+This is a callout.
+::
 
 ---
 

firebase.json

@@ -0,0 +1,6 @@
+{
+  "hosting": {
+    "public": ".output/public",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
+  }
+}

nuxt.config.ts

@@ -54,4 +54,9 @@ export default defineNuxtConfig({
       },
     },
   },
+  nitro: {
+    firebase: {
+      gen: 2,
+    },
+  },
 });

package.json

@@ -21,6 +21,7 @@
     "husky": "^9.0.11",
     "markdownlint": "^0.33.0",
     "markdownlint-cli2": "^0.12.1",
+    "particles.vue3": "^2.12.0",
     "prettier": "^3.1.0",
     "prettier-eslint": "^16.1.2",
     "prettier-plugin-tailwindcss": "^0.5.12",
@@ -50,7 +51,9 @@
     "lint:markdown": "markdownlint-cli2 \"content/**/*.md\" --config \".markdownlint.json\"",
     "lint:eslint": "eslint .",
     "lint:prettier": "prettier --check .",
+    "fix:prettier": "prettier --write .",
     "prepare": "husky",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "ci:check": "bun run lint:eslint && bun run lint:prettier && bun run lint:spelling && bun run lint:markdown"
   }
 }

pages/about-us.vue

@@ -1,3 +1,3 @@
 <script setup lang="ts"></script>
 
-<template>This is the about page.</template>
+<template><div>This is the about page.</div></template>

pages/index.vue

@@ -19,7 +19,6 @@ const particlesLoaded = async (container: unknown) => {
     <div>
       <vue-particles
         id="tsparticles"
-        @particles-loaded="particlesLoaded"
         :options="{
           fpsLimit: 120,
           interactivity: {
@@ -86,6 +85,7 @@ const particlesLoaded = async (container: unknown) => {
           },
           detectRetina: true,
         }"
+        @particles-loaded="particlesLoaded"
       />
       <ULandingHero
         v-if="page.hero"