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

publish cycle

Browse Source
This commit is contained in:
Heydon Pickering 2017-06-28 18:22:42 +01:00
parent e465efcf51
commit 186624d27a
24 changed files with 416 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.toml
View File

@ -1,6 +1,6 @@
languageCode = "en-us" languageCode = "en-us"
title = "Infusion" title = "Infusion"
baseURL = "https://heydon.github.io/inclusive-pattern-library/" baseURL = "https://heydon.github.io/infusion/"
canonifyURLs = true canonifyURLs = true
theme = "infusion" theme = "infusion"

4
public/categories/index.xml
View File

@ -2,12 +2,12 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>Categories on Infusion</title> <title>Categories on Infusion</title>
<link>https://heydon.github.io/inclusive-pattern-library/categories/</link> <link>https://heydon.github.io/infusion/categories/</link>
<description>Recent content in Categories on Infusion</description> <description>Recent content in Categories on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<atom:link href="https://heydon.github.io/inclusive-pattern-library/categories/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://heydon.github.io/infusion/categories/index.xml" rel="self" type="application/rss+xml" />
</channel> </channel>

36
public/index.html
View File

@ -5,11 +5,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/"> <link rel="canonical" href="https://heydon.github.io/infusion/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Infusion Infusion
@ -57,8 +57,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -68,7 +68,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -76,7 +76,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -84,7 +84,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -97,42 +97,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -146,21 +146,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -203,6 +203,6 @@
</div> </div>
</div> </div>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

52
public/index.xml
View File

@ -2,41 +2,41 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>The Infusion Pattern Library Builder on Infusion</title> <title>The Infusion Pattern Library Builder on Infusion</title>
<link>https://heydon.github.io/inclusive-pattern-library/</link> <link>https://heydon.github.io/infusion/</link>
<description>Recent content in The Infusion Pattern Library Builder on Infusion</description> <description>Recent content in The Infusion Pattern Library Builder on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<lastBuildDate>Mon, 26 Jun 2017 18:27:58 +0100</lastBuildDate> <lastBuildDate>Mon, 26 Jun 2017 18:27:58 +0100</lastBuildDate>
<atom:link href="https://heydon.github.io/inclusive-pattern-library/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://heydon.github.io/infusion/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Library structure</title> <title>Library structure</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/</link> <link>https://heydon.github.io/infusion/patterns/writing/library-structure/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/</guid> <guid>https://heydon.github.io/infusion/patterns/writing/library-structure/</guid>
<description>Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this: <description>Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this:
└── content ├── _index.md └── patterns ├── name-of-my-pattern.md └── name-of-my-other-pattern.md /content - This is where all of your content lives. You won&amp;rsquo;t need to visit any other folders very frequently. _index.md — This is the content for your home page. /patterns — This is the folder where individual pattern files are kept.</description> └── content ├── _index.md └── patterns ├── name-of-my-pattern.md └── name-of-my-other-pattern.md /content - This is where all of your content lives. You won&amp;rsquo;t need to visit any other folders very frequently. _index.md — This is the content for your home page. /patterns — This is the folder where individual pattern files are kept.</description>
</item> </item>
<item> <item>
<title>Markdown &amp; metadata</title> <title>Markdown &amp; metadata</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/</link> <link>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/</guid> <guid>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</guid>
<description>In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&amp;rsquo;s recommended you use &amp;ldquo;kebab case&amp;rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &amp;ldquo;Menu button&amp;rdquo; should probably have the filename menu-button. Then you get a nice clean URL: your-company.com/patterns/menu-button. <description>In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&amp;rsquo;s recommended you use &amp;ldquo;kebab case&amp;rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &amp;ldquo;Menu button&amp;rdquo; should probably have the filename menu-button. Then you get a nice clean URL: your-company.com/patterns/menu-button.
If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description> If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
</item> </item>
<item> <item>
<title>Expandable sections</title> <title>Expandable sections</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/</link> <link>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/</guid> <guid>https://heydon.github.io/infusion/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. <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: The expandable shortcode takes three parameters:
label — This is the label for the the section heading. level — This is the heading level (e.</description> label — This is the label for the the section heading. level — This is the heading level (e.</description>
@ -44,10 +44,10 @@ The expandable shortcode takes three parameters:
<item> <item>
<title>Code blocks</title> <title>Code blocks</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/</link> <link>https://heydon.github.io/infusion/patterns/code/code-blocks/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/</guid> <guid>https://heydon.github.io/infusion/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. <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; So, this&amp;hellip;
```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ``` &amp;hellip; will result in this: ```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ``` &amp;hellip; will result in this:
@ -56,10 +56,10 @@ So, this&amp;hellip;
<item> <item>
<title>CodePen embedding</title> <title>CodePen embedding</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/</link> <link>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/</guid> <guid>https://heydon.github.io/infusion/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. <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. 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> &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>
@ -67,20 +67,20 @@ Infusion offers a couple of ways to do this. The first is by embedding CodePen d
<item> <item>
<title>Including images</title> <title>Including images</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/</link> <link>https://heydon.github.io/infusion/patterns/writing/including-images/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/</guid> <guid>https://heydon.github.io/infusion/patterns/writing/including-images/</guid>
<description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in. <description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in.
├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description> ├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
</item> </item>
<item> <item>
<title>Installation</title> <title>Installation</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/installation/</link> <link>https://heydon.github.io/infusion/patterns/installation/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/installation/</guid> <guid>https://heydon.github.io/infusion/patterns/installation/</guid>
<description>Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let&amp;rsquo;s get set up step-by-step. <description>Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let&amp;rsquo;s get set up step-by-step.
1. Install Hugo First we need to install Hugo globally. 1. Install Hugo First we need to install Hugo globally.
OSX users If you are a Mac user and have Homebrew on your system, installing Hugo is simple: OSX users If you are a Mac user and have Homebrew on your system, installing Hugo is simple:
@ -89,40 +89,40 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
<item> <item>
<title>Library setup</title> <title>Library setup</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/</link> <link>https://heydon.github.io/infusion/patterns/library-setup/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/</guid> <guid>https://heydon.github.io/infusion/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. <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> &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> </item>
<item> <item>
<title>Notes &amp; warnings</title> <title>Notes &amp; warnings</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/</link> <link>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/</guid> <guid>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</guid>
<description>Infusion acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of &amp;ldquo;shortcodes&amp;rdquo;. Shortcodes offer a simple syntax for including rich content. For example, Infusion provides shortcodes for including notes and warnings. <description>Infusion acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of &amp;ldquo;shortcodes&amp;rdquo;. Shortcodes offer a simple syntax for including rich content. For example, Infusion provides shortcodes for including notes and warnings.
Notes You may wish to pick out some content in your pattern&amp;rsquo;s documentation as a note — an aside to the main thrust of the pattern&amp;rsquo;s description. This is possible using the following syntax:</description> Notes You may wish to pick out some content in your pattern&amp;rsquo;s documentation as a note — an aside to the main thrust of the pattern&amp;rsquo;s description. This is possible using the following syntax:</description>
</item> </item>
<item> <item>
<title>References</title> <title>References</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/</link> <link>https://heydon.github.io/infusion/patterns/writing/references/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/</guid> <guid>https://heydon.github.io/infusion/patterns/writing/references/</guid>
<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: <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> 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>
<item> <item>
<title>Serving</title> <title>Serving</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/serving/</link> <link>https://heydon.github.io/infusion/patterns/serving/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/serving/</guid> <guid>https://heydon.github.io/infusion/patterns/serving/</guid>
<description>Serving locally While you&amp;rsquo;re creating content for your library, you&amp;rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command: <description>Serving locally While you&amp;rsquo;re creating content for your library, you&amp;rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command:
npm run serve This will serve your working library on localhost:1313. Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild. No need to refresh the web page! npm run serve This will serve your working library on localhost:1313. Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild. No need to refresh the web page!
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> 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>
@ -130,10 +130,10 @@ Publishing on Github Pages The easiest way to host your pattern library so you h
<item> <item>
<title>Writing inline demos</title> <title>Writing inline demos</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/</link> <link>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/</guid> <guid>https://heydon.github.io/infusion/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. <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> 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> </item>

38
public/patterns/code/code-blocks/index.html
View File

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/code/code-blocks/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Code blocks | Infusion Code blocks | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" aria-current="page">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -236,8 +236,8 @@ toggle.addEventListener('click', (e) => {
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

42
public/patterns/code/codepen-embedding/index.html
View File

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
CodePen embedding | Infusion CodePen embedding | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" aria-current="page">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -201,7 +201,7 @@
<aside aria-label="warning" class="note warning"> <aside aria-label="warning" class="note warning">
<div> <div>
<img src="/inclusive-pattern-library/images/icon-warning.svg" alt=""> <img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
<p>The compiled site will output an error if your <code>config.toml</code> does not include your CodePen username (in the <code>codePenUser</code> parameter). This is needed to construct the embed URL.</p> <p>The compiled site will output an error if your <code>config.toml</code> does not include your CodePen username (in the <code>codePenUser</code> parameter). This is needed to construct the embed URL.</p>
</div> </div>
@ -245,7 +245,7 @@
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/"> <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -264,8 +264,8 @@
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

44
public/patterns/code/index.html
View File

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/code/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/code/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Exhibiting code | Infusion Exhibiting code | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -186,7 +186,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/"> <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
Code blocks Code blocks
</a> </a>
@ -196,7 +196,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/"> <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
CodePen embedding CodePen embedding
</a> </a>
@ -206,7 +206,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/"> <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
Writing inline demos Writing inline demos
</a> </a>
@ -224,8 +224,8 @@
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

16
public/patterns/code/index.xml
View File

@ -2,20 +2,20 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>Exhibiting code on Infusion</title> <title>Exhibiting code on Infusion</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/</link> <link>https://heydon.github.io/infusion/patterns/code/</link>
<description>Recent content in Exhibiting code on Infusion</description> <description>Recent content in Exhibiting code on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<atom:link href="https://heydon.github.io/inclusive-pattern-library/patterns/code/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://heydon.github.io/infusion/patterns/code/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Code blocks</title> <title>Code blocks</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/</link> <link>https://heydon.github.io/infusion/patterns/code/code-blocks/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/</guid> <guid>https://heydon.github.io/infusion/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. <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; So, this&amp;hellip;
```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ``` &amp;hellip; will result in this: ```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ``` &amp;hellip; will result in this:
@ -24,10 +24,10 @@ So, this&amp;hellip;
<item> <item>
<title>CodePen embedding</title> <title>CodePen embedding</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/</link> <link>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/</guid> <guid>https://heydon.github.io/infusion/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. <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. 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> &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>
@ -35,10 +35,10 @@ Infusion offers a couple of ways to do this. The first is by embedding CodePen d
<item> <item>
<title>Writing inline demos</title> <title>Writing inline demos</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/</link> <link>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/</guid> <guid>https://heydon.github.io/infusion/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. <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> 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> </item>

42
public/patterns/code/writing-inline-demos/index.html
View File

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Writing inline demos | Infusion Writing inline demos | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" aria-current="page">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Writing inline demos</span>
</a> </a>
@ -196,7 +196,7 @@
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/"> <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -323,7 +323,7 @@ toggle.addEventListener('click', (e) => {
<p><aside aria-label="note" class="note"> <p><aside aria-label="note" class="note">
<div> <div>
<img src="/inclusive-pattern-library/images/icon-info.svg" alt=""> <img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
<p>Firefox does not currently support Shadow DOM and <strong>Infusion</strong> does not include a polyfill. Firefox will output an error message. These demos function correctly in Chrome, Safari, and Opera.</p> <p>Firefox does not currently support Shadow DOM and <strong>Infusion</strong> does not include a polyfill. Firefox will output an error message. These demos function correctly in Chrome, Safari, and Opera.</p>
</div> </div>
@ -339,8 +339,8 @@ toggle.addEventListener('click', (e) => {
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

44
public/patterns/index.html
View File

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Patterns | Infusion Patterns | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -186,7 +186,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/installation/"> <a href="https://heydon.github.io/infusion/patterns/installation/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
Installation Installation
</a> </a>
@ -196,7 +196,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/"> <a href="https://heydon.github.io/infusion/patterns/library-setup/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
Library setup Library setup
</a> </a>
@ -206,7 +206,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/serving/"> <a href="https://heydon.github.io/infusion/patterns/serving/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
Serving Serving
</a> </a>
@ -224,8 +224,8 @@
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

16
public/patterns/index.xml
View File

@ -2,20 +2,20 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>Patterns on Infusion</title> <title>Patterns on Infusion</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/</link> <link>https://heydon.github.io/infusion/patterns/</link>
<description>Recent content in Patterns on Infusion</description> <description>Recent content in Patterns on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<atom:link href="https://heydon.github.io/inclusive-pattern-library/patterns/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://heydon.github.io/infusion/patterns/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Installation</title> <title>Installation</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/installation/</link> <link>https://heydon.github.io/infusion/patterns/installation/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/installation/</guid> <guid>https://heydon.github.io/infusion/patterns/installation/</guid>
<description>Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let&amp;rsquo;s get set up step-by-step. <description>Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let&amp;rsquo;s get set up step-by-step.
1. Install Hugo First we need to install Hugo globally. 1. Install Hugo First we need to install Hugo globally.
OSX users If you are a Mac user and have Homebrew on your system, installing Hugo is simple: OSX users If you are a Mac user and have Homebrew on your system, installing Hugo is simple:
@ -24,20 +24,20 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
<item> <item>
<title>Library setup</title> <title>Library setup</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/</link> <link>https://heydon.github.io/infusion/patterns/library-setup/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/</guid> <guid>https://heydon.github.io/infusion/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. <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> &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> </item>
<item> <item>
<title>Serving</title> <title>Serving</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/serving/</link> <link>https://heydon.github.io/infusion/patterns/serving/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/serving/</guid> <guid>https://heydon.github.io/infusion/patterns/serving/</guid>
<description>Serving locally While you&amp;rsquo;re creating content for your library, you&amp;rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command: <description>Serving locally While you&amp;rsquo;re creating content for your library, you&amp;rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command:
npm run serve This will serve your working library on localhost:1313. Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild. No need to refresh the web page! npm run serve This will serve your working library on localhost:1313. Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild. No need to refresh the web page!
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> 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>

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

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/installation/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/installation/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Installation | Infusion Installation | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/installation/" aria-current="page">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -218,7 +218,7 @@
<figure role="group" aria-describedby="VGhlIEdpdGh1YiB3ZWIg"> <figure role="group" aria-describedby="VGhlIEdpdGh1YiB3ZWIg">
<p><img src="/images/open_in_desktop.png" alt="The open in desktop option, revealed when clicking clone or download" /></p> <p><img src="https://heydon.github.io/infusion/images/open_in_desktop.png" alt="The open in desktop option, revealed when clicking clone or download" /></p>
<figcaption id="VGhlIEdpdGh1YiB3ZWIg"> <figcaption id="VGhlIEdpdGh1YiB3ZWIg">
The Github web interface The Github web interface
@ -228,7 +228,7 @@
<aside aria-label="note" class="note"> <aside aria-label="note" class="note">
<div> <div>
<img src="/inclusive-pattern-library/images/icon-info.svg" alt=""> <img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
<p>If you do not have a version of the Github desktop client installed, follow the prompts after clicking <strong>Open in Desktop</strong>.</p> <p>If you do not have a version of the Github desktop client installed, follow the prompts after clicking <strong>Open in Desktop</strong>.</p>
</div> </div>
@ -265,7 +265,7 @@
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/"> <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -296,8 +296,8 @@
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

48
public/patterns/library-setup/index.html
View File

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/library-setup/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Library setup | Infusion Library setup | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/library-setup/" aria-current="page">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -204,7 +204,7 @@
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/installation/"> <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -234,7 +234,7 @@
<aside aria-label="warning" class="note warning"> <aside aria-label="warning" class="note warning">
<div> <div>
<img src="/inclusive-pattern-library/images/icon-warning.svg" alt=""> <img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
<p>If you are contributing to an existing <strong>Infusion</strong> library, do not run the following command. It will delete all of the patterns in that library. The <code>clean</code> command is just for libraries that you are starting from scratch.</p> <p>If you are contributing to an existing <strong>Infusion</strong> library, do not run the following command. It will delete all of the patterns in that library. The <code>clean</code> command is just for libraries that you are starting from scratch.</p>
</div> </div>
@ -247,7 +247,7 @@
<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/"> <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -328,7 +328,7 @@ theme = "infusion"
<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/"> <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -403,7 +403,7 @@ theme = "infusion"
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/serving/"> <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -426,8 +426,8 @@ theme = "infusion"
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/serving/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/serving/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Serving | Infusion Serving | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/serving/" aria-current="page">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -201,7 +201,7 @@
<aside aria-label="warning" class="note warning"> <aside aria-label="warning" class="note warning">
<div> <div>
<img src="/inclusive-pattern-library/images/icon-warning.svg" alt=""> <img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
<p>The <code>host</code> command <em>force</em> pushes the contents of the <code>public</code> folder to <code>gh-pages</code>. This is not in itself problematic since nothing is overwritten on the <code>master</code> branch. However, be aware that the command does not push your <code>master</code> branch changes to origin. You still have to commit and push any changes you&rsquo;ve made locally.</p> <p>The <code>host</code> command <em>force</em> pushes the contents of the <code>public</code> folder to <code>gh-pages</code>. This is not in itself problematic since nothing is overwritten on the <code>master</code> branch. However, be aware that the command does not push your <code>master</code> branch changes to origin. You still have to commit and push any changes you&rsquo;ve made locally.</p>
</div> </div>
@ -217,8 +217,8 @@
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

38
public/patterns/writing/expandable-sections/index.html
View File

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Expandable sections | Infusion Expandable sections | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" aria-current="page">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -282,8 +282,8 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/including-images/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Including images | Infusion Including images | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" aria-current="page"> <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -192,7 +192,7 @@
<aside aria-label="note" class="note"> <aside aria-label="note" class="note">
<div> <div>
<img src="/inclusive-pattern-library/images/icon-info.svg" alt=""> <img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
<p>When you first make a copy of <strong>Infusion</strong>, <strong>Infusion&rsquo;s</strong> own logo will be included. You should replace this with your own company or project logo.</p> <p>When you first make a copy of <strong>Infusion</strong>, <strong>Infusion&rsquo;s</strong> own logo will be included. You should replace this with your own company or project logo.</p>
</div> </div>
@ -219,7 +219,7 @@
<figure role="group" aria-describedby="U3RldmUgRmF1bGtuZXIg"> <figure role="group" aria-describedby="U3RldmUgRmF1bGtuZXIg">
<p><img src="/images/steve_faulkner.jpg" alt="Steve Faulkner's face" /></p> <p><img src="https://heydon.github.io/infusion/images/steve_faulkner.jpg" alt="Steve Faulkner's face" /></p>
<figcaption id="U3RldmUgRmF1bGtuZXIg"> <figcaption id="U3RldmUgRmF1bGtuZXIg">
Steve Faulkner works for The Paciello Group Steve Faulkner works for The Paciello Group
@ -248,8 +248,8 @@
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Writing | Infusion Writing | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -186,7 +186,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/"> <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
Library structure Library structure
</a> </a>
@ -196,7 +196,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/"> <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
Markdown &amp; metadata Markdown &amp; metadata
</a> </a>
@ -206,7 +206,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/"> <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
Expandable sections Expandable sections
</a> </a>
@ -216,7 +216,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/"> <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
Including images Including images
</a> </a>
@ -226,7 +226,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/"> <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
Notes &amp; warnings Notes &amp; warnings
</a> </a>
@ -236,7 +236,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/"> <a href="https://heydon.github.io/infusion/patterns/writing/references/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
References References
</a> </a>
@ -254,8 +254,8 @@
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -2,40 +2,40 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>Writing on Infusion</title> <title>Writing on Infusion</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/</link> <link>https://heydon.github.io/infusion/patterns/writing/</link>
<description>Recent content in Writing on Infusion</description> <description>Recent content in Writing on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<atom:link href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://heydon.github.io/infusion/patterns/writing/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Library structure</title> <title>Library structure</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/</link> <link>https://heydon.github.io/infusion/patterns/writing/library-structure/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/</guid> <guid>https://heydon.github.io/infusion/patterns/writing/library-structure/</guid>
<description>Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this: <description>Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this:
└── content ├── _index.md └── patterns ├── name-of-my-pattern.md └── name-of-my-other-pattern.md /content - This is where all of your content lives. You won&amp;rsquo;t need to visit any other folders very frequently. _index.md — This is the content for your home page. /patterns — This is the folder where individual pattern files are kept.</description> └── content ├── _index.md └── patterns ├── name-of-my-pattern.md └── name-of-my-other-pattern.md /content - This is where all of your content lives. You won&amp;rsquo;t need to visit any other folders very frequently. _index.md — This is the content for your home page. /patterns — This is the folder where individual pattern files are kept.</description>
</item> </item>
<item> <item>
<title>Markdown &amp; metadata</title> <title>Markdown &amp; metadata</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/</link> <link>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/</guid> <guid>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</guid>
<description>In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&amp;rsquo;s recommended you use &amp;ldquo;kebab case&amp;rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &amp;ldquo;Menu button&amp;rdquo; should probably have the filename menu-button. Then you get a nice clean URL: your-company.com/patterns/menu-button. <description>In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&amp;rsquo;s recommended you use &amp;ldquo;kebab case&amp;rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &amp;ldquo;Menu button&amp;rdquo; should probably have the filename menu-button. Then you get a nice clean URL: your-company.com/patterns/menu-button.
If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description> If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
</item> </item>
<item> <item>
<title>Expandable sections</title> <title>Expandable sections</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/</link> <link>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/</guid> <guid>https://heydon.github.io/infusion/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. <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: The expandable shortcode takes three parameters:
label — This is the label for the the section heading. level — This is the heading level (e.</description> label — This is the label for the the section heading. level — This is the heading level (e.</description>
@ -43,30 +43,30 @@ The expandable shortcode takes three parameters:
<item> <item>
<title>Including images</title> <title>Including images</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/</link> <link>https://heydon.github.io/infusion/patterns/writing/including-images/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/</guid> <guid>https://heydon.github.io/infusion/patterns/writing/including-images/</guid>
<description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in. <description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in.
├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description> ├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
</item> </item>
<item> <item>
<title>Notes &amp; warnings</title> <title>Notes &amp; warnings</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/</link> <link>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/</guid> <guid>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</guid>
<description>Infusion acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of &amp;ldquo;shortcodes&amp;rdquo;. Shortcodes offer a simple syntax for including rich content. For example, Infusion provides shortcodes for including notes and warnings. <description>Infusion acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of &amp;ldquo;shortcodes&amp;rdquo;. Shortcodes offer a simple syntax for including rich content. For example, Infusion provides shortcodes for including notes and warnings.
Notes You may wish to pick out some content in your pattern&amp;rsquo;s documentation as a note — an aside to the main thrust of the pattern&amp;rsquo;s description. This is possible using the following syntax:</description> Notes You may wish to pick out some content in your pattern&amp;rsquo;s documentation as a note — an aside to the main thrust of the pattern&amp;rsquo;s description. This is possible using the following syntax:</description>
</item> </item>
<item> <item>
<title>References</title> <title>References</title>
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/</link> <link>https://heydon.github.io/infusion/patterns/writing/references/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/</guid> <guid>https://heydon.github.io/infusion/patterns/writing/references/</guid>
<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: <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> 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>

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

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Library structure | Infusion Library structure | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" aria-current="page">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -213,7 +213,7 @@
<aside aria-label="note" class="note"> <aside aria-label="note" class="note">
<div> <div>
<img src="/inclusive-pattern-library/images/icon-info.svg" alt=""> <img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
<p>Note that subfolders like <code>/popups</code> must each have an <code>_index.md</code> file. This file doesn&rsquo;t need any content except the TOML metadata defining the title (name) of that subsection:</p> <p>Note that subfolders like <code>/popups</code> must each have an <code>_index.md</code> file. This file doesn&rsquo;t need any content except the TOML metadata defining the title (name) of that subsection:</p>
<pre><code>+++ <pre><code>+++
@ -236,7 +236,7 @@ title = &quot;Popups&quot;
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/"> <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -285,8 +285,8 @@ title = &quot;Popups&quot;
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Markdown &amp; metadata | Infusion Markdown &amp; metadata | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" aria-current="page">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -219,7 +219,7 @@ weight = 1
<aside aria-label="warning" class="note warning"> <aside aria-label="warning" class="note warning">
<div> <div>
<img src="/inclusive-pattern-library/images/icon-warning.svg" alt=""> <img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
<p>The <code>weight</code> parameter should be an integer, not a string, so don&rsquo;t use scare quotes around the value!</p> <p>The <code>weight</code> parameter should be an integer, not a string, so don&rsquo;t use scare quotes around the value!</p>
</div> </div>
@ -235,8 +235,8 @@ weight = 1
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Notes &amp; warnings | Infusion Notes &amp; warnings | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" aria-current="page">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" > <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -198,7 +198,7 @@ This is a note! It's something the reader may like to know about but is suppleme
<aside aria-label="note" class="note"> <aside aria-label="note" class="note">
<div> <div>
<img src="/inclusive-pattern-library/images/icon-info.svg" alt=""> <img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
<p>This is a note! It&rsquo;s something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.</p> <p>This is a note! It&rsquo;s something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.</p>
</div> </div>
@ -220,7 +220,7 @@ This is a warning! It's about something the reader should be careful to do or to
<aside aria-label="warning" class="note warning"> <aside aria-label="warning" class="note warning">
<div> <div>
<img src="/inclusive-pattern-library/images/icon-warning.svg" alt=""> <img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
<p>This is a warning! It&rsquo;s about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.</p> <p>This is a warning! It&rsquo;s about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.</p>
</div> </div>
@ -236,8 +236,8 @@ This is a warning! It's about something the reader should be careful to do or to
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/references/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
References | Infusion References | Infusion
@ -56,8 +56,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt=""> <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a> </a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p> <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div> </div>
@ -67,7 +67,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/installation/" > <a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Installation</span> <span>Installation</span>
</a> </a>
@ -75,7 +75,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/library-setup/" > <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <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> <span>Library setup</span>
</a> </a>
@ -83,7 +83,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/serving/" > <a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Serving</span> <span>Serving</span>
</a> </a>
@ -96,42 +96,42 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" > <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Library structure</span> <span>Library structure</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" > <a href="https://heydon.github.io/infusion/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></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Markdown &amp; metadata</span> <span>Markdown &amp; metadata</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Expandable sections</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/including-images/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Including images</span> <span>Including images</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" > <a href="https://heydon.github.io/infusion/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> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>Notes &amp; warnings</span> <span>Notes &amp; warnings</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/writing/references/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/writing/references/" aria-current="page">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>References</span> <span>References</span>
</a> </a>
@ -145,21 +145,21 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/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> <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> <span>CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/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> <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> <span>Writing inline demos</span>
</a> </a>
@ -210,7 +210,7 @@
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/"> <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -239,7 +239,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<aside aria-label="note" class="note"> <aside aria-label="note" class="note">
<div> <div>
<img src="/inclusive-pattern-library/images/icon-info.svg" alt=""> <img src="https://heydon.github.io/infusion/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> <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> </div>
@ -637,8 +637,8 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
</div> </div>
</div> </div>
<script src="/js/prism.js"></script> <script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="/js/dom-scripts.js"></script> <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

36
public/sitemap.xml
View File

@ -3,79 +3,79 @@
xmlns:xhtml="http://www.w3.org/1999/xhtml"> xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/</loc> <loc>https://heydon.github.io/infusion/patterns/writing/library-structure/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/</loc> <loc>https://heydon.github.io/infusion/patterns/writing/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/</loc> <loc>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/</loc> <loc>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/</loc> <loc>https://heydon.github.io/infusion/</loc>
<lastmod>2017-06-26T18:27:58+01:00</lastmod> <lastmod>2017-06-26T18:27:58+01:00</lastmod>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/categories/</loc> <loc>https://heydon.github.io/infusion/categories/</loc>
<priority>0</priority> <priority>0</priority>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/</loc> <loc>https://heydon.github.io/infusion/patterns/code/code-blocks/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/</loc> <loc>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/code/</loc> <loc>https://heydon.github.io/infusion/patterns/code/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/</loc> <loc>https://heydon.github.io/infusion/patterns/writing/including-images/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/installation/</loc> <loc>https://heydon.github.io/infusion/patterns/installation/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/</loc> <loc>https://heydon.github.io/infusion/patterns/library-setup/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/</loc> <loc>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/</loc> <loc>https://heydon.github.io/infusion/patterns/</loc>
<priority>0</priority> <priority>0</priority>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/</loc> <loc>https://heydon.github.io/infusion/patterns/writing/references/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/serving/</loc> <loc>https://heydon.github.io/infusion/patterns/serving/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/tags/</loc> <loc>https://heydon.github.io/infusion/tags/</loc>
<priority>0</priority> <priority>0</priority>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/</loc> <loc>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</loc>
</url> </url>
</urlset> </urlset>

4
public/tags/index.xml
View File

@ -2,12 +2,12 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>Tags on Infusion</title> <title>Tags on Infusion</title>
<link>https://heydon.github.io/inclusive-pattern-library/tags/</link> <link>https://heydon.github.io/infusion/tags/</link>
<description>Recent content in Tags on Infusion</description> <description>Recent content in Tags on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<atom:link href="https://heydon.github.io/inclusive-pattern-library/tags/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://heydon.github.io/infusion/tags/index.xml" rel="self" type="application/rss+xml" />
</channel> </channel>