We Count

The source code for the We Count website.

The front end of the website is built with Eleventy.

The website uses 2 backend APIs:

• WordPress API where WeCount team members create news, views and some site pages;
  • The production WordPress site: https://wecount-cms.inclusivedesign.ca/
  • The development WordPress site: https://wecount-dev.inclusivedesign.ca/
• Airtable API that serves workshop information, user comments for workshops, AI resources and tools data.
  • The production table: WeCount
  • The development table: WeCount_DEV

Getting Started

To contribute, please be sure to review our development processes as documented in the contributing guide.

To work on the project, you need to install NodeJS and NPM for your operating system.

Then, clone the project from GitHub. Create a fork with your GitHub account, then enter the following in your command line (make sure to replace your-username with your username):

git clone https://github.com/your-username/wecount.inclusivedesign.ca.git

From the root of the cloned project, enter the following in your command line to install dependencies:

npm ci

How to Run

The website uses Netlify Functions to provide a server side endpoint that supports the save of user comments for workshops on the "Initiatives" page. To run the website in local development mode that supports a live reload at file changes, there are two ways to test the website with and without Netlify Functions. The latter is easier than the former:

Test the website with Netlify Functions

1. Follow Netlify instructions to install tools for testing and deploying Netlify functions locally;
2. Once the tool is set up, using Netlify Dev as an example, run following commands:

# Due to security concerns, these environment variables are only available to WeCount team members
export AIRTABLE_API_KEY=AIRTABLE_API_KEY_VALUE
export EMAIL_FROM=EMAIL_TO_VALUE
export EMAIL_FROM_PWD=EMAIL_FROM_PWD_VALUE
export EMAIL_TO_PRODUCTION=PRODUCTION_SITE_MODERATOR_EMAIL
export EMAIL_TO_DEV=DEV_SITE_MODERATOR_EMAIL
export AIRTABLE_BASE_PRODUCTION=AIRTABLE_BASE_VALUE_FOR_PRODUCTION
export AIRTABLE_BASE_DEV=AIRTABLE_BASE_VALUE_FOR_DEV

netlify dev

Look for this box in your console output:

   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   * Server now ready on http://localhost:64939   │
   │                                                  │
   └──────────────────────────────────────────────────┘

The website will be available at http://localhost:3000.

Test the website without Netlify Functions

Note that the website launched via this testing method cannot save user comments to Airtable due to the absence of the server side save function.

# Due to security concerns, these environment variables are only available to WeCount team members
export AIRTABLE_API_KEY=WECOUNT_API_KEY
export AIRTABLE_BASE_PRODUCTION=AIRTABLE_BASE_VALUE_FOR_PRODUCTION
export AIRTABLE_BASE_DEV=AIRTABLE_BASE_VALUE_FOR_DEV
npm run start

The website will be available at http://localhost:3000.

How to Lint

To lint JavaScript, CSS and Markdown files in the project (including JavaScript and CSS in Vue components), enter the following in the command line:

npm run lint

We use the following lint configurations:

• TODO: ESLint (JS)
• Stylelint (CSS/SCSS)
• MarkdownLint (Markdown)

How to Build

Note that the website launched via this build method cannot save user comments to Airtable due to the absence of the server side save function.

To build a static version of the website, enter the following in your command line:

# Due to security concerns, these environment variables are only available to WeCount team members
export AIRTABLE_API_KEY=WECOUNT_API_KEY
npm run build
npx serve dist

The website will be available at http://localhost:5000

How to Deploy

This repository is connected to Netlify, and commits will be automatically deployed as follows:

• Pull request #175 (for example): https://deploy-preview-175--wecount.netlify.app
• Branch dev: https://dev--wecount.netlify.app
• Branch main: https://wecount.inclusivedesign.ca

License

This work is licensed under a Creative Commons Attribution 4.0 International License.