refactor(better-moodle): complete rewrite with advanced tools

.github/actions/build/action.yml

@@ -0,0 +1,37 @@
+name: 🏗 Build
+
+inputs:
+    config:
+        description: The config to build with
+        required: true
+
+runs:
+    using: composite
+    steps:
+        - name: 🎛️ setup
+          uses: ./.github/actions/setup
+
+        - name: 🏗️ build Better-Moodle for ${{ inputs.config }}
+          run: yarn build ${{ inputs.config }}
+          shell: bash
+
+        - name: 📤️ upload build
+          id: upload
+          uses: actions/upload-artifact@v4
+          with:
+              # hardcoded since closed envs are not allowed in composite actions
+              name: better-moodle-${{ inputs.config }}.user.js
+              path: dist/better-moodle-${{ inputs.config }}.user.js
+
+outputs:
+    digest:
+        description: The digest of the uploaded artifact
+        value: ${{ steps.upload.outputs.artifact-digest }}
+    file:
+        description: The filename of the built userscript
+        # using an env is not allowed => hardcoded
+        value: better-moodle-${{ inputs.config }}.user.js
+    dir:
+        description: The directory, output files live in
+        # using an env is not allowed => hardcoded
+        value: dist

.github/actions/setup/action.yml

@@ -0,0 +1,38 @@
+name: 🎛️ Setup CI
+runs:
+    using: composite
+    steps:
+        - name: 🔎 get Node and yarn versions
+          run: |
+              echo "NODE_VERSION=$(grep '"node":' ./package.json | awk -F: '{ print $2 }' | sed 's/[",]//g' | sed 's/\^v//g' | tr -d '[:space:]')"  >> $GITHUB_ENV
+              echo "YARN_VERSION=$(grep '"packageManager":' ./package.json | awk -F: '{ print $2 }' | sed 's/[",]//g' | sed 's/yarn@//g' | tr -d '[:space:]')"  >> $GITHUB_ENV
+          shell: bash
+
+        - name: 🛠️ setup Node.js
+          uses: actions/setup-node@v4
+          with:
+              node-version: ${{ env.NODE_VERSION }}
+
+        - name: 🛠️ setup yarn
+          run: |
+              corepack enable
+              yarn set version "${{ env.YARN_VERSION }}"
+          shell: bash
+
+        - name: 🔎 get yarn cache directory
+          run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+          shell: bash
+
+        - name: 💿️ restore cache
+          uses: actions/cache@v4
+          with:
+              path: |
+                  ${{ steps.yarn_cache_dir.outputs.dir }}
+                  **/node_modules
+                  **/.eslintcache
+              key: ${{ runner.os }}-cache-${{ hashFiles('**/yarn.lock', '.yarnrc.yml', '.eslintcache') }}
+              restore-keys: ${{ runner.os }}-cache-
+
+        - name: 🍱 install dependencies
+          run: yarn install --immutable
+          shell: bash

.github/workflows/build.yml

@@ -0,0 +1,67 @@
+name: build.yml
+on:
+    push:
+        branches:
+            - v2
+    pull_request:
+        branches:
+            - v2
+
+jobs:
+    find-configs:
+        name: 📇 Find configs
+        uses: ./.github/workflows/find-configs.yml
+
+    build:
+        runs-on: ubuntu-latest
+        name: 🏗️ Build
+        needs:
+            - find-configs
+        strategy:
+            matrix:
+                config: ${{ fromJson(needs.find-configs.outputs.configs) }}
+        permissions:
+            id-token: write
+            attestations: write
+        steps:
+            - name: 📥️ checkout
+              uses: actions/checkout@v4
+
+            - name: 🏗 build Better-Moodle for ${{ matrix.config }}
+              id: build
+              uses: ./.github/actions/build
+              with:
+                  config: ${{ matrix.config }}
+
+            - name: 🦭 attest build provenance
+              uses: actions/attest-build-provenance@v2
+              with:
+                  subject-name: ${{ steps.build.outputs.file }}
+                  subject-digest: sha256:${{ steps.build.outputs.digest }}
+                  show-summary: true
+
+            - name: 📊 aggregate build statistics
+              run: |
+                  echo "STATS_SIZE=$(ls -sh --si '${{ steps.build.outputs.dir }}/${{ steps.build.outputs.file }}' | awk '{print $1}')B" >> $GITHUB_ENV
+                  echo "STATS_LINES=$(wc -l '${{ steps.build.outputs.dir }}/${{ steps.build.outputs.file }}' | awk '{print $1}')" >> $GITHUB_ENV
+
+            # TODO: Output build stats
+            - name: ✍️ print build stats in summary
+              run: |
+                  echo "# 🏗️ ${{ matrix.config }}" >> $GITHUB_STEP_SUMMARY
+                  echo "## Built file: \`${{ steps.build.outputs.file }}\`" >> $GITHUB_STEP_SUMMARY
+                  echo "| Metric | Value |" >> $GITHUB_STEP_SUMMARY
+                  echo "|-------:|:------|" >> $GITHUB_STEP_SUMMARY
+                  echo "| **File size** | ${{ env.STATS_SIZE }} |" >> $GITHUB_STEP_SUMMARY
+                  echo "| **Line count** | ${{ env.STATS_LINES }} |" >> $GITHUB_STEP_SUMMARY
+
+                  echo "## Build stats" >> $GITHUB_STEP_SUMMARY
+                  echo "| Metric | Value |" >> $GITHUB_STEP_SUMMARY
+                  echo "|-------:|:------|" >> $GITHUB_STEP_SUMMARY
+                  echo "| **Creating config duration** | $(cat ${{ steps.build.outputs.dir }}/.stats_perf_conf) |" >> $GITHUB_STEP_SUMMARY
+                  echo "| **Building duration** | $(cat ${{ steps.build.outputs.dir }}/.stats_perf_build) |" >> $GITHUB_STEP_SUMMARY
+                  echo "| **Total duration** | $(cat ${{ steps.build.outputs.dir }}/.stats_perf_total) |" >> $GITHUB_STEP_SUMMARY
+                  echo "*Durations are mm:ss,s*"
+
+                  echo "## Included features" >> $GITHUB_STEP_SUMMARY
+                  cat ${{ steps.build.outputs.dir }}/.stats_features.md >> $GITHUB_STEP_SUMMARY

.github/workflows/check.yml

@@ -0,0 +1,70 @@
+name: check.yml
+on:
+    push:
+        branches:
+            - v2
+    pull_request:
+        branches:
+            - v2
+
+jobs:
+    prettier:
+        runs-on: ubuntu-latest
+        name: 🍱 Prettier
+        steps:
+            - name: 📥️ checkout
+              uses: actions/checkout@v4
+
+            - name: 🎛️ setup
+              uses: ./.github/actions/setup
+
+            - name: 🍱 run prettier
+              run: yarn prettier:write
+
+            - name: 🔢 count changes
+              run: echo "CHANGES_COUNT=$(git status -s | wc -l)" >> $GITHUB_ENV
+
+            - name: ✅ approve prettier result
+              if: ${{ env.CHANGES_COUNT == 0 }}
+              run: |
+                  echo "# ✅ Prettier approves code" >> $GITHUB_STEP_SUMMARY
+                  echo "Running prettier on $(echo ${{ github.sha }} | head -c 7) did not result in any changes. 🎉" >> $GITHUB_STEP_SUMMARY
+
+            - name: 🖨️ print diff introduced by prettier
+              if: ${{ env.CHANGES_COUNT > 0 }}
+              run: git diff
+
+            - name: ⚠️ warn over prettier result
+              if: ${{ env.CHANGES_COUNT > 0 }}
+              run: |
+                  echo "# ⚠️ Prettier changed some code" >> $GITHUB_STEP_SUMMARY
+                  echo "There were a total of **${{ env.CHANGES_COUNT }}** files affected by running prettier on $(echo ${{ github.sha }} | head -c 7):" >> $GITHUB_STEP_SUMMARY
+                  echo "\`\`\`" >> $GITHUB_STEP_SUMMARY
+                  git diff --compact-summary >> $GITHUB_STEP_SUMMARY
+                  echo "\`\`\`" >> $GITHUB_STEP_SUMMARY
+                  echo "For a complete diff introduced by prettier, please see the workflow logs." >> $GITHUB_STEP_SUMMARY
+
+    eslint:
+        runs-on: ubuntu-latest
+        name: 🚨 ESLint
+        steps:
+            - name: 📥️ checkout
+              uses: actions/checkout@v4
+
+            - name: 🎛️ setup
+              uses: ./.github/actions/setup
+
+            - name: 🚨 run eslint
+              run: yarn lint:fix -o .eslint-report.json --format json
+              continue-on-error: true
+
+            - name: 🖨  create annotations
+              uses: ataylorme/eslint-annotate-action@v3
+              with:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                  report-json: .eslint-report.json
+                  only-pr-files: true
+                  fail-on-warning: false
+                  fail-on-error: true
+                  check-name: ESLint Report Analysis
+                  markdown-report-on-step-summary: true

.github/workflows/find-configs.yml

@@ -0,0 +1,23 @@
+name: 📇 Find configs
+
+on:
+    workflow_call:
+        outputs:
+            configs:
+                description: A JSON string of all available configs
+                value: ${{ jobs.find-configs.outputs.configs }}
+
+jobs:
+    find-configs:
+        name: 📇 Find configs
+        runs-on: ubuntu-latest
+        outputs:
+            configs: ${{ steps.configs.outputs.configs }}
+        steps:
+            - uses: actions/checkout@v4
+              with:
+                  sparse-checkout: |
+                      configs
+
+            - id: configs
+              run: echo "configs=$(basename -s .json -a ./configs/*.json | jq -R | jq -s | jq -c '. - ["_schema"]')" >> $GITHUB_OUTPUT

.github/workflows/icons.yml

@@ -0,0 +1,78 @@
+name: icons.yml
+on:
+    workflow_dispatch:
+    push:
+        branches:
+            - v2
+        paths:
+            - configs/*.json
+            - .github/workflows/icons.yml
+
+jobs:
+    icons:
+        runs-on: ubuntu-latest
+        name: 🖼️ Create icons
+        steps:
+            - name: 📥️ checkout
+              uses: actions/checkout@v4
+              with:
+                  sparse-checkout: |
+                      configs
+                      .yarn
+                      package.json
+
+            - name: 🔎 get Node and version
+              run: |
+                  echo "NODE_VERSION=$(grep '"node":' ./package.json | awk -F: '{ print $2 }' | sed 's/[",]//g' | sed 's/\^v//g' | tr -d '[:space:]')"  >> $GITHUB_ENV
+
+            - name: 🛠 setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ env.NODE_VERSION }}
+
+            - name: 🍱 install converter
+              run: npm install -gy svgexport
+
+            - name: 🖼️ create icons
+              run: |
+                  # create output directories
+                  mkdir svg
+                  mkdir png
+
+                  # set sizes
+                  size=1000
+
+                  # find configs and print them in a line each
+                  jq -nMr '[inputs | select(.icon) | [(input_filename | gsub("^configs/|.json$"; "")), .icon, .github.user, .github.repo, (.github.branch | if . == "" then "main" else . end)] | join("\n")] | join("\n")' configs/*.json | \
+                    # for each config
+                    while read -r config; read -r icon; read -r user; read -r repo; read -r branch; do
+                      svgname="svg/$config.svg"
+                      pngname="png/$config.png"
+                      branch=${branch:="main"}
+                      moothel="https://raw.githubusercontent.com/$user/$repo/$branch/img/moothel.png"
+
+                      # write svg to a file
+                      echo "$config"
+                      echo "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 $size $size'>" > "$svgname"
+                      echo "  <image x='0' y='0' width='100%' height='100%' preserveAspectRatio='meet' href='$moothel'/>" >> "$svgname"
+                      echo "  <rect  x='66%' y='66%' width='33%' height='33%' fill='white' opacity='0.5'/>" >> "$svgname"
+                      echo "  <image x='66%' y='66%' width='33%' preserveAspectRatio='xMidYMid meet' href='$icon'/>" >> "$svgname"
+                      echo "</svg>" >> "$svgname"
+
+                      # convert to png
+                      svgexport "$svgname" "$pngname"
+                    done
+
+            - name: 📤 upload icons
+              uses: actions/upload-artifact@v4
+              with:
+                  name: icons
+                  path: png/
+
+            - name: 🚀 deploy icons
+              uses: cloudflare/wrangler-action@v3
+              with:
+                  apiToken: ${{ secrets.ICONS_UPLOAD_CLOUDFLARE_API_TOKEN }}
+                  accountId: ${{ secrets.ICONS_UPLOAD_CLOUDFLARE_ACCOUNT_ID }}
+                  command: |
+                      pages deploy png --project-name=better-moodle-icons --commit-dirty=true --branch=main

.github/workflows/release-please.yml

@@ -11,29 +11,50 @@ name: release-please
 
 jobs:
     release:
+        name: 🚀 release-please
         runs-on: ubuntu-latest
         steps:
             - uses: googleapis/release-please-action@v4
               id: release
               with:
                   config-file: .release-please-config.json
                   manifest-file: .release-please-manifest.json
+        outputs:
+            released: ${{ steps.release.outputs.release_created }}
+            tag: ${{ steps.release.outputs.tag_name }}
 
-            - name: Checkout
-              if: ${{ steps.release.outputs.release_created }}
+    find-configs:
+        name: 📇 find configs
+        uses: ./.github/workflows/find-configs.yml
+        if: ${{ needs.release.outputs.released }}
+
+    assets:
+        name: 📤️ build and upload release assets
+        runs-on: ubuntu-latest
+        needs:
+            - find-configs
+        strategy:
+            matrix:
+                config: ${{ fromJson(needs.find-configs.outputs.configs) }}
+        steps:
+            - name: 📥️ checkout
               uses: actions/checkout@v4
 
-            - name: Upload release artifacts
-              if: ${{ steps.release.outputs.release_created }}
+            - name: 🏗  build
+              id: build
+              uses: ./.github/actions/build
+              with:
+                  config: ${{ matrix.config }}
+
+            - name: 📤 upload release artifacts
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
               run: |
-                  # make Better-Moodle available via a nicer link than redesign.user.js
-                  cp redesign.user.js better-moodle.user.js
-                  # extract metadata/userscript-header from the user script
-                  awk '/\/\/ ==UserScript==/,/\/\/ ==\/UserScript==/' better-moodle.user.js > better-moodle.meta.js
+                  # get meta filename
+                  file="${{ steps.build.output.file }}"
+                  meta=$(sed 's/\.user\.js/\.meta\.user\.js/' <<< "$file")
 
                   # upload the release artifacts with special nice names
-                  gh release upload ${{ steps.release.outputs.tag_name }} \
-                    "better-moodle.user.js#Better-Moodle userscript version ${{ steps.release.outputs.tag_name }} (better-moodle.user.js)" \
-                    "better-moodle.meta.js#Better-Moodle meta file for userscript managers (better-moodle.meta.js)"
+                  gh release upload ${{ needs.release.outputs.tag }} \
+                    "${{ steps.build.output.dir }}/$file#[${{ matrix.config }}] Better-Moodle userscript version ${{ steps.release.outputs.tag_name }} ($file)" \
+                    "${{ steps.build.output.dir }}/$meta#[${{ matrix.config }}] Better-Moodle meta file for userscript managers ($meta)"

.gitignore

@@ -1,4 +1,8 @@
 node_modules
+dist
+
+src/style/**/*.d.ts
+src/features/**/*.scss.d.ts
 
 # Editor directories and files
 .idea
@@ -20,4 +24,6 @@ node_modules
 !.yarn/versions
 
 # temp files
-.eslintcache
+.eslintcache
+svg
+png