feat: update design match website and includes cover to article

.env

@@ -1,9 +1,14 @@
+BASE_URL=/
+LOCO_API_KEY=TgRmVdZN4YTwrM_V5ZPREs9ypXFGlYM5
 ALGOLIA_APP_ID=5IGTHBX5JS
 ALGOLIA_INDEX=blog_eleven_v2_dev
 ALGOLIA_API_INDEXING_KEY=ec44181a2193f585175620ba8239dfb0
 
+VITE_IS_DEBUG=true
+VITE_HOST_URL=http://localhost:5173
 VITE_ALGOLIA_APP_ID=5IGTHBX5JS
 VITE_ALGOLIA_INDEX=blog_eleven_v2_dev
 VITE_ALGOLIA_API_KEY=0ff075bf3ef8942ec3c6481f9aa05ae5
 VITE_GTM_ID=GTM-NB8NF97
 VITE_GOOGLE_SITE_VERIFICATION=google-site-verification
+

.github/actions/restore-npm-cache/action.yml

@@ -0,0 +1,14 @@
+name: restore-npm-cache
+description: Restore NPM Cache
+runs:
+  using: composite
+  steps:
+    - name: Restore NPM Cache
+      uses: actions/cache@v3
+      with:
+        path: "**/node_modules"
+        key: cache-node-modules-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: cache-node-modules-npm run
+    - name: Prepare project
+      shell: bash
+      run: npm run prepare

.github/workflows/checks-and-tests.yml

@@ -0,0 +1,99 @@
+name: Run checks and tests
+
+on: workflow_call
+
+jobs:
+  validate-markdown:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Validate markdown authors and posts
+        id: validate_markdown
+        run: npm run validate-markdown --ci
+
+      - name: Add a comment to the PR after failed markdown validation
+        uses: marocchino/sticky-pull-request-comment@v2
+        if: github.event_name == 'pull_request' && failure()
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          number: ${{ github.event.pull_request.number }}
+          header: validate-markdown
+          message: |
+            #### Markdown invalid 🖌
+
+            The markdown of the file **${{ steps.validate_markdown.outputs.filePath }}** is invalid !
+            > ${{ steps.validate_markdown.outputs.reason }}
+
+      - name: Remove a comment to the PR after success markdown validation
+        uses: marocchino/sticky-pull-request-comment@v2
+        if: github.event_name == 'pull_request' && success()
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          number: ${{ github.event.pull_request.number }}
+          header: validate-markdown
+          delete: true
+
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Lint code
+        run: npm run lint:es
+
+  compile:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Run Compile TypeScript
+        run: npx tsc
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Run Tests
+        run: npm run test
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Build Design System
+        run: npm run build
+
+  build-storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Build Storybook
+        run: npm run build:storybook

.github/workflows/continuous-integration-and-deployment.yml

@@ -0,0 +1,35 @@
+name: Continuous Integration
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  setup:
+    uses: ./.github/workflows/setup-nodejs-and-install-dependencies.yml
+  checks-and-tests:
+    needs: setup
+    uses: ./.github/workflows/checks-and-tests.yml
+  deploy:
+    needs: checks-and-tests
+    uses: ./.github/workflows/deploy.yml
+    with:
+      AWS_REGION: ${{ vars.AWS_REGION }}
+      AWS_BUCKET_NAME: ${{ vars.AWS_BUCKET_NAME }}
+    secrets:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      AWS_ROLE_TO_ASSUME: ${{ secrets.AWS_ROLE_TO_ASSUME }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
+      ALGOLIA_INDEX_DEV: ${{ secrets.ALGOLIA_INDEX_DEV }}
+      ALGOLIA_API_INDEXING_KEY_DEV: ${{ secrets.ALGOLIA_API_INDEXING_KEY_DEV }}
+      ALGOLIA_API_SEARCH_KEY_DEV: ${{ secrets.ALGOLIA_API_SEARCH_KEY_DEV }}
+      GTM_ID_DEV: ${{ secrets.GTM_ID_DEV }}
+      ALGOLIA_INDEX_PRODUCTION: ${{ secrets.ALGOLIA_INDEX_PRODUCTION }}
+      ALGOLIA_API_INDEXING_KEY_PRODUCTION: ${{ secrets.ALGOLIA_API_INDEXING_KEY_PRODUCTION }}
+      ALGOLIA_API_SEARCH_KEY_PRODUCTION: ${{ secrets.ALGOLIA_API_SEARCH_KEY_PRODUCTION }}
+      GTM_ID_PRODUCTION: ${{ secrets.GTM_ID_PRODUCTION }}
+      GOOGLE_SITE_VERIFICATION: ${{ secrets.GOOGLE_SITE_VERIFICATION }}

.github/workflows/deploy.yml

@@ -1,26 +1,63 @@
 name: Deploy
 
 on:
-  push:
-    branches:
-      - master
-  pull_request:
+  workflow_call:
+    inputs:
+      AWS_REGION:
+        required: true
+        type: string
+      AWS_BUCKET_NAME:
+        required: true
+        type: string
+    secrets:
+      GITHUB_TOKEN:
+        required: true
+      AWS_ROLE_TO_ASSUME:
+        required: true
+      AWS_ACCESS_KEY_ID:
+        required: true
+      AWS_SECRET_ACCESS_KEY:
+          required: true
+      ALGOLIA_APP_ID:
+        required: true
+      ALGOLIA_INDEX_DEV:
+        required: true
+      ALGOLIA_API_INDEXING_KEY_DEV:
+        required: true
+      ALGOLIA_API_SEARCH_KEY_DEV:
+        required: true
+      GTM_ID_DEV:
+        required: true
+      ALGOLIA_INDEX_PRODUCTION:
+        required: true
+      ALGOLIA_API_INDEXING_KEY_PRODUCTION:
+        required: true
+      ALGOLIA_API_SEARCH_KEY_PRODUCTION:
+        required: true
+      GTM_ID_PRODUCTION:
+        required: true
+      GOOGLE_SITE_VERIFICATION:
+        required: true
 
 jobs:
-  deploy:
+  deploy-website:
     runs-on: ubuntu-latest
     permissions: write-all
     environment: ${{ github.ref_name == 'master' && 'production' || github.ref_name }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
 
       - name: Sets env vars for dev
         if: github.event_name == 'pull_request'
         run: |
           echo "ENV=dev-${{ github.head_ref }}" >> $GITHUB_ENV
-          echo "ENV_URL=https://${{ vars.AWS_BUCKET_NAME }}/${{ github.head_ref }}" >> $GITHUB_ENV
+          echo "ENV_URL=https://${{ inputs.AWS_BUCKET_NAME }}/${{ github.head_ref }}" >> $GITHUB_ENV
           echo "BASE_URL=/${{ github.head_ref }}/" >> $GITHUB_ENV
+          echo "IS_DEBUG=true" >> $GITHUB_ENV
           echo "ALGOLIA_APP_ID=${{ secrets.ALGOLIA_APP_ID }}" >> $GITHUB_ENV
           echo "ALGOLIA_INDEX=${{ secrets.ALGOLIA_INDEX_DEV }}" >> $GITHUB_ENV
           echo "ALGOLIA_API_INDEXING_KEY=${{ secrets.ALGOLIA_API_INDEXING_KEY_DEV }}" >> $GITHUB_ENV
@@ -31,78 +68,23 @@ jobs:
         if: github.ref == 'refs/heads/master' && github.event_name == 'push'
         run: |
           echo "ENV=production" >> $GITHUB_ENV
-          echo "ENV_URL=https://${{ vars.AWS_BUCKET_NAME }}" >> $GITHUB_ENV
+          echo "ENV_URL=https://${{ inputs.AWS_BUCKET_NAME }}" >> $GITHUB_ENV
           echo "BASE_URL=/" >> $GITHUB_ENV
+          echo "IS_DEBUG=false" >> $GITHUB_ENV
           echo "ALGOLIA_APP_ID=${{ secrets.ALGOLIA_APP_ID }}" >> $GITHUB_ENV
           echo "ALGOLIA_INDEX=${{ secrets.ALGOLIA_INDEX_PRODUCTION }}" >> $GITHUB_ENV
           echo "ALGOLIA_API_INDEXING_KEY=${{ secrets.ALGOLIA_API_INDEXING_KEY_PRODUCTION }}" >> $GITHUB_ENV
           echo "ALGOLIA_API_SEARCH_KEY=${{ secrets.ALGOLIA_API_SEARCH_KEY_PRODUCTION }}" >> $GITHUB_ENV
           echo "GTM_ID=${{ secrets.GTM_ID_PRODUCTION }}" >> $GITHUB_ENV
           echo "GOOGLE_SITE_VERIFICATION==${{ secrets.GOOGLE_SITE_VERIFICATION }}" >> $GITHUB_ENV
 
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          bundler-cache: true
-          node-version: 20
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "yarnCacheDir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.yarnCacheDir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install modules
-        run: yarn install --frozen-lockfile
-
-      - name: Validate markdown authors and posts
-        id: validate_markdown
-        run: yarn validate-markdown --ci
-
-      - name: Add a comment to the PR after failed markdown validation
-        uses: marocchino/sticky-pull-request-comment@v2
-        if: github.event_name == 'pull_request' && failure()
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          number: ${{ github.event.pull_request.number }}
-          header: validate-markdown
-          message: |
-            #### Markdown invalid 🖌
-
-            The markdown of the file **${{ steps.validate_markdown.outputs.filePath }}** is invalid !
-            > ${{ steps.validate_markdown.outputs.reason }}
-
-      - name: Remove a comment to the PR after success markdown validation
-        uses: marocchino/sticky-pull-request-comment@v2
-        if: github.event_name == 'pull_request' && success()
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          number: ${{ github.event.pull_request.number }}
-          header: validate-markdown
-          delete: true
-
-      - name: Run ESLint
-        run: yarn lint:es
-
-      - name: Run Stylelint
-        run: yarn lint:style
-
-      - name: Run Compile TypeScript
-        run: yarn tsc
-
-      - name: Run Test
-        run: yarn test
-
       - name: Build
-        run: yarn prerender
+        run: npm run prerender
         env:
           NODE_ENV: production
           BASE_URL: ${{ env.BASE_URL }}
+          VITE_IS_DEBUG: ${{ env.IS_DEBUG }}
+          VITE_HOST_URL: ${{ env.ENV_URL }}
           VITE_ALGOLIA_APP_ID: ${{ env.ALGOLIA_APP_ID }}
           VITE_ALGOLIA_API_KEY: ${{ env.ALGOLIA_API_SEARCH_KEY }}
           VITE_ALGOLIA_INDEX: ${{ env.ALGOLIA_INDEX }}
@@ -116,7 +98,7 @@ jobs:
         uses: aws-actions/configure-aws-credentials@v4
         with:
           role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
-          aws-region: ${{ vars.AWS_REGION }}
+          aws-region: ${{ inputs.AWS_REGION }}
 
       - name: Start deployment
         uses: bobheadxi/deployments@v1
@@ -129,18 +111,18 @@ jobs:
 
       - name: Deploy to S3 for dev
         if: github.event_name == 'pull_request'
-        run: aws s3 sync "dist/public/" "s3://${{ vars.AWS_BUCKET_NAME }}/${{ github.head_ref }}/" --delete
+        run: aws s3 sync "dist/public/" "s3://${{ inputs.AWS_BUCKET_NAME }}/${{ github.head_ref }}/" --delete
 
       - name: Deploy to S3 for production
         if: github.ref == 'refs/heads/master' && github.event_name == 'push'
-        run: aws s3 sync "dist/public/" "s3://${{ vars.AWS_BUCKET_NAME }}/" --delete
+        run: aws s3 sync "dist/public/" "s3://${{ inputs.AWS_BUCKET_NAME }}/" --delete
 
       - name: Clear caches
         if: github.ref == 'refs/heads/master' && github.event_name == 'push'
         run: aws cloudfront create-invalidation --distribution-id "${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }}" --paths "/*"
 
       - name: Indexing on Algolia
-        run: yarn indexation:algolia
+        run: npm run indexation:algolia
         env:
           ALGOLIA_APP_ID: ${{ env.ALGOLIA_APP_ID }}
           ALGOLIA_API_INDEXING_KEY: ${{ env.ALGOLIA_API_INDEXING_KEY }}

.github/workflows/pr-closed.yml

@@ -2,7 +2,7 @@ name: PR Closed
 
 on:
   pull_request_target:
-    types: [closed]
+    types: [ closed ]
 
 jobs:
   pr-closed: