Feat/cicd pipelines

.devcontainer/.vscode/settings.json

@@ -11,21 +11,15 @@
   "vue.complete.casing.props": "camel",
   "typescript.updateImportsOnFileMove.enabled": "always",
   "typescript.suggest.autoImports": true,
-  "eslint.validate": [
-    "javascript",
-    "typescript",
-    "vue"
-  ],
+  "eslint.validate": ["javascript", "typescript", "vue"],
   "files.associations": {
     "*.vue": "vue"
   },
   "emmet.includeLanguages": {
     "vue-html": "html",
     "vue": "html"
   },
-  "i18n-ally.localesPaths": [
-    "src/i18n/locales"
-  ],
+  "i18n-ally.localesPaths": ["src/i18n/locales"],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.displayLanguage": "en",
   "i18n-ally.sourceLanguage": "en",
@@ -34,4 +28,4 @@
   "prettier.singleQuote": true,
   "prettier.printWidth": 100,
   "prettier.trailingComma": "none"
-}
+}

.devcontainer/README.md

@@ -13,7 +13,7 @@ This directory contains an ultra-minimal development container configuration for
 ### Essential VS Code Extensions (6 extensions)
 
 - **Vue.js Core**: Volar + TypeScript Vue Plugin
-- **Code Quality**: ESLint + Prettier (matches your project config)  
+- **Code Quality**: ESLint + Prettier (matches your project config)
 - **i18n Support**: i18n Ally (your project uses French/English)
 - **Testing**: Playwright (for your E2E tests)
 
@@ -43,7 +43,7 @@ This directory contains an ultra-minimal development container configuration for
 The container will automatically:
 
 - Pull the official Node.js 22 image
-- Install all 6 essential extensions  
+- Install all 6 essential extensions
 - Run `npm install` to set up dependencies
 - Install Playwright browsers with `npx playwright install --with-deps`
 - Forward port 5173 for the Vite dev server
