From a93dd5a9886940bc972ab51661abdc7a4b1fa882 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gregorio=20Palam=C3=A0?= <gregoriopalama@gmail.com>
Date: Tue, 30 Jan 2024 16:04:05 +0100
Subject: [PATCH] INFRA01 - Create a check for a11y (#101)

* Added axe and lighthouse checks

* Updated to node 20, install pnpm

* pnpm install instead of pnpm ci

* Using --no-frozen-lockfile

* Cleaning

* renamed lighthouserc.js

* Node version and chromedriver

* Chromedriver version

* Axe vulnerabilities fix (#100)

* axe vulnerabilities fix

* checkoutv4, setup-nodev4, language fix

* cachev4

* actions on main

* Lighthouse improvements

* lighthouse fix

* fix lighthouse config

* PR number fix

* permissions for action

* changed version for sticky pull request

* number on commit

* switched lighthouse on main
---
 .github/workflows/axe.yml                     | 46 +++++++++++
 .github/workflows/lighthouse.yml              | 77 +++++++++++++++++++
 .../lighthouse/lighthouse-config.cjs          | 12 +++
 .../lighthouse/lighthouseCommentMaker.cjs     | 63 +++++++++++++++
 .../workflows/lighthouse/lighthouserc.json    |  9 +++
 src/pages/code-of-conduct.md                  | 54 -------------
 src/pages/games.astro                         | 26 -------
 src/pages/index.astro                         | 19 ++++-
 src/pages/speaker-slides.astro                | 37 ---------
 9 files changed, 223 insertions(+), 120 deletions(-)
 create mode 100644 .github/workflows/axe.yml
 create mode 100644 .github/workflows/lighthouse.yml
 create mode 100644 .github/workflows/lighthouse/lighthouse-config.cjs
 create mode 100644 .github/workflows/lighthouse/lighthouseCommentMaker.cjs
 create mode 100644 .github/workflows/lighthouse/lighthouserc.json
 delete mode 100644 src/pages/code-of-conduct.md
 delete mode 100644 src/pages/games.astro
 delete mode 100644 src/pages/speaker-slides.astro

diff --git a/.github/workflows/axe.yml b/.github/workflows/axe.yml
new file mode 100644
index 00000000..75257f78
--- /dev/null
+++ b/.github/workflows/axe.yml
@@ -0,0 +1,46 @@
+name: Axe
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  axe:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: ['20.x']
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - run: pnpm install --no-frozen-lockfile
+      - run: pnpm run build --if-present
+      - run: pnpm run dev & npx wait-on http://localhost:4321
+      - run: pnpm install -g chromedriver@120.0.2
+      - name: Run axe
+        run: |
+          pnpm install -g @axe-core/cli
+          axe --chromedriver-path $(pnpm root -g)/chromedriver/bin/chromedriver http://localhost:4321 --exit
\ No newline at end of file
diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml
new file mode 100644
index 00000000..6115e2ed
--- /dev/null
+++ b/.github/workflows/lighthouse.yml
@@ -0,0 +1,77 @@
+name: Lighthouse
+
+permissions:
+  pull-requests: write
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: ['20.x']
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - run: pnpm install --no-frozen-lockfile
+      - run: pnpm run build
+      - run: pnpm run dev & npx wait-on http://localhost:4321
+      - name: Run Lighthouse
+        id: lighthouse_audit
+        uses: treosh/lighthouse-ci-action@v10
+        with:
+          urls: |
+            http://localhost:4321
+          configPath: ./.github/workflows/lighthouse/lighthouserc.json
+          uploadArtifacts: true
+          temporaryPublicStorage: true
+          runs: 5
+      - name: Format Lighthouse score
+        uses: actions/github-script@v5
+        id: format_lighthouse_score
+        with:
+          script: |
+            const lighthouseCommentMaker = require('./.github/workflows/lighthouse/lighthouseCommentMaker.cjs');
+
+            const lighthouseOutputs = {
+              manifest: ${{ steps.lighthouse_audit.outputs.manifest }},
+              links: ${{ steps.lighthouse_audit.outputs.links }}
+            };
+
+            const prComment = lighthouseCommentMaker({ lighthouseOutputs });
+            core.setOutput("pr_comment", prComment);
+      - uses: jwalton/gh-find-current-pr@v1
+        id: pr_number_finder
+      - name: Add Lighthouse stats as comment
+        uses: marocchino/sticky-pull-request-comment@v2.8.0
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          header: lighthouse
+          number: ${{ github.event.number || steps.pr_number_finder.outputs.pr }}
+          message: ${{ steps.format_lighthouse_score.outputs.pr_comment }}
\ No newline at end of file
diff --git a/.github/workflows/lighthouse/lighthouse-config.cjs b/.github/workflows/lighthouse/lighthouse-config.cjs
new file mode 100644
index 00000000..502ebc6c
--- /dev/null
+++ b/.github/workflows/lighthouse/lighthouse-config.cjs
@@ -0,0 +1,12 @@
+module.exports = {
+    extends: 'lighthouse:default',
+    settings: {
+      skipAudits: [
+        'canonical', 
+        'maskable-icon',
+        'valid-source-maps',
+        'unsized-images',
+        'offline-start-url',
+      ],
+    },
+  };
\ No newline at end of file
diff --git a/.github/workflows/lighthouse/lighthouseCommentMaker.cjs b/.github/workflows/lighthouse/lighthouseCommentMaker.cjs
new file mode 100644
index 00000000..48686339
--- /dev/null
+++ b/.github/workflows/lighthouse/lighthouseCommentMaker.cjs
@@ -0,0 +1,63 @@
+// @ts-check
+
+/**
+ * @typedef {Object} Summary
+ * @prop {number} performance
+ * @prop {number} accessibility
+ * @prop {number} best-practices
+ * @prop {number} seo
+ * @prop {number} pwa
+ */
+
+/**
+ * @typedef {Object} Manifest
+ * @prop {string} url
+ * @prop {boolean} isRepresentativeRun
+ * @prop {string} htmlPath
+ * @prop {string} jsonPath
+ * @prop {Summary} summary
+ */
+
+/**
+ * @typedef {Object} LighthouseOutputs
+ * @prop {Record<string, string>} links
+ * @prop {Manifest[]} manifest
+ */
+
+const formatScore = (/** @type { number } */ score) => Math.round(score * 100);
+const emojiScore = (/** @type { number } */ score) =>
+  score >= 0.9 ? '🟢' : score >= 0.5 ? '🟠' : '🔴';
+
+const scoreRow = (
+  /** @type { string } */ label,
+  /** @type { number } */ score
+) => `| ${emojiScore(score)} ${label} | ${formatScore(score)} |`;
+
+/**
+ * @param {LighthouseOutputs} lighthouseOutputs
+ */
+function makeComment(lighthouseOutputs) {
+  const { summary } = lighthouseOutputs.manifest[0];
+  const [[testedUrl, reportUrl]] = Object.entries(lighthouseOutputs.links);
+
+  const comment = `## ⚡️🏠 Lighthouse report
+
+We ran Lighthouse against the changes and produced this [report](${reportUrl}). Here's the summary:
+
+| Category | Score |
+| -------- | ----- |
+${scoreRow('Performance', summary.performance)}
+${scoreRow('Accessibility', summary.accessibility)}
+${scoreRow('Best practices', summary['best-practices'])}
+${scoreRow('SEO', summary.seo)}
+${scoreRow('PWA', summary.pwa)}
+
+*Lighthouse ran against [${testedUrl}](${testedUrl})*
+`;
+
+  return comment;
+}
+
+module.exports = ({ lighthouseOutputs }) => {
+  return makeComment(lighthouseOutputs);
+};
\ No newline at end of file
diff --git a/.github/workflows/lighthouse/lighthouserc.json b/.github/workflows/lighthouse/lighthouserc.json
new file mode 100644
index 00000000..9a83c12b
--- /dev/null
+++ b/.github/workflows/lighthouse/lighthouserc.json
@@ -0,0 +1,9 @@
+{
+    "ci": {
+      "collect": {
+        "settings": {
+          "configPath": "./.github/workflows/lighthouse/lighthouse-config.cjs"
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/src/pages/code-of-conduct.md b/src/pages/code-of-conduct.md
deleted file mode 100644
index b34d836f..00000000
--- a/src/pages/code-of-conduct.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: Code of conduct
-meta:
-  {
-    title: "Code of conduct",
-    description: "GDG Pescara is dedicated to providing a harassment-free and inclusive event experience for everyone regardless of gender identity and expression, sexual orientation, disabilities, neurodiversity, physical appearance, body size, ethnicity, nationality, race, age, religion, or other protected category. We do not tolerate harassment of event participants in any form. GDG Pescara takes violations of this policy seriously and will respond appropriately.",
-  }
----
-
-## General
-
-### Introduction
-
-GDG Pescara is dedicated to providing a harassment-free and inclusive event experience for everyone regardless of gender identity and expression, sexual orientation, disabilities, neurodiversity, physical appearance, body size, ethnicity, nationality, race, age, religion, or other protected category. We do not tolerate harassment of event participants in any form. GDG Pescara takes violations of this policy seriously and will respond appropriately.
-
-### Policy
-
-All participants of Devfest Pescara 2023 must abide by the following policy:
-
-1. Be excellent to each other. We want the event to be an excellent experience for everyone regardless of gender identity and expression, sexual orientation, disabilities, neurodiversity, physical appearance, body size, ethnicity, nationality, race, age, religion, or other protected category. Treat everyone with respect. Participate while acknowledging that everyone deserves to be here -- and each of us has the right to enjoy our experience _without_ fear of harassment, discrimination, or condescension, whether blatant or via micro-aggressions. Jokes shouldn’t demean others. Consider what you are saying and how it would feel if it were said to or about you.
-2. Speak up if you see or hear something. Harassment is not tolerated, and you are empowered to politely engage when you or others are disrespected. The person making you feel uncomfortable may not be aware of what they are doing, and politely bringing their behavior to their attention is encouraged. If a participant engages in harassing or uncomfortable behavior, the event organizers may take any action they deem appropriate, including warning or expelling the offender from the event with no refund. If you are being harassed or feel uncomfortable, notice that someone else is being harassed, or have any other concerns, please contact a member of the event staff immediately.
-3. Harassment is not tolerated. Harassment includes, but is not limited to: verbal language that reinforces social structures of domination related to gender identity and expression, sexual orientation, disabilities, neurodiversity, physical appearance, body size, ethnicity, nationality, race, age, religion, or other protected category; sexual imagery in public spaces; deliberate intimidation; stalking; following; harassing photography or recording; sustained disruption of talks or other events; offensive verbal language; inappropriate physical contact; unwelcome sexual attention. Participants asked to stop any harassing behavior are expected to comply immediately.
-4. Practice saying "Yes and" to each other. It’s a theatre improv technique to build on each other’s ideas. We all benefit when we create together.
-
-### Scope
-
-This policy extends to talks, forums, workshops, codelabs, social media, parties, hallway conversations, all attendees, partners, sponsors, volunteers, event staff, etc. You catch our drift. GDG Pescara reserves the right to refuse admittance to, or remove any person from, Devfest Pescara 2023 at any time in its sole discretion. This includes, but is not limited to, attendees behaving in a disorderly manner or failing to comply with this policy, and the terms and conditions herein. If a participant engages in harassing or uncomfortable behavior, the event organizers may take any action they deem appropriate, including warning or expelling the offender from the event with no refund.
-
-Our event staff can usually be identified by special badges/attire. Our zero-tolerance policy means that we will look into and review every allegation of violation of our Event Community Guidelines and Anti-Harassment Policy and respond appropriately. Please note, while we take all concerns raised seriously, we will use our discretion as to determining when and how to follow up on reported incidents, and may decline to take any further action and/or may direct the participant to other resources for resolution.
-
-Event staff will be happy to help participants contact venue security or local law enforcement, provide escorts, or otherwise assist those experiencing discomfort or harassment to feel safe for the duration of the event. We value your attendance.
-
-Exhibiting partners, sponsors or vendor booths, or similar activities are also subject to this policy. In particular, exhibitors should not use sexualized images, activities, or other material. Booth staff (including volunteers) should not use sexualized clothing/uniforms/costumes, or otherwise create a sexualized environment. Participants and exhibiting partners or sponsors disobeying this policy will be notified and are expected to stop any offending behavior immediately.
-
-### Why this policy is important
-
-Harassment at events and in online communities is unfortunately common. Creating an official policy aims to improve this by making it clear that harassment of anyone for any reason is not acceptable within our events and communities. This policy may prevent harassment by clearly defining expectations for behavior, aims to provide reassurance, and encourages people who have had bad experiences at other events to participate in this one.
-
-### License and attribution
-
-This policy is [licensed](https://support.google.com/developergroups/answer/3340512) under the [Creative Commons Zero license](https://creativecommons.org/publicdomain/zero/1.0/).
-
-This policy is based on and influenced by several other community policies including Ohio LinuxFest Anti-Harassment policy, Con Anti-Harassment Project, Geek Feminism Wiki (created by the Ada Initiative), ConfCodeofConduct.com, JSconf, Rust, Diversity in Python, and Write/Speak/Code.
-
-### Report incident
-
-To report an incident look for a staff member by badge/attire or contact our incident response team below:
-
-- Gregorio Palamà \[+39 340 23 67 996\] - [gregoriopalama@gmail.com](mailto:gregoriopalama@gmail.com)
-- Luca Di Vita \[+39 370 13 91 973\] - [lucadivita.ldv@gmail.com](mailto:lucadivita.ldv@gmail.com)
-
-#### Anonymous report
-
-You can make an anonymous report [here](https://forms.gle/kNnKwohuJgZeLsGi7). We can't follow up with you directly, but we will fully investigate it and take whatever action is necessary to prevent a recurrence.
diff --git a/src/pages/games.astro b/src/pages/games.astro
deleted file mode 100644
index b815ee11..00000000
--- a/src/pages/games.astro
+++ /dev/null
@@ -1,26 +0,0 @@
----
-import { getEntryBySlug } from "astro:content";
-import i18next, { changeLanguage, t } from "i18next";
-import Heading from "../components/Heading.astro";
-import Section from "../components/Section.astro";
-import Layout from "../layouts/Layout.astro";
-
-changeLanguage("en");
-
-const content = await getEntryBySlug("games", i18next.language);
-if (!content) {
-    throw new Response("Not found", { status: 404 });
-}
-const { Content } = await content.render();
----
-
-<Layout title={t("page-title", {title: t("games")})}>
-  <Section additionalClass="dots pt-32 pb-16 md:py-32 xl:py-64">
-    <div class="max-w-screen-lg m-auto text-center">
-      <Heading level="h2" text={t("games")} />
-    </div>
-  </Section>
-  <div class="max-w-screen-xl m-auto px-6 prose py-16 lg:py-32">
-    <Content />
-  </div>
-</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d1546bd4..57c29fe6 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,3 +1,16 @@
-<div>
-  <h1>Hedwig</h1>
-</div>
+---
+import i18next, { changeLanguage } from "i18next";
+
+changeLanguage("en");
+---
+
+<html lang={i18next.language}>
+  <head>
+    <title>Hedwig</title>
+  </head>
+  <body>
+    <main role="main">
+      <h1>Welcome to Hedwig!</h1>
+    </main>
+  </body>
+</html>
diff --git a/src/pages/speaker-slides.astro b/src/pages/speaker-slides.astro
deleted file mode 100644
index 5c36098f..00000000
--- a/src/pages/speaker-slides.astro
+++ /dev/null
@@ -1,37 +0,0 @@
----
-import { getCollection } from "astro:content";
-import { changeLanguage, t } from "i18next";
-import Heading from "../components/Heading.astro";
-import Section from "../components/Section.astro";
-import Layout from "../layouts/Layout.astro";
-
-changeLanguage("en");
-
-const speakers = await getCollection("speakers");
----
-
-<Layout title="Devfest Pescara 2023 - Location">
-  <Section additionalClass="dots pt-32 pb-16 md:py-32 xl:py-64">
-    <div class="max-w-screen-lg m-auto text-center">
-      <Heading level="h2" text="Slides" />
-    </div>
-  </Section>
-  <div class="max-w-screen-xl m-auto px-6 prose py-16 lg:py-32">
-    {
-      speakers.map((speaker) =>
-        speaker.data.slides ? (
-          <div>
-            <h2>{speaker.data.name}</h2>
-            <ul>
-              {speaker.data.slides.map((slide: any) => (
-                <li>
-                  <a href={slide.url}>{slide.title}</a>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ) : null,
-      )
-    }
-  </div>
-</Layout>