first commit

2022-04-10 15:20:41 +07:00
commit 002cefa80f
112 changed files with 6495 additions and 0 deletions
--- a/layouts/404.html
+++ b/layouts/404.html
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.Language.Lang }}">
+  {{ partial "head.html" . }}
+  <body>
+    <a href="#main">{{ T "skip_to_content" }}</a>
+    {{ partial "noscript.html" . }}
+    {{ partial "svg.html" . }}
+    <div class="wrapper">
+      {{ partial "header.html" . }}
+      <div class="main-and-footer">
+        <div>
+          {{ block "main" . }}{{ end }}
+          {{ if ne .Site.Params.moveFooterToHeader true }}
+            {{ partial "footer.html" . }}
+          {{ end }}
+        </div>
+      </div>
+    </div>
+    {{ partial "script.html" . }}
+    {{ partial "katex.html" . }}
+    {{ partial "google-analytics-async.html" . }}
+  </body>
+</html>
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -0,0 +1,32 @@
+{{ define "main" }}
+<main id="main">
+  <h1>{{ .Title }}</h1>
+  {{ if site.Params.search }}
+  <input
+    id="search"
+    type="text"
+    placeholder="{{ T "search_placeholder" }}"
+    aria-label="{{ T "search_aria_label" }}"
+  />
+  {{ end }}
+  <ul class="patterns-list" id="list">
+    {{ range .Pages.ByPublishDate.Reverse }}
+    <li>
+      <h2>
+        <a href="{{ .RelPermalink }}">
+          <svg
+            class="bookmark"
+            aria-hidden="true"
+            viewBox="0 0 40 50"
+            focusable="false"
+          >
+            <use xlink:href="#bookmark"></use>
+          </svg>
+          {{ .Title }}
+        </a>
+      </h2>
+    </li>
+    {{ end }}
+  </ul>
+</main>
+{{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -0,0 +1,6 @@
+{{ define "main" }}
+  <main id="main">
+    <h1>{{ .Title }}</h1>
+    {{ .Content }}
+  </main>
+{{ end }}
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -0,0 +1,19 @@
+{{ define "main" }}
+  <main id="main">
+    <h1>{{ .Title }}</h1>
+    <ul class="patterns-list">
+      {{ range .Data.Terms.Alphabetical }}
+        <li>
+          <h2>
+            <a href="{{ .Page.RelPermalink }}">
+              <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
+                <use xlink:href="#tag"></use>
+              </svg>
+              {{ printf "(%d) %s" .Count .Page.Title }}
+            </a>
+          </h2>
+        </li>
+      {{ end }}
+    </ul>
+  </main>
+{{ end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -0,0 +1,6 @@
+{{ define "main" }}
+  <main id="main">
+    <h1>{{ .Title }}</h1>
+    {{ .Content }}
+  </main>
+{{ end }}
--- a/layouts/partials/disqus-js-common.js
+++ b/layouts/partials/disqus-js-common.js
@@ -0,0 +1,6 @@
+// Remove button
+var disqusButton = document.getElementById('disqus-button');
+disqusButton.parentNode.removeChild(disqusButton); 
+// Un-hide comments
+var disqusComments = document.getElementById('disqus-comments');
+disqusComments.style.display = 'block'; 
--- a/layouts/partials/disqus-js-main.js
+++ b/layouts/partials/disqus-js-main.js
@@ -0,0 +1,10 @@
+// Config
+var disqus_config = function () {
+};
+// Build and append comments 
+var d = document;
+var s = d.createElement('script');
+s.async = true;
+s.src = '//' + "{{ . }}" + '.disqus.com/embed.js';
+s.setAttribute('data-timestamp', + new Date());
+(d.head || d.body).appendChild(s);
--- a/layouts/partials/disqus.html
+++ b/layouts/partials/disqus.html
@@ -0,0 +1,27 @@
+<div id="disqus-container">
+  {{ with .Site.DisqusShortname }}
+    <button id="disqus-button" onclick="showComments()">{{ T "discuss_show_comments_button" }}</button>
+    <div id="disqus-comments">
+      {{ $isDummyName := eq . "yourdiscussshortname" }}
+      {{ $isServer := $.Site.IsServer }}
+      {{ if or $isDummyName $isServer }}
+        <p><em>{{ T "discuss_comments_disabled" }}</em></p>
+        <script type="application/javascript">
+          function showComments() {
+            {{ partial "disqus-js-common.js" . | safeJS }}
+          }
+        </script>
+      {{ else }}
+        <div id="disqus_thread">
+        </div>
+        <script type="application/javascript">
+          function showComments() {
+            {{ partial "disqus-js-main.js" . | safeJS }}
+            {{ partial "disqus-js-common.js" . | safeJS }}
+          }
+        </script>
+      {{ end }}
+      <noscript>{{ T "discuss_js_disabled" }}</noscript>
+    </div>
+  {{ end }}
+</div>
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -0,0 +1,14 @@
+<footer role="contentinfo">
+  <div
+  {{ if eq .Site.Params.showThemeSwitcher false }}style="display: none;"{{ end }}
+  >
+    <label for="themer">
+      {{ T "dark_theme" }} <input type="checkbox" id="themer" class="vh">
+      <!-- Shows "on" or "off" -->
+      <span aria-hidden="true"></span>
+    </label>
+  </div>
+  {{ with .Site.Params.footer }}
+    {{ . | markdownify }}
+  {{ end }}
+</footer>
--- a/layouts/partials/google-analytics-async.html
+++ b/layouts/partials/google-analytics-async.html
@@ -0,0 +1,10 @@
+{{ if not .Site.IsServer }}
+  {{ with .Site.GoogleAnalytics }}
+  <script>
+  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+  ga('create', '{{ . }}', 'auto');
+  ga('send', 'pageview');
+  </script>
+  <script async src='https://www.google-analytics.com/analytics.js'></script>
+  {{ end }}
+{{ end }}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -0,0 +1,67 @@
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+  {{ hugo.Generator }}
+  <link rel="canonical" href="{{ .Permalink }}" />
+
+  {{ if .IsHome }}
+    {{ with .Site.Params.homeMetaContent }}
+      <meta name="description" content="{{ . | plainify }}">
+    {{ end }}
+  {{ else }}
+    {{ $summary := trim (.Summary | plainify | htmlUnescape) "\n\r"
+      | default .Title }}
+    <meta name="description" content="{{ $summary }}">
+  {{ end }}
+
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ "apple-touch-icon.png" | absURL }}">
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32x32.png" | absURL }}"> 
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | absURL }}"> 
+  <link rel="manifest" href="{{ "site.webmanifest" | absURL }}"> 
+  <link rel="mask-icon" href="{{ "safari-pinned-tab.svg" | absURL }}" color="#000000"> 
+  <meta name="msapplication-TileColor" content="#ffffff">
+  <meta name="theme-color" content="#ffffff">
+
+  <style>
+    body {
+      visibility: hidden;
+      opacity: 0;
+    }
+  </style>
+
+  <style id="darkTheme">
+    .intro-and-nav,
+    .main-and-footer {
+      filter: invert(100%);
+    }
+
+    * {
+      background-color: inherit
+    }
+
+    img:not([src*=".svg"]),
+    .colors,
+    iframe,
+    .demo-container {
+      filter: invert(100%);
+    }
+  </style>
+
+  <link rel="stylesheet" href="{{ "css/prism.css" | relURL }}" media="none" onload="this.media='all';">
+
+  {{ $templateStyles := resources.Get "css/template-styles.css" }}
+  {{ $styles := $templateStyles | resources.ExecuteAsTemplate "css/styles.css" . }}
+  <link rel="stylesheet" type="text/css" href="{{ $styles.RelPermalink }}">
+
+  {{ range .Site.Params.customCss }}
+    <link rel="stylesheet" href="{{ . | relURL }}">
+  {{ end }}
+
+  {{ $title := print .Title " | " .Site.Title }}
+  {{ if .IsHome }}
+    {{ $title = .Site.Title }}
+  {{ end }}
+  <title>{{ $title }}</title>
+</head>
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -0,0 +1,27 @@
+<header class="intro-and-nav" role="banner">
+  <div>
+    <div class="intro">
+      <a
+        class="logo"
+        href="{{ .Site.BaseURL }}"
+        aria-label="{{ .Site.Title }} home page"
+      >
+        {{ with .Site.Params.navTitleText }}
+          <h1>{{ . }}</h1>
+        {{ else }}
+          <img 
+            src="{{ "images/logo.svg" | relURL }}" 
+            alt="{{ .Site.Params.logoAlt | default "Logo" }}"
+          >
+        {{ end }}
+      </a>
+      <p class="library-desc">
+        {{ with .Site.Params.description }} {{ . | markdownify }} {{ end }}
+      </p>
+    </div>
+    {{ partial "nav.html" . }}
+    {{ if eq .Site.Params.moveFooterToHeader true }}
+      {{ partial "footer.html" . }}
+    {{ end }}
+  </div>
+</header>
--- a/layouts/partials/katex.html
+++ b/layouts/partials/katex.html
@@ -0,0 +1,5 @@
+{{ if eq $.Site.Params.katex true }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
+{{ end }}
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -0,0 +1,26 @@
+<nav id="patterns-nav" class="patterns" role="navigation">
+  <h2 class="vh">{{ T "nav_main_navigation" }}</h2>
+  <button id="menu-button" aria-expanded="false">
+    <svg viewBox="0 0 50 50" aria-hidden="true" focusable="false">
+      <use xlink:href="#menu"></use>
+    </svg>
+    {{ T "nav_button_menu" }}
+  </button>
+  {{ $current := . }}
+  <ul id="patterns-list">
+  {{ range .Site.Menus.nav }}
+    <li class="pattern">
+      {{ $active := or ($current.IsMenuCurrent "nav" .) ($current.HasMenuCurrent "nav" .) }}
+      {{ $active = or $active (eq .Name $current.Title) }}
+      {{ $active = or $active (and (eq .Name "Blog") (eq $current.Section "post")) }}
+      {{ $active = or $active (and (eq .Name "Tags") (eq $current.Section "tags")) }}
+      <a href="{{ .URL }}" {{ if $active }}aria-current="page"{{ end }}>
+        <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+          <use xlink:href="#bookmark"></use>
+        </svg>
+        <span class="text">{{ .Name }}</span>
+      </a>
+    </li>
+  {{ end }}
+  </ul>
+</nav>
--- a/layouts/partials/noscript.html
+++ b/layouts/partials/noscript.html
@@ -0,0 +1,8 @@
+<noscript>
+  <style>
+    body {
+      visibility: visible;
+      opacity: 1;
+    }
+  </style>
+</noscript>
--- a/layouts/partials/script.html
+++ b/layouts/partials/script.html
@@ -0,0 +1,16 @@
+{{ $templateDomScripts := resources.Get "js/template-dom-scripts.js" }}
+{{ $domScripts := $templateDomScripts | resources.ExecuteAsTemplate "js/dom-scripts.js" . }}
+<script src="{{ $domScripts.RelPermalink }}"></script>  
+
+<script src="{{ "js/prism.js" | relURL }}"></script>
+
+{{ if site.Params.search }}
+{{ $searchJs := resources.Get "js/search.js" | fingerprint }}
+<script src="{{ $searchJs.RelPermalink }}"></script>
+{{ $searchCss := resources.Get "css/search.css" | fingerprint }}
+<link rel="stylesheet" href="{{ $searchCss.RelPermalink }}"></link>
+{{ end }}
+
+{{ range .Site.Params.customJs }}
+  <script src="{{ . | relURL }}"></script>
+{{ end }}
--- a/layouts/partials/svg.html
+++ b/layouts/partials/svg.html
@@ -0,0 +1,88 @@
+<svg style="display: none">
+  <symbol id="bookmark" viewBox="0 0 40 50">
+   <g transform="translate(2266 3206.2)">
+    <path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
+   </g>
+  </symbol>
+
+  <symbol id="w3c" viewBox="0 0 127.09899 67.763">
+   <text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
+   <text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
+   <path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
+   <path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
+   <path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
+   <path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
+  </symbol>
+
+  <symbol id="tag" viewBox="0 0 177.16535 177.16535">
+    <g transform="translate(0 -875.2)">
+     <path style="fill-rule:evenodd;stroke-width:0;fill:currentColor" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
+    </g>
+  </symbol>
+
+  <symbol id="balloon" viewBox="0 0 141.73228 177.16535">
+   <g transform="translate(0 -875.2)">
+    <g>
+     <path style="fill:currentColor" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
+     <path style="fill:currentColor" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
+     <path style="fill:currentColor" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
+     <path style="fill:currentColor" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
+     <path style="fill:currentColor" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
+     <rect style="stroke-width:0;fill:currentColor" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
+    </g>
+   </g>
+  </symbol>
+
+  <symbol id="info" viewBox="0 0 41.667 41.667">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+  </symbol>
+
+  <symbol id="warning" viewBox="0 0 48.430474 41.646302">
+    <g transform="translate(-1.1273 -1010.2)">
+     <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+  </symbol>
+
+  <symbol id="menu" viewBox="0 0 50 50">
+     <rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="0" x="0"/>
+     <rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="20" x="0"/>
+     <rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="40" x="0"/>
+   </symbol>
+
+   <symbol id="link" viewBox="0 0 50 50">
+    <g transform="translate(0 -1002.4)">
+     <g transform="matrix(.095670 0 0 .095670 2.3233 1004.9)">
+      <g>
+       <path style="stroke-width:0;fill:currentColor" d="m452.84 192.9-128.65 128.65c-35.535 35.54-93.108 35.54-128.65 0l-42.881-42.886 42.881-42.876 42.884 42.876c11.845 11.822 31.064 11.846 42.886 0l128.64-128.64c11.816-11.831 11.816-31.066 0-42.9l-42.881-42.881c-11.822-11.814-31.064-11.814-42.887 0l-45.928 45.936c-21.292-12.531-45.491-17.905-69.449-16.291l72.501-72.526c35.535-35.521 93.136-35.521 128.64 0l42.886 42.881c35.535 35.523 35.535 93.141-.001 128.66zm-254.28 168.51-45.903 45.9c-11.845 11.846-31.064 11.817-42.881 0l-42.884-42.881c-11.845-11.821-11.845-31.041 0-42.886l128.65-128.65c11.819-11.814 31.069-11.814 42.884 0l42.886 42.886 42.876-42.886-42.876-42.881c-35.54-35.521-93.113-35.521-128.65 0l-128.65 128.64c-35.538 35.545-35.538 93.146 0 128.65l42.883 42.882c35.51 35.54 93.11 35.54 128.65 0l72.496-72.499c-23.956 1.597-48.092-3.784-69.474-16.283z"/>
+      </g>
+     </g>
+    </g>
+  </symbol>
+
+  <symbol id="doc" viewBox="0 0 35 45">
+   <g transform="translate(-147.53 -539.83)">
+    <path style="stroke:currentColor;stroke-width:2.4501;fill:none" d="m149.38 542.67v39.194h31.354v-39.194z"/>
+    <g style="stroke-width:25" transform="matrix(.098003 0 0 .098003 133.69 525.96)">
+     <path d="m220 252.36h200" style="stroke:currentColor;stroke-width:25;fill:none"/>
+     <path style="stroke:currentColor;stroke-width:25;fill:none" d="m220 409.95h200"/>
+     <path d="m220 488.74h200" style="stroke:currentColor;stroke-width:25;fill:none"/>
+     <path d="m220 331.15h200" style="stroke:currentColor;stroke-width:25;fill:none"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="tick" viewBox="0 0 177.16535 177.16535">
+  <g transform="translate(0 -875.2)">
+   <rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
+   <rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
+  </g>
+ </symbol>
+</svg>
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@@ -0,0 +1,6 @@
+{{ if eq .Params.toc true }}
+  <nav class="toc" aria-labelledby="toc-heading">
+    <strong id="toc-heading">{{ T "table_of_contents" }}</strong>
+    {{ .TableOfContents }}
+  </nav>
+{{ end }}
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -0,0 +1,44 @@
+{{ define "main" }}
+  <main id="main">
+    <h1>
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
+      {{ .Title }}
+    </h1>
+
+    <div class="date">
+      {{ $dateFormat := $.Site.Params.dateFormat | default "Jan 2, 2006" }}
+      {{ $publishDate := .PublishDate }}
+      <strong>{{ T "publish_date" }} </strong>{{ $publishDate.Format $dateFormat }}
+      {{ with .Lastmod }}
+        {{ if gt . $publishDate }}
+          <br>
+          <strong>{{ T "last_updated" }} </strong>{{ .Format $dateFormat }}
+        {{ end }}
+      {{ end }}
+    </div>
+
+    {{ with .Params.tags }}
+      <div class="tags">
+        <strong>{{ T "tags" }} </strong>
+        <ul aria-label="{{ T "aria_label_tags" }}">
+          {{ range . }}
+            <li>
+              <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
+                <use xlink:href="#tag"></use>
+              </svg>
+              {{ $href := print ("tags/" | relLangURL) (. | urlize) "/" }}
+              <a href="{{ $href }}">{{ . }}</a>
+            </li>
+          {{ end }}
+        </ul>
+      </div>
+    {{ end }}
+
+    {{ partial "toc.html" . }}
+
+    {{ .Content }}
+  </main>
+  {{ partial "disqus.html" . }}
+{{ end }}
--- a/layouts/shortcodes/blockquote.html
+++ b/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>
--- a/layouts/shortcodes/cmd.html
+++ b/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>
--- a/layouts/shortcodes/code.html
+++ b/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>
--- a/layouts/shortcodes/codePen.html
+++ b/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 }}
--- a/layouts/shortcodes/colors.html
+++ b/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>
--- a/layouts/shortcodes/expandable.html
+++ b/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>
--- a/layouts/shortcodes/figureCupper.html
+++ b/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>
--- a/layouts/shortcodes/fileTree.html
+++ b/layouts/shortcodes/fileTree.html
@@ -0,0 +1,3 @@
+<div class="file-tree">
+  {{ .Inner | markdownify }}
+</div>
--- a/layouts/shortcodes/gallery.html
+++ b/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 }}
--- a/layouts/shortcodes/note.html
+++ b/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>
--- a/layouts/shortcodes/principles.html
+++ b/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>
--- a/layouts/shortcodes/tested.html
+++ b/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>
--- a/layouts/shortcodes/ticks.html
+++ b/layouts/shortcodes/ticks.html
@@ -0,0 +1,3 @@
+<div class="ticks">
+  {{ .Inner | markdownify }}
+</div>
--- a/layouts/shortcodes/warning.html
+++ b/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>
--- a/layouts/shortcodes/wcag.html
+++ b/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>