Home Explore Help
Register Sign In
wang2365
/
cupper-hugo-theme
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

numbered highlights explanation

Heydon Pickering 7 years ago
parent
df320adcf5
commit
fff72dff15
9 changed files with 228 additions and 86 deletions
Split View Show Diff Stats
  1. 52 7
      content/patterns/coding/code-blocks.md
  2. 25 30
      docs/css/styles.css
  3. 1 1
      docs/js/dom-scripts.js
  4. 61 8
      docs/patterns/coding/code-blocks/index.html
  5. 61 8
      docs/print-version/index.html
  6. 0 0
      docs/service-worker.js
  7. 2 1
      themes/infusion/layouts/shortcodes/html.html
  8. 25 30
      themes/infusion/static/css/styles.css
  9. 1 1
      themes/infusion/static/js/dom-scripts.js

+ 52 - 7
content/patterns/coding/code-blocks.md
View File 

@@ -25,13 +25,58 @@ Note that the syntax highlighting uses a greyscale theme. **Infusion** is carefu
 
 To preserve the wrapping inside code blocks, horizontal scrolling is implemented. To make sure scrolling is keyboard accessible, code blocks are focusable. An `aria-label` is provided to identify the code block to screen reader users.
 
 {{% /note %}}
 
 
-## Annotated
 
+## Annotated HTML
 
+
 
+Since the structure of HTML is critical to interoperable web interfaces, **Infusion** offers the ability to highlight and annotate specific HTML elements and attributes using the `html` shortcode.
 
+
 
+Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:
 
 
 {{<html>}}
 
-<ul>
 
-  <li>Here's a thing</li>
 
-  <li ((role="separator"))>Here's a thing</li>
 
-  <li>Here's a ((thing))</li>
 
-  <li>Here's a thing <span ((aria-hidden="true"))></span></li>
 
-</ul>
 
+<div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  <button ((aria-label="close"))>x</button>
 
+  <h2 ((id="dialog-heading"))>Confirmation</h2>
 
+  <p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong></p>
 
+  <button>Okay</button>
 
+  <button>Cancel</button>
 
+</div>
 
 {{</html>}}
 
+
 
+You mark out the highlighted areas with double parentheses like so:
 
+
 
+{{<codeBlock>}}
 
+&#x7b;{&lt;html>}}
 
+&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  &lt;button ((aria-label="close"))>x&lt;/button>
 
+  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+  &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
+  &lt;button>Okay&lt;/button>
 
+  &lt;button>Cancel&lt;/button>
 
+&lt;/div>
 
+&#x7b;{&lt;/html>}}
 
+{{</codeBlock>}}
 
+
 
+Better still, if you include `numbered="true"`, each highlight is enumberated so you can reference it directly in the ensuing text.
 
+
 
+{{<html numbered="true">}}
 
+<div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  <button ((aria-label="close"))>x</button>
 
+  <h2 ((id="dialog-heading"))>Confirmation</h2>
 
+  <p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong></p>
 
+  <button>Okay</button>
 
+  <button>Cancel</button>
 
+</div>
 
+{{</html>}}
 
+
 
+You just include `numbered="true"` on the opening shortcode tag:
 
+
 
+{{<codeBlock>}}
 
+&#x7b;{&lt;html numbered="true">}}
 
+&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  &lt;button ((aria-label="close"))>x&lt;/button>
 
+  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+  &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
+  &lt;button>Okay&lt;/button>
 
+  &lt;button>Cancel&lt;/button>
 
+&lt;/div>
 
+&#x7b;{&lt;/html>}}
 
+{{</codeBlock>}}

+ 25 - 30
docs/css/styles.css
View File 

@@ -65,8 +65,10 @@ figure p img {
 
 [data-expands]:focus svg,
 
 .patterns a:focus .text,
 
 [for="themer"] :focus + [aria-hidden] {
 
-    outline: 3px solid #888;
 
-    outline-offset: 2px;
 
+    outline: 4px solid #999;
 
+}
 
+a {
 
+  outline-offset: 2px;
 
 }
 
 /* fix for IE :( */
 
 
@@ -382,7 +384,7 @@ caption {
 
 }
 
 #menu-button:focus {
 
     outline: none;
 
-    box-shadow: inset 0 0 0 0.25rem #888;
 
+    box-shadow: inset 0 0 0 0.25rem #999;
 
 }
 
 /* Tables of contents */
 
 
@@ -522,37 +524,30 @@ pre[class*=language-] code * {
 
     margin-top: -1rem;
 
 }
 
 .html-annotated {
 
-  overflow-y: hidden;
 
-  overflow-x: auto;
 
-  padding: 1.5rem;
 
-  border: 1px solid;
 
-  white-space: pre;
 
-  counter-reset: annotation;
 
+    overflow-y: hidden;
 
+    overflow-x: auto;
 
+    padding: 1.5rem;
 
+    border: 1px solid;
 
+    white-space: pre;
 
+    counter-reset: annotation;
 
 }
 
 .highlight {
 
-  background: #ddd;
 
-  padding: 0.25rem 0.5rem;
 
-  border-radius: 0.5rem;
 
+    background: #ddd;
 
+    padding: 0.0625rem 0.33rem;
 
+    border-radius: 0.5rem;
 
 }
 
-.highlight::after {
 
-  counter-increment: annotation;
 
-  content: counter(annotation);
 
-  font-weight: bold;
 
-  font-size: 0.5rem;
 
-  background: #111;
 
-  color: #fefefe;
 
-  display: inline-block;
 
-  width: 0.75rem;
 
-  height: 0.75rem;
 
-  line-height: 0.75rem;
 
-  text-align: center;
 
-  border-radius: 1rem;
 
-  vertical-align: middle;
 
-  margin-left: 0.25rem;
 
+.numbered .highlight::after {
 
+    counter-increment: annotation;
 
+    content: counter(annotation);
 
+    font-weight: bold;
 
+    font-size: 0.5rem;
 
+    background: #111;
 
+    color: #fefefe;
 
+    border-radius: 1rem;
 
+    margin-left: 0.25rem;
 
+    padding: 0.125em 0.5em;
 
+    vertical-align: 0.33em;
 
 }
 
-
 
-
 
-
 
 /*main {
 
     display: block;
 
     counter-reset: fig;

+ 1 - 1
docs/js/dom-scripts.js
View File 

@@ -82,7 +82,7 @@
 
 
 /* Enable scrolling by keyboard of code samples */
 
 (function () {
 
-  var codeBlocks = document.querySelectorAll('pre');
 
+  var codeBlocks = document.querySelectorAll('pre, .html-annotated');
 
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
     if (block.querySelector('code')) {

+ 61 - 8
docs/patterns/coding/code-blocks/index.html
View File 

@@ -425,21 +425,74 @@
 
 </aside>
 
 
 
-<h2 id="annotated">Annotated</h2>
 
+<h2 id="annotated-html">Annotated HTML</h2>
 
 
+<p>Since the structure of HTML is critical to interoperable web interfaces, <strong>Infusion</strong> offers the ability to highlight and annotate specific HTML elements and attributes using the <code>html</code> shortcode.</p>
 
 
+<p>Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:</p>
 
 
 
-<div class="html-annotated"><code>
 
-&lt;ul&gt;
 
-  &lt;li&gt;Here&#39;s a thing&lt;/li&gt;
 
-  &lt;li <span class='highlight'>role=&#34;separator&#34;</span>&gt;Here&#39;s a thing&lt;/li&gt;
 
-  &lt;li&gt;Here&#39;s a <span class='highlight'>thing</span>&lt;/li&gt;
 
-  &lt;li&gt;Here&#39;s a thing &lt;span <span class='highlight'>aria-hidden=&#34;true&#34;</span>&gt;&lt;/span&gt;&lt;/li&gt;
 
-&lt;/ul&gt;
 
+
 
+
 
+
 
+<div class="html-annotated "><code>
 
+&lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
+  &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
+  &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
+  &lt;p&gt;Press &lt;strong&gt;Okay&lt;/strong&gt; to confirm or &lt;strong&gt;Cancel&lt;/strong&gt;&lt;/p&gt;
 
+  &lt;button&gt;Okay&lt;/button&gt;
 
+  &lt;button&gt;Cancel&lt;/button&gt;
 
+&lt;/div&gt;
 
 </code></div>
 
 
 
+<p>You mark out the highlighted areas with double parentheses like so:</p>
 
+
 
+<pre class=""><code  data-codeblock-shortcode>
 
+&#x7b;{&lt;html>}}
 
+&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  &lt;button ((aria-label="close"))>x&lt;/button>
 
+  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+  &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
+  &lt;button>Okay&lt;/button>
 
+  &lt;button>Cancel&lt;/button>
 
+&lt;/div>
 
+&#x7b;{&lt;/html>}}
 
+</code></pre>
 
+
 
+
 
+<p>Better still, if you include <code>numbered=&quot;true&quot;</code>, each highlight is enumberated so you can reference it directly in the ensuing text.</p>
 
+
 
+
 
+
 
+
 
+
 
+<div class="html-annotated numbered"><code>
 
+&lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
+  &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
+  &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
+  &lt;p&gt;Press &lt;strong&gt;Okay&lt;/strong&gt; to confirm or &lt;strong&gt;Cancel&lt;/strong&gt;&lt;/p&gt;
 
+  &lt;button&gt;Okay&lt;/button&gt;
 
+  &lt;button&gt;Cancel&lt;/button&gt;
 
+&lt;/div&gt;
 
+</code></div>
 
+
 
+
 
+<p>You just include <code>numbered=&quot;true&quot;</code> on the opening shortcode tag:</p>
 
+
 
+<pre class=""><code  data-codeblock-shortcode>
 
+&#x7b;{&lt;html numbered="true">}}
 
+&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  &lt;button ((aria-label="close"))>x&lt;/button>
 
+  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+  &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
+  &lt;button>Okay&lt;/button>
 
+  &lt;button>Cancel&lt;/button>
 
+&lt;/div>
 
+&#x7b;{&lt;/html>}}
 
+</code></pre>
 
+
 
+
 
   </main>
 
 
           <footer role="contentinfo">

+ 61 - 8
docs/print-version/index.html
View File 

@@ -1709,21 +1709,74 @@ toc = false
 
 </aside>
 
 
 
-<h2 id="annotated">Annotated</h2>
 
+<h2 id="annotated-html">Annotated HTML</h2>
 
 
+<p>Since the structure of HTML is critical to interoperable web interfaces, <strong>Infusion</strong> offers the ability to highlight and annotate specific HTML elements and attributes using the <code>html</code> shortcode.</p>
 
 
+<p>Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:</p>
 
 
 
-<div class="html-annotated"><code>
 
-&lt;ul&gt;
 
-  &lt;li&gt;Here&#39;s a thing&lt;/li&gt;
 
-  &lt;li <span class='highlight'>role=&#34;separator&#34;</span>&gt;Here&#39;s a thing&lt;/li&gt;
 
-  &lt;li&gt;Here&#39;s a <span class='highlight'>thing</span>&lt;/li&gt;
 
-  &lt;li&gt;Here&#39;s a thing &lt;span <span class='highlight'>aria-hidden=&#34;true&#34;</span>&gt;&lt;/span&gt;&lt;/li&gt;
 
-&lt;/ul&gt;
 
+
 
+
 
+
 
+<div class="html-annotated "><code>
 
+&lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
+  &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
+  &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
+  &lt;p&gt;Press &lt;strong&gt;Okay&lt;/strong&gt; to confirm or &lt;strong&gt;Cancel&lt;/strong&gt;&lt;/p&gt;
 
+  &lt;button&gt;Okay&lt;/button&gt;
 
+  &lt;button&gt;Cancel&lt;/button&gt;
 
+&lt;/div&gt;
 
 </code></div>
 
 
 
+<p>You mark out the highlighted areas with double parentheses like so:</p>
 
+
 
+<pre class=""><code  data-codeblock-shortcode>
 
+&#x7b;{&lt;html>}}
 
+&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  &lt;button ((aria-label="close"))>x&lt;/button>
 
+  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+  &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
+  &lt;button>Okay&lt;/button>
 
+  &lt;button>Cancel&lt;/button>
 
+&lt;/div>
 
+&#x7b;{&lt;/html>}}
 
+</code></pre>
 
+
 
+
 
+<p>Better still, if you include <code>numbered=&quot;true&quot;</code>, each highlight is enumberated so you can reference it directly in the ensuing text.</p>
 
+
 
+
 
+
 
+
 
+
 
+<div class="html-annotated numbered"><code>
 
+&lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
+  &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
+  &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
+  &lt;p&gt;Press &lt;strong&gt;Okay&lt;/strong&gt; to confirm or &lt;strong&gt;Cancel&lt;/strong&gt;&lt;/p&gt;
 
+  &lt;button&gt;Okay&lt;/button&gt;
 
+  &lt;button&gt;Cancel&lt;/button&gt;
 
+&lt;/div&gt;
 
+</code></div>
 
+
 
+
 
+<p>You just include <code>numbered=&quot;true&quot;</code> on the opening shortcode tag:</p>
 
+
 
+<pre class=""><code  data-codeblock-shortcode>
 
+&#x7b;{&lt;html numbered="true">}}
 
+&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  &lt;button ((aria-label="close"))>x&lt;/button>
 
+  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+  &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
+  &lt;button>Okay&lt;/button>
 
+  &lt;button>Cancel&lt;/button>
 
+&lt;/div>
 
+&#x7b;{&lt;/html>}}
 
+</code></pre>
 
+
 
+
 
           </div>
 
         
           <div class="pattern-section">

File diff suppressed because it is too large
+ 0 - 0
docs/service-worker.js


+ 2 - 1
themes/infusion/layouts/shortcodes/html.html
View File 

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

+ 25 - 30
themes/infusion/static/css/styles.css
View File 

@@ -65,8 +65,10 @@ figure p img {
 
 [data-expands]:focus svg,
 
 .patterns a:focus .text,
 
 [for="themer"] :focus + [aria-hidden] {
 
-    outline: 3px solid #888;
 
-    outline-offset: 2px;
 
+    outline: 4px solid #999;
 
+}
 
+a {
 
+  outline-offset: 2px;
 
 }
 
 /* fix for IE :( */
 
 
@@ -382,7 +384,7 @@ caption {
 
 }
 
 #menu-button:focus {
 
     outline: none;
 
-    box-shadow: inset 0 0 0 0.25rem #888;
 
+    box-shadow: inset 0 0 0 0.25rem #999;
 
 }
 
 /* Tables of contents */
 
 
@@ -522,37 +524,30 @@ pre[class*=language-] code * {
 
     margin-top: -1rem;
 
 }
 
 .html-annotated {
 
-  overflow-y: hidden;
 
-  overflow-x: auto;
 
-  padding: 1.5rem;
 
-  border: 1px solid;
 
-  white-space: pre;
 
-  counter-reset: annotation;
 
+    overflow-y: hidden;
 
+    overflow-x: auto;
 
+    padding: 1.5rem;
 
+    border: 1px solid;
 
+    white-space: pre;
 
+    counter-reset: annotation;
 
 }
 
 .highlight {
 
-  background: #ddd;
 
-  padding: 0.25rem 0.5rem;
 
-  border-radius: 0.5rem;
 
+    background: #ddd;
 
+    padding: 0.0625rem 0.33rem;
 
+    border-radius: 0.5rem;
 
 }
 
-.highlight::after {
 
-  counter-increment: annotation;
 
-  content: counter(annotation);
 
-  font-weight: bold;
 
-  font-size: 0.5rem;
 
-  background: #111;
 
-  color: #fefefe;
 
-  display: inline-block;
 
-  width: 0.75rem;
 
-  height: 0.75rem;
 
-  line-height: 0.75rem;
 
-  text-align: center;
 
-  border-radius: 1rem;
 
-  vertical-align: middle;
 
-  margin-left: 0.25rem;
 
+.numbered .highlight::after {
 
+    counter-increment: annotation;
 
+    content: counter(annotation);
 
+    font-weight: bold;
 
+    font-size: 0.5rem;
 
+    background: #111;
 
+    color: #fefefe;
 
+    border-radius: 1rem;
 
+    margin-left: 0.25rem;
 
+    padding: 0.125em 0.5em;
 
+    vertical-align: 0.33em;
 
 }
 
-
 
-
 
-
 
 /*main {
 
     display: block;
 
     counter-reset: fig;

+ 1 - 1
themes/infusion/static/js/dom-scripts.js
View File 

@@ -82,7 +82,7 @@
 
 
 /* Enable scrolling by keyboard of code samples */
 
 (function () {
 
-  var codeBlocks = document.querySelectorAll('pre');
 
+  var codeBlocks = document.querySelectorAll('pre, .html-annotated');
 
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
     if (block.querySelector('code')) {

Some files were not shown because too many files changed in this diff