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

better starter pattern

Browse Source
This commit is contained in:
Heydon Pickering 2017-07-04 11:17:09 +01:00
parent 8bb8d2c2cb
commit 0e67edaf76
35 changed files with 841 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
content/patterns/code/_index.md
View File

@ -1,3 +0,0 @@
+++
title = "Exhibiting code"
+++

3
content/patterns/coding/_index.md Normal file
View File

@ -0,0 +1,3 @@
+++
title = "Coding"
+++

1
content/patterns/code/code-blocks.md → content/patterns/coding/code-blocks.md
View File

@ -1,5 +1,6 @@
+++ +++
title = "Code blocks" title = "Code blocks"
weight = 1
+++ +++
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. 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.

1
content/patterns/code/codepen-embedding.md → content/patterns/coding/codepen-embedding.md
View File

@ -1,5 +1,6 @@
+++ +++
title = "CodePen embedding" title = "CodePen embedding"
weight = 2
+++ +++
Sometimes just pictures of the pattern you're documenting aren't enough. Interactive patterns benefit from live demos, so that readers can test their functionality. Sometimes just pictures of the pattern you're documenting aren't enough. Interactive patterns benefit from live demos, so that readers can test their functionality.

0
content/patterns/code/color-palettes.md → content/patterns/coding/color-palettes.md
View File

1
content/patterns/code/writing-inline-demos.md → content/patterns/coding/writing-inline-demos.md
View File

@ -1,5 +1,6 @@
+++ +++
title = "Writing inline demos" title = "Writing inline demos"
weight = 3
+++ +++
There are some issues with {{% pattern "CodePen embedding" %}}, like them not working offline. They also come with CodePen branding, which will clash with the pattern you're trying to illustrate. There are some issues with {{% pattern "CodePen embedding" %}}, like them not working offline. They also come with CodePen branding, which will clash with the pattern you're trying to illustrate.

1
content/patterns/library-setup.md
View File

@ -1,5 +1,6 @@
+++ +++
title = "Library setup" title = "Library setup"
tags = ["example tag", "quickstart"]
+++ +++
By now, you should have followed the {{% pattern "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. By now, you should have followed the {{% pattern "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.

18
docs/index.html
View File

@ -141,34 +141,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>
@ -220,6 +220,10 @@

70
docs/index.xml
View File

@ -11,6 +11,18 @@
<atom:link href="https://heydon.github.io/infusion/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>
<title>Code blocks</title>
<link>https://heydon.github.io/infusion/patterns/coding/code-blocks/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/code-blocks/</guid>
<description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
So, this&amp;hellip;
```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ``` &amp;hellip; will result in this:
&amp;lt;button aria-pressed=&amp;quot;false&amp;quot;&amp;gt;toggle me&amp;lt;/button&amp;gt; Note that the syntax highlighting uses a greyscale theme. Infusion is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.</description>
</item>
<item> <item>
<title>Library structure</title> <title>Library structure</title>
<link>https://heydon.github.io/infusion/patterns/writing/library-structure/</link> <link>https://heydon.github.io/infusion/patterns/writing/library-structure/</link>
@ -21,6 +33,17 @@
└── 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>
<title>CodePen embedding</title>
<link>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</guid>
<description>Sometimes just pictures of the pattern you&amp;rsquo;re documenting aren&amp;rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
&amp;#x7b;{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
</item>
<item> <item>
<title>Markdown &amp; metadata</title> <title>Markdown &amp; metadata</title>
<link>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</link> <link>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</link>
@ -31,6 +54,16 @@
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>
<title>Writing inline demos</title>
<link>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</guid>
<description>There are some issues with CodePen embedding , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
</item>
<item> <item>
<title>Expandable sections</title> <title>Expandable sections</title>
<link>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</link> <link>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</link>
@ -42,35 +75,12 @@ 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>
</item> </item>
<item>
<title>Code blocks</title>
<link>https://heydon.github.io/infusion/patterns/code/code-blocks/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<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.
So, this&amp;hellip;
```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ``` &amp;hellip; will result in this:
&amp;lt;button aria-pressed=&amp;quot;false&amp;quot;&amp;gt;toggle me&amp;lt;/button&amp;gt; Note that the syntax highlighting uses a greyscale theme. Infusion is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.</description>
</item>
<item>
<title>CodePen embedding</title>
<link>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<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.
Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
&amp;#x7b;{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
</item>
<item> <item>
<title>Color palettes</title> <title>Color palettes</title>
<link>https://heydon.github.io/infusion/patterns/code/color-palettes/</link> <link>https://heydon.github.io/infusion/patterns/coding/color-palettes/</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/infusion/patterns/code/color-palettes/</guid> <guid>https://heydon.github.io/infusion/patterns/coding/color-palettes/</guid>
<description>There&amp;rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values. <description>There&amp;rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
&amp;#x7b;{% colors &#34;#111111, #cccccc, #ffffff&#34; %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:</description> &amp;#x7b;{% colors &#34;#111111, #cccccc, #ffffff&#34; %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:</description>
</item> </item>
@ -137,15 +147,5 @@ I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} patt
npm run serve This will serve your working library from localhost:1313 (the exact URL will be determined by what&amp;rsquo;s in your baseURL and will be revealed to you by your terminal). Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild.</description> npm run serve This will serve your working library from localhost:1313 (the exact URL will be determined by what&amp;rsquo;s in your baseURL and will be revealed to you by your terminal). Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild.</description>
</item> </item>
<item>
<title>Writing inline demos</title>
<link>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<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.
Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
</item>
</channel> </channel>
</rss> </rss>

16
docs/patterns/code/code-blocks/index.html → docs/patterns/coding/code-blocks/index.html
View File

@ -4,7 +4,7 @@
<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/infusion/patterns/code/code-blocks/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/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="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>

74
docs/patterns/code/codepen-embedding/index.html → docs/patterns/coding/codepen-embedding/index.html
View File

@ -4,7 +4,7 @@
<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/infusion/patterns/code/codepen-embedding/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/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="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>
@ -227,36 +227,40 @@
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/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"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>
.</p> .</p>
</main> </main>

16
docs/patterns/code/color-palettes/index.html → docs/patterns/coding/color-palettes/index.html
View File

@ -4,7 +4,7 @@
<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/infusion/patterns/code/color-palettes/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/color-palettes/">
<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="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>

32
docs/patterns/code/index.html → docs/patterns/coding/index.html
View File

@ -4,14 +4,14 @@
<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/infusion/patterns/code/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/">
<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="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title> <title>
Exhibiting code | Infusion Coding | Infusion
</title> </title>
</head> </head>
@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>
@ -186,13 +186,13 @@
<h1> <h1>
Exhibiting code Coding
</h1> </h1>
<ul class="patterns-list"> <ul class="patterns-list">
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/"> <a href="https://heydon.github.io/infusion/patterns/coding/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>
@ -202,7 +202,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/"> <a href="https://heydon.github.io/infusion/patterns/coding/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>
@ -212,9 +212,9 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/"> <a href="https://heydon.github.io/infusion/patterns/coding/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>
Color palettes Writing inline demos
</a> </a>
</h2> </h2>
</li> </li>
@ -222,9 +222,9 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/"> <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/">
<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 Color palettes
</a> </a>
</h2> </h2>
</li> </li>

40
docs/patterns/code/index.xml → docs/patterns/coding/index.xml
View File

@ -1,21 +1,21 @@
<?xml version="1.0" encoding="utf-8" standalone="yes" ?> <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<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>Coding on Infusion</title>
<link>https://heydon.github.io/infusion/patterns/code/</link> <link>https://heydon.github.io/infusion/patterns/coding/</link>
<description>Recent content in Exhibiting code on Infusion</description> <description>Recent content in Coding 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/infusion/patterns/code/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://heydon.github.io/infusion/patterns/coding/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Code blocks</title> <title>Code blocks</title>
<link>https://heydon.github.io/infusion/patterns/code/code-blocks/</link> <link>https://heydon.github.io/infusion/patterns/coding/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/infusion/patterns/code/code-blocks/</guid> <guid>https://heydon.github.io/infusion/patterns/coding/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,34 +24,34 @@ So, this&amp;hellip;
<item> <item>
<title>CodePen embedding</title> <title>CodePen embedding</title>
<link>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</link> <link>https://heydon.github.io/infusion/patterns/coding/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/infusion/patterns/code/codepen-embedding/</guid> <guid>https://heydon.github.io/infusion/patterns/coding/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>
</item> </item>
<item>
<title>Color palettes</title>
<link>https://heydon.github.io/infusion/patterns/code/color-palettes/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/code/color-palettes/</guid>
<description>There&amp;rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
&amp;#x7b;{% colors &#34;#111111, #cccccc, #ffffff&#34; %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:</description>
</item>
<item> <item>
<title>Writing inline demos</title> <title>Writing inline demos</title>
<link>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</link> <link>https://heydon.github.io/infusion/patterns/coding/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/infusion/patterns/code/writing-inline-demos/</guid> <guid>https://heydon.github.io/infusion/patterns/coding/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>
<item>
<title>Color palettes</title>
<link>https://heydon.github.io/infusion/patterns/coding/color-palettes/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/color-palettes/</guid>
<description>There&amp;rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
&amp;#x7b;{% colors &#34;#111111, #cccccc, #ffffff&#34; %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:</description>
</item>
</channel> </channel>
</rss> </rss>

38
docs/patterns/code/writing-inline-demos/index.html → docs/patterns/coding/writing-inline-demos/index.html
View File

@ -4,7 +4,7 @@
<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/infusion/patterns/code/writing-inline-demos/"> <link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/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="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" aria-current="page"> <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>
@ -194,15 +194,7 @@
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/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"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>
@ -219,6 +211,18 @@

14
docs/patterns/index.html
View File

@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>

18
docs/patterns/installation/index.html
View File

@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>
@ -268,6 +268,10 @@

54
docs/patterns/library-setup/index.html
View File

@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>
@ -185,6 +185,26 @@
<main id="main"> <main id="main">
<h1>Library setup</h1> <h1>Library setup</h1>
<div class="tags">
<strong aria-hidden="true">Tags: </strong>
<ul aria-label="tags">
<li>
<svg class="tag-icon" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
<use xlink:href="#tag"></use>
</svg>
<a href="https://heydon.github.io/infusion/tags/quickstart">quickstart</a>
</li>
</ul>
</div>
<p>By now, you should have followed the <p>By now, you should have followed the
@ -207,6 +227,10 @@
@ -251,6 +275,8 @@
<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/infusion/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"><use xlink:href="#bookmark"></use></svg>Library structure</a> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>
@ -288,6 +314,8 @@
@ -331,6 +359,8 @@ 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/infusion/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"><use xlink:href="#bookmark"></use></svg>Library structure</a> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>
@ -368,6 +398,8 @@ theme = "infusion"
@ -399,6 +431,12 @@ theme = "infusion"
@ -412,8 +450,6 @@ theme = "infusion"
.</p> .</p>
</main> </main>

18
docs/patterns/serving/index.html
View File

@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>
@ -231,6 +231,10 @@

14
docs/patterns/writing/expandable-sections/index.html
View File

@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>

14
docs/patterns/writing/including-images/index.html
View File

@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>

14
docs/patterns/writing/index.html
View File

@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>

18
docs/patterns/writing/library-structure/index.html
View File

@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>
@ -242,6 +242,10 @@ title = &quot;Popups&quot;
<a class="pattern-link" href="https://heydon.github.io/infusion/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"><use xlink:href="#bookmark"></use></svg>Markdown &amp; metadata</a> <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Markdown &amp; metadata</a>

14
docs/patterns/writing/markdown-and-metadata/index.html
View File

@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>

14
docs/patterns/writing/notes-and-warnings/index.html
View File

@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>

18
docs/patterns/writing/references/index.html
View File

@ -140,34 +140,34 @@
</li> </li>
<li> <li>
<h3>Exhibiting code</h3> <h3>Coding</h3>
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" > <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span> <span class="text">Code blocks</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" > <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span> <span class="text">CodePen embedding</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" > <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span> <span class="text">Writing inline demos</span>
</a> </a>
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" > <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span> <span class="text">Color palettes</span>
</a> </a>
</li> </li>
@ -213,6 +213,10 @@

32
docs/sitemap.xml
View File

@ -2,6 +2,10 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml"> xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://heydon.github.io/infusion/patterns/coding/code-blocks/</loc>
</url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/writing/library-structure/</loc> <loc>https://heydon.github.io/infusion/patterns/writing/library-structure/</loc>
</url> </url>
@ -10,10 +14,18 @@
<loc>https://heydon.github.io/infusion/patterns/writing/</loc> <loc>https://heydon.github.io/infusion/patterns/writing/</loc>
</url> </url>
<url>
<loc>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</loc>
</url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</loc> <loc>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</loc>
</url> </url>
<url>
<loc>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</loc>
</url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</loc> <loc>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</loc>
</url> </url>
@ -29,19 +41,16 @@
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/code/code-blocks/</loc> <loc>https://heydon.github.io/infusion/patterns/coding/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</loc> <loc>https://heydon.github.io/infusion/patterns/coding/color-palettes/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/code/color-palettes/</loc> <loc>https://heydon.github.io/infusion/tags/example-tag/</loc>
</url> <priority>0</priority>
<url>
<loc>https://heydon.github.io/infusion/patterns/code/</loc>
</url> </url>
<url> <url>
@ -65,6 +74,11 @@
<priority>0</priority> <priority>0</priority>
</url> </url>
<url>
<loc>https://heydon.github.io/infusion/tags/quickstart/</loc>
<priority>0</priority>
</url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/writing/references/</loc> <loc>https://heydon.github.io/infusion/patterns/writing/references/</loc>
</url> </url>
@ -78,8 +92,4 @@
<priority>0</priority> <priority>0</priority>
</url> </url>
<url>
<loc>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</loc>
</url>
</urlset> </urlset>

220
docs/tags/example-tag/index.html Normal file
View File

@ -0,0 +1,220 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/tags/example-tag/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title>
Example Tag | Infusion
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
</g>
</symbol>
<symbol id="w3c">
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
</symbol>
<symbol id="tag">
<g transform="translate(0 -875.2)">
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
</g>
</symbol>
<symbol id="balloon">
<g transform="translate(0 -875.2)">
<g>
<path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
<path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
<path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
<path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
<path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
<rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
</g>
</g>
</symbol>
</svg>
<div class="wrapper">
<header class="intro-and-nav" role="banner">
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div>
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">Menu</button>
<ul id="patterns-list">
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Installation</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Library setup</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Serving</span>
</a>
</li>
<li>
<h3>Writing</h3>
<ul>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Library structure</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Markdown &amp; metadata</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Including images</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Notes &amp; warnings</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">References</span>
</a>
</li>
</ul>
</li>
<li>
<h3>Coding</h3>
<ul>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<div class="main-and-footer">
<div>
<main id="main">
<h1>
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
<use xlink:href="#tag"></use>
</svg>
Example Tag
</h1>
<ul class="patterns-list">
<li>
<h2>
<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>
Library setup
</a>
</h2>
</li>
</ul>
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer>
</div>
</div>
</div>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body>
</html>

24
docs/tags/example-tag/index.xml Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Example Tag on Infusion</title>
<link>https://heydon.github.io/infusion/tags/example-tag/</link>
<description>Recent content in Example Tag on Infusion</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://heydon.github.io/infusion/tags/example-tag/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Library setup</title>
<link>https://heydon.github.io/infusion/patterns/library-setup/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<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.
&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>
</channel>
</rss>

18
docs/tags/index.xml
View File

@ -10,5 +10,23 @@
<atom:link href="https://heydon.github.io/infusion/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" />
<item>
<title>Example Tag</title>
<link>https://heydon.github.io/infusion/tags/example-tag/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/tags/example-tag/</guid>
<description></description>
</item>
<item>
<title>Quickstart</title>
<link>https://heydon.github.io/infusion/tags/quickstart/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/tags/quickstart/</guid>
<description></description>
</item>
</channel> </channel>
</rss> </rss>

220
docs/tags/quickstart/index.html Normal file
View File

@ -0,0 +1,220 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/tags/quickstart/">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title>
Quickstart | Infusion
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
</g>
</symbol>
<symbol id="w3c">
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
</symbol>
<symbol id="tag">
<g transform="translate(0 -875.2)">
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
</g>
</symbol>
<symbol id="balloon">
<g transform="translate(0 -875.2)">
<g>
<path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
<path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
<path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
<path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
<path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
<rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
</g>
</g>
</symbol>
</svg>
<div class="wrapper">
<header class="intro-and-nav" role="banner">
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div>
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">Menu</button>
<ul id="patterns-list">
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Installation</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Library setup</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Serving</span>
</a>
</li>
<li>
<h3>Writing</h3>
<ul>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Library structure</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Markdown &amp; metadata</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Including images</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Notes &amp; warnings</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">References</span>
</a>
</li>
</ul>
</li>
<li>
<h3>Coding</h3>
<ul>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<div class="main-and-footer">
<div>
<main id="main">
<h1>
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
<use xlink:href="#tag"></use>
</svg>
Quickstart
</h1>
<ul class="patterns-list">
<li>
<h2>
<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>
Library setup
</a>
</h2>
</li>
</ul>
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer>
</div>
</div>
</div>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body>
</html>

24
docs/tags/quickstart/index.xml Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Quickstart on Infusion</title>
<link>https://heydon.github.io/infusion/tags/quickstart/</link>
<description>Recent content in Quickstart on Infusion</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://heydon.github.io/infusion/tags/quickstart/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Library setup</title>
<link>https://heydon.github.io/infusion/patterns/library-setup/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<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.
&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>
</channel>
</rss>

10
themes/infusion/archetypes/patterns.md
View File

@ -1,4 +1,10 @@
+++ +++
title = "My First Documentation File" title = "My First Pattern File"
tags = ["example tag", "another example tag"] tags = ["example tag", "another tag"]
+++ +++
You can just write **markdown** here. But don't forget there are lots of shortcodes to help you with writing and showing off code too. See [the documentation for **Infusion**](https://heydon.github.io/infusion/) for full details.
{{% note %}}
Here's an example of a note shortcode, for adding little "oh and also" bits to your patterns' documentation.
{{% /note %}}

16
themes/infusion/layouts/patterns/single.html
View File

@ -6,12 +6,16 @@
<strong aria-hidden="true">Tags: </strong> <strong aria-hidden="true">Tags: </strong>
<ul aria-label="tags"> <ul aria-label="tags">
{{ range .Params.tags }} {{ range .Params.tags }}
<li> {{ if ne . "example tag"}}
<svg class="tag-icon" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535"> {{ if ne . "another tag"}}
<use xlink:href="#tag"></use> <li>
</svg> <svg class="tag-icon" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> <use xlink:href="#tag"></use>
</li> </svg>
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
</li>
{{ end }}
{{ end }}
{{ end }} {{ end }}
</ul> </ul>
</div> </div>

1
themes/infusion/theme.toml
View File

@ -1,4 +1,3 @@
name = "Infusion" name = "Infusion"
description = "" description = ""
homepage = "https://www.paciellogroup.com/" homepage = "https://www.paciellogroup.com/"