@@ -52,7 +52,7 @@ The container will automatically:
 
 ```bash
 npm run dev          # Start Vite dev server
-npm run build        # Build for production  
+npm run build        # Build for production
 npm run test:unit    # Run Vitest unit tests
 npm run test:e2e     # Run Playwright e2e tests
 npm run lint         # ESLint checking

.devcontainer/devcontainer.json

@@ -40,11 +40,7 @@
         "editor.codeActionsOnSave": {
           "source.fixAll.eslint": "explicit"
         },
-        "eslint.validate": [
-          "javascript",
-          "typescript",
-          "vue"
-        ],
+        "eslint.validate": ["javascript", "typescript", "vue"],
         // File associations
         "files.associations": {
           "*.vue": "vue"
@@ -55,18 +51,13 @@
           "vue": "html"
         },
         // i18n Ally configuration for your project structure
-        "i18n-ally.localesPaths": [
-          "src/i18n/locales"
-        ],
+        "i18n-ally.localesPaths": ["src/i18n/locales"],
         "i18n-ally.keystyle": "nested"
       }
     }
   },
   // Forward essential development ports
-  "forwardPorts": [
-    5173,
-    4173
-  ],
+  "forwardPorts": [5173, 4173],
   "portsAttributes": {
     "5173": {
       "label": "Vite Dev Server",
@@ -79,4 +70,4 @@
   },
   // Install dependencies after container creation
   "postCreateCommand": "npm install"
-}
+}

.github/workflows/accessibility.yml

@@ -0,0 +1,68 @@
+name: Accessibility Tests
+
+on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'src/**'
+      - 'public/**'
+      - 'package.json'
+      - 'vite.config.*'
+      - 'tsconfig.*'
+      - 'index.html'
+      - 'env.d.ts'
+      - 'e2e/**'
+      - 'playwright.config.*'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  accessibility:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build project
+        run: npm run build
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Install wait-on
+        run: npm install -g wait-on
+
+      - name: Start preview server and run tests
+        run: |
+          # Start the preview server
+          npm run preview &
+          SERVER_PID=$!
+
+          # Wait for the server to be ready (timeout after 60s)
+          wait-on -t 60000 http://localhost:4173/gluko/ || {
+            echo "Server failed to start"
+            kill $SERVER_PID
+            exit 1
+          }
+
+          # Run the tests
+          npx playwright test e2e/accessibility.spec.ts
+          TEST_EXIT_CODE=$?
+
+          # Clean up the server
+          kill $SERVER_PID
+
+          # Exit with the test exit code
+          exit $TEST_EXIT_CODE

.github/workflows/build.yml

@@ -0,0 +1,29 @@
+name: Build
+
+on:
+  workflow_run:
+    workflows: ['Code Quality Checks']
+    types:
+      - completed
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build project
+        run: npm run build

.github/workflows/code_quality.yml

@@ -0,0 +1,43 @@
+name: Code Quality Checks
+
+on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'src/**'
+      - 'public/**'
+      - 'package.json'
+      - 'vite.config.*'
+      - 'tsconfig.*'
+      - 'index.html'
+      - 'env.d.ts'
+      - '.eslintrc.*'
+      - '.prettier*'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  code-quality:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - name: Install dependencies
+        run: npm ci --ignore-scripts --no-optional
+      - name: Run ESLint
+        run: npm run lint
+      - name: Install and Run Markdownlint
+        run: |
+          npm install -g markdownlint-cli
+          markdownlint '**/*.md' --ignore 'node_modules/**' --config .markdownlint.json
+      - name: Run Prettier
+        run: npx prettier --check .
+      - name: Run TypeScript type check
+        run: npm run type-check

.github/workflows/codeql.yml

@@ -0,0 +1,100 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: 'CodeQL Advanced'
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+  schedule:
+    - cron: '42 15 * * 3'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - language: actions
+            build-mode: none
+          - language: javascript-typescript
+            build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Add any setup steps before running the `github/codeql-action/init` action.
+      # This includes steps like installing compilers or runtimes (`actions/setup-node`
+      # or others). This is typically only required for manual builds.
+      # - name: Setup runtime (example)
+      #   uses: actions/setup-example@v1
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: ${{ matrix.language }}
+          build-mode: ${{ matrix.build-mode }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+
+          # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
+
+      # If the analyze step fails for one of the languages you are analyzing with
+      # "We were unable to automatically build your code", modify the matrix above
+      # to set the build mode to "manual" for that language. Then modify this step
+      # to build your code.
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+      - if: matrix.build-mode == 'manual'
+        shell: bash
+        run: |
+          echo 'If you are using a "manual" build mode for one or more of the' \
+            'languages you are analyzing, replace this with the commands to build' \
+            'your code, for example:'
+          echo '  make bootstrap'
+          echo '  make release'
+          exit 1
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3
+        with:
+          category: '/language:${{matrix.language}}'

.github/workflows/static.yml → .github/workflows/deploy_static_site.yml

@@ -5,6 +5,14 @@ on:
   # Runs on pushes targeting the default branch
   push:
     branches: ['main']
+    paths:
+      - 'src/**'
+      - 'public/**'
+      - 'package.json'
+      - 'vite.config.*'
+      - 'tsconfig.*'
+      - 'index.html'
+      - 'env.d.ts'
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

.markdownlint.json

@@ -0,0 +1,4 @@
+{
+  "MD013": false,
+  "default": true
+}

.prettierrc.json

@@ -5,4 +5,4 @@
   "singleQuote": true,
   "printWidth": 100,
   "trailingComma": "none"
-}
+}

README.md

@@ -1,8 +1,12 @@
 # Gluko
 
-[![GitHub Workflow Status (static)](https://img.shields.io/github/actions/workflow/status/gcharest/gluko/static.yml?branch=main&label=Static%20Pages&logo=github&style=flat-square)](https://github.com/gcharest/gluko/actions/workflows/static.yml)
+[![Deploy static content to Pages](https://github.com/gcharest/gluko/actions/workflows/static.yml/badge.svg)](https://github.com/gcharest/gluko/actions/workflows/static.yml)
+[![Code Quality Checks](https://github.com/gcharest/gluko/actions/workflows/code_quality.yml/badge.svg)](https://github.com/gcharest/gluko/actions/workflows/code_quality.yml)
+[![Accessibility Tests](https://github.com/gcharest/gluko/actions/workflows/accessibility.yml/badge.svg)](https://github.com/gcharest/gluko/actions/workflows/accessibility.yml)
+[![CodeQL Advanced](https://github.com/gcharest/gluko/actions/workflows/codeql.yml/badge.svg)](https://github.com/gcharest/gluko/actions/workflows/codeql.yml)
 
-Gluko is a web application designed to help individuals and families more accurately calculate the carbohydrate content in their meals. By providing an easy-to-use interface and leveraging the [Canadian Nutrient File database](https://food-nutrition.canada.ca/cnf-fce/?lang=eng), Gluko simplifies carb counting and ensures precision in determining the carb factor of various nutrients.
+Gluko is a web application designed to help individuals and families more accurately calculate the carbohydrate content in their meals.
+By providing an easy-to-use interface and leveraging the [Canadian Nutrient File database](https://food-nutrition.canada.ca/cnf-fce/?lang=eng), Gluko simplifies carb counting and ensures precision in determining the carb factor of various nutrients.
 
 ## Features