Skip to content

Commit e085518

Browse files
ericwbaileyericwbailey
authored
Merge pull request #2 from ericwbailey/handlebars
Handlebars
2 parents 6b865e8 + d846eea commit e085518

14 files changed

+1552
-2
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
## Project-specific files and folders #########################################
22

3+
node_modules/
34

45

56

‎Makefile

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
BIN=node_modules/.bin
2+
3+
build:
4+
$(BIN)/handlebars partials/ -f docs/partials.js -e hbs -p -c handlebars
5+
$(BIN)/handlebars views/ -f docs/views.js -e hbs -c handlebars
6+
bin/handlebars-build > docs/index.html
7+
@make clean
8+
9+
watch:
10+
onchange 'partials/**/*.hbs' -- make build
11+
12+
clean:
13+
rm docs/*.js || exit 0;

‎bin/handlebars-build

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#!/usr/bin/env node
2+
3+
const Handlebars = require('handlebars');
4+
5+
require('../docs/views');
6+
require('../docs/partials');
7+
8+
process.stdout.write(Handlebars.templates.index());

‎package.json

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
"name": "accessible-html-content-patterns",
33
"description": "A collection of the full HTML5 Doctor Element Index as well as common markup patterns for quick reference.",
44
"homepage": "https://github.com/ericwbailey/accessible-html-content-patterns",
5-
"version": "0.1.1",
5+
"version": "0.2.0",
66
"license": "MIT",
77
"author": "Eric Bailey <[email protected]> (http://ericwbailey.com/)",
8+
"contributors": "Scott Doxey <[email protected]> (https://www.scottdoxey.com/)",
89
"main": "docs/index.html",
910
"repository": {
1011
"type": "git",
@@ -20,5 +21,9 @@
2021
"content",
2122
"semantics",
2223
"aria"
23-
]
24+
],
25+
"devDependencies": {
26+
"handlebars": "^4.0.5",
27+
"onchange": "^3.0.2"
28+
}
2429
}

‎partials/section.about.hbs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<aside id="section__about" role="complementary" aria-labelledby="title__about"><!-- Start of #section__about -->
2+
<h2 id="title__about">About</h2>
3+
4+
<p>
5+
Accessible, semantic markup patterns for HTML content. Uses the full <a rel="external noopener" href="http://html5doctor.com/element-index/"><cite>HTML5 Doctor Element Index</cite></a>, minus the <code>&lt;details&gt;</code>, <code>&lt;summary&gt;</code>, <code>&lt;command&gt;</code>, and <code>&lt;menu&gt;</code> tags.
6+
</p>
7+
<p>
8+
Reference <a rel="external noopener" href="http://alistairduggin.co.uk/">Alistair Duggin</a>'s <a rel="external noopener" href="http://aduggin.github.io/accessibility-fails/"><cite>Accessibility Fails</cite></a> for common markup pattern accessibility mistakes, and <a rel="external noopener" href="http://pauljadam.com/">Paul J. Adam</a>'s <a rel="external noopener" href="http://pauljadam.com/demos/landmarks.html"><cite>WAI-ARIA Landmarks Site Navigation Structure Demo</cite></a> for semantic, accessible page landmarks.
9+
</p>
10+
</aside><!-- End of #section__about -->

‎partials/section.embedded.hbs

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<section id="section__embedded" role="region" aria-labelledby="title__embedded"><!-- Start of #section__embedded -->
2+
<h2 id="title__embedded">Embedded</h2>
3+
4+
<h2 id="subsection__image">Image</h2><!-- Start of #subsection__image -->
5+
<img
6+
src="http://placehold.it/600x400?text=Image+Example"
7+
alt="Image Exmaple" /><!-- End of #subsection__image -->
8+
9+
<h2 id="subsection__broken-image">Broken Image</h2><!-- Start of #subsection__broken-image -->
10+
<img
11+
src="nope"
12+
alt="Broken Image" /><!-- End of #subsection__broken-image -->
13+
14+
<h2 id="subsection__figure-with-caption">Figure with Caption</h2><!-- Start of #subsection__figure-with-caption -->
15+
<figure>
16+
<img
17+
src="http://placehold.it/400x250?text=Figure+Example"
18+
alt="Figure Example" />
19+
<figcaption>
20+
An example figure caption.
21+
</figcaption>
22+
</figure><!-- End of #subsection__figure-with-caption -->
23+
24+
<h2 id="subsection__picture">Picture</h2><!-- Start of #subsection__picture -->
25+
<picture>
26+
<source
27+
media="(min-width: 40em)"
28+
srcset="http://placehold.it/800x450/7ED321/ffffff/?text=1x+Source+w/Breakpoint+Example 1x,
29+
http://placehold.it/800x600/7ED321/ffffff/?text=2x+Source+w/Breakpoint+Example 2x" />
30+
<source
31+
srcset="http://placehold.it/500x250/F5A623/ffffff/?text=1x+Source+Example 1x,
32+
http://placehold.it/500x250/F5A623/ffffff/?text=2x+Source+Example 2x" />
33+
<img
34+
src="http://placehold.it/600x400?text=Img+Fallback"
35+
alt="Picture Element" />
36+
</picture><!-- End of #subsection__picture -->
37+
38+
<h2 id="subsection__image-with-srcset-and-sizes">Image with Srcset and Sizes</h2><!-- Start of #subsection__image-with-srcset-and-sizes -->
39+
<img
40+
srcset="http://placehold.it/1024x768/7ED321/ffffff/?text=Large 1024w,
41+
http://placehold.it/1024x768/F5A623/ffffff/?text=Medium 640w,
42+
http://placehold.it/320x240/50E3C2/ffffff/?text=Small 320w"
43+
sizes="(min-width: 36em) 50vw, 100vw"
44+
src="http://placehold.it/600x400?text=Img+Fallback"
45+
alt="Image with Srcset and Sizes Example" /><!-- End of #subsection__image-with-srcset-and-sizes -->
46+
47+
<h2 id="subsection__iframe">Iframe</h2><!-- Start of #subsection__iframe -->
48+
<iframe
49+
src="about:blank"
50+
title="about:blank"
51+
name="iframe"><!-- End of #subsection__iframe -->
52+
</iframe>
53+
54+
<h2 id="subsection__audio">Audio</h2><!-- Start of #subsection__audio -->
55+
<audio controls>
56+
<source
57+
src="http://www.noiseaddicts.com/samples_1w72b820/4353.mp3"
58+
type="audio/mp3" />
59+
<source
60+
src="http://www.noiseaddicts.com/samples_1w72b820/4353.ogg"
61+
type="audio/ogg" />
62+
<source
63+
src="http://www.noiseaddicts.com/samples_1w72b820/4353.wav"
64+
type="audio/wav" />
65+
<track
66+
src="http://www.noiseaddicts.com/samples_1w72b820/4353.wav/caption.en.vtt"
67+
label="English"
68+
srclang="en"
69+
kind="captions" />
70+
Your browser does not support the <code>&lt;audio&gt;</code> element.
71+
Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a download href="http://www.noiseaddicts.com/samples_1w72b820/4353.mp3">download a file</a> for offline listening.
72+
</audio><!-- End of #subsection__audio -->
73+
74+
<h2 id="subsection__video">Video</h2><!-- Start of #subsection__video -->
75+
<video
76+
controls
77+
poster="http://placehold.it/854x480?text=Video+Poster">
78+
<source
79+
src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"
80+
type="video/mp4" />
81+
<source
82+
src="http://clips.vorwaerts-gmbh.de/VfE.webm"
83+
type="video/webm" />
84+
<source
85+
src="http://clips.vorwaerts-gmbh.de/VfE.ogv"
86+
type="video/ogg" />
87+
<track
88+
src="https://archive.org/download/WebmVp8Vorbis/caption.en.vtt"
89+
label="English"
90+
srclang="en"
91+
kind="captions" />
92+
Your browser does not support the <code>&lt;video&gt;</code> element.
93+
Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a download href="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">download a file</a> for offline viewing.
94+
</video><!-- End of #subsection__video -->
95+
96+
<p>
97+
<small>Note: Accessibility errors concerning the video's missing audio description should go away once the <code>&lt;track&gt;</code>'s source is linked to a valid caption file.</small>
98+
</p>
99+
100+
<h2 id="subsection__object">Object</h2><!-- Start of #subsection__object -->
101+
<object>
102+
<param
103+
name="movie"
104+
value="http://www.youtube.com/v/pDHzK3Xe7Yw?fs=1&amp;hl=en_GB">
105+
</param>
106+
<param
107+
name="allowFullScreen"
108+
value="true">
109+
</param>
110+
<param
111+
name="allowscriptaccess"
112+
value="always">
113+
</param>
114+
<embed
115+
src="http://www.youtube.com/v/pDHzK3Xe7Yw?fs=1&amp;hl=en_GB"
116+
type="application/x-shockwave-flash"
117+
allowscriptaccess="always"
118+
allowfullscreen="true"
119+
width="640"
120+
height="390">
121+
</embed>
122+
Your browser does not support the <code>&lt;object&gt;</code> element.
123+
Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a rel="external noopener" href="https://www.youtube.com/watch?v=pDHzK3Xe7Yw">view the video on YouTube</a>.
124+
</object><!-- End of #subsection__object -->
125+
126+
<h2 id="subsection__canvas">Canvas</h2><!-- Start of #subsection__canvas -->
127+
<canvas
128+
id="myCanvas"
129+
width="400"
130+
height="400">
131+
Your browser does not support the <code>&lt;canvas&gt;</code> element.
132+
Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a>.
133+
</canvas><!-- End of #subsection__canvas -->
134+
</section><!-- End of #section__embedded -->

‎partials/section.footer.hbs

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<footer id="section__credit" role="contentinfo" aria-labelledby="title__credit"><!-- Start of #section__credit -->
2+
<h2 id="title__credit">Credit</h2>
3+
4+
<p>
5+
Inspired by <a rel="external noopener" href="http://mrmrs.cc/">Adam Morse</a>'s <a rel="external noopener" href="https://github.com/mrmrs/html"><cite>mrmrs/html</cite></a>.
6+
</p>
7+
</footer><!-- End of #section__credit -->

0 commit comments

Comments
 (0)