feat: add Decap CMS previews

inclusive-design · Mar 8, 2024 · d73ee0f · d73ee0f
1 parent 79e459c
commit d73ee0f
Show file tree

Hide file tree

Showing 16 changed files with 209 additions and 146 deletions.
diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
@@ -0,0 +1,14 @@
+name: Publish release
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v4
+        id: release
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.markdownlint-cli2.cjs b/.markdownlint-cli2.cjs
@@ -2,5 +2,5 @@
 
 module.exports = {
     config: require("./node_modules/markdownlint-config-fluid/.markdownlintrc.json"),
-    ignores: ["node_modules", "src/collections", "CHANGELOG.md"]
+    ignores: ["node_modules", "src/_includes", "src/report", "CHANGELOG.md"]
 };
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -5,7 +5,7 @@ import scUri from './src/_utils/sc-uri.js';
 import sanitizeNumber from './src/_utils/sanitize-number.js';
 
 export default function eleventy(eleventyConfig) {
-	eleventyConfig.addFilter('sc_uri', scUri);
+	eleventyConfig.addFilter('scUri', scUri);
 
 	eleventyConfig.addNunjucksAsyncShortcode('scTable', scTable);
 

diff --git a/src/_data/success-criteria.js → src/_data/successcriteria.js b/src/_data/success-criteria.js → src/_data/successcriteria.js
@@ -29,6 +29,6 @@ export default async function successCriteria() {
 
 		return results;
 	} catch (error) {
-		console.error(`Fetch failed in successCriteria.js. ${error}`);
+		console.error(`Fetch failed in successcriteria.js. ${error}`);
 	}
 }
diff --git a/src/_data/totals-by-level.js → src/_data/totalsbylevel.js b/src/_data/totals-by-level.js → src/_data/totalsbylevel.js
@@ -1,4 +1,4 @@
-import successCriteria from './success-criteria.js';
+import successCriteria from './successcriteria.js';
 
 export default async function totalsByLevel() {
 	const totals = {

diff --git a/src/_includes/about-this-report.md → src/_includes/about.md b/src/_includes/about-this-report.md → src/_includes/about.md
@@ -1,3 +1,5 @@
+## About this report
+
 TODO.
 
 ### Methodology

diff --git a/src/_layouts/report.njk b/src/_layouts/report.njk
@@ -14,7 +14,7 @@ layout: base
 
   <dl>
     <dt>Evaluated by</dt>
-    <dd>{{ evaluator }}</dd>
+    <dd>{% for evaluator in evaluators %}{{ evaluator }}{% if not loop.last%}, {% endif %}{% endfor %}</dd>
     <dt>Commissioned by</dt>
     <dd>{{ commissioner }}</dd>
     <dt>Target</dt>
@@ -35,9 +35,8 @@ layout: base
   {% scTable issueList, targetLevel, targetWcagVersion %}
 </section>
 
-<section id="explanation-of-report">
-  <h2>About this report</h2>
-  {% renderFile "./src/_includes/about-this-report.md" %}
+<section id="about-this-report">
+  {% renderFile "./src/_includes/about.md" %}
 </section>
 
 <section id="scope">
@@ -47,23 +46,29 @@ layout: base
   <p>Scope:
   <ul>
     {% for scope in scope %}
-    <li>{{ scope }}</li>
+    <li id="{{ scope.title | slugify }}">
+      <a href="{{ scope.url }}">{{ scope.title }}<span class="external">(external link)</span> <svg aria-hidden="true" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="14" width="16" style="vertical-align: middle;"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z" fill="currentColor"></path></svg></a>
+      {% if scope.description %}<p>{{ scope.description }}</p>{% endif %}
+    </li>
     {% endfor %}
   </ul>
   {% endif %}
-  {% if out_of_scope %}
+  {% if outOfScope %}
   <p>Not in scope:
   <ul>
-    {% for out_of_scope in out_of_scope %}
-    <li>{{ out_of_scope }}</li>
+    {% for outOfScope in outOfScope %}
+    <li>
+      <a href="{{ outOfScope.url }}">{{ outOfScope.title }}<span class="external">(external link)</span> <svg aria-hidden="true" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="14" width="16" style="vertical-align: middle;"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z" fill="currentColor"></path></svg></a>
+      {% if outOfScope.description %}<p>{{ outOfScope.description }}</p>{% endif %}
+    </li>
     {% endfor %}
     {% endif %}
   </ul>
-  <h3>Accessibility support</h3>
-  <p>The audited website should work in at least the following browsers and assistive technologies:</p>
+  <h3>Tools used</h3>
+  <p>In conducting this audit, the following tools were used:</p>
   <ul>
-    {% for baseline in baseline %}
-    <li>{{ baseline }}</li>
+    {% for tool in tools %}
+    <li>{{ tool.name }}{% if tool.version %} {{ tool.version }}{% endif %}</li>
     {% endfor %}
   </ul>
   <h3>Technologies used</h3>
@@ -75,24 +80,6 @@ layout: base
   </ul>
 </section>
 
-<section id="sample">
-  <h2>Sample</h2>
-  <p>Representative sample</p>
-  <ul class="sample-list">
-    {% for sample in samples %}
-    <li id="{{ sample.title | slug }}">
-      <div>
-        {# <img src="{% sample_image sample.id, page.fileSlug %}" alt="" /> #}
-      </div>
-      <div>
-        <strong>{{ sample.title }}</strong>
-        <a href="{{ sample.url }}">{{ sample.url }}</a>
-        <p>{{ sample.description }}</p></li>
-      </div>
-    {% endfor %}
-  </ul>
-</section>
-
 <section id="issues">
   <h2>Issues</h2>
   <ol>
@@ -114,10 +101,10 @@ layout: base
             <dt>WCAG Criteria: </dt>
             <dd>
               {% for sc in issue.data.sc | sort %}
-              <a class="wcag-link" href="{{ sc | sc_uri(targetWcagVersion) }}">
+              <a class="wcag-link" href="{{ sc | scUri(targetWcagVersion) }}">
                 {{ sc }}: {{ successCriteria[sc]['name'] }}
                 <span class="external">(external link)</span>
-                <svg aria-hidden="true" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="14" width="16" style="vertical-align: middle;"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z" fill="currentColor"></path></svg>
+                <svg aria-hidden="true" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="14" width="16"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z" fill="currentColor"></path></svg>
               </a>
               {% endfor %}
             </dd>

diff --git a/src/_utils/sc-table.js b/src/_utils/sc-table.js
@@ -1,6 +1,6 @@
 /* eslint-disable unicorn/no-array-callback-reference */
 /* eslint-disable unicorn/no-array-reduce */
-import totalsByLevel from '../_data/totals-by-level.js';
+import totalsByLevel from '../_data/totalsbylevel.js';
 import countSuccessCriterionOnce from './count-success-criteria-once.js';
 
 export default async function scTable(

diff --git a/src/_utils/sc-uri.js b/src/_utils/sc-uri.js
@@ -1,4 +1,4 @@
-import successCriteria from '../_data/success-criteria.js';
+import successCriteria from '../_data/successcriteria.js';
 
 export default async function scUri(sc, targetWcagVersion) {
 	const baseUri = `https://www.w3.org/WAI/WCAG22/quickref/?versions=${targetWcagVersion}`;

diff --git a/src/admin/admin.njk b/src/admin/admin.njk
@@ -9,6 +9,9 @@ eleventyExcludeFromCollections: true
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>IDRC WCAG Reporter</title>
     <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
+    <script>
+      window.successCriteria = {{ successcriteria | dump | safe }};
+    </script>
   </head>
   <body>
     <!-- Include the script that builds the page and powers Decap CMS -->

diff --git a/src/admin/config.yml b/src/admin/config.yml
@@ -9,27 +9,24 @@ editor:
 collections:
   - label: Report
     name: report
-    editor:
-      preview: false
     files:
+      - label: About
+        name: about
+        file: src/_includes/about.md
+        fields:
+          - name: body
+            label: About this report
+            widget: markdown
       - label: Report Data
-        name: reportData
+        name: report
         file: src/report/index.md
         fields:
-          - label: Layout
-            name: layout
-            widget: hidden
-            default: "report"
-          - label: Tags
-            name: tags
-            widget: hidden
-            default: "reports"
           - label: Title
             name: title
             widget: string
-          - name: "evaluator"
-            label: "Evaluator"
-            widget: "string"
+          - name: "evaluators"
+            label: "Evaluators"
+            widget: "list"
           - name: "commissioner"
             label: "Commissioner"
             widget: "string"
@@ -47,37 +44,43 @@ collections:
           - name: specialRequirements
             label: Special Requirements
             widget: text
+          - name: body
+            label: Executive summary
+            widget: markdown
           - name: scope
-            label: Scope
+            label: In scope
+            label_singular: in scope item
             widget: list
-            hint: Enter page names or URLs in a comma-separated list.
-          - name: out_of_scope
+            fields:
+            - { name: "title", label: "Title", widget: "string" }
+            - { name: "url", label: "URL", widget: "string" }
+            - { name: "description", label: "Description", widget: "text", required: false }
+          - name: outOfScope
             label: Out of scope
+            label_singular: out of scope item
             widget: list
-            hint: Enter page names or URLs in a comma-separated list.
-          - name: baseline
-            label: Accessibility support
+            fields:
+            - { name: "title", label: "Title", widget: "string" }
+            - { name: "url", label: "URL", widget: "string" }
+          - name: tools
+            label: Tools used
+            label_singular: tool
             widget: list
-            hint: Enter browsers and assistive technologies with which the website is expected to work in a comma-separated list.
+            summary: '{{fields.name}} {{fields.version}}'
+            fields:
+            - { name: "name", label: "Tool", widget: "string" }
+            - { name: "version", label: "Version", widget: "string", required: false }
+            hint: Enter browsers and assistive technologies used in auditing the website.
           - name: technologies
             label: Technologies used
             widget: list
+            default: [HTML, CSS, JavaScript, WAI-ARIA, SVG]
             hint: Enter technologies used to build the website in a comma-separated list.
-          - name: samples
-            label: Samples
-            widget: list
-            fields:
-            - { name: "title", label: "Title", widget: "string" }
-            - { name: "url", label: "URL", widget: "string" }
-            - { name: "description", label: "Description", widget: "text" }
           - name: issues
             label: Issues link
             widget: string
             hint: Enter the link to the website's issues page on GitHub, Gitlab or JIRA.
             required: false
-          - name: body
-            label: Executive summary
-            widget: markdown
   - label: Issues
     label_singular: Issue
     name: issue

diff --git a/src/admin/previews.js b/src/admin/previews.js
@@ -1,4 +1,11 @@
-/* global CMS, createClass */
+/* global CMS, createClass, window */
+
+import slugify from '@sindresorhus/slugify';
+
+const successCriteria = window.successCriteria;
+
+CMS.registerPreviewStyle('/assets/styles/cms.css');
+CMS.registerPreviewStyle('/assets/styles/main.css');
 CMS.registerPreviewStyle('/assets/styles/report.css');
 
 const IssuePreview = createClass({
@@ -14,7 +21,12 @@ const IssuePreview = createClass({
 					<dl>
 						<div>
 							<dt>WCAG Criteria: </dt>
-							<dd>{entry.getIn(['data', 'sc'])}</dd>
+							<dd>{entry.getIn(['data', 'sc']).map(sc => (
+								<a class='wcag-link' href={`https://www.w3.org/WAI/WCAG22/quickref/#${successCriteria[sc].id}`} rel='external'>
+									{sc} <span class='external'>(external link)</span>
+									<svg aria-hidden='true' role='presentation' focusable='false' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' height='14' width='16'><path xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' d='M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z' fill='currentColor'></path></svg>
+								</a>
+							))}</dd>
 						</div>
 						{entry.getIn(['data', 'severity']) === 'High' ? (
 							<div>
@@ -26,7 +38,10 @@ const IssuePreview = createClass({
 						)}
 						<div>
 							<dt>Sample: </dt>
-							<dd>{entry.getIn(['data', 'sample'])}</dd>
+							<dd>{entry.getIn(['data', 'sample']) === 'all'
+								? 'All pages' : (
+									<a href={`/#${slugify(entry.getIn(['data', 'sample']))}`}>{entry.getIn(['data', 'sample'])}</a>
+								)}</dd>
 						</div>
 					</dl>
 				</div>
@@ -36,3 +51,78 @@ const IssuePreview = createClass({
 });
 
 CMS.registerPreviewTemplate('issue', IssuePreview);
+
+const ReportPreview = createClass({
+	render() {
+		const entry = this.props.entry;
+		return (
+			<>
+				<section id='start'>
+					<h1>Accessibility Conformance Report for {entry.getIn(['data', 'title'])}</h1>
+					<dl>
+						<dt>Evaluated by</dt>
+						<dd>{entry.getIn(['data', 'evaluators']).join(', ')}</dd>
+						<dt>Commissioned by</dt>
+						<dd>{entry.getIn(['data', 'commissioner'])}</dd>
+						<dt>Target</dt>
+						<dd>WCAG {entry.getIn(['data', 'targetWcagVersion'])}, Level {entry.getIn(['data', 'targetLevel'])}</dd>
+						<dt>Date</dt>
+						<dd>{new Intl.DateTimeFormat('en-CA', {dateStyle: 'long'}).format(entry.getIn(['data', 'date']))}</dd>
+						<dt>Special requirements</dt>
+						<dd>{entry.getIn(['data', 'specialRequirements'])}</dd>
+					</dl>
+				</section>
+				<section id='executive-summary'>
+					<h2>Executive summary</h2>
+					{this.props.widgetFor('body')}
+				</section>
+				<section id='scope'>
+					<h2>Scope</h2>
+					<h3>Pages</h3>
+					<p>Scope:</p>
+					<ul>
+						{this.props.widgetsFor('scope').map((scope, index) => (
+							<li key={index}>
+								<a href={scope.getIn(['data', 'url'])} rel='external'>
+									{scope.getIn(['data', 'title'])} <span class='external'>(external link)</span>
+									<svg aria-hidden='true' role='presentation' focusable='false' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' height='14' width='16'><path xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' d='M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z' fill='currentColor'></path></svg>
+								</a>{scope.getIn(['data', 'description']) ? (
+									<p>{scope.getIn(['data', 'description'])}</p>
+								) : ''}
+							</li>
+						))}
+					</ul>
+					<p>Not in scope:</p>
+					<ul>
+						{this.props.widgetsFor('outOfScope').map((outOfScope, index) => (
+							<li key={index}>
+								<a href={outOfScope.getIn(['data', 'url'])} rel='external'>
+									{outOfScope.getIn(['data', 'title'])} <span class='external'>(external link)</span>
+									<svg aria-hidden='true' role='presentation' focusable='false' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' height='14' width='16'><path xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' d='M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z' fill='currentColor'></path></svg>
+								</a>{outOfScope.getIn(['data', 'description']) ? (
+									<p>{outOfScope.getIn(['data', 'description'])}</p>
+								) : ''}
+							</li>
+						))}
+					</ul>
+					<h3>Tools used</h3>
+					<p>In conducting this audit, the following tools were used:</p>
+					<ul>
+						{this.props.widgetsFor('tools').map((tool, index) => (
+							<li key={index}>{tool.getIn(['data', 'name'])}{tool.getIn(['data', 'version']) ? ` ${tool.getIn(['data', 'version'])}` : ''}</li>
+						))}
+					</ul>
+					<h3>Technologies used</h3>
+					<p>The audited web page relies on the following technologies:</p>
+					<ul>
+						{entry.getIn(['data', 'technologies']).map((technology, index) => (
+							<li key={index}>{technology}</li>
+						))}
+					</ul>
+				</section>
+			</>
+		);
+	},
+});
+
+CMS.registerPreviewTemplate('report', ReportPreview);
diff --git a/src/assets/styles/cms.css b/src/assets/styles/cms.css
@@ -0,0 +1,3 @@
+.frame-content {
+	padding: 1.5rem;
+}