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.
+ 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.
@@ -344,7 +319,9 @@ toggle.addEventListener('click', (e) => {
-
+
+
+
Firefox does not currently support Shadow DOM and Infusion does not include a polyfill. Firefox will output an error message. These demos function correctly in Chrome, Safari, and Opera.
diff --git a/docs/patterns/index.html b/docs/patterns/index.html
index 7228aac..e71a77e 100644
--- a/docs/patterns/index.html
+++ b/docs/patterns/index.html
@@ -68,6 +68,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/patterns/installation/index.html b/docs/patterns/installation/index.html
index 937a5bd..c345fde 100644
--- a/docs/patterns/installation/index.html
+++ b/docs/patterns/installation/index.html
@@ -68,6 +68,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -251,7 +269,9 @@
-
+
+
+
If you do not have a version of the Github desktop client installed, follow the prompts after clicking Open in Desktop .
@@ -263,50 +283,7 @@
npm install
-Now it’s time to consult the
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Library setup
-
-
-
-
-
-
-
-
-
-
-
-
- pattern.
+Now it’s time to consult the Library setup pattern.
diff --git a/docs/patterns/library-setup/index.html b/docs/patterns/library-setup/index.html
index 7efac72..4796d47 100644
--- a/docs/patterns/library-setup/index.html
+++ b/docs/patterns/library-setup/index.html
@@ -68,6 +68,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -204,50 +222,7 @@
-
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.
+
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
@@ -255,7 +230,9 @@
-
+
+
+
If you are contributing to an existing Infusion library, do not run the following command. It will delete all of the patterns in that library. The clean
command is just for libraries that you are starting from scratch.
@@ -265,50 +242,7 @@
npm run clean
-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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-.
+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 .
The setup
command
@@ -345,93 +279,7 @@ theme = "infusion"
In the static
folder, you’ll find a logo.png
file. Replace this file with your own company or project logo. Currently, only the PNG format is supported.
-Now that your logo’s in place, everything should be ready. Where next? You can learn about
-
-
-
-
-
- Library structure
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- to help you get writing, or find out how to serve the library locally and on Github Pages in
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Serving
-
-
-
-
-.
+Now that your logo’s in place, everything should be ready. Where next? You can learn about Library structure to help you get writing, or find out how to serve the library locally and on Github Pages in Serving .
diff --git a/docs/patterns/serving/index.html b/docs/patterns/serving/index.html
index b7ecf25..2aca318 100644
--- a/docs/patterns/serving/index.html
+++ b/docs/patterns/serving/index.html
@@ -68,6 +68,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -223,53 +241,10 @@
This URL will be in the following format:
-
[your user name].github.io/[your library repo name]`
+[your user name].github.io/[your library repo name]
-You’ll also need to add it to your config.toml
file. See
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Library setup
-
-
-
-
-
-
-
-
-
-
-
-
- for more information.
+You’ll also need to add it to your config.toml
file. See Library setup for more information.
diff --git a/docs/patterns/writing/expandable-sections/index.html b/docs/patterns/writing/expandable-sections/index.html
index 99b8186..c6ce79a 100644
--- a/docs/patterns/writing/expandable-sections/index.html
+++ b/docs/patterns/writing/expandable-sections/index.html
@@ -68,6 +68,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -208,8 +226,8 @@
label — This is the label for the the section heading.
-level — This is the heading level (e.g. 2
or <h2>
) that will contain the label. If you omit a level parameter, no heading is used; it’s just a button
-open — Include this and give it a value of “true” or “yes” to make the section expanded on page load
+level — This is the heading level (e.g. level="2"
for a <h2>
) that will contain the label. If you omit a level parameter, no heading is used; it’s just a button.
+open — Include this and give it a value of “true” or “yes” to make the section expanded on page load.
Here’s what the code might look like for a simple expandable section containing markdown:
@@ -221,7 +239,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
-
Let’s look at what that outputs as:
+
Let’s look at what that outputs:
diff --git a/docs/patterns/writing/including-images/index.html b/docs/patterns/writing/including-images/index.html
index bde0643..dfac459 100644
--- a/docs/patterns/writing/including-images/index.html
+++ b/docs/patterns/writing/including-images/index.html
@@ -68,6 +68,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -215,7 +233,9 @@
-
+
+
+
When you first make a copy of Infusion , Infusion’s own logo will be included. You should replace this with your own company or project logo.
diff --git a/docs/patterns/writing/index.html b/docs/patterns/writing/index.html
index 461205f..f2da81a 100644
--- a/docs/patterns/writing/index.html
+++ b/docs/patterns/writing/index.html
@@ -68,6 +68,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/patterns/writing/index.xml b/docs/patterns/writing/index.xml
index 5c144d0..5044de4 100644
--- a/docs/patterns/writing/index.xml
+++ b/docs/patterns/writing/index.xml
@@ -48,7 +48,7 @@ The expandable shortcode takes three parameters:
https://heydon.github.io/infusion/patterns/writing/including-images/
From time to time, you’ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you’ll be mostly working in.
-├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion’s own logo will be included. You should replace this with your own company or project logo.
+├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion’s own logo will be included. You should replace this with your own company or project logo.
-
diff --git a/docs/patterns/writing/library-structure/index.html b/docs/patterns/writing/library-structure/index.html
index 5783034..fd1606c 100644
--- a/docs/patterns/writing/library-structure/index.html
+++ b/docs/patterns/writing/library-structure/index.html
@@ -68,6 +68,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -236,7 +254,9 @@
-
+
+
+
Note that subfolders like /popups
must each have an _index.md
file. This file doesn’t need any content except the TOML metadata defining the title (name) of that subsection:
+++
@@ -252,50 +272,7 @@ title = "Popups"
-Now that you know where to put everything, it’s time to talk about how to actually write individual patterns. Don’t worry, it’s pretty straightforward. Turn to
-
-
-
-
-
-
-
-
-
-
-
- Markdown & metadata
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-.
+Now that you know where to put everything, it’s time to talk about how to actually write individual patterns. Don’t worry, it’s pretty straightforward. Turn to Markdown & metadata .
diff --git a/docs/patterns/writing/markdown-and-metadata/index.html b/docs/patterns/writing/markdown-and-metadata/index.html
index dea4c27..70b1e40 100644
--- a/docs/patterns/writing/markdown-and-metadata/index.html
+++ b/docs/patterns/writing/markdown-and-metadata/index.html
@@ -68,6 +68,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -242,7 +260,9 @@ weight = 1
-
+
+
+
The weight
parameter should be an integer, not a string, so don’t use scare quotes around the value!
diff --git a/docs/patterns/writing/notes-and-warnings/index.html b/docs/patterns/writing/notes-and-warnings/index.html
index 421a9db..e6d3a60 100644
--- a/docs/patterns/writing/notes-and-warnings/index.html
+++ b/docs/patterns/writing/notes-and-warnings/index.html
@@ -68,6 +68,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -221,7 +239,9 @@ This is a note! It's something the reader may like to know about but is suppleme
{{ if eq .Type "patterns" }}
-
+
{{ end }}
-
+