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

fixed nameless shortcode error

Browse Source
This commit is contained in:
Heydon Pickering 2017-06-28 16:49:42 +01:00
parent 393ffca558
commit d81b537c0d
16 changed files with 524 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
content/patterns/writing/expandable-sections.md
View File

@ -35,10 +35,4 @@ Mauris eget elit ut neque venenatis placerat id nec libero. Nunc accumsan cursus
Ut vulputate enim ut lorem iaculis, vel faucibus metus iaculis. Aliquam erat volutpat. Aliquam luctus orci vel consectetur dignissim. Nullam et efficitur lorem, et ornare est. Sed tristique porttitor justo, quis malesuada velit. Nullam et elit finibus, sollicitudin velit placerat, ultricies dui.
{{% /expandable %}}
Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the `{{% %}}` notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.
{{<codeBlock>}}
&#x7b;{&lt;expandable label="Another dummy section" level="2">}}
&lt;p>Here is a nested pattern reference shortcode: &#x7b;{% pattern "Writing inline demos" %}}.&lt;/p>
&#x7b;{&lt;/expandable>}}
{{</codeBlock>}}
Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the "`%`" notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.

32
public/css/styles.css
View File

@ -310,7 +310,7 @@ th:empty {
margin: 0;
}
.tag {
.tag-icon {
height: 1em;
width: auto;
vertical-align: middle;
@ -423,7 +423,6 @@ pre[class*=language-] code * {
}
*:not(pre) > code {
padding: 0.125rem 0.25rem;
white-space: nowrap;
}
@ -462,11 +461,11 @@ pre[class*=language-] code * {
}
.token.function {
color: #ccc;
color: #888;
}
.line-numbers code {
padding-left: 2.25rem;
padding-left: 3rem;
margin-top: -1rem;
overflow-x: auto;
overflow-y: hidden;
@ -478,8 +477,10 @@ pre[class*=language-] code * {
.line-numbers .line-numbers-rows {
margin-left: 2.25rem;
left: -3.5em;
top: 1.25rem;
color: #111;
border-color: #111;
}
.line-numbers-rows > span:before {
@ -614,7 +615,6 @@ a .balloon {
.intro-and-nav > div {
padding: 1.5rem;
padding-bottom: 0;
}
.logo img {
@ -626,29 +626,11 @@ a .balloon {
}
.patterns h3 {
margin-top: 0.75rem;
font-size: 1.125rem;
}
.patterns li {
margin: 0;
}
.patterns a {
padding: 0.75rem 0;
.pattern {
font-size: 1rem;
}
.patterns a[aria-current] {
background: #111;
color: #fff;
padding: 0.75rem;
}
.patterns a[aria-current] span {
text-decoration: none;
}
.patterns li + li {
border-top: 1px solid;
}
}

47
public/index.html
View File

@ -76,7 +76,7 @@
</li>
<li class="pattern">
<a href="/patterns/project-setup/" >
<a href="/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library setup</span>
</a>
@ -110,6 +110,13 @@
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/expandable-sections/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/including-images/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@ -134,6 +141,34 @@
</ul>
</li>
<li>
<h3>Exhibiting code</h3>
<ul>
<li class="pattern">
<a href="/patterns/code/code-blocks/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/codepen-embedding/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>CodePen embedding</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/writing-inline-demos/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Writing inline demos</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
@ -170,6 +205,16 @@
<a class="pattern-link" href="/patterns/installation/">

52
public/index.xml
View File

@ -31,6 +31,40 @@
If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
</item>
<item>
<title>Expandable sections</title>
<link>/patterns/writing/expandable-sections/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/writing/expandable-sections/</guid>
<description>In some cases, where there is a lot of content, it&amp;rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&amp;rsquo;s in the content and can choose where to focus in. Infusion provides a shortcode method for creating expandable sections which generates accessible markup using aria-expanded.
The expandable shortcode takes three parameters:
label — This is the label for the the section heading. level — This is the heading level (e.</description>
</item>
<item>
<title>Code blocks</title>
<link>/patterns/code/code-blocks/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/code/code-blocks/</guid>
<description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
So, this&amp;hellip;
```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ``` &amp;hellip; will result in this:
&amp;lt;button aria-pressed=&amp;quot;false&amp;quot;&amp;gt;toggle me&amp;lt;/button&amp;gt; Note that the syntax highlighting uses a greyscale theme. Infusion is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.</description>
</item>
<item>
<title>CodePen embedding</title>
<link>/patterns/code/codepen-embedding/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/code/codepen-embedding/</guid>
<description>Sometimes just pictures of the pattern you&amp;rsquo;re documenting aren&amp;rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
&amp;#x7b;{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
</item>
<item>
<title>Including images</title>
<link>/patterns/writing/including-images/</link>
@ -55,10 +89,10 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
<item>
<title>Library setup</title>
<link>/patterns/project-setup/</link>
<link>/patterns/library-setup/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/project-setup/</guid>
<guid>/patterns/library-setup/</guid>
<description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
&amp;ldquo;Cleaning&amp;rdquo; the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.</description>
</item>
@ -79,8 +113,8 @@ Notes You may wish to pick out some content in your pattern&amp;rsquo;s document
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/writing/references/</guid>
<description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by name, using the pattern shortcode. For example, I can reference the pattern here. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
I can reference the &amp;#x7b;{% pattern &#34;Notes and warnings&#34; %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
<description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
</item>
<item>
@ -94,5 +128,15 @@ npm run serve This will serve your working library on localhost:1313. Whenever y
Publishing on Github Pages The easiest way to host your pattern library so you have a link to share is to run the host command.</description>
</item>
<item>
<title>Writing inline demos</title>
<link>/patterns/code/writing-inline-demos/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/code/writing-inline-demos/</guid>
<description>There are some issues with CodePen embedding , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
</item>
</channel>
</rss>

39
public/patterns/index.html
View File

@ -75,7 +75,7 @@
</li>
<li class="pattern">
<a href="/patterns/project-setup/" >
<a href="/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library setup</span>
</a>
@ -109,6 +109,13 @@
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/expandable-sections/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/including-images/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@ -133,6 +140,34 @@
</ul>
</li>
<li>
<h3>Exhibiting code</h3>
<ul>
<li class="pattern">
<a href="/patterns/code/code-blocks/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/codepen-embedding/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>CodePen embedding</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/writing-inline-demos/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Writing inline demos</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
@ -161,7 +196,7 @@
<li>
<h2>
<a href="/patterns/project-setup/">
<a href="/patterns/library-setup/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
Library setup
</a>

4
public/patterns/index.xml
View File

@ -24,10 +24,10 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
<item>
<title>Library setup</title>
<link>/patterns/project-setup/</link>
<link>/patterns/library-setup/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/project-setup/</guid>
<guid>/patterns/library-setup/</guid>
<description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
&amp;ldquo;Cleaning&amp;rdquo; the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.</description>
</item>

49
public/patterns/installation/index.html
View File

@ -75,7 +75,7 @@
</li>
<li class="pattern">
<a href="/patterns/project-setup/" >
<a href="/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library setup</span>
</a>
@ -109,6 +109,13 @@
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/expandable-sections/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/including-images/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@ -133,6 +140,34 @@
</ul>
</li>
<li>
<h3>Exhibiting code</h3>
<ul>
<li class="pattern">
<a href="/patterns/code/code-blocks/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/codepen-embedding/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>CodePen embedding</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/writing-inline-demos/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Writing inline demos</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
@ -220,7 +255,17 @@
<a class="pattern-link" href="/patterns/project-setup/">
<a class="pattern-link" href="/patterns/library-setup/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>

37
public/patterns/serving/index.html
View File

@ -75,7 +75,7 @@
</li>
<li class="pattern">
<a href="/patterns/project-setup/" >
<a href="/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library setup</span>
</a>
@ -109,6 +109,13 @@
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/expandable-sections/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/including-images/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@ -133,6 +140,34 @@
</ul>
</li>
<li>
<h3>Exhibiting code</h3>
<ul>
<li class="pattern">
<a href="/patterns/code/code-blocks/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/codepen-embedding/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>CodePen embedding</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/writing-inline-demos/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Writing inline demos</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>

37
public/patterns/writing/including-images/index.html
View File

@ -75,7 +75,7 @@
</li>
<li class="pattern">
<a href="/patterns/project-setup/" >
<a href="/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library setup</span>
</a>
@ -109,6 +109,13 @@
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/expandable-sections/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/including-images/" aria-current="page">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@ -133,6 +140,34 @@
</ul>
</li>
<li>
<h3>Exhibiting code</h3>
<ul>
<li class="pattern">
<a href="/patterns/code/code-blocks/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/codepen-embedding/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>CodePen embedding</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/writing-inline-demos/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Writing inline demos</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>

47
public/patterns/writing/index.html
View File

@ -75,7 +75,7 @@
</li>
<li class="pattern">
<a href="/patterns/project-setup/" >
<a href="/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library setup</span>
</a>
@ -109,6 +109,13 @@
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/expandable-sections/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/including-images/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@ -133,6 +140,34 @@
</ul>
</li>
<li>
<h3>Exhibiting code</h3>
<ul>
<li class="pattern">
<a href="/patterns/code/code-blocks/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/codepen-embedding/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>CodePen embedding</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/writing-inline-demos/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Writing inline demos</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
@ -169,6 +204,16 @@
</li>
<li>
<h2>
<a href="/patterns/writing/expandable-sections/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
Expandable sections
</a>
</h2>
</li>
<li>
<h2>
<a href="/patterns/writing/including-images/">

15
public/patterns/writing/index.xml
View File

@ -30,6 +30,17 @@
If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
</item>
<item>
<title>Expandable sections</title>
<link>/patterns/writing/expandable-sections/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/writing/expandable-sections/</guid>
<description>In some cases, where there is a lot of content, it&amp;rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&amp;rsquo;s in the content and can choose where to focus in. Infusion provides a shortcode method for creating expandable sections which generates accessible markup using aria-expanded.
The expandable shortcode takes three parameters:
label — This is the label for the the section heading. level — This is the heading level (e.</description>
</item>
<item>
<title>Including images</title>
<link>/patterns/writing/including-images/</link>
@ -56,8 +67,8 @@ Notes You may wish to pick out some content in your pattern&amp;rsquo;s document
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>/patterns/writing/references/</guid>
<description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by name, using the pattern shortcode. For example, I can reference the pattern here. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
I can reference the &amp;#x7b;{% pattern &#34;Notes and warnings&#34; %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
<description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
</item>
</channel>

47
public/patterns/writing/library-structure/index.html
View File

@ -75,7 +75,7 @@
</li>
<li class="pattern">
<a href="/patterns/project-setup/" >
<a href="/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library setup</span>
</a>
@ -109,6 +109,13 @@
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/expandable-sections/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/including-images/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@ -133,6 +140,34 @@
</ul>
</li>
<li>
<h3>Exhibiting code</h3>
<ul>
<li class="pattern">
<a href="/patterns/code/code-blocks/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/codepen-embedding/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>CodePen embedding</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/writing-inline-demos/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Writing inline demos</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
@ -199,6 +234,8 @@ title = &quot;Popups&quot;
<a class="pattern-link" href="/patterns/writing/markdown-and-metadata/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
@ -220,6 +257,14 @@ title = &quot;Popups&quot;

37
public/patterns/writing/markdown-and-metadata/index.html
View File

@ -75,7 +75,7 @@
</li>
<li class="pattern">
<a href="/patterns/project-setup/" >
<a href="/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library setup</span>
</a>
@ -109,6 +109,13 @@
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/expandable-sections/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/including-images/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@ -133,6 +140,34 @@
</ul>
</li>
<li>
<h3>Exhibiting code</h3>
<ul>
<li class="pattern">
<a href="/patterns/code/code-blocks/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/codepen-embedding/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>CodePen embedding</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/writing-inline-demos/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Writing inline demos</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>

37
public/patterns/writing/notes-and-warnings/index.html
View File

@ -75,7 +75,7 @@
</li>
<li class="pattern">
<a href="/patterns/project-setup/" >
<a href="/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library setup</span>
</a>
@ -109,6 +109,13 @@
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/expandable-sections/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/including-images/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@ -133,6 +140,34 @@
</ul>
</li>
<li>
<h3>Exhibiting code</h3>
<ul>
<li class="pattern">
<a href="/patterns/code/code-blocks/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/codepen-embedding/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>CodePen embedding</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/writing-inline-demos/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Writing inline demos</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>

69
public/patterns/writing/references/index.html
View File

@ -75,7 +75,7 @@
</li>
<li class="pattern">
<a href="/patterns/project-setup/" >
<a href="/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library setup</span>
</a>
@ -109,6 +109,13 @@
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/expandable-sections/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/writing/including-images/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@ -133,6 +140,34 @@
</ul>
</li>
<li>
<h3>Exhibiting code</h3>
<ul>
<li class="pattern">
<a href="/patterns/code/code-blocks/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/codepen-embedding/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>CodePen embedding</span>
</a>
</li>
<li class="pattern">
<a href="/patterns/code/writing-inline-demos/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Writing inline demos</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
@ -148,7 +183,7 @@
<h2 id="cross-references">Cross-references</h2>
<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by name, using the <code>pattern</code> shortcode. For example, I can reference the
<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the
@ -175,16 +210,42 @@
<a class="pattern-link" href="/patterns/writing/notes-and-warnings/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
Notes &amp; warnings
</a>
pattern here. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
<pre class=" "><code data-codeblock-shortcode>
I can reference the &#x7b;{% pattern "Notes and warnings" %}} pattern here.
I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
</code></pre>
<p>This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</p>
<aside aria-label="note" class="note">
<div>
<img src="/images/icon-info.svg" alt="">
<p>The title argument you supply to the shortcode must be exactly the same as the referenced pattern&rsquo;s <code>title</code> metadata value and is case sensitive.</p>
</div>
</aside>
<h2 id="wcag-references">WCAG References</h2>
<p><a href="https://www.w3.org/TR/WCAG/">WCAG 2.0</a> is the <em>de facto</em> standard for accessible interfaces. When writing about inclusive design patterns, sometimes you&rsquo;ll want to refer to WCAG to highlight which success criteria the pattern meets.</p>

24
public/sitemap.xml
View File

@ -6,10 +6,18 @@
<loc>/patterns/writing/library-structure/</loc>
</url>
<url>
<loc>/patterns/writing/</loc>
</url>
<url>
<loc>/patterns/writing/markdown-and-metadata/</loc>
</url>
<url>
<loc>/patterns/writing/expandable-sections/</loc>
</url>
<url>
<loc>/</loc>
<lastmod>2017-06-26T18:27:58+01:00</lastmod>
@ -20,6 +28,18 @@
<priority>0</priority>
</url>
<url>
<loc>/patterns/code/code-blocks/</loc>
</url>
<url>
<loc>/patterns/code/codepen-embedding/</loc>
</url>
<url>
<loc>/patterns/code/</loc>
</url>
<url>
<loc>/patterns/writing/including-images/</loc>
</url>
@ -29,7 +49,7 @@
</url>
<url>
<loc>/patterns/project-setup/</loc>
<loc>/patterns/library-setup/</loc>
</url>
<url>
@ -55,7 +75,7 @@
</url>
<url>
<loc>/patterns/writing/</loc>
<loc>/patterns/code/writing-inline-demos/</loc>
</url>
</urlset>