feat: As a user, I want to see the tutorial UI (#576)

.github/workflows/website-build.yml → .github/workflows/tutorial-build.yml

@@ -1,4 +1,4 @@
-name: Build website
+name: Build tutorial
 
 on:
   pull_request:
@@ -13,12 +13,12 @@ on:
       - release/*
 
 jobs:
-  build-website:
+  build-tutorial:
     runs-on: ubuntu-latest
 
     defaults:
       run:
-        working-directory: website
+        working-directory: tutorial
 
     steps:
       - name: Check out the repo
@@ -57,5 +57,5 @@ jobs:
 
       - name: Add build summary
         run: |
-          echo "## Website build result" >> $GITHUB_STEP_SUMMARY
+          echo "## Tutorial build result" >> $GITHUB_STEP_SUMMARY
           echo "✅ Passed" >> $GITHUB_STEP_SUMMARY

.github/workflows/tutorial-deploy.yml

@@ -0,0 +1,83 @@
+name: Deploy tutorial
+
+on:
+  push:
+    branches: ["dev"]
+    paths:
+      - tutorial/**
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy-tutorial:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: tutorial
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Install Pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: pnpm
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm run build
+        env:
+          VITE_WALLETCONNECT_PROJECT_ID: ${{ secrets.VITE_WALLETCONNECT_PROJECT_ID }}
+          VITE_INFURA_API_KEY: ${{ secrets.VITE_INFURA_API_KEY }}
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: "./tutorial/dist"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
+
+      - name: Add tutorial deployment summary
+        run: |
+          echo "## Tutorial deployment result" >> $GITHUB_STEP_SUMMARY
+          echo "✅ Passed" >> $GITHUB_STEP_SUMMARY

.github/workflows/website-deploy.yml

@@ -31,47 +31,13 @@ jobs:
       - name: Check out the repo
         uses: actions/checkout@v4
 
-      - name: Install Pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
-          run_install: false
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: pnpm
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build
-        run: pnpm run build
-        env:
-          VITE_WALLETCONNECT_PROJECT_ID: ${{ secrets.VITE_WALLETCONNECT_PROJECT_ID }}
-          VITE_INFURA_API_KEY: ${{ secrets.VITE_INFURA_API_KEY }}
-
       - name: Setup Pages
         uses: actions/configure-pages@v3
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:
-          path: "./website/dist"
+          path: "./website/index.html"
 
       - name: Deploy to GitHub Pages
         id: deployment

pnpm-workspace.yaml

@@ -5,4 +5,5 @@ packages:
   - 'sdk'
   - 'snap/packages/**'
   - 'subgraph'
+  - 'tutorial'
   - 'website'

website/.env.example → tutorial/.env.example

@@ -1,2 +1 @@
 VITE_WALLETCONNECT_PROJECT_ID=XXX
-VITE_INFURA_API_KEY=XXX

tutorial/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

tutorial/README.md

@@ -0,0 +1,12 @@
+# Verax Attestation Registry - Tutorial
+
+This package manages the tutorial of Verax Attestation Registry, hosted at
+[tutorial.examples.ver.ax](https://tutorial.examples.ver.ax).
+
+## Getting Started
+
+### Launch in development mode
+
+```bash
+pnpm run dev
+```

tutorial/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="src/assets/verax-logo-circle.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Verax | Tutorial</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/src/main.tsx"></script>
+</body>
+</html>