w3c · WilcoFiers · Jul 13, 2023 · Jul 13, 2023 · Jul 13, 2023 · Jul 13, 2023
diff --git a/.github/workflows/gh-pages-deploy.yml b/.github/workflows/gh-pages-deploy.yml
@@ -0,0 +1,29 @@
+name: GitHub Pages Build & Deploy
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+      - how-to-pages
+
+jobs:
+  build_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          cache: 'npm'
+          cache-dependency-path: how-to/package-lock.json
+      - name: Eleventy Build how-to pages
+        run: |
+          npm --prefix ./how-to/ ci
+          npm --prefix ./how-to/ run build:gh-pages
+          npm --prefix ./how-to/ run copy-to-root
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          publish_dir: _site 
+          publish_branch: gh-pages
+          github_token: ${{ secrets.GH_ACCESS_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+_site
+.sass-cache
+.jekyll-cache
+.jekyll-metadata
+vendor
+node_modules
diff --git a/how-to/.eleventy.js b/how-to/.eleventy.js
@@ -0,0 +1,26 @@
+const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
+const listOutcomes = require('./build/list-outcomes');
+
+module.exports = function(eleventyConfig) {
+  // Ignore a couple things
+  eleventyConfig.ignores.add('**/readme.md');
+  eleventyConfig.ignores.add('_build/**');
+  eleventyConfig.ignores.add('**/_template/**');
+
+  // Global data
+  eleventyConfig.addGlobalData("layout", "layout.html");
+  eleventyConfig.addGlobalData("outcomes", listOutcomes().outcomes);
+
+  // Make it easy to deploy to gh-pages
+  eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+
+  // Copy `assets/` to `_site/assets`
+  eleventyConfig.addPassthroughCopy("assets");
+
+  const dir = {
+    input: "./outcomes",
+    includes: "../_includes" // relative to dir.input
+  }
+
+  return { dir }
+};
diff --git a/how-to/_includes/card.html b/how-to/_includes/card.html
@@ -0,0 +1,7 @@
+<div class="card">
+  <h2>{{ title }}</h2>
+  <div class="flex">
+    <p>{{ content }}</p>
+    <p><a href="{{ href | prepend: base }}" class="card-button">See More</a></p>
+  </div>
+</div>
diff --git a/how-to/_includes/layout.html b/how-to/_includes/layout.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  {%- include "layout/page-title.html" %}
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
+  <link rel="stylesheet" href="/assets/main.css">
+</head>
+<body>
+  {% include "layout/top-header.html" %}
+  {%- if outcome.slug %}
+  {%-   include "layout/sub-header.html" %}
+  {%- endif %}
+  <main id="main" tabindex="-1">
+    {%- if subtitle %}
+    <h2>{{ subtitle }}</h2>
+    {%- endif %}
+    {{ content }}
+  </main>
+  <footer>
+    <div class="page-width">
+      <h2><a href="https://w3.org/WAI/">
+        W3C Web Accessibility Initiative (WAI)
+      </a></h2>
+    </div>
+  </footer>
+</body>
+</html>
diff --git a/how-to/_includes/layout/methods.md b/how-to/_includes/layout/methods.md
@@ -0,0 +1,18 @@
+---
+layout: layout.html
+breadcrumb: Methods
+---
+
+{% if methods.size == 0 %}
+  {% include 'layout/no-methods.md' %}
+{% endif %}
+
+{%- for method in methods %}
+  {%- assign href = '/' | append: outcome.slug | append: '/methods/' | append: method.slug %}
+  {%-
+    include 'card.html',
+    title: method.title,
+    content: method.description,
+    href: href
+  %}
+{%- endfor %}
diff --git a/how-to/_includes/layout/no-methods.md b/how-to/_includes/layout/no-methods.md
@@ -0,0 +1,3 @@
+<p><em>
+  There are currently no methods defined for this outcome.
+</em></p>
diff --git a/how-to/_includes/layout/page-title.html b/how-to/_includes/layout/page-title.html
@@ -0,0 +1,7 @@
+{%- if type == 'method' %}
+  <title>WCAG 3.0 {{ method.title }} Method - {{ subtitle }}</title>
+{%- elsif type == 'activity' %}
+  <title>WCAG 3.0 {{ outcome.title }} Outcome - {{ subtitle }} Activity</title>
+{%- else %}
+  <title>WCAG 3.0 {{ outcome.title }} Outcome - {{ title }}</title>
+{%- endif -%}
diff --git a/how-to/_includes/layout/sub-header.html b/how-to/_includes/layout/sub-header.html
@@ -0,0 +1,64 @@
+<div class="sub-header">
+  <div class="page-width">
+    <ul class="breadcrumb">
+      <li><a href="https://w3c.github.io/silver/guidelines">WCAG 3.0</a></li>
+      {%- if outcome.slug and outcome.title %}
+        <li><a href="/{{ outcome.slug }}/">{{ outcome.title }} Methods & How To's</a></li>
+        {%- if type == "method" %}
+          <li><a href="/{{ outcome.slug }}/methods">Methods</a></li>
+          {%- if subtitle == 'Introduction' %}
+            <li>{{ method.title }}</li>
+          {%- else %}
+            <li><a href="/{{ outcome.slug }}/methods/{{method.slug}}/">{{ method.title }}</a></li>
+            <li>{{ subtitle }}</li>
+          {%- endif %}
+        {%- elsif type == "activity" %}
+          <li><a href="/{{ outcome.slug }}/activities/plan">Activities</a></li>
+          <li>{{ subtitle }}</li>
+        {%- elsif breadcrumb %}
+          <li>{{ breadcrumb }}</li>
+        {%- else %}
+          <li>{{ title }}</li>
+        {%- endif %}
+      {%- endif %}
+    </ul>
+
+    <h1 class="subtitle">
+      {%- if type == 'method' %}
+        Method - {{ method.title }}
+      {%- elsif title %}
+        {{ title }}
+      {%- elsif breadcrumb == 'Methods' %}
+        Methods for {{ outcome.title }}
+      {%- endif %}
+    </h1>
+
+    {%- if type == "method" %}
+    {%- assign baseUrl = '/' 
+          | append: outcome.slug 
+          | append: '/methods/'
+          | append: method.slug
+    %}
+    <nav aria-label="Methods navigation" class="nav-list">
+      <ul>
+        <li>{% include 'link.html', text: 'Introduction',          href: '/', base: baseUrl %}</li>
+        <li>{% include 'link.html', text: 'Code Snippets',         href: '/code-snippets/', base: baseUrl %}</li>
+        <li>{% include 'link.html', text: 'Test',                  href: '/test/', base: baseUrl %}</li>
+        <li>{% include 'link.html', text: 'Background',            href: '/background/', base: baseUrl %}</li>
+        <li>{% include 'link.html', text: 'Technical Definitions', href: '/definitions/', base: baseUrl %}</li>
+      </ul>
+    </nav>
+    {%- elsif type == 'activity' %}
+    {%- assign baseUrl = '/' | append: outcome.slug | append: '/activities' %}
+    <nav aria-label="Activity navigation" class="nav-list">
+      <ul>
+        <li>{% include 'link.html', text: 'Plan',    href: '/plan/',    base: baseUrl %}</li>
+        <li>{% include 'link.html', text: 'Design',  href: '/design/',  base: baseUrl %}</li>
+        <li>{% include 'link.html', text: 'Develop', href: '/develop/', base: baseUrl %}</li>
+        <li>{% include 'link.html', text: 'Edit',    href: '/edit/',    base: baseUrl %}</li>
+        <li>{% include 'link.html', text: 'Test',    href: '/test/',    base: baseUrl %}</li>
+      </ul>
+    </nav>
+    {%- endif %}
+  </div>
+</div>
diff --git a/how-to/_includes/layout/test-activity.md b/how-to/_includes/layout/test-activity.md
@@ -0,0 +1,19 @@
+---
+layout: layout.html
+subtitle: Test
+---
+
+{% if methods.size == 0 %}
+  {% include 'layout/no-methods.md' %}
+{% endif %}
+
+{%- for method in methods %}
+  {%- assign href = '/' | append: outcome.slug 
+    | append: '/methods/' | append: method.slug | append: '/test/' %}
+  {%-
+    include 'card.html',
+    title: method.title,
+    content: method.description,
+    href: href
+  %}
+{% endfor %}
diff --git a/how-to/_includes/layout/top-header.html b/how-to/_includes/layout/top-header.html
@@ -0,0 +1,28 @@
+<div class="top-header">
+  <nav class="page-width" aria-label="Skip link">
+    <a href="#main" class="skip-link">Skip to content</a>
+  </nav>
+  <header class="page-width">
+    <div>
+      <div class="wcag3">WCAG 3.0</div>
+      <div class="title">{{ outcome.title }} Methods & How To's</div>
+    </div>
+    <div class="branding">
+      {% include 'layout/wai-logo.html' %}
+    </div>
+  </header>
+
+  {%- if outcome.slug %}
+  <nav aria-label="WCAG 3 How-to Navigation"><div class="page-width nav-list">
+    {%- assign base = '/' | append: outcome.slug %}
+    <ul>
+      <li>{% include 'link.html', href: '/', base: base, text: 'Get Started' %}</li>
+      <li>{% include 'link.html', href: '/user-needs/', base: base, text: 'User Needs' %}</li>
+      <li>{% include 'link.html', href: '/activities/plan/', base: base, text: 'Activities' %}</li>
+      <li>{% include 'link.html', href: '/examples/', base: base, text: 'Examples' %}</li>
+      <li>{% include 'link.html', href: '/resources/', base: base, text: 'Resources' %}</li>
+      <li>{% include 'link.html', href: '/methods/', base: base, text: 'Methods' %}</li>
+    </ul>
+  </div></nav>
+  {%- endif %}
+</div>
diff --git a/how-to/_includes/layout/wai-logo.html b/how-to/_includes/layout/wai-logo.html
@@ -0,0 +1,4 @@
+<a href="https://w3.org/WAI/">
+  <img alt="W3C" src="/assets/images/w3c.svg" width="92" height="44">
+  <img alt="Web Accessibility Initiative" src="/assets/images/wai.svg">
+</a>
diff --git a/how-to/_includes/link.html b/how-to/_includes/link.html
@@ -0,0 +1,6 @@
+{%- assign url = href | prepend: base %}
+{%- if url == page.url %}
+  <a aria-current="page" href="{{ url }}">{{ text }}</a>
+{%- else %}
+  <a href="{{ url }}">{{ text }}</a>
+{%- endif %}
diff --git a/how-to/_includes/outcomes-list.html b/how-to/_includes/outcomes-list.html
@@ -0,0 +1,8 @@
+{% for outcome in outcomes %}
+  {%- assign href = '/' | append: outcome.slug | append: '/' %}
+  {%- include 'card.html',
+    title: outcome.title,
+    content: outcome.description,
+    href: href
+  %}
+{% endfor %}
diff --git a/how-to/assets/footer.css b/how-to/assets/footer.css
@@ -0,0 +1,16 @@
+footer {
+  margin-top: 4em;
+  padding-top: 2em;
+  min-height: 10em;
+  background: var(--dk-grey);
+  color: var(--off-white);
+}
+
+footer h2 a {
+  color: var(--gold);
+  text-decoration: none;
+}
+
+footer a {
+  color: var(--off-white);
+}
diff --git a/how-to/assets/images/w3c.svg b/how-to/assets/images/w3c.svg