Fix errors and add coding standards (#743)

* Fix sass deprecation warnings

* Fix liquid warnings

* Add coding standards

* Add shell to setup-node

.github/actions/setup-node/action.yml

@@ -0,0 +1,23 @@
+name: Setup node
+
+runs:
+  using: "composite"
+  steps:
+  - name: Cache npm and node_modules
+    uses: actions/cache@v3
+    with:
+      path: |
+        ~/.npm
+        node_modules
+      key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+      restore-keys: |
+        ${{ runner.os }}-npm-
+
+  - name: Set up Node.js
+    uses: actions/setup-node@v3
+    with:
+      node-version: '20'
+
+  - name: Install dependencies
+    shell: bash
+    run: npm install

.github/workflows/static_analysis.yml

@@ -0,0 +1,64 @@
+name: Static analysis
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - uses: ./.github/actions/setup-node
+
+    - name: Run prettier
+      run: npx prettier --check .
+
+  spellcheck:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - uses: ./.github/actions/setup-node
+
+    - name: Get changed files
+      id: changed-files
+      uses: tj-actions/changed-files@v45
+      with:
+        files: |
+          **.md
+          **.html
+
+    - name: Run cspell on changed files
+      id: run-cspell
+      continue-on-error: true
+      env:
+        ALL_CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
+      run: npx cspell --files $ALL_CHANGED_FILES
+
+    - name: Report spellcheck failures
+      if: steps.run-cspell.outcome != 'success'
+      run: echo "::notice::Spellcheck found issues in some or all modified files"
+
+  lint-js:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - uses: ./.github/actions/setup-node
+
+    - name: Run eslint
+      run: npx eslint
+
+  lint-markdown:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - uses: ./.github/actions/setup-node
+
+    - name: Run markdownlint
+      run: npx markdownlint -c '.markdownlint.jsonc' -p '.gitignore' .

.markdownlint.jsonc

@@ -0,0 +1,12 @@
+{
+    "default": true,
+    "no-hard-tabs": false,
+    "whitespace": false,
+    "headings": { "style": "atx" },
+    "bullet": { "indent": 4 },
+    "line-length": false, 
+    "no-inline-html": false,
+    "single-h1": false,
+    "fenced-code-language": false,
+    "no-trailing-punctuation": false
+}

CONTRIBUTING.md

@@ -3,6 +3,7 @@
 A big welcome and thank you for considering contributing to CSS' open source projects! We welcome anybody who wants to contribute, and we actively encourage everyone to do so, especially if you have never contributed before.
 
 ## Quick links
+
 * [Getting started](#getting-started)
 * [Using the issue tracker](#using-the-issue-tracker)
 * [Making your first contribution](#making-your-first-contribution)
@@ -17,18 +18,20 @@ If you have never used git before, we would recommend that you read the [GitHub'
 * [Getting Git Right (Atlassian)](https://www.atlassian.com/git/)
 
 If you are new to contributing to open-source projects on GitHub, the general workflow is as follows:
+
 1. Fork this repository and clone it
 2. Create a branch off main
 3. Make your changes
-    - Make sure to run `make fmt` to autoformat your code
-    - Make a commit with an explanatory commit message
-5. Push your local branch to your remote fork
-6. Open a new pull request on GitHub
+    * Use `make fmt` and `make lint` to format and lint your changes
+    * Optionally `make spellcheck` to spellcheck your changed Markdown / HTML files
+    * Make a commit with an explanatory commit message
+4. Push your local branch to your remote fork
+5. Open a new pull request on GitHub
 
 We recommend also reading the following if you're unsure or not confident:
 
-* https://makeapullrequest.com/
-* https://www.firsttimersonly.com/
+* <https://makeapullrequest.com/>
+* <https://www.firsttimersonly.com/>
 
 ## Using the issue tracker
 
@@ -47,17 +50,69 @@ Where possible, new pages should be written in Markdown over raw HTML. This is f
 If you happen to be doing a lot of technical work on the website, the [wiki](https://github.com/CSSUoB/cssuob.github.io/wiki) has a few pointers on more technical aspects.
 
 
-### Code style
+### Code style and formatting
+
+This project uses several tools to enforce *coding standards*:
+
+* Formatting: [Prettier](https://prettier.io/)
+* Linting
+    * [ESLint](https://eslint.org/): for JavaScript files
+    * [markdownlint](https://github.com/DavidAnson/markdownlint): for Markdown files
+* Spellchecking: [CSpell](https://cspell.org/)
+
+These *coding standards* exist to help keep a consistent code style across files, and 
+to improve code quality overall.
+
+#### Formatting
+
+We use [Prettier](https://prettier.io/) to auto-format most of the code. 
+This will format your syntax to a specific style - if it doesn't generate pretty 
+code, then the code probably needs a refactor and clean-up anyway. 
+
+You can automatically fix most formatting issues by invoking the helper function
+`make fmt`.
+
+
+```console
+$ make fmt
+css/about.scss 34ms
+css/ball/2023/main.scss 11ms (unchanged)
+css/ball/2024/main.scss 10ms (unchanged)
+css/ball/main.scss 16ms (unchanged)
+...
+```
 
-To enforce a consistent code style across files, we use [prettier](https://prettier.io/)
-to auto-format most of the code. This will automatically format your syntax to
-a specific style - if it doesn't generate pretty code, then the code probably
-needs a refactor and cleanup anyways. You can run prettier from within your IDE
-(which will have it's own way of running it), or by using the `make fmt` helper
-defined at the root of the repository.
+You can then verify no formatting issues exist by running the npm script
+`npm run format`.
 
-In addition to the automatic formatter, follow the formatting style in the file
-you are editing.
+#### Linting
+
+We use several tools for linting: [ESLint](https://eslint.org/) for JS and 
+[markdownlint](https://github.com/DavidAnson/markdownlint) for Markdown files.
+These tools analyse code quality and help catch bugs.
+
+Some linting errors can be fixed automatically using the helper function
+`make lint`. This will not output anything unless there was a problem.
+
+However, not all linting errors can be automatically fixed. You can verify
+them by running `npm run lint`.
+
+#### Spellchecking
+
+[CSpell](https://cspell.org/]) is set up to help with spellchecking.
+
+You can run a spellcheck on *changed* files by using the helper `make spellcheck`.
+
+```console
+$ make spellcheck
+1/1 CONTRIBUTING.md 322.46ms X
+CONTRIBUTING.md:70:51 - Unknown word (cleanup)
+CONTRIBUTING.md:70:59 - Unknown word (anyways)
+CSpell: Files checked: 1, Issues found: 2 in 1 file.
+```
+
+If you want to run a spellcheck on the project as a whole, you will need to run the
+npm script instead `npm run spellcheck`.
 
 ### Git commit messages
 
@@ -66,6 +121,7 @@ Commit messages should be written in the imperative, present tense. For example,
 Additionally, we request that you keep the commit subject under 80 characters for a comfortable viewing experience on GitHub and other git tools. If you need more, please use the body of the commit.
 
 For example:
+
 ```
 Fix HTTP 418 error when navigating to /ball
 

Makefile

@@ -12,4 +12,10 @@ clean:
 	rm -rf _site
 
 fmt:
-	npx prettier . --write
+	npm run format:fix
+
+lint:
+	npm run lint:fix
+
+spellcheck:
+	npm run spellcheck:staged

README.md

@@ -4,7 +4,7 @@ This is the source code to [cssbham.com](https://cssbham.com).
 
 ## Documentation
 
-See in-depth documentation and maintainance guides at the
+See in-depth documentation and maintenance guides at the
 [wiki](https://github.com/CSSUoB/cssuob.github.io/wiki).
 
 ## Installation
@@ -27,13 +27,15 @@ You can also build the site into `_site`:
 make build
 ```
 
-To automatically run the code formatter, ensure that
-[prettier](https://prettier.io/) is installed, then:
+To be able to use the code formatter and linting tools, you need to install
+the dev dependencies.
 
 ```bash
-make fmt
+npm install
 ```
 
+See [CONTRIBUTING.md](CONTRIBUTING.md) for more information about code formatting.
+
 ### Manual setup (not recommended)
 
 First, ensure that `gem` is installed.
@@ -126,7 +128,7 @@ website.
 
 #### Event formatting
 
-The event data displayed on the webiste is taken directly from the Google
+The event data displayed on the website is taken directly from the Google
 Calendar event. Some properties are extracted using XML-like tags from the
 event description - note that this does **not** imply that other XML tags are
 implemented, so no other tags aside from the ones specified here should be

_collections/_clubs/2021-11-26-discord-botathon.md

@@ -7,10 +7,12 @@ Following the growing success of our [Discord server](/di), we ran 2 related Dis
 
 
 #### Discord Bot Workshop
+
 On Friday evening, we gave members a crash course on all things `discord.py`, giving them all the tools they needed to make a discord bot themselves. 
 We also recorded an [online version](https://youtu.be/yVxKmp40sjo) for people who couldn't attend in person.
 
 
 #### Discord Botathon
+
 On the Saturday, we ran a 5 hour Discord Bot Hackathon with teams making their own bot using knowledge from the day before.
-The winners won a Raspberry Pi Zero each, but everyone was the real winners as we all got plenty of pizza.
+The winners won a Raspberry Pi Zero each, but everyone was the real winners as we all got plenty of pizza.

_collections/_clubs/2022-11-16-mapathon.md

@@ -5,4 +5,4 @@ header-image: /assets/images/mapathon.png
 
 CSS member Matt gave a fantastic talk, sharing his enthusiasm for OpenStreetMap. Matt explained how anyone can submit edits to the map to improve its data. 
 
-The talk was followed by a ‘mapathon’ inspired by the charity Missing Maps, to aid workers on the ground that previously relied on poor-quality maps in order to know where to send aid. We spent a few hours improving OpenStreetMap in the area of Chad and making pizza disappear!
+The talk was followed by a ‘mapathon’ inspired by the charity Missing Maps, to aid workers on the ground that previously relied on poor-quality maps in order to know where to send aid. We spent a few hours improving OpenStreetMap in the area of Chad and making pizza disappear!

_collections/_clubs/2022-11-23-quantum-workshop.md

@@ -11,4 +11,4 @@ Then, IBM gave us a tour of their quantum computing SDK, [Qiskit](https://qiskit
 with builing our own quantum circuits and running them! ⚛️  
 
 The slides from Miriam's talk are available on
-[their personal webpage](https://www.cs.bham.ac.uk/~backensm/intro_to_QC_2022.pdf).
+[their personal webpage](https://www.cs.bham.ac.uk/~backensm/intro_to_QC_2022.pdf).

_collections/_news/2019-08-14-website-update.md

@@ -78,6 +78,7 @@ That's probably enough about that.
 
 Hopefully you all enjoy our new website!
 
+<!-- markdownlint-disable-next-line MD036 -->
 **Justin**
 
 ---

_collections/_news/2019-08-15-freshers-welcome-2019.md

@@ -82,4 +82,5 @@ Website: [cssbham.com](https://cssbham.com)
 
 **See you in September!**
 
-**CSS Committee**
+<!-- markdownlint-disable-next-line MD036 -->
+**CSS Committee**

_collections/_news/2019-09-09-freshers-week-2019.md

@@ -5,6 +5,7 @@ thumbnail: /assets/logo.png
 header-image: /assets/images/green-heart.jpg
 ---
 
+<!-- markdownlint-disable-next-line MD036 -->
 **Welcome to all of the new members and returning members**
 
 It's September and the new adacemic year is about to start. That means only one thing: Freshers' Week and it's less than two weeks away!
@@ -150,4 +151,5 @@ Thanks for reading. We look forward to seeing you all soon!
 
 Likkan 
 
+<!-- markdownlint-disable-next-line MD036 -->
 *Publicity Rep*