Merge pull request #44 from greatislander/add-markdown-linting

feat: add Markdown linting to Gruntfile

.eleventy.js

@@ -15,6 +15,11 @@ module.exports = function (config) {
     config.addPlugin(fluidPlugin);
     config.addPlugin(navigationPlugin);
 
+    // Shortcodes
+    config.addPairedShortcode("figure", function (content, img, alt) {
+        return `<figure>\n<a href="${img}"><img src="${img}" alt="${alt}" /></a><figcaption>${content}</figcaption>\n</figure>`;
+    });
+
     // Transforms
     config.addTransform("parse", parseTransform);
 

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Cache node modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
+      - name: Install dependencies
+        run: |
+          npm i
+        env:
+          CI: true
+      - name: Lint JavaScript, JSON, and Markdown files
+        run: |
+          npm run lint
+        env:
+          CI: true

Gruntfile.js

@@ -22,7 +22,8 @@ module.exports = function (grunt) {
         lintAll: {
             sources: {
                 json: ["./*.json", ".eslintrc.json", ".stylelintrc.json", "./src/**/*.json"],
-                js: ["./*.js", ".eleventy.js", "src/**/*.js", "!src/lib/**/*.js"]
+                js: ["./*.js", ".eleventy.js", "src/**/*.js", "!src/lib/**/*.js"],
+                md: ["./src/documents/**/*.md", "README.md", "CONTRIBUTING.md", "AUTHORS.md", "./src/*.md", "!dist/**/*.md"]
             }
         }
     });

README.md

@@ -11,7 +11,7 @@ This project contains the content needed to build and deploy a copy of the Inclu
 1. Install the required NPM packages: `npm install`
 2. Run [Eleventy](http://11ty.dev) in development mode: `npm start`.
 
-The website will be available at http://localhost:8080.
+The website will be available at <http://localhost:8080>.
 
 ### To build and serve using Docker
 
@@ -32,10 +32,13 @@ If you make changes to the website, repeat the steps to build the image and star
 2. Run the build script: `npm run build`
 3. Upload the contents of the `./dist/` directory to the web root of your server.
 
-If you make changes to the website, repeat step 2 to build the website and upload any changed files from the `./dist/` directory to the web root of your server.
+If you make changes to the website, repeat step 2 to build the website and upload any changed files from the `./dist/`
+directory to the web root of your server.
 
 ## License Information
 
-The Inclusive Design Guide's code is licensed under the [BSD 3-Clause](https://raw.githubusercontent.com/inclusive-design/guide.inclusivedesign.ca/blob/main/LICENSE.md) license.
+The Inclusive Design Guide's code is licensed under the [BSD
+3-Clause](https://github.com/inclusive-design/guide.inclusivedesign.ca/blob/main/LICENSE.md) license.
 
-The Inclusive Design Guide's content is licensed under the [Creative Commons Attribution 3.0](http://creativecommons.org/licenses/by/3.0/) license.
+The Inclusive Design Guide's content is licensed under the [Creative Commons Attribution
+3.0](http://creativecommons.org/licenses/by/3.0/) license.

src/documents/activities/CauseAndEffect.md

@@ -6,7 +6,8 @@ eleventyNavigation:
     order: 3
 ---
 
-This activity demonstrates the potential to have a broader beneficial impact with our everyday actions. The challenge is to define a possible chain of events that could take you from a specific cause to an effect.
+This activity demonstrates the potential to have a broader beneficial impact with our everyday actions. The challenge is
+to define a possible chain of events that could take you from a specific cause to an effect.
 
 Causes defined in this exercise are everyday tasks such as:
 
@@ -20,15 +21,18 @@ While the effects might include:
 
 The effects are as far away from the causes as possible.
 
-Use the accompanying [Cause and Effect card deck](/assets/images/CauseAndEffectCards.pdf) (downloadable pdf), or think up your own examples. These should be as specific and diverse as possible, and the relationship between cause and effect should not immediately be clear.
+Use the accompanying [Cause and Effect card deck](/assets/images/CauseAndEffectCards.pdf) (downloadable pdf), or think
+up your own examples. These should be as specific and diverse as possible, and the relationship between cause and effect
+should not immediately be clear.
 
 ## Step 1
 
 Choose a random card from the Cause deck, then do the same from the Effect deck. Or describe your own cause and effect.
 
 ## Step 2
 
-Define a chain of effects that takes you all the way from the initial cause to the final effect. Record each effect and map out the chain of effects - allowing branching or multiple paths where they emerge.
+Define a chain of effects that takes you all the way from the initial cause to the final effect. Record each effect and
+map out the chain of effects - allowing branching or multiple paths where they emerge.
 
 ## Why
 

src/documents/activities/CollaborativeArtWarmup.md

@@ -6,53 +6,68 @@ eleventyNavigation:
     order: 6
 ---
 
-This exercise is intended to be fun and quick. It can be used in meetings, co-design sessions or any other group context to help make participants comfortable in the space and in working collaboratively with each other. It introduces the practice of multi-modal communication and experience.
+This exercise is intended to be fun and quick. It can be used in meetings, co-design sessions or any other group context
+to help make participants comfortable in the space and in working collaboratively with each other. It introduces the
+practice of multi-modal communication and experience.
 
 ## How
 
 ### Preparation
 
-Working areas or stations should be set up for each group, using separate tables or other arrangements. Materials (lego, toys, coloured paper, pipe cleaners, tape, sticky notes, or anything available) can be placed at each station, or at an easily accessible location in the room.
+Working areas or stations should be set up for each group, using separate tables or other arrangements. Materials (lego,
+toys, coloured paper, pipe cleaners, tape, sticky notes, or anything available) can be placed at each station, or at an
+easily accessible location in the room.
 
 ### Step 1
 
 Break into small groups (3 or 4 people per group is best) and find a workstation.
 
 ### Step 2
 
-Each group collaboratively builds a small art installation or artwork using any of the available materials. This step can take between 4-7 minutes.  
+Each group collaboratively builds a small art installation or artwork using any of the available materials. This step
+can take between 4-7 minutes.  
 
 Tip: Don’t worry too much about the outcome, take risks and play.  
 
-Tip: If there are members in your group that require audio description, make sure to describe the available materials at the start and to describe the artwork as it takes form. Allow for tactile exploration of the materials and the artwork as well.  
+Tip: If there are members in your group that require audio description, make sure to describe the available materials at
+the start and to describe the artwork as it takes form. Allow for tactile exploration of the materials and the artwork
+as well.  
 
-Tip: To ensure that everyone gets a chance to participate, you can have each group member take a turn adding something to the artwork.
+Tip: To ensure that everyone gets a chance to participate, you can have each group member take a turn adding something
+to the artwork.
 
 ### Step 3
 
-The groups rotate to the next station, and come up with a title and description for the work of art at that station. How would you describe the work to someone who can’t see it or isn’t here today? This step can take between 3-5 minutes.
+The groups rotate to the next station, and come up with a title and description for the work of art at that station. How
+would you describe the work to someone who can’t see it or isn’t here today? This step can take between 3-5 minutes.
 
 ### Step 4
 
-The groups rotate one more time. They now develop and document a brief artist statement (1-2 sentences) about the artwork at that station. This step can take between 3-5 minutes.
+The groups rotate one more time. They now develop and document a brief artist statement (1-2 sentences) about the
+artwork at that station. This step can take between 3-5 minutes.
 
 ### Step 5
 
 Each group returns to their original station and shares the title, description and artist statement to the larger group.
 
 ## Why
 
-This activity helps participants gain a deeper understanding of the different ways artwork or other content may be accessed, perceived and interpreted. It also helps participants to think beyond typical communication methods in order to expand the range of people who can access and use the content.  
+This activity helps participants gain a deeper understanding of the different ways artwork or other content may be
+accessed, perceived and interpreted. It also helps participants to think beyond typical communication methods in order
+to expand the range of people who can access and use the content.  
 
-<figure>
-[![An image showing a small sculpture made of lego and pipe cleaners on a table top, beside which lie two hand-written notes, one of which includes a title and description, while the other contains an artist statement. ](/assets/images/collaborative_art.jpg)](/assets/images/collaborative_art.jpg)
-<figcaption>
-*Figure 1:* Example of collaborative art created using the Collaborative Art Warmup Activity.</figcaption>
-</figure>
+{% figure "/assets/images/collaborative_art.jpg", "An image showing a small sculpture made of lego and pipe cleaners on
+a table top, beside which lie two hand-written notes, one of which includes a title and description, while the other
+contains an artist statement." %}
 
-<figure>
-[![An image showing a small sculpture made of lego, a toy car, and pipe cleaners on a table top. Some handwritten notes lie on the table beside the sculpture and a bin of lego can be seen in the background.  
-](/assets/images/collaborative_art2.jpg)](/assets/images/collaborative_art2.jpg)
-<figcaption>
-*Figure 2:* Example of collaborative art created using the Collaborative Art Warmup Activity.</figcaption>
-</figure>
+*Figure 1:* Example of collaborative art created using the Collaborative Art Warmup Activity.
+
+{% endfigure %}
+
+{% figure "/assets/images/collaborative_art2.jpg", "An image showing a small sculpture made of lego, a toy car, and pipe
+cleaners on a table top. Some handwritten notes lie on the table beside the sculpture and a bin of lego can be seen in
+the background." %}
+
+*Figure 2:* Example of collaborative art created using the Collaborative Art Warmup Activity.
+
+{% endfigure %}

src/documents/activities/Create-a-Thon.md

@@ -6,49 +6,73 @@ eleventyNavigation:
     order: 9
 ---
 
-A Create-a-Thon (_CaT_) brings together a diverse group of people in order to collaboratively contribute to the design of a system, product or service. The key is to involve a diverse group of participants, including those individuals whose needs aren’t met (who find a product or service impossible or difficult to use), as well as people whose insights are not usually represented because they do not fit into a construct of "typical", "average", or the envisioned "target audience".
+A Create-a-Thon (_CaT_) brings together a diverse group of people in order to collaboratively contribute to the design
+of a system, product or service. The key is to involve a diverse group of participants, including those individuals
+whose needs aren’t met (who find a product or service impossible or difficult to use), as well as people whose insights
+are not usually represented because they do not fit into a construct of "typical", "average", or the envisioned "target
+audience".
 
-<figure>
-[![An image showing a group of four people participating in a Create-a-Thon, using building toys.](/assets/images/CaT-01.jpg)](/assets/images/CaT-01.jpg)
-<figcaption>
-*Figure 1:* A group collaborates together to build a marble track based on some basic requirements.</figcaption>
-</figure>
+{% figure "/assets/images/CaT-01.jpg", "An image showing a group of four people participating in a Create-a-Thon, using building
+toys." %}
 
-A _CaT_ encourages participants to collaboratively build an artifact by “designing by metaphor” and use it as a means to translate their ideas to the systems, products or services being designed or tested. This helps constrain the physical artefact and enables participants to draw out connections that wouldn't otherwise be clear if they were directly asked to design a solution. It also gives non-expert designers an easier way to get involved and contribute their ideas without having prior knowledge or expertise.
+*Figure 1:* A group collaborates together to build a marble track based on some basic requirements.
 
-During this collaborative event, participants should continuously describe the process to each other, support each other when there are different abilities, and communicate how the work gets done. Constant negotiation of needs generates individual stories and valuable information that should be recorded, collected, and applied to enhance the design of the system, product or service being iterated upon. It is important to avoid distilling user insights and stories to a collection of averages and eliminating individual differences in favour of sameness, because each story is as important as another and will contribute to rich designs and insights.
+{% endfigure %}
 
-It is possible, even desirable, to conduct several _CaTs_ at different stages throughout a design process to gain additional insights.
+A _CaT_ encourages participants to collaboratively build an artifact by “designing by metaphor” and use it as a means to
+translate their ideas to the systems, products or services being designed or tested. This helps constrain the physical
+artefact and enables participants to draw out connections that wouldn't otherwise be clear if they were directly asked
+to design a solution. It also gives non-expert designers an easier way to get involved and contribute their ideas
+without having prior knowledge or expertise.
 
-<figure>
-[![An image of a Create-a-Thon participant describing their group's design.](/assets/images/CaT-02.jpg)](/assets/images/CaT-02.jpg)
-<figcaption>
-*Figure 2:* A participant shares their group's design after being given the task of creating a software version of the physical marble track toy.</figcaption>
-</figure>
+During this collaborative event, participants should continuously describe the process to each other, support each other
+when there are different abilities, and communicate how the work gets done. Constant negotiation of needs generates
+individual stories and valuable information that should be recorded, collected, and applied to enhance the design of the
+system, product or service being iterated upon. It is important to avoid distilling user insights and stories to a
+collection of averages and eliminating individual differences in favour of sameness, because each story is as important
+as another and will contribute to rich designs and insights.
+
+It is possible, even desirable, to conduct several _CaTs_ at different stages throughout a design process to gain
+additional insights.
+
+{% figure "/assets/images/CaT-02.jpg", "An image of a Create-a-Thon participant describing their group's
+design." %}
+
+*Figure 2:* A participant shares their group's design after being given the task of creating a software version of the
+physical marble track toy.
+
+{% endfigure %}
 
 ## Step 1
 
-Define a broad problem space with an end goal in mind. A broad problem space makes room for a larger demographic to participate.
+Define a broad problem space with an end goal in mind. A broad problem space makes room for a larger demographic to
+participate.
 
 ## Step 2
 
-Come up with some scenarios to aid exploration and focus the collaboration. The number of scenarios depends on the problem, the number of participants, and the available time.
+Come up with some scenarios to aid exploration and focus the collaboration. The number of scenarios depends on the
+problem, the number of participants, and the available time.
 
 ## Step 3
 
-Find participants from a spectrum of ages, gender, vocation, cultures, and ability to generate a variety of stories and perspectives.
+Find participants from a spectrum of ages, gender, vocation, cultures, and ability to generate a variety of stories and
+perspectives.
 
 ## Step 4
 
-Provide multiple means of expression so every participant can choose the medium and tools that enables them to share their ideas.
+Provide multiple means of expression so every participant can choose the medium and tools that enables them to share
+their ideas.
 
 ## Step 5
 
-Collect and preserve stories at the end of the event to serve as a touchstone for future design decisions and inspiration.
+Collect and preserve stories at the end of the event to serve as a touchstone for future design decisions and
+inspiration.
 
 ## CaT in depth
 
-Additional information about Create-a-Thons, their rationale, and how to set up and conduct a CaT can be found in the article ["Create-a-Thon" on the Floe Inclusive Learning Design Handbook](https://handbook.floeproject.org/Create-a-Thon.html).
+Additional information about Create-a-Thons, their rationale, and how to set up and conduct a CaT can be found in the
+article ["Create-a-Thon" on the Floe Inclusive Learning Design
+Handbook](https://handbook.floeproject.org/Create-a-Thon.html).
 
 ## Combine With