@@ -220,6 +220,10 @@
+
+
+
+
diff --git a/docs/index.xml b/docs/index.xml
index ab9d768..d2e8e4d 100644
--- a/docs/index.xml
+++ b/docs/index.xml
@@ -11,6 +11,18 @@
+
+ Code blocks
+ https://heydon.github.io/infusion/patterns/coding/code-blocks/
+ Mon, 01 Jan 0001 00:00:00 +0000
+
+ https://heydon.github.io/infusion/patterns/coding/code-blocks/
+ 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…
+```html <button aria-pressed="false"toggle me</button ``` … will result in this:
+<button aria-pressed="false">toggle me</button> 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.
+
+
Library structure
https://heydon.github.io/infusion/patterns/writing/library-structure/
@@ -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’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.
+
+ CodePen embedding
+ https://heydon.github.io/infusion/patterns/coding/codepen-embedding/
+ Mon, 01 Jan 0001 00:00:00 +0000
+
+ https://heydon.github.io/infusion/patterns/coding/codepen-embedding/
+ 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.
+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’s ID.
+{{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:
+
+
Markdown & metadata
https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/
@@ -31,6 +54,16 @@
If you’re not familiar with writing markdown, there are a number of tutorials available.
+
+ Writing inline demos
+ https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/
+ Mon, 01 Jan 0001 00:00:00 +0000
+
+ https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/
+ 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’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’t have to worry about broken styles and global JS.
+
+
Expandable sections
https://heydon.github.io/infusion/patterns/writing/expandable-sections/
@@ -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.
-
- Code blocks
- https://heydon.github.io/infusion/patterns/code/code-blocks/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/code/code-blocks/
- 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…
-```html <button aria-pressed="false"toggle me</button ``` … will result in this:
-<button aria-pressed="false">toggle me</button> 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.
-
-
-
- CodePen embedding
- https://heydon.github.io/infusion/patterns/code/codepen-embedding/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/code/codepen-embedding/
- 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.
-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’s ID.
-{{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:
-
-
Color palettes
- https://heydon.github.io/infusion/patterns/code/color-palettes/
+ https://heydon.github.io/infusion/patterns/coding/color-palettes/
Mon, 01 Jan 0001 00:00:00 +0000
- https://heydon.github.io/infusion/patterns/code/color-palettes/
+ https://heydon.github.io/infusion/patterns/coding/color-palettes/There’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.
{{% colors "#111111, #cccccc, #ffffff" %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:
@@ -137,15 +147,5 @@ I can reference the {{% pattern "Notes & warnings" %}} patt
npm run serve This will serve your working library from localhost:1313 (the exact URL will be determined by what’s in your baseURL and will be revealed to you by your terminal). Whenever you make changes to your library’s files, the site will automatically rebuild.
-
- Writing inline demos
- https://heydon.github.io/infusion/patterns/code/writing-inline-demos/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/code/writing-inline-demos/
- 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’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’t have to worry about broken styles and global JS.
-
-
\ No newline at end of file
diff --git a/docs/patterns/code/code-blocks/index.html b/docs/patterns/coding/code-blocks/index.html
similarity index 98%
rename from docs/patterns/code/code-blocks/index.html
rename to docs/patterns/coding/code-blocks/index.html
index 3b7de7e..fb637fc 100644
--- a/docs/patterns/code/code-blocks/index.html
+++ b/docs/patterns/coding/code-blocks/index.html
@@ -4,7 +4,7 @@
-
+
@@ -140,34 +140,34 @@
diff --git a/docs/patterns/code/index.xml b/docs/patterns/coding/index.xml
similarity index 76%
rename from docs/patterns/code/index.xml
rename to docs/patterns/coding/index.xml
index 0f16b19..911cf92 100644
--- a/docs/patterns/code/index.xml
+++ b/docs/patterns/coding/index.xml
@@ -1,21 +1,21 @@
- Exhibiting code on Infusion
- https://heydon.github.io/infusion/patterns/code/
- Recent content in Exhibiting code on Infusion
+ Coding on Infusion
+ https://heydon.github.io/infusion/patterns/coding/
+ Recent content in Coding on InfusionHugo -- gohugo.ioen-us
-
+ Code blocks
- https://heydon.github.io/infusion/patterns/code/code-blocks/
+ https://heydon.github.io/infusion/patterns/coding/code-blocks/
Mon, 01 Jan 0001 00:00:00 +0000
- https://heydon.github.io/infusion/patterns/code/code-blocks/
+ https://heydon.github.io/infusion/patterns/coding/code-blocks/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…
```html <button aria-pressed="false"toggle me</button ``` … will result in this:
@@ -24,34 +24,34 @@ So, this…
CodePen embedding
- https://heydon.github.io/infusion/patterns/code/codepen-embedding/
+ https://heydon.github.io/infusion/patterns/coding/codepen-embedding/
Mon, 01 Jan 0001 00:00:00 +0000
- https://heydon.github.io/infusion/patterns/code/codepen-embedding/
+ https://heydon.github.io/infusion/patterns/coding/codepen-embedding/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.
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’s ID.
{{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:
-
- Color palettes
- https://heydon.github.io/infusion/patterns/code/color-palettes/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/code/color-palettes/
- There’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.
-{{% colors "#111111, #cccccc, #ffffff" %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:
-
-
Writing inline demos
- https://heydon.github.io/infusion/patterns/code/writing-inline-demos/
+ https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/
Mon, 01 Jan 0001 00:00:00 +0000
- https://heydon.github.io/infusion/patterns/code/writing-inline-demos/
+ https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/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’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’t have to worry about broken styles and global JS.
+
+ Color palettes
+ https://heydon.github.io/infusion/patterns/coding/color-palettes/
+ Mon, 01 Jan 0001 00:00:00 +0000
+
+ https://heydon.github.io/infusion/patterns/coding/color-palettes/
+ There’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.
+{{% colors "#111111, #cccccc, #ffffff" %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:
+
+
\ No newline at end of file
diff --git a/docs/patterns/code/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html
similarity index 98%
rename from docs/patterns/code/writing-inline-demos/index.html
rename to docs/patterns/coding/writing-inline-demos/index.html
index 4d7cc85..93c2888 100644
--- a/docs/patterns/code/writing-inline-demos/index.html
+++ b/docs/patterns/coding/writing-inline-demos/index.html
@@ -4,7 +4,7 @@
-
+
@@ -140,34 +140,34 @@
By now, you should have followed the
@@ -207,6 +227,10 @@
+
+
+
+
@@ -251,6 +275,8 @@
This will leave your content folder with just an _index.md file and a patterns folder containing a single demonstration pattern file. Find out more about these in
+
+
Library structure
@@ -288,6 +314,8 @@
+
+
@@ -331,6 +359,8 @@ theme = "infusion"
Now that your logo’s in place, everything should be ready. Where next? You can learn about
+
+
Library structure
@@ -368,6 +398,8 @@ theme = "infusion"
+
+
@@ -406,10 +438,14 @@ theme = "infusion"
-
- Serving
+
+
+
+
+
+ Serving
diff --git a/docs/patterns/serving/index.html b/docs/patterns/serving/index.html
index 2243467..0f30665 100644
--- a/docs/patterns/serving/index.html
+++ b/docs/patterns/serving/index.html
@@ -140,34 +140,34 @@
Documentation for the Infusion pattern library builder. This documentation is constructed using the builder itself.
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/tags/example-tag/index.xml b/docs/tags/example-tag/index.xml
new file mode 100644
index 0000000..5531473
--- /dev/null
+++ b/docs/tags/example-tag/index.xml
@@ -0,0 +1,24 @@
+
+
+
+ Example Tag on Infusion
+ https://heydon.github.io/infusion/tags/example-tag/
+ Recent content in Example Tag on Infusion
+ Hugo -- gohugo.io
+ en-us
+
+
+
+
+
+ Library setup
+ https://heydon.github.io/infusion/patterns/library-setup/
+ Mon, 01 Jan 0001 00:00:00 +0000
+
+ https://heydon.github.io/infusion/patterns/library-setup/
+ 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.
+“Cleaning” 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.
+
+
+
+
\ No newline at end of file
diff --git a/docs/tags/index.xml b/docs/tags/index.xml
index 26b1293..67b0b21 100644
--- a/docs/tags/index.xml
+++ b/docs/tags/index.xml
@@ -10,5 +10,23 @@
+
+ Example Tag
+ https://heydon.github.io/infusion/tags/example-tag/
+ Mon, 01 Jan 0001 00:00:00 +0000
+
+ https://heydon.github.io/infusion/tags/example-tag/
+
+
+
+
+ Quickstart
+ https://heydon.github.io/infusion/tags/quickstart/
+ Mon, 01 Jan 0001 00:00:00 +0000
+
+ https://heydon.github.io/infusion/tags/quickstart/
+
+
+
\ No newline at end of file
diff --git a/docs/tags/quickstart/index.html b/docs/tags/quickstart/index.html
new file mode 100644
index 0000000..fb76251
--- /dev/null
+++ b/docs/tags/quickstart/index.html
@@ -0,0 +1,220 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Quickstart | Infusion
+
+
+
+
+ skip to content
+
+
+
Documentation for the Infusion pattern library builder. This documentation is constructed using the builder itself.
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/tags/quickstart/index.xml b/docs/tags/quickstart/index.xml
new file mode 100644
index 0000000..71fc0b8
--- /dev/null
+++ b/docs/tags/quickstart/index.xml
@@ -0,0 +1,24 @@
+
+
+
+ Quickstart on Infusion
+ https://heydon.github.io/infusion/tags/quickstart/
+ Recent content in Quickstart on Infusion
+ Hugo -- gohugo.io
+ en-us
+
+
+
+
+
+ Library setup
+ https://heydon.github.io/infusion/patterns/library-setup/
+ Mon, 01 Jan 0001 00:00:00 +0000
+
+ https://heydon.github.io/infusion/patterns/library-setup/
+ 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.
+“Cleaning” 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.
+
+
+
+
\ No newline at end of file
diff --git a/themes/infusion/archetypes/patterns.md b/themes/infusion/archetypes/patterns.md
index 2b3a5b3..5b4bc58 100644
--- a/themes/infusion/archetypes/patterns.md
+++ b/themes/infusion/archetypes/patterns.md
@@ -1,4 +1,10 @@
+++
-title = "My First Documentation File"
-tags = ["example tag", "another example tag"]
+title = "My First Pattern File"
+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 %}}
diff --git a/themes/infusion/layouts/patterns/single.html b/themes/infusion/layouts/patterns/single.html
index b4e5c1f..957c294 100644
--- a/themes/infusion/layouts/patterns/single.html
+++ b/themes/infusion/layouts/patterns/single.html
@@ -6,12 +6,16 @@
Tags: