ADG-414 Improve code quality with github actions

.github/workflows/codeQuality.yml

@@ -0,0 +1,26 @@
+name: Code Quality checks
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+jobs:
+  code-quality:
+    name: Run linter and prettier
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Run Prettier
+        run: npm run prettier -- --check

.prettierignore

@@ -1,2 +1,3 @@
 dist
 src/assets/js/lib/vendor
+*.hbs

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Our Responsibilities
 

package.json

@@ -9,10 +9,11 @@
     "build": "gulp build",
     "rebuild": "gulp rebuild",
     "gulp": "gulp",
-    "lint": "eslint --fix \"**/*.js\"",
-    "format": "prettier --write \"**/*.{js,scss}\"",
-    "update": "npx npm-check -u",
-    "prepare": "husky install"
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "prettier": "prettier --check .",
+    "prettier:fix": "prettier --write .",
+    "update": "npx npm-check -u"
   },
   "keywords": [],
   "author": "",
@@ -55,7 +56,6 @@
     "gulp-sass": "^5.1.0",
     "gulp.spritesmith": "^6.13.0",
     "highlight.js": "^11.8.0",
-    "husky": "^8.0.3",
     "import-fresh": "^3.3.0",
     "jsdom": "^22.0.0",
     "lint-staged": "^13.2.2",

pages/README.md

@@ -1,5 +1,5 @@
 ---
-navigation_title: "Welcome"
+navigation_title: 'Welcome'
 position: 1
 ---
 

pages/__404.md

@@ -1,5 +1,5 @@
 ---
-navigation_title: "Error 404 - Page not found"
+navigation_title: 'Error 404 - Page not found'
 ---
 
 # Error 404 - Page not found.
@@ -9,4 +9,3 @@ Please use the menu or the search to find the content you have been looking for.
 Maybe you clicked a link somewhere on the web, pointing to a legacy (moved or deleted) «Accessibility Developer Guide» page.
 
 If you came here by clicking on a link within the «Accessibility Developer Guide», please contact us ([development@access-for-all.ch](mailto:development@access-for-all.ch)) and tell us what link you clicked (and on which page).
-

pages/examples/README.md

@@ -1,5 +1,5 @@
 ---
-navigation_title: "Examples"
+navigation_title: 'Examples'
 position: 4
 ---
 
@@ -51,11 +51,11 @@ There are results of the currently relevant assistive devices:
 There are some special types of examples though:
 
 - "Bad" examples aim to demonstrate typical mis-uses or misconceptions of a concept, bad code, or similar.
-     - Such examples are inaccessible by design, and do not offer any results.
+  - Such examples are inaccessible by design, and do not offer any results.
 - A starting point (or interim step) within a sequence of examples that aim to demonstrate how to deal with and optimise a certain accessibility requirement.
-    - Such sequences always result in a final (and fully accessible) example.
+  - Such sequences always result in a final (and fully accessible) example.
 - An example showing a technique that is valid according to standards, but not (yet?) accessibility supported.
-    - Alas, such results have failing results.
+  - Alas, such results have failing results.
 
 In general: only copy&paste code from examples that have fully passing compatibility results!
 
@@ -64,12 +64,12 @@ In general: only copy&paste code from examples that have fully passing compatibi
 We have conducted additional compatibility tests, all with assistive devices that are expected to play a role in future:
 
 - Desktop screen readers:
-    - JAWS with Edge
-    - VoiceOver/macOS with Safari
-    - Narrator with Edge
+  - JAWS with Edge
+  - VoiceOver/macOS with Safari
+  - Narrator with Edge
 - Mobile screen readers:
-    - VoiceOver/iOS with Safari
-    - TalkBack with Chrome
+  - VoiceOver/iOS with Safari
+  - TalkBack with Chrome
 
 While some of these devices still show problems, the general outlook confirms that our examples are as future-proof as possible.
 

pages/examples/forms/README.md

@@ -1,5 +1,5 @@
 ---
-navigation_title: "Forms"
+navigation_title: 'Forms'
 position: 5
 ---
 

pages/examples/forms/bad-example/README.md

@@ -1,5 +1,5 @@
 ---
-navigation_title: "Bad example"
+navigation_title: 'Bad example'
 position: 3
 ---
 

pages/examples/forms/bad-example/_examples/generally-bad-form/README.md

@@ -1,3 +1,3 @@
 ---
-title: "Generally bad form"
+title: 'Generally bad form'
 ---

pages/examples/forms/bad-example/_examples/generally-bad-form/example.css

@@ -1,8 +1,10 @@
-.control, .fieldset {
+.control,
+.fieldset {
   margin: 6px 0;
 }
 
-label, .label {
+label,
+.label {
   display: inline-block;
   width: 120px;
   vertical-align: top;
@@ -30,4 +32,4 @@ label, .label {
 }
 #button:hover {
   cursor: default;
-}
+}

pages/examples/forms/bad-example/_examples/generally-bad-form/index.html

@@ -1,24 +1,16 @@
-<div class="control">
-  <label>Full name</label><input type="text" />
-</div>
-<div class="control">
-  <label>Biography</label><textarea></textarea>
-</div>
+<div class="control"><label>Full name</label><input type="text" /></div>
+<div class="control"><label>Biography</label><textarea></textarea></div>
 <div class="fieldset">
-  <div class="legend">
-    Gender
-  </div>
+  <div class="legend">Gender</div>
   <div class="control">
     <input name="gender" type="radio" value="male" />
-    <div class="label">
-      Male
-    </div>
+    <div class="label">Male</div>
   </div>
   <div class="control">
     <input name="gender" type="radio" value="female" />
-    <div class="label">
-      Female
-    </div>
+    <div class="label">Female</div>
   </div>
 </div>
-<a id="button" onclick="alert(&#39;Submitting using fancy JavaScript...&#39;)">Submit</a>
+<a id="button" onclick="alert(&#39;Submitting using fancy JavaScript...&#39;)"
+  >Submit</a
+>

pages/examples/forms/good-example/README.md

@@ -1,5 +1,5 @@
 ---
-navigation_title: "Good example"
+navigation_title: 'Good example'
 position: 2
 ---
 

pages/examples/forms/good-example/_examples/generally-good-form/README.md

@@ -1,5 +1,5 @@
 ---
-title: "Generally good form"
+title: 'Generally good form'
 compatibility:
   Keyboard only:
     status: pass

pages/examples/forms/good-example/_examples/generally-good-form/example.css

@@ -1,4 +1,5 @@
-.control, fieldset {
+.control,
+fieldset {
   margin: 6px 0;
 }
 
@@ -10,4 +11,4 @@ label {
 
 input + label {
   width: auto;
-}
+}