Merge pull request #11 from CalcagnoLoic/develop

deploy gh page

.github/workflows/chromatic.yaml

@@ -0,0 +1,24 @@
+name: Deploy storybook on Chromatic
+
+on: 
+  push:
+    branches:
+      - feature/chromatic
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: true

.github/workflows/deploy.yaml

@@ -0,0 +1,67 @@
+name: "Deploy dictionary app into GH pages"
+
+on:
+  pull_request:
+    branches:
+      - master
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  linter:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: "Checkout branch"
+        uses: actions/checkout@v4
+
+      - name: "Install Node Version"
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: "Install dependencies"
+        run: npm i
+
+      - name: "Linter"
+        run: npm run lint
+
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    needs: linter
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: "Checkout branch"
+        uses: actions/checkout@v4
+
+      - name: "Install Node Version"
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: "Install dependencies"
+        run: npm i
+
+      - name: "Configure GH page"
+        uses: actions/configure-pages@v3
+
+      - name: "Build"
+        run: npm run build
+
+      - name: "Upload artifact"
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./dist/
+
+      - name: "Deploy GH page"
+        id: deployment
+        uses: actions/deploy-pages@v1

README.md

@@ -5,6 +5,8 @@ This dictionary provides definitions and examples by lexical field. Two contexts
 - One for darkMode (this adapts to the user's system preferences)
 - One for changing the font (serif, sans-serif and mono)
 
+The stories are hosted on Chromatic at this [URL](https://65c4faea26944c656f6474a3-hvxcsqaonk.chromatic.com/).
+
 <p align="center">
   <a href="https://skillicons.dev">
     <img src="https://skillicons.dev/icons?i=ts,react,tailwind,vite" />

package.json

@@ -32,6 +32,7 @@
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.17",
+    "chromatic": "^10.9.1",
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",

vite.config.ts

@@ -4,4 +4,5 @@ import react from "@vitejs/plugin-react-swc";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: "/dictionary-webapp/",
 });