diff --git a/.browserlistrc b/.browserlistrc
new file mode 100644
index 000000000..c44053d7d
--- /dev/null
+++ b/.browserlistrc
@@ -0,0 +1,3 @@
+# Browsers that we support
+
+> 1%
diff --git a/.eslintrc.js b/.eslintrc.js
index 90e151eb1..d7d56aa41 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,24 +1,19 @@
-var double = "double";
-
module.exports = {
- root: true,
env: {
- browser: true,
- node: true
+ es6: true,
+ node: true,
+ browser: true
},
+ extends: "eslint:recommended",
parserOptions: {
- parser: 'babel-eslint'
+ sourceType: "module",
+ ecmaVersion: 2017
},
- extends: [
- '@nuxtjs',
- 'plugin:nuxt/recommended'
- ],
+ "ignorePatterns": ["src/_includes/static/", "dist"],
rules: {
"indent": [1, "tab"],
- "no-tabs": 0,
- "quotes": [2, "double", { "avoidEscape": true }],
- "import/no-named-as-default": 0,
- "semi": [2, "always"],
- "vue/html-indent": [1, "tab"]
+ "linebreak-style": ["error", "unix"],
+ quotes: ["error", "double"],
+ semi: ["error", "always"]
}
-}
+};
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 45cc50090..954c39d9a 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,6 +1,6 @@
* [ ] This pull request has been linted by running `npm run lint` without errors
-* [ ] This pull request has been tested by running `npm run dev` and reviewing affected routes
-* [ ] This pull request has been built by running `npm run generate` without errors
+* [ ] This pull request has been tested by running `npm run start` and reviewing affected routes
+* [ ] This pull request has been built by running `npm run build` without errors
* [ ] This isn't a duplicate of an existing pull request
## Description
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 61e30b2ee..397ba80d9 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -16,6 +16,6 @@ jobs:
run: |
npm ci
npm test
- npm run generate
+ npm run build
env:
CI: true
diff --git a/.gitignore b/.gitignore
index 468ba02be..9ced037f1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -91,3 +91,9 @@ sw.*
# Virtual Environment Settings
Pipfile
+
+# Static files
+src/_includes/static
+
+# Local Netlify folder
+.netlify
\ No newline at end of file
diff --git a/.markdownlint.json b/.markdownlint.json
index e019587c6..1e33eeda4 100644
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -1,5 +1,5 @@
{
- "default": true,
+ "default": true,
"MD013": { "line_length": 120 },
"MD026": false,
"MD033": false
diff --git a/README.md b/README.md
index dee163d65..25a36be36 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/inclusive-design/wecount.inclusivedesign.ca/Test%20and%20build?label=github&style=flat-square)](https://github.com/inclusive-design/wecount.inclusivedesign.ca/actions)
[![Netlify Status](https://img.shields.io/netlify/d63b3d00-fd5f-47d7-8e43-d09bf4e8eb4f?style=flat-square)](https://app.netlify.com/sites/wecount/deploys)
-The source files for the We Count website, built with [Nuxt](https://nuxtjs.org/).
+The source files for the We Count website, built with [Eleventy](https://11ty.dev/).
## Getting Started
@@ -29,10 +29,11 @@ npm ci
## How to Run
-To run the website in local development mode, enter the following in your command line:
+To run the website in local development mode that supports a live reload at file changes, enter the following in your
+command line:
```bash
-npm run dev
+npm run start
```
## How to Test
@@ -46,7 +47,7 @@ npm run lint
We use the following lint configurations:
-- [ESLint (JS/Vue)](https://github.com/inclusive-design/wecount.inclusivedesign.ca/blob/master/.eslintrc.js)
+- TODO: [ESLint (JS)](https://github.com/inclusive-design/wecount.inclusivedesign.ca/blob/master/.eslintrc.js)
- [Stylelint (CSS/SCSS)](https://github.com/inclusive-design/wecount.inclusivedesign.ca/blob/master/stylelint.config.js)
- [MarkdownLint (Markdown)](https://github.com/inclusive-design/wecount.inclusivedesign.ca/blob/master/.markdownlint.json)
@@ -55,14 +56,7 @@ We use the following lint configurations:
To build a static version of the website, enter the following in your command line:
```bash
-nuxt generate
-```
-
-The static website's files will be in the newly-created `dist` directory in the root of the project.
-To preview the static website, enter the following into your command line:
-
-```bash
-npx serve dist
+npm run build
```
## How to Deploy
diff --git a/assets/README.md b/assets/README.md
deleted file mode 100644
index 34766f934..000000000
--- a/assets/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# ASSETS
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
diff --git a/assets/config.js b/assets/config.js
deleted file mode 100644
index e00097bcf..000000000
--- a/assets/config.js
+++ /dev/null
@@ -1,40 +0,0 @@
-// TODO:
-// This is where I plan to put the global variables for the api endpoints. They are hardcoded for now.
-"use strict";
-
-export default {
- appTitle: "We Count",
- appShortTitle: "We Count",
- appDescription: "Removing bias and exclusion in the data economy.",
- appThemeColor: "#ffffff",
- appBgColor: "#ffffff",
- appBaseUrl: "https://wecount.inclusivedesign.ca", // TODO: Figure out how to determine this at generate time.
- wpDomain: "https://wecount-cms.inclusivedesign.ca",
- apiBase: "/wp-json/wp/v2/",
- contactEmail: "wecount@inclusivedesign.ca",
- // Using raw SVG content is to work around the issue with dynamically loading and injecting inline SVGs into the template.
- socialMedias: [{
- id: "facebook",
- title: "Facebook",
- href: "https://www.facebook.com/wecountproject/",
- svg: ""
- }, {
- // TODO: Temporarily hide the "YouTube" social media item until an account has been set up
- // id: "youtube",
- // title: "YouTube",
- // href: "",
- // svg: ""
- // }, {
- id: "instagram",
- title: "Instagram",
- href: "https://www.instagram.com/wecount_project/",
- svg: ""
- }, {
- id: "twitter",
- title: "Twitter",
- href: "https://twitter.com/WeCountproject",
- svg: ""
- }],
- numOfRecsPerPage: 10,
- dev: (process.env.NODE_ENV !== "production")
-};
diff --git a/assets/images/logo_canada.svg b/assets/images/logo_canada.svg
deleted file mode 100755
index 3c865c6c3..000000000
--- a/assets/images/logo_canada.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/images/logo_idrc.svg b/assets/images/logo_idrc.svg
deleted file mode 100644
index 09afe09de..000000000
--- a/assets/images/logo_idrc.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/images/logo_wecount.svg b/assets/images/logo_wecount.svg
deleted file mode 100644
index d5a2f6cd3..000000000
--- a/assets/images/logo_wecount.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/images/next.svg b/assets/images/next.svg
deleted file mode 100755
index 2cc1548f8..000000000
--- a/assets/images/next.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/assets/images/prev.svg b/assets/images/prev.svg
deleted file mode 100755
index 39327fd37..000000000
--- a/assets/images/prev.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/components/Aside.vue b/components/Aside.vue
deleted file mode 100644
index e08df8451..000000000
--- a/components/Aside.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-
-
-
diff --git a/components/Brand.vue b/components/Brand.vue
deleted file mode 100644
index b58142fbf..000000000
--- a/components/Brand.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/pages/views/_slug/index.vue b/pages/views/_slug/index.vue
deleted file mode 100644
index 236abc561..000000000
--- a/pages/views/_slug/index.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
-
diff --git a/pages/views/index.vue b/pages/views/index.vue
deleted file mode 100644
index 0b01ec5a1..000000000
--- a/pages/views/index.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
-
diff --git a/pages/views/page/_num/index.vue b/pages/views/page/_num/index.vue
deleted file mode 100644
index 85c7e9740..000000000
--- a/pages/views/page/_num/index.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
-
diff --git a/plugins/README.md b/plugins/README.md
deleted file mode 100644
index ca1f9d8a4..000000000
--- a/plugins/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# PLUGINS
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
diff --git a/shared/DataFetcher.js b/shared/DataFetcher.js
deleted file mode 100644
index 010e722ad..000000000
--- a/shared/DataFetcher.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import axios from "axios";
-import Config from "../assets/config";
-import Utils from "./Utils";
-
-// Share data fetch functions
-export default {
- async categorizedItems (categoryType, categoryId) {
- // The fuction to process returned data from the Wordpress API
- const processItems = function (items) {
- return items.map(function (oneItem) {
- return {
- slug: oneItem.slug,
- title: oneItem.title.rendered,
- author: oneItem._embedded.author[0].name,
- content: oneItem.content.rendered,
- // Strip html tags to get pure text for the content preview
- excerpt: Utils.stripHtmlTags(oneItem.excerpt.rendered),
- date: new Date(oneItem.date).toLocaleString("en-us", {
- year: "numeric",
- month: "long",
- day: "numeric"
- }),
- dateTime: oneItem.date,
- tags: oneItem.pure_taxonomies.tags ? oneItem.pure_taxonomies.tags.map(({ name }) => name) : [],
- picture: oneItem._links["wp:featuredmedia"] ? oneItem._embedded["wp:featuredmedia"][0].source_url : null,
- altTag: oneItem._links["wp:featuredmedia"] ? oneItem._embedded["wp:featuredmedia"][0].alt_text : "",
- // For news, "href" points to the external news links. For views, "href" is customized to show views content.
- href: categoryType === "news" ? oneItem.acf.link : "/views/" + oneItem.slug,
- isExternalHref: categoryType === "news",
- showPreviewImage: categoryType !== "news"
- };
- });
- };
-
- // According to the Wordpress API for pagination and embedding: https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/
- // 1. Fetch 100 records per page (the maxium number per page supported by Wordpress) to fasten the query
- // 2. Retrieve embedded resources in the main query
- // 3. Order by the modified date in descending order
- const baseCategoryAPI = Config.wpDomain + Config.apiBase + "posts?categories=" + categoryId + "&per_page=100&orderby=modified&order=desc&_embed";
-
- // Fetch records for the first page as well as the number of total pages
- const firstPageRequest = baseCategoryAPI + "&page=1";
- const firstPageResponse = await axios.get(`${firstPageRequest}`);
- const totalPages = firstPageResponse.headers["x-wp-totalpages"];
- let results = [];
-
- results = processItems(firstPageResponse.data);
-
- // Fetch records for page 2 onwards
- if (totalPages > 1) {
- for (let currentPageNum = 2; currentPageNum <= totalPages; currentPageNum++) {
- const currentPageResponse = await axios.get(`${baseCategoryAPI}&page=${currentPageNum}`);
- results = results.concat(processItems(currentPageResponse.data));
- }
- }
- return results;
- },
-
- async sitePages () {
- // According to the Wordpress API for pagination and embedding: https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/,
- // fetch 100 records per page (the maxium number per page supported by Wordpress) to fasten the query
- const pageAPI = Config.wpDomain + Config.apiBase + "pages?per_page=100";
-
- const response = await axios.get(`${pageAPI}`);
-
- return response.data.map(function (onePage) {
- return {
- slug: onePage.slug,
- title: onePage.title.rendered,
- content: onePage.content.rendered,
- // Strip html tags to get pure text for the content preview
- excerpt: Utils.stripHtmlTags(onePage.content.rendered),
- href: "/" + onePage.slug + "/",
- isExternalHref: false
- };
- });
- }
-};
diff --git a/shared/Utils.js b/shared/Utils.js
deleted file mode 100644
index 1aa0df4e3..000000000
--- a/shared/Utils.js
+++ /dev/null
@@ -1,69 +0,0 @@
-// Shared utility functons
-import Config from "../assets/config";
-
-export default {
- stripHtmlTags (inputString) {
- return inputString.replace(/<\/?[^>]+(>|$)/g, "");
- },
-
- /**
- * @typedef {Object} Post
- * @property {string} slug - The slug of the post.
- * @property {string} title - The title of the post.
- * @property {string} author - The author of the post.
- * @property {string} content - The content of the post.
- * @property {string} excerpt - The excerpt.
- * @property {date} date - The date.
- * @property {timestamp} dateTime - The date and time.
- * @property {array} tags - An array of tags.
- * @property {string} picture - A URL to the picture.
- * @property {string} altTag - The alternative text for the picture.
- * @property {string} href - A href to the internal page to view the post.
- * @property {boolean} isExternalHref - The flag indicating whether the href points to an external URL.
- * @property {boolean} showPreviewImage - The flag indicating whether to show the preview image.
- */
-
- /**
- * @typedef {Object} Route
- * @property {string} route - The nuxt route that the static page should be generated.
- */
-
- /**
- * Generate static routes for categorized items such as "news" and "views".
- * @param {string} categoryType - The category type.
- * @param {array} allPosts - All posts in the given category type.
- * @param {boolean} includeTagRoutes - A flag indicating if static routes for tags that are associated with the post should be included.
- * @param {boolean} includePostRoutes - A flag indicating if static routes for posts should be included.
- * @return {array} An array of static routes generted for this category.
- */
- createStaticRoutesForCategorizedItems (categoryType, allPosts, includeTagRoutes, includePostRoutes) {
- const numOfPages = Math.ceil(allPosts.length / Config.numOfRecsPerPage);
- const postsRoutes = [];
-
- for (let pageNum = 1; pageNum <= numOfPages; pageNum++) {
- postsRoutes.push({
- route: "/" + categoryType + "/page/" + pageNum
- });
- }
-
- if (includeTagRoutes || includePostRoutes) {
- allPosts.forEach((onePost) => {
- if (includeTagRoutes) {
- onePost.tags.forEach((tag) => {
- postsRoutes.push({
- route: "/tag/" + encodeURI(tag)
- });
- });
- }
-
- if (includePostRoutes) {
- postsRoutes.push({
- route: "/" + categoryType + "/" + onePost.slug
- });
- }
- });
- }
-
- return postsRoutes;
- }
-};
diff --git a/src/404.md b/src/404.md
new file mode 100644
index 000000000..d42fdd590
--- /dev/null
+++ b/src/404.md
@@ -0,0 +1,6 @@
+---
+permalink: /404.html
+title: Page Not Found
+layout: layouts/404.njk
+---
+The page you requested could not be found.
diff --git a/src/_data/README.md b/src/_data/README.md
new file mode 100644
index 000000000..2d15f0672
--- /dev/null
+++ b/src/_data/README.md
@@ -0,0 +1,3 @@
+# _data
+
+For information about this directory, see: [Global Data Files](https://www.11ty.dev/docs/data-global/)
diff --git a/src/_data/env.js b/src/_data/env.js
new file mode 100644
index 000000000..3f73ff984
--- /dev/null
+++ b/src/_data/env.js
@@ -0,0 +1,5 @@
+module.exports = {
+ api: process.env.CONTEXT === "production" ? "https://wecount-cms.inclusivedesign.ca/wp-json/wp/v2" : "https://wecount-dev.inclusivedesign.ca/wp-json/wp/v2",
+ context: process.env.CONTEXT || "dev",
+ baseUrl: process.env.DEPLOY_PRIME_URL || false
+};
diff --git a/src/_data/site.json b/src/_data/site.json
new file mode 100644
index 000000000..f9aadb72b
--- /dev/null
+++ b/src/_data/site.json
@@ -0,0 +1,5 @@
+{
+ "title": "We Count",
+ "description": "Removing bias and exclusion in the data economy.",
+ "author": "Inclusive Design Research Centre"
+}
diff --git a/src/_data/social.json b/src/_data/social.json
new file mode 100644
index 000000000..bb9a54745
--- /dev/null
+++ b/src/_data/social.json
@@ -0,0 +1,5 @@
+{
+ "facebook": "https://www.facebook.com/wecountproject/",
+ "instagram": "https://www.instagram.com/wecount_project/",
+ "twitter": "https://twitter.com/WeCountproject"
+}
diff --git a/src/_includes/README.md b/src/_includes/README.md
new file mode 100644
index 000000000..59839ee3a
--- /dev/null
+++ b/src/_includes/README.md
@@ -0,0 +1,23 @@
+# _includes
+
+Files in this directory, and its subdirectories, can be included in any template by using
+the file's relative path from `src/_includes`.
+
+For example, to include a Nunjucks template from components, the following code can be used:
+
+```jinja
+{% include 'components/brand.njk' %}
+```
+
+SVG files can also be inlined using the same method. In the brand component,
+the following code includes the logo and logotype from `src/_includes/svg`:
+
+```jinja
+{% include 'svg/logo.svg' %}
+{% include 'svg/logotype.svg' %}
+```
+
+For more information, see:
+
+- [Layouts](https://www.11ty.dev/docs/layouts)
+- [Nunjucks](https://mozilla.github.io/nunjucks/)
diff --git a/src/_includes/components/brand.njk b/src/_includes/components/brand.njk
new file mode 100644
index 000000000..a6888cfc0
--- /dev/null
+++ b/src/_includes/components/brand.njk
@@ -0,0 +1,7 @@
+