Sync

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/embed-pdf.html

@@ -0,0 +1,204 @@
+<script type="text/javascript" src= '/js/pdf.js'></script>
+<style>
+#the-canvas {
+  border: 1px solid black;
+  direction: ltr;
+  width: 100%;
+  height: auto;
+  display: none;
+}
+
+#paginator {
+  display: none;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+#loadingWrapper {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 350px;
+}
+
+#loading {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  border: 3px solid #d2d0d0;;
+  border-radius: 50%;
+  border-top-color: #383838;
+  animation: spin 1s ease-in-out infinite;
+  -webkit-animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
+}
+</style>
+
+<div id="paginator">
+    <button id="prev">Previous</button>
+    <button id="next">Next</button>
+    &nbsp; &nbsp;
+    <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
+</div>
+<div id="embed-pdf-container">
+    <div id="loadingWrapper">
+      <div id="loading"></div>
+    </div>
+    <canvas id="the-canvas"></canvas>
+</div>
+
+<script type="text/javascript">
+window.onload = function() {
+// If absolute URL from the remote server is provided, configure the CORS
+// header on that server.
+var url = "{{.Site.BaseURL}}" + '{{ .Get "url" }}';
+
+var hidePaginator = "{{ .Get "hidePaginator" }}" === "true";
+var hideLoader = "{{ .Get "hideLoader" }}" === "true";
+var selectedPageNum = parseInt("{{ .Get "renderPageNum" }}") || 1;
+
+// Loaded via <script> tag, create shortcut to access PDF.js exports.
+var pdfjsLib = window['pdfjs-dist/build/pdf'];
+
+// The workerSrc property shall be specified.
+pdfjsLib.GlobalWorkerOptions.workerSrc = "{{.Site.BaseURL}}" + '/js/pdf.worker.js';
+
+// Change the Scale value for lower or higher resolution.
+var pdfDoc = null,
+    pageNum = selectedPageNum,
+    pageRendering = false,
+    pageNumPending = null,
+    scale = 3,
+    canvas = document.getElementById('the-canvas'),
+    ctx = canvas.getContext('2d'),
+    paginator = document.getElementById("paginator"),
+    loadingWrapper = document.getElementById('loadingWrapper');
+
+
+// Attempt to show paginator and loader if enabled
+showPaginator();
+showLoader();
+
+/**
+ * Get page info from document, resize canvas accordingly, and render page.
+ * @param num Page number.
+ */
+function renderPage(num) {
+  pageRendering = true;
+  // Using promise to fetch the page
+  pdfDoc.getPage(num).then(function(page) {
+    var viewport = page.getViewport({scale: scale});
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+
+    // Render PDF page into canvas context
+    var renderContext = {
+      canvasContext: ctx,
+      viewport: viewport
+    };
+    var renderTask = page.render(renderContext);
+
+    // Wait for rendering to finish
+    renderTask.promise.then(function() {
+      pageRendering = false;
+      showContent();
+      
+      if (pageNumPending !== null) {
+        // New page rendering is pending
+        renderPage(pageNumPending);
+        pageNumPending = null;
+      }
+    });
+  });
+
+  // Update page counters
+  document.getElementById('page_num').textContent = num;
+}
+
+/**
+ * Hides loader and shows canvas
+ */
+function showContent() {
+  loadingWrapper.style.display = 'none';
+  canvas.style.display = 'block';
+}
+
+/**
+ * If we haven't disabled the loader, show loader and hide canvas
+ */
+function showLoader() {
+  if(hideLoader) return
+  loadingWrapper.style.display = 'flex';
+  canvas.style.display = 'none';
+}
+
+/**
+ * If we haven't disabled the paginator, show paginator
+ */
+function showPaginator() {
+  if(hidePaginator) return
+  paginator.style.display = 'block';
+}
+
+/**
+ * If another page rendering in progress, waits until the rendering is
+ * finished. Otherwise, executes rendering immediately.
+ */
+function queueRenderPage(num) {
+  if (pageRendering) {
+    pageNumPending = num;
+  } else {
+    renderPage(num);
+  }
+}
+
+/**
+ * Displays previous page.
+ */
+function onPrevPage() {
+  if (pageNum <= 1) {
+    return;
+  }
+  pageNum--;
+  queueRenderPage(pageNum);
+}
+document.getElementById('prev').addEventListener('click', onPrevPage);
+
+/**
+ * Displays next page.
+ */
+function onNextPage() {
+  if (pageNum >= pdfDoc.numPages) {
+    return;
+  }
+  pageNum++;
+  queueRenderPage(pageNum);
+}
+document.getElementById('next').addEventListener('click', onNextPage);
+
+/**
+ * Asynchronously downloads PDF.
+ */
+pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
+  pdfDoc = pdfDoc_;
+  var numPages = pdfDoc.numPages;
+  document.getElementById('page_count').textContent = numPages;
+  
+  // If the user passed in a number that is out of range, render the last page.
+  if(pageNum > numPages) {
+    pageNum = numPages
+  }
+
+  // Initial/first page rendering
+  renderPage(pageNum);
+});
+}
+
+</script>

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/rawhtml.html

@@ -0,0 +1,2 @@
+<!-- raw html -->
+{{.Inner}}

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>