hugopoi/cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shortcodes and dummy structure

Browse Source
This commit is contained in:
Heydon Pickering 2017-06-09 21:27:09 +08:00
parent 3bc2e8a103
commit 51d3475b11
22 changed files with 383 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
content/index.md Normal file
View File

@ -0,0 +1,5 @@
+++
title = "The Inclusive Pattern Library Builder"
+++
Some introductory text.

8
content/patterns/example1.md Normal file
View File

@ -0,0 +1,8 @@
+++
title = "Example Pattern 1"
wcag = ["1-1-1"]
+++
<p>Nulla auctor eleifend turpis consequat pharetra: Cras molestie risus a enim convallis vitae luctus libero lacinia. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Nulla auctor eleifend turpis consequat pharetra. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id <kbd>CTRL</kbd> + <kbd>V</kbd> massa. Fusce ac sodales magna. </p>
<p>Nulla auctor eleifend turpis consequat pharetra: Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris). Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Vestibulum <code>text-align : justify</code> lacus. Donec et nisi dictum felis sollicitudin congue. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. </p>

8
content/patterns/example2.md Normal file
View File

@ -0,0 +1,8 @@
+++
title = "Example Pattern 2"
wcag = ["1-1-1"]
+++
<p>Vestibulum sit amet ipsum lacus&hellip; Nulla lobortis tempus commodo. Maecenas sit <q cite='http://www.heydonworks.com'>amet tellus nec mi gravida posuere</q> non pretium magna. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, <a href='#'>iaculis pretium</a> sem orci aliquet mauris. </p>
<p>Sed mauris arcu, aliquet ultrices malesuada sed, pretium id <kbd>CTRL</kbd> + <kbd>V</kbd> massa. Nulla lobortis tempus commodo. Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Lorem ipsum dolor sit amet, &mdash; consectetur adipiscing &mdash; elit. Nulla lobortis tempus <strong>commodo</strong>. </p>

8
content/patterns/landmarks/example1.md Normal file
View File

@ -0,0 +1,8 @@
+++
title = "Landmark Example 1"
wcag = ["1-1-1"]
+++
<p>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. <strong>Donec a congue leo. </strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>

8
content/patterns/landmarks/example2.md Normal file
View File

@ -0,0 +1,8 @@
+++
title = "Landmark Example 1"
wcag = ["1-1-1"]
+++
<p>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. <strong>Donec a congue leo. </strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>

10
content/patterns/widgets/example1.md Normal file
View File

@ -0,0 +1,10 @@
+++
title = "Widget 1"
wcag = ["1-1-1"]
+++
<p>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Maecenas sit amet tellus &ndash; nec mi gravida posuere non pretium magna. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim&hellip; tristique tempus placerat at, posuere in lectus. Nulla lobortis tempus commodo. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. </p>
<p>Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Donec et nisi dictum felis sollicitudin congue. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Aliquam tincidunt velit sit amet ante hendrerit tempus. </p>
<p>Aliquam tincidunt velit sit (amet ante hendrerit tempus). Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Aliquam tincidunt velit sit amet ante hendrerit tempus. Curabitur consectetur faucibus nisl ac varius. Donec et nisi dictum felis, sollicitudin, congue Heydon&#8482;. Nulla auctor eleifend turpis consequat pharetra. Donec et nisi dictum <a href='#'>felis sollicitudin</a> congue. </p>

8
content/patterns/widgets/example2.md Normal file
View File

@ -0,0 +1,8 @@
+++
title = "Widget 2"
wcag = ["1-1-1"]
+++
<p>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. Nulla auctor eleifend turpis consequat pharetra. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales <code>.generate()</code> magna. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Donec et nisi dictum felis sollicitudin congue. Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Nulla lobortis tempus commodo. </p>
<p>Donec et nisi dictum felis sollicitudin congue. Potenti et eros sed justo commodo bibendum non at nunc. Nulla lobortis tempus commodo. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac! Fusce ac sodales magna &hellip; </p>

34
content/test.md
View File

@ -1,12 +1,14 @@
+++
title = "Test content node"
wcag = ["1-1-1", "1-3-1"]
wcag = ["1-1-1"]
+++
Here is the content of "test content node". Below is the use of a special shortcode for providing a note:
Here is the content of "test content node", including a `code` example and a <kbd>Space</kbd> key mention. Below is the use of a special shortcode for providing a note:
{{% note %}}
I just wanted to say&hellip; yeah, **why not**!
Here is the content of "test content node", including a `code` example and a <kbd>Space</kbd> key mention. Below is the use of a special shortcode for providing a note:
{{% /note %}}
The following is similar, but a warning:
@ -14,3 +16,31 @@ The following is similar, but a warning:
{{% warning %}}
I just wanted to say&hellip; **NO NO NO**!
{{% /warning %}}
## Code block
### Markdown version
```js
var button = document.getElementById('button')
button.addEventListener('click', function() {
alert('well hey')
})
```
### Shortcode version
{{<codeblock lang="js" numbered="true">}}
var button = document.getElementById('button')
button.addEventListener('click', function() {
alert('well hey')
})
{{</codeblock>}}
## Expandable sections
{{% expandable level="2" open="true" %}}
Here it is then!
{{% /expandable %}}

13
themes/inclusive-docs/layouts/_default/single.html
View File

@ -1,14 +1,15 @@
{{ partial "header.html" . }}
<main id="main">
<h1>{{ .Title }}</h1>
{{ .Content }}
{{if .Params.wcag}}
{{ if .Params.wcag }}
<h2>Relevant WCAG References</h2>
<ul class="wcag">
{{range .Params.wcag}}
<li>{{partial (printf "wcag/%s.html" .)}}</li>
{{end}}
{{ range .Params.wcag }}
<li>{{ partial (printf "wcag/%s.html" .) }}</li>
{{ end }}
</ul>
{{end}}
{{ end }}
</main>
{{ partial "footer.html" . }}

1
themes/inclusive-docs/layouts/partials/footer.html
View File

@ -1,3 +1,4 @@
<script src="/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script>
</body>
</html>

3
themes/inclusive-docs/layouts/partials/header.html
View File

@ -8,9 +8,10 @@
{{ if .RSSLink }}
<link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Title }}" />
{{ end }}
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<title>{{ .Title }}</title>
<title>{{ .Title }} | {{ .Site.Title }}</title>
</head>
<body>

1
themes/inclusive-docs/layouts/shortcodes/codeblock.html Normal file
View File

@ -0,0 +1 @@
<pre class="{{ with .Get "lang" }}language-{{ . }}{{ end }} {{ with .Get "numbered" }}line-numbers{{ end }}"><code {{ with .Get "lang" }}class="language-{{ . }}"{{ end }} data-codeblock-shortcode>{{ .Inner }}</code></pre>

18
themes/inclusive-docs/layouts/shortcodes/expandable.html Normal file
View File

@ -0,0 +1,18 @@
{{ if .Get "level" }}
<h{{ .Get "level" }}>
{{ end }}
<button aria-expanded="{{ with .Get "open" }}true{{ else }}false{{ end }}" data-expands="expandable-{{ .Inner | base64Encode | truncate 10 "" }}">
<svg aria-hidden="true" focusable="false" height="20mm" width="20mm" 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>
{{ .Get "label" | default "More info" }}
</button>
{{ if .Get "level" }}
</h{{ .Get "level"}}>
{{ end }}
<div id="expandable-{{ .Inner | base64Encode | truncate 10 "" }}" {{ with .Get "open" | not }}hidden{{ end }}>
{{ .Inner }}
</div>

7
themes/inclusive-docs/layouts/shortcodes/note.html
View File

@ -1,3 +1,6 @@
<figure role="group" aria-label="note" class="note">
<aside aria-label="note" class="note">
<div>
<img src="{{ "images/icon-info.svg" | relURL }}" alt="">
{{ .Inner }}
</figure>
</div>
</aside>

7
themes/inclusive-docs/layouts/shortcodes/warning.html
View File

@ -1,3 +1,6 @@
<figure role="group" aria-label="warning" class="note warning">
<aside aria-label="warning" class="note warning">
<div>
<img src="{{ "images/icon-warning.svg" | relURL }}" alt="">
{{ .Inner }}
</figure>
</div>
</aside>

48
themes/inclusive-docs/static/css/prism.css
View File

@ -1,3 +1,10 @@
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript&plugins=line-numbers */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
@ -129,3 +136,44 @@ pre[class*="language-"] {
.token.entity {
cursor: help;
}
pre.line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
pre.line-numbers > code {
position: relative;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em; /* works for line-numbers below 1000 lines */
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}

175
themes/inclusive-docs/static/css/styles.css
View File

@ -1,9 +1,14 @@
/****************
Notes:
Brand color = #58068C
/*
*****************/
Colors:
Blue color = #38608F
Dark blue color = #153B62
Gold color = #FCB316
Grey color = #707174
Red color = #C83737
*/
*, *::before, *::after {
font-family: inherit;
@ -14,13 +19,19 @@ Brand color = #58068C
}
html {
font-size: 100%;
font-size: calc(1em + 0.33vw);
font-family: PT Sans, sans-serif;
line-height: 1.5;
color: #111;
}
body {
max-width: 30rem;
margin: 0 auto;
}
* + * {
margin-top: 1.5rem;
margin-top: 2.25rem;
}
br,
@ -57,39 +68,50 @@ div:not([tabindex]):focus {
}
h1, h2, h3, h4 {
font-family: Miriam Libre, serif;
line-height: 1.125;
}
h1 {
font-size: 2.5rem;
font-size: 2.25rem;
}
h2 {
font-size: 1.75rem;
font-size: 1.66rem;
}
h3 {
font-size: 1.33rem;
font-size: 1.25rem;
}
h4 {
font-size: 1rem;
font-family: PT Sans, sans-serif;
}
kbd {
line-height: 1;
font-size: 0.8rem;
padding: 0.25rem 0.33rem;
font-size: 0.66rem;
padding: 0.1rem 0.25rem;
border-radius: 0.25rem;
background: #ddd;
box-shadow: 0.125rem 0.125rem 0 #bbb;
border: 2px solid;
box-shadow: 0.125rem 0.125rem 0 #111;
}
code {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
p code {
font-size: 0.85rem;
}
/* tables */
/* Buttons */
button {
font-size: inherit;
font-family: inherit;
font-weight: inherit;
}
/* Tables */
table {
text-align: left;
@ -114,3 +136,122 @@ caption {
th:empty {
border: 0;
}
/* Notes and warnings */
.note {
border-left: 0.5rem solid #FCB316;
font-size: 0.85rem;
}
.note > div {
margin-left: 0.75rem;
}
.note > div > img:first-child {
height: 1.5rem;
}
.note.warning {
border-color: #C83737;
}
.note > div > :first-child + * {
margin-top: 0;
}
/* Code blocks */
pre[class*=language-] {
padding: 1rem;
background: none;
border: 0.125rem solid #eee;
margin-top: 2.25rem;
}
pre[class*=language-][data-line] {
padding: 1em 0 1em 2.25rem;
}
pre[class*=language-] code * {
margin-top: 0 !important;
}
[data-codeblock-shortcode] {
display: block;
margin-top: -1rem;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #38608F;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #EBA205;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #a67f59;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function {
color: #375D84;
}
.line-numbers code {
padding-left: 2.25rem;
margin-top: -1rem;
}
.line-numbers {
padding-bottom: 2.25rem !important;
}
.line-numbers .line-numbers-rows {
margin-left: 2.25rem;
top: 1.25rem;
}
/* Expandable sections */
[data-expands] {
text-align: left;
border: 0;
background: none;
display: block;
width: 100%;
padding: 0;
margin: 0;
}
[data-expands] svg {
width: 1em;
height: 1em;
vertical-align: middle;
}
[data-expands][aria-expanded="true"] svg .up-strut {
display: none;
}

9
themes/inclusive-docs/static/images/icon-info.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="41.667" width="41.667" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 41.667306 41.66729">
<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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1002 B

7
themes/inclusive-docs/static/images/icon-warning.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="41.646" width="48.43" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" 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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 790 B

22
themes/inclusive-docs/static/js/dom-scripts.js Normal file
View File

@ -0,0 +1,22 @@
/* expandable sections */
(function () {
'use strict'
function toggle (button, target) {
var expanded = button.getAttribute('aria-expanded') === 'true' || false
button.setAttribute('aria-expanded', !expanded)
target.hidden = !target.hidden
}
var expanders = document.querySelectorAll('[data-expands]')
Array.prototype.forEach.call(expanders, function (expander) {
console.log(expander)
var target = document.getElementById(expander.getAttribute('data-expands'))
expander.addEventListener('click', function () {
toggle(expander, target)
})
})
}())

13
themes/inclusive-docs/static/js/prism.js
View File

File diff suppressed because one or more lines are too long

7
themes/inclusive-docs/theme.toml
View File

@ -7,9 +7,10 @@ homepage = "https://www.paciellogroup.com/"
tags = ["inclusive design", "accessibility"]
min_version = 0.1
[taxonomies]
wcag = "wcag"
[author]
name = "Heydon Pickering"
homepage = "https://inclusive-components.design"
[taxonomies]
wcag = "wcag"
principle = "principles"