Lighthouse ci action

.github/lighthouse/lighthouse-config-dev.json

@@ -0,0 +1,34 @@
+{
+  "ci": {
+    "assert": {
+      "preset": "lighthouse:no-pwa",
+      "assertions": {
+        "bootup-time": "off",
+        "canonical": "off",
+        "dom-size": "off",
+        "first-contentful-paint": "off",
+        "first-cpu-idle": "off",
+        "first-meaningful-paint": "off",
+        "font-display": "off",
+        "interactive": "off",
+        "is-crawlable": "off",
+        "is-on-https:": "off",
+        "largest-contentful-paint": "off",
+        "mainthread-work-breakdown": "off",
+        "max-potential-fid": "off",
+        "speed-index": "off",
+        "render-blocking-resources": "off",
+        "unminified-css": "off",
+        "unminified-javascript": "off",
+        "unused-css-rules": "off",
+        "unused-javascript": "off",
+        "uses-long-cache-ttl": "off",
+        "uses-rel-preconnect": "off",
+        "uses-rel-preload": "off",
+        "uses-text-compression": "off",
+        "uses-responsive-images": "off",
+        "uses-webp-images": "off"
+      }
+    }
+  }
+}

.github/lighthouse/lighthouse-config-prod.json

@@ -0,0 +1,11 @@
+{
+  "ci": {
+    "assert": {
+      "assertions": {
+        "categories:accessibility": ["error", {"minScore": 1}],
+        "categories:best-practices": ["error", {"minScore": 1}],
+        "categories:seo": ["error", {"minScore": 1}]
+      }
+    }
+  }
+}

.github/workflows/production-checks.yml

@@ -0,0 +1,40 @@
+######################################
+## Custom Web Almanac GitHub action ##
+######################################
+#
+# Run checks against the production website
+#
+name: Production Checks
+on:
+  schedule:
+    #        ┌───────────── minute (0 - 59)
+    #        │ ┌───────────── hour (0 - 23)
+    #        │ │ ┌───────────── day of the month (1 - 31)
+    #        │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)
+    #        │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)
+    #        │ │ │ │ │
+    #        │ │ │ │ │
+    #        │ │ │ │ │
+    #        * * * * *
+    - cron: '45 13 * * 0'
+  workflow_dispatch:
+jobs:
+  checks:
+    runs-on: ubuntu-latest
+    if: github.repository == 'HTTPArchive/almanac.httparchive.org'
+    steps:
+    - name: Set the list of URLs for Lighthouse to check
+      run: ./src/tools/scripts/set_lighthouse_urls.sh -p
+    - name: Audit URLs using Lighthouse
+      uses: treosh/lighthouse-ci-action@v3
+      id: LHCIAction
+      with:
+        # For prod, we simply check for 100% in Accessibility, Best Practices and SEO
+        # We don't check Performance as too much variability and no guarantees on perf in GitHub Actions.
+        configPath: .github/lighthouse/lighthouse-config-prod.json
+        uploadArtifacts: true # save results as an action artifacts
+        temporaryPublicStorage: true # upload lighthouse report to the temporary storage
+    - name: Show Lighthouse outputs
+      run: |
+        # All results by URL:
+        echo '${{ steps.LHCIAction.outputs.manifest }}' | jq -r '.[] | (.summary|tostring) + " - " + .url'

.github/workflows/test_website.yml

@@ -39,3 +39,20 @@ jobs:
         FILTER_REGEX_INCLUDE: src/static/html/.*
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         VALIDATE_HTML: true
+    - name: Set the list of URLs for Lighthouse to check
+      env:
+        RUN_TYPE: ${{ github.event_name }}
+        COMMIT_SHA: ${{ github.sha }}
+      run: ./src/tools/scripts/set_lighthouse_urls.sh
+    - name: Audit URLs using Lighthouse
+      uses: treosh/lighthouse-ci-action@v3
+      id: LHCIAction
+      with:
+        # For dev, turn off all timing perf audits (too unreliable) and a few others that don't work on dev
+        configPath: .github/lighthouse/lighthouse-config-dev.json
+        uploadArtifacts: true # save results as an action artifacts
+        temporaryPublicStorage: true # upload lighthouse report to the temporary storage
+    - name: Show Lighthouse outputs
+      run: |
+        # All results by URL:
+        echo '${{ steps.LHCIAction.outputs.manifest }}' | jq -r '.[] | (.summary|tostring) + " - " + .url'

src/content/es/2019/css.md

@@ -100,7 +100,7 @@ Como era de esperar, en la Figura 2.5, `px` es el tipo de unidad más utilizado,
 
 Cuando se trata de unidades basadas en el espacio físico, la unidad `cm` (or centímetros) es la más popular por mucho, seguida por `in` (pulgadas), y luego por  `Q`.Sabemos que este tipo de unidades son específicamente útiles para imprimir hojas de estilo, ¡pero ni siquiera sabíamos que la unidad `Q` existía hasta esta encuesta! ¿Sabías?
 
-<p class="note">Una versión anterior de este capítulo discutia la inesperada popularidad de la unidad<code>Q</code>. Gracias a la discusión de la comunidad <a href="https://discuss.httparchive.org/t/chapter-2-css/1757/6"></a> alrededor de este capítulo, hemos identificado que esto fue un error en nuestro análisis y hemos actualizado la Figura 2.5 en consecuencia.</p>
+<p class="note">Una versión anterior de este capítulo discutia la inesperada popularidad de la unidad<code>Q</code>. Gracias a la <a href="https://discuss.httparchive.org/t/chapter-2-css/1757/6">discusión de la comunidad</a> alrededor de este capítulo, hemos identificado que esto fue un error en nuestro análisis y hemos actualizado la Figura 2.5 en consecuencia.</p>
 
 ### Unidades basadas en el viewport
 

src/static/css/page.css

@@ -647,6 +647,10 @@ figure .fig-desktop {
   .anchor-link:focus::before {
     content: '';
   }
+
+  .content ul li {
+    padding: 5px 0;
+  }
 }
 
 /* Code highlighting */

src/tools/scripts/set_lighthouse_urls.sh

@@ -0,0 +1,87 @@
+#!/bin/bash
+
+LIGHTHOUSE_CONFIG_FILE="../.github/lighthouse/lighthouse-config-dev.json"
+LIGHTHOUSE_PROD_CONFIG_FILE="../.github/lighthouse/lighthouse-config-prod.json"
+
+# Usage info
+show_help() {
+cat << EOH
+Usage: ${0##*/} [-p]
+Get a list of URLs to run a lighthouse test on.
+If a commit is given then only URLs changes are tested otherwise all.
+
+    -h   display this help and exit
+    -p   get all production URLs from sitemap.xml
+EOH
+}
+
+OPTIND=1 # Reseting is good practive
+production=0
+while getopts "h?p" opt; do
+    case "$opt" in
+    h|\?)
+        show_help
+        exit 0
+        ;;
+    p)  production=1
+        ;;
+    esac
+done
+shift "$((OPTIND-1))" # Discard the options and sentinel --
+
+# This script must be run from src directory
+if [ -d "src" ]; then
+  cd src || exit
+fi
+
+LIGHTHOUSE_URLS=""
+
+# Set some URLs that should always be checked on pull requests
+# to ensure basic coverage
+BASE_URLS=$(cat <<-END
+http://127.0.0.1:8080/en/2019/
+http://127.0.0.1:8080/en/2019/javascript
+http://127.0.0.1:8080/en/2020/
+END
+)
+
+if [ "${production}" == "1" ]; then
+
+    # Get the production URLs from the production sitemap
+    LIGHTHOUSE_URLS=$(curl -s https://almanac.httparchive.org/sitemap.xml | grep "<loc" | grep -v "/static/" | sed 's/ *<loc>//g' | sed 's/<\/loc>//g')
+
+    # Switch to the Production Config file
+    LIGHTHOUSE_CONFIG_FILE="${LIGHTHOUSE_PROD_CONFIG_FILE}"
+
+elif [ "${RUN_TYPE}" == "pull_request" ] && [ "${COMMIT_SHA}" != "" ]; then
+
+    # If this is part of pull request then get list of files as those changed
+    # Uses similar logic to GitHub Super Linter (https://github.com/github/super-linter/blob/master/lib/buildFileList.sh)
+    # First checkout main to get list of differences
+    git pull --quiet
+    git checkout main
+    # Then get the changes
+    CHANGED_FILES=$(git diff --name-only "main...${COMMIT_SHA}" --diff-filter=d content templates | grep -v base.html | grep -v ejs | grep -v base_ | grep -v toc.html | grep -v sitemap)
+    # Then back to the pull request changes
+    git checkout --progress --force "${COMMIT_SHA}"
+
+    # Transform the files to http://127.0.0.1:8080 URLs
+    LIGHTHOUSE_URLS=$(echo "${CHANGED_FILES}" | sed 's/src\/content/http:\/\/127.0.0.1:8080/g' | sed 's/\.md//g' | sed 's/\/base\//\/en\//g' | sed 's/src\/templates/http:\/\/127.0.0.1:8080/g' | sed 's/\.html//g' | sed 's/_/-/g' | sed 's/\/2019\/accessibility-statement/\/accessibility-statement/g' )
+
+    # Add base URLs and strip out newlines
+    LIGHTHOUSE_URLS=$(echo -e "${LIGHTHOUSE_URLS}\n${BASE_URLS}" | sed '/^$/d')
+
+else
+
+    # Else test every URL (except PDFs) in the sitemap
+    LIGHTHOUSE_URLS=$(grep loc templates/sitemap.xml | grep -v "/static/" | sed 's/ *<loc>//g' | sed 's/<\/loc>//g' | sed 's/https:\/\/almanac.httparchive.org/http:\/\/127.0.0.1:8080/g')
+
+fi
+
+echo "URLS to check:"
+echo "${LIGHTHOUSE_URLS}"
+
+# Use jq to insert the URLs into the config file:
+LIGHTHOUSE_CONFIG_WITH_URLS=$(echo "${LIGHTHOUSE_URLS}" | jq -Rs '. | split("\n") | map(select(length > 0))' | jq -s '.[0] * {ci: {collect: {url: .[1]}}}' "${LIGHTHOUSE_CONFIG_FILE}" -)
+
+echo "${LIGHTHOUSE_CONFIG_WITH_URLS}" > "${LIGHTHOUSE_CONFIG_FILE}"