first commit

layouts/shortcodes/blockquote.html

@@ -0,0 +1,11 @@
+{{ $quote := .Inner }}
+
+<blockquote class="blockquote">
+  <p>
+    {{ $quote | markdownify }}
+    {{ with (.Get "author") }}
+      <br>
+      <span class="author">&mdash; {{ . }}</span>
+    {{ end }}
+  </p>
+</blockquote>

layouts/shortcodes/cmd.html

@@ -0,0 +1,7 @@
+{{ $trimmed := (trim .Inner "\n") }}
+{{ $lines := split $trimmed "\n" }}
+<pre class="cmd">
+  {{ range $lines }}
+  <code>{{ . }}</code>
+  {{ end }}
+</pre>

layouts/shortcodes/code.html

@@ -0,0 +1,5 @@
+{{ $code := .Inner | htmlEscape }}
+{{ $code := replace $code "[[[" "<span class='highlight'>" }}
+{{ $code := replace $code "]]]" "</span>" }}
+{{ $numbered := .Get "numbered" }}
+<div class="code-annotated {{ if and ($numbered) (ne $numbered "false") }}numbered{{ end }}"><code>{{ $code | safeHTML }}</code></div>

layouts/shortcodes/codePen.html

@@ -0,0 +1,10 @@
+{{ $pen := .Get 0 }}
+{{ with .Site.Params.codePenUser }}
+  <iframe height="300" scrolling="no" title="code demonstration with codePen" src="//codepen.io/{{ . | lower }}/embed/{{ $pen }}/?height=265&theme-id=dark&default-tab=result,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">
+    <div>
+      <a href="//codepen.io/{{ . | lower }}/pen/{{ $pen }}">See the demo on codePen</a>
+    </div>
+  </iframe>
+{{ else }}
+  <p class="site-error"><strong>Site error:</strong> The <code>codePenUser</code> param has not been set in <code>config.toml</code></p>
+{{ end }}

layouts/shortcodes/colors.html

@@ -0,0 +1,11 @@
+{{ $colorString := replace (.Get 0) " " "" | upper }}
+{{ $colors := split $colorString "," }}
+<div class="colors-container">
+  <ul class="colors">
+    {{ range $colors }}
+      <li style="background-color: {{ . }};{{ if or (eq . "#FFFFFF") (eq . "#FFF")}} border: 1px solid #111{{ end }}">
+        <span>{{ . }}</span>
+      </li>
+    {{ end }}
+  </ul>
+</div>

layouts/shortcodes/expandable.html

@@ -0,0 +1,25 @@
+<div class="expandable-section">
+  {{ if .Get "level" }}
+    <h{{ .Get "level" }}>
+  {{ end }}
+    {{/* 1. Get the md5 hash of the expandable inner text */}}
+    {{/* 2. Split the hash string into an array */}}
+    {{/* 3. Shuffle the array */}}
+    {{/* 4. Convert the array back into a string */}}
+    {{ $random := delimit (shuffle (split (md5 .Inner) "" )) "" }}
+    <button aria-expanded="{{ with .Get "open" }}true{{ else }}false{{ end }}" data-expands="js-expandable-{{ $random }}">
+      <span class="expandable-label">{{ .Get "label" | default "More info" }}</span>
+      <svg aria-hidden="true" focusable="false" viewBox="0 0 70.866142 70.866141">
+        <g transform="translate(0 -981.5)">
+          <rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
+          <rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
+        </g>
+      </svg>
+    </button>
+  {{ if .Get "level" }}
+    </h{{ .Get "level"}}>
+  {{ end }}
+  <div id="js-expandable-{{ $random }}" {{ with .Get "open" | not }}hidden{{ end }}>
+    {{ .Inner | markdownify }}
+  </div>
+</div>

layouts/shortcodes/figureCupper.html

@@ -0,0 +1,28 @@
+{{ $img := .Get "img" }}
+{{ $caption := .Get "caption" }}
+{{ $command := .Get "command" }}
+{{ $options := .Get "options" }}
+
+{{ $original := .Page.Resources.GetMatch (printf "*%s*" $img) }}
+{{ $new := "" }}
+
+{{ if eq $command "Fit" }}
+  {{ $new = $original.Fit $options }}
+{{ else if eq $command "Fill" }}
+  {{ $new = $original.Fill $options }}
+{{ else if eq $command "Resize" }}
+  {{ $new = $original.Resize $options }}
+{{ else if eq $command "Original" }}
+  {{ $new = $original }}
+{{ else }}
+  {{ errorf "Invalid image processing command: Must be one of Fit, Fill, Resize, Original." }}
+{{ end }}
+
+<figure role="group" aria-describedby="caption-{{ $caption | md5 }}">
+  <a href="{{ $original.RelPermalink }}" class="img-link">
+    <img src="{{ $new.RelPermalink }}">
+  </a>
+  <figcaption id="caption-{{ $caption | md5 }}">
+    {{ $caption | markdownify }}
+  </figcaption>
+</figure>

layouts/shortcodes/fileTree.html

@@ -0,0 +1,3 @@
+<div class="file-tree">
+  {{ .Inner | markdownify }}
+</div>

layouts/shortcodes/gallery.html

@@ -0,0 +1,29 @@
+{{ $command := .Get "command" }}
+{{ $options := .Get "options" }}
+
+{{ with .Page.Resources.ByType "image" }}
+  {{ range . }}
+
+    {{ $original := . }}
+    {{ $new := "" }}
+
+    {{ if eq $command "Fit" }}
+      {{ $new = $original.Fit $options }}
+    {{ else if eq $command "Fill" }}
+      {{ $new = $original.Fill $options }}
+    {{ else if eq $command "Resize" }}
+      {{ $new = $original.Resize $options }}
+    {{ else if eq $command "Original" }}
+      {{ $new = $original }}
+    {{ else }}
+      {{ errorf "Invalid image processing command: Must be one of Fit, Fill, Resize, Original." }}
+    {{ end }}
+
+    <div class="gallery">
+      <a href="{{ $original.RelPermalink }}" class="img-link">
+        <img src="{{ $new.RelPermalink }}">
+      </a>
+    </div>
+
+  {{ end }}
+{{ end }}

layouts/shortcodes/note.html

@@ -0,0 +1,8 @@
+<aside aria-label="note" class="note">
+  <div>
+    <svg class="sign" aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
+      <use xlink:href="#info"></use>
+    </svg>
+    {{ .Inner | markdownify }}
+  </div>
+</aside>

layouts/shortcodes/principles.html

@@ -0,0 +1,24 @@
+{{ $JSON := $.Site.Data.principles }}
+{{ $included := replace (.Get "include") ", " "," }}
+{{ $included := apply (split $included ",") "lower" "." }}
+{{ $descriptions := .Get "descriptions" }}
+<ul class="principles {{ if and ($descriptions) (ne $descriptions "false") }}with-desc{{ end }}">
+  {{ range $JSON.principles }}
+    {{ if in $included (lower .title) }}
+      <li>
+        <strong>
+          <a href="https://inclusivedesignprinciples.org#{{ .title | urlize }}">
+            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
+              <use xlink:href="#balloon"></use>
+            </svg>
+            {{ .title }}
+          </a>:
+        </strong>
+        <em>{{ .strapline }}</em>
+        {{ if and ($descriptions) (ne $descriptions "false") }}
+          <p>{{ .description }}</p>
+        {{ end }}
+      </li>
+    {{ end }}
+  {{ end }}
+</ul>

layouts/shortcodes/tested.html

@@ -0,0 +1,28 @@
+{{ $tested := replace (.Get "using") ", " "," }}
+{{ $tested := replace $tested " + " "+" }}
+{{ $tested := split $tested "," }}
+<table class="tested">
+  <tr>
+    <th scope="row">
+      <svg viewBox="0 0 177.16535 177.16535" focusable="false" aria-hidden="true">
+        <use xlink:href="#tick"></use>
+      </svg>
+      Tested using
+    </th>
+    {{ range $tested }}
+      <td>
+        {{ $browser := findRE "^[a-zA-Z ]+" . }}
+        {{ $browser := index $browser 0 }}
+        {{ $version := findRE "[0-9]+$" . }}
+        {{ $slug := replace $browser " " "-" | lower }}
+        <img src="{{ (printf "images/browser-%s" $slug) | relURL }}.svg" alt="">
+        <span><strong>{{ $browser }} {{ index $version 0 }}</strong></span>
+        {{ if in . "+" }}
+          {{ $parts := split . "+" }}
+          {{ $additional := index $parts 1 }}
+          <span class="additional">with <strong>{{ $additional }}</strong></span>
+        {{ end }}
+      </td>
+    {{ end }}
+  </tr>
+</table>

layouts/shortcodes/ticks.html

@@ -0,0 +1,3 @@
+<div class="ticks">
+  {{ .Inner | markdownify }}
+</div>

layouts/shortcodes/warning.html

@@ -0,0 +1,8 @@
+<aside aria-label="warning" class="note warning">
+  <div>
+    <svg class="sign" aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
+      <use xlink:href="#warning"></use>
+    </svg>
+    {{ .Inner | markdownify }}
+  </div>
+</aside>

layouts/shortcodes/wcag.html

@@ -0,0 +1,30 @@
+{{ $JSON := $.Site.Data.wcag }}
+{{ $included := replace (.Get "include") ", " "," }}
+{{ $included := split $included "," }}
+{{ $descriptions := .Get "descriptions" }}
+<ul class="wcag {{ if and ($descriptions) (ne $descriptions "false") }}with-desc{{ end }}">
+  {{ range $JSON }}
+    {{ if in $included .ref_id }}
+      <li>
+        <strong><a href="{{ .url }}">
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
+            <use xlink:href="#w3c"></use>
+          </svg>
+          {{ .ref_id }} {{ .title }}</a> (level {{ .level }}){{ if $descriptions }}:{{ end }}
+        </strong>
+        {{ if and ($descriptions) (ne $descriptions "false") }}
+          {{ .description }}
+          {{ if .special_cases }}
+            <ul>
+              {{ range .special_cases }}
+                <li><strong>{{ .title }}:</strong>
+                  {{ .description }}
+                </li>
+              {{ end }}
+            </ul>
+          {{ end }}
+        {{ end }}
+      </li>
+    {{ end }}
+  {{ end }}
+</ul>