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

rewording

This commit is contained in:
Heydon Pickering 2017-09-07 09:31:52 +01:00
parent ed547130f3
commit e3b7b70011
46 changed files with 258 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
content/patterns/installation.md
View File

@ -3,7 +3,7 @@ title = "Installation"
weight = 1
+++
**Infusion** is built using the static site engine, [Hugo](https://gohugo.io/), and NPM. The codebase is available to download on Github. Let's get set up step-by-step.
**Infusion** is built using the static site engine, [Hugo](https://gohugo.io/), and NPM. The codebase is available to download on Github. Let's get everything installed step-by-step.
## Install Hugo
@ -35,7 +35,7 @@ It is likely you already have Node and NPM installed on your system. If so, you
{{<cmd>}}git clone https://github.com/[your username]/infusion.git{{</cmd>}}
If the command line is not your thing, fork [github.com/ThePacielloGroup/infusion](https://github.com/ThePacielloGroup/infusion) and choose **Open in Desktop** from **Clone or download** (see figure 1, below).
If the command line is not your thing, use Github's web interface to fork [github.com/ThePacielloGroup/infusion](https://github.com/ThePacielloGroup/infusion) and choose **Open in Desktop** from **Clone or download** (see figure 1, below).
{{% figure caption="The Github web interface" %}}
![The open in desktop option, revealed when clicking clone or download](/images/open_in_desktop.png)
@ -49,4 +49,4 @@ Once you have your local copy of the files, move to the root of that folder and
{{<cmd>}}npm install{{</cmd>}}
Now it's time to consult the {{% pattern "Library setup" %}} pattern.
Now it's time to consult the {{% pattern "Setup" %}} pattern.

2
content/patterns/printing.md
View File

@ -10,5 +10,5 @@ https://yourName.github.io/your-library/print-version
```
{{% note %}}
Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, go ahead!
Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, you can!
{{% /note %}}

8
content/patterns/serving.md
View File

@ -5,15 +5,15 @@ weight = 3
## Serving locally
While you're creating content for your library, you'll probably want to see what the finished product looks like. Fortunately, **Infusion** is easy to serve locally using the `serve` command:
While you're creating content for your project, you'll probably want to see what the finished product looks like. Fortunately, **Infusion** is easy to serve locally using the `serve` command:
{{<cmd>}}npm run serve{{</cmd>}}
This will serve your working library from `localhost:1313`. Whenever you make changes to your library's files, the site will automatically rebuild. No need to refresh the web page!
This will serve your working project from `localhost:1313`. Whenever you make changes to your files, the site will automatically rebuild. No need to refresh the web page!
## Publishing on Github Pages
**Infusion** creates a `/docs` folder containing the latest version of your library whenever you do an `npm run build` or a `git commit`. So long as you forked the **Infusion** repository when making your own library (see {{% pattern "Library setup" %}}), whenever you push to master, you will also be updating the site found at your Github Pages URL.
**Infusion** creates a `/docs` folder containing the latest version of your site whenever you do an `npm run build` or a `git commit`. So long as you forked the **Infusion** repository when making your own version (see {{% pattern "Setup" %}}), whenever you push to master, you will also be updating the site found at your Github Pages URL.
This URL will be in the following format:
@ -28,7 +28,7 @@ baseURL = "https://thepaciellogroup.github.io/infusion/"
```
{{% note %}}
If you created a new library repo manually (without forking) you will find the `docs` folder is not automatically setup as the publishing source. This folder can be made the source for your Github Pages site by selecting it under **Settings → Github Pages → Source** in the web interface.
If you created a new repo' manually (without forking) you will find the `docs` folder is not automatically setup as the publishing source. This folder can be made the source for your Github Pages site by selecting it under **Settings → Github Pages → Source** in the web interface.
![The publishing source dropdown menu on Github](/images/serve_from_docs.png)
{{% /note %}}

24
content/patterns/library-setup.md → content/patterns/setup.md
View File

@ -1,5 +1,5 @@
+++
title = "Library setup"
title = "Setup"
weight = 2
+++
@ -7,7 +7,7 @@ By now, you should have followed the {{% pattern "Installation" %}} instructions
## "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. We want to delete that content and replace it with some starter content. There's a simple `clean` command for this.
Before you can start writing documentation, 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 the content you're reading right now. We want to delete that content and replace it with some starter content. There's a simple `clean` command for this.
{{% warning %}}
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.
@ -17,11 +17,11 @@ If you are contributing to an existing **Infusion** library, do not run the foll
npm run clean
{{</cmd>}}
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 {{% pattern "Library structure" %}}.
This will leave your `content` folder with just an `_index.md` file and a `patterns` folder containing a single demonstration pattern file. Individual content pages in **Infusion** are referred to as "patterns" — think pattern libraries). Find out more about these in {{% pattern "Project structure" %}}.
## The config file
You'll also want to name your library and configure one or two other things in the `config.toml` file that's found at the root of your project. Here's how that file looks:
You'll also want to name your project and configure one or two other things in the `config.toml` file that's found at the root of your project. Here's how that file looks:
{{<codeBlock lang="html" numbered="true">}}
languageCode = "en-us"
@ -30,23 +30,23 @@ baseURL = "https://thepaciellogroup.github.io/infusion/"
theme = "infusion"
[params]
description = "Documentation for the **Infusion** pattern library builder. This documentation is constructed using the builder itself."
description = "Documentation for the **Infusion** pattern documentation builder. This documentation is constructed using the builder itself."
codePenUser = "Heydon"
{{</codeBlock>}}
* **title** — This is the library's name, like "Megacorp 5000 Pattern Library". You don't have to include the term "pattern library" if you don't want to. For **Infusion's** own version of **Infusion**, the `title` is, naturally, _Infusion_ :-)
* **title** — This is the project's name, like "Megacorp 5000 Pattern Library". You don't have to include the term "documentation" if you don't want to. For **Infusion's** own version of **Infusion**, the `title` is, predictably, _Infusion_ :-)
* **baseURL** — This is the root of the live site. Typically you will publish the site to Github Pages, so this should be the base URL for your Github Pages site.
* **theme** — This is the theme the library is using. Don't change this from "infusion".
* **description** — This is a short description of the library and comes under the logo. You can include markdown syntax here, like _&#x002a;&#x002a;Infusion&#x002a;&#x002a;_ in the above example for making the name of the library bold.
* **description** — This is a short description of your documentation project and comes under the logo. You can include markdown syntax here, like _&#x002a;&#x002a;Infusion&#x002a;&#x002a;_ in the above example for making the name of the library bold.
* **codePenUser** — If you want to embed codePens in your pattern files, you need to supply a codePen username here.
## The Web App Manifest
**Infusion** libraries work as progressive web applications, meaning users can save them to their home screen and read them offline. The web app manifest, found at the root of the `static` folder defines names and icons for the app. You'll probably want to open `/static/manifest.json` and personalize the `name` and `short_name` values.
**Infusion** projects work as progressive web applications, meaning users can save them to their home screen and read them offline. The web app manifest, found at the root of the `static` folder, defines names and icons for the app. You'll probably want to open `/static/manifest.json` and personalize the `name` and `short_name` values.
```
{
"name": "Infusion Pattern Library Docs",
"name": "Infusion Documentation Builder",
"short_name": "Infusion Docs",
"icons": [
{...
@ -57,12 +57,12 @@ theme = "infusion"
{{% /figure %}}
{{% note %}}
The `short_name` value refers to the text that appears under the icon on your homescreen. As the name suggests, it should be as short as possible to fit well.
The `short_name` value refers to the text that appears under the icon on your homescreen. As the name suggests, it should be as short as possible to fit well (12 characters or fewer is ideal).
{{% /note %}}
## Including a logo
In the `images/static` folder, you'll find a `logo.svg` file. Replace this file with your own company or project logo. Currently, only the SVG is supported this easily because SVG the superior format for logotypes. However, if you must use a different format, you can open up the `themes/infusion/layouts/_default/baseof.html` file and edit the image reference:
In the `images/static` folder, you'll find a `logo.svg` file. Replace this file with your own company or project logo, under the same file name. Currently, only SVG is supported this easily because SVG is the superior format for logos. However, if you must use a different format, you can open up the `themes/infusion/layouts/_default/baseof.html` file and edit the image reference:
```html
<a class="logo" href="/" aria-label="{{ .Site.Title }} pattern library home page">
@ -70,4 +70,4 @@ In the `images/static` folder, you'll find a `logo.svg` file. Replace this file
</a>
```
Now that your logo's in place, everything should be ready. Where next? You can learn about {{% pattern "Library structure" %}} to help you get writing, or find out how to serve the library locally and on Github Pages in {{% pattern "Serving" %}}.
Now that your logo is in place, everything should be ready. Where next? You can learn about {{% pattern "Project structure" %}} to help you get writing, or find out how to serve the site locally and on Github Pages in {{% pattern "Serving" %}}.

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

@ -8,7 +8,7 @@ In some cases, where there is a lot of content, it's helpful to collapse certain
The `expandable` shortcode takes three parameters:
* **label** — This is the label for the the section heading.
* **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.
* **level** — This is the heading level (e.g. `level="2"` for an `<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:

2
content/patterns/writing/markdown-and-metadata.md
View File

@ -37,7 +37,7 @@ This will create links to pages listing content tagged with the same terms using
### Weight
By default, patterns are listed in alphabetical order. However, sometimes you might like to change the order around. This is possible by adding a `weight` parameter. To make my menu button pattern appear at the top of its subsection, I would give it a `weight` of `1`:
By default, patterns are listed alphabetically in the navigation. However, sometimes you might like to change the order around. This is possible by adding a `weight` parameter. To make my menu button pattern appear at the top of its subsection, I would give it a `weight` of `1`:
```
+++

6
content/patterns/writing/library-structure.md → content/patterns/writing/project-structure.md
View File

@ -1,5 +1,5 @@
+++
title = "Library structure"
title = "Project structure"
weight = 1
+++
@ -17,7 +17,7 @@ Before you can set about making documentation, you need to know where everything
* **/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 file for your home page.
* **print-version.md** — This is a placeholder for the single-page / print-friendly version of you library. Leave this file as it is.
* **/patterns** — This is the folder where individual content files are kept. **Infusion** refers to each individual documentation file/page as a "pattern".
* **/patterns** — This is the folder where individual content files are kept. **Infusion** refers to each individual documentation file/page as a "pattern".
## Subsections
@ -44,7 +44,7 @@ title = "Popups"
+++
```
The `/patterns` folder itself does not need indexing explicitly in this way.
For each subfolder you create, you must also create one of these `_index.md` files. The `/patterns` folder itself does not need indexing explicitly in this way.
**Infusion** does not currently support _sub_-subsections.
{{% /note %}}

4
content/patterns/writing/references.md
View File

@ -4,7 +4,7 @@ title = "References"
## Cross-references
**Infusion** identifies the main content files in your documentation as _patterns_, and they're kept in the **content → patterns** folder. It's easy to cross-reference patterns using the `pattern` shortcode. For example, I can reference the {{% pattern "Notes & warnings" %}} pattern. Here's what the markdown looks like, including the shortcode:
**Infusion** identifies the main content files in your documentation as _patterns_, and they're kept in the **content/ patterns** folder. It's easy to cross-reference patterns using the `pattern` shortcode. For example, I can reference the {{% pattern "Notes & warnings" %}} pattern. Here's what the markdown looks like, including the shortcode:
{{<codeBlock>}}
I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
@ -18,7 +18,7 @@ The title argument you supply to the shortcode must be exactly the same as the r
## WCAG References
[WCAG 2.0](https://www.w3.org/TR/WCAG/) is the _de facto_ standard for accessible interfaces. When writing about inclusive design patterns, sometimes you'll want to refer to WCAG to highlight which success criteria the pattern meets.
[WCAG 2.0](https://www.w3.org/TR/WCAG/) is the _de facto_ standard for accessible interfaces. When writing about inclusive interfaces, sometimes you'll want to refer to WCAG to highlight which success criteria the pattern meets.
Instead of having to copy and paste content and links to WCAG, **Infusion** provides a shortcode mechanism that lets you simply list the success criteria by number:

2
content/patterns/writing/snippets.md
View File

@ -2,7 +2,7 @@
title = "Snippets"
+++
A lot of the time, your larger patterns will share some common techniques and utilities. For this reason, **Infusion** lets you save snippets of markdown in a **snippets** folder, alongside the main content folder.
A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, **Infusion** lets you save snippets of markdown in a **snippets** folder, alongside the main content folder.
The example `visually-hidden.md` snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it's nice to be able to just drop a snippet into your markdown content. The `snippet` shortcode lets you do exactly that:

4
content/patterns/writing/tables-of-contents.md
View File

@ -2,7 +2,7 @@
title = "Tables of contents"
+++
Pattern pages in **Infusion** that have two or more subheadings — `<h2>`s — automatically get a **table of contents**: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the "Table of contents" label and uses an ordered list. The table of contents markup for the {{% pattern "Library setup" %}} page looks something like this:
Pattern pages in **Infusion** that have two or more subheadings (`<h2>`s) automatically get a **table of contents**: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the "Table of contents" label and uses an ordered list. The table of contents markup for the {{% pattern "Setup" %}} page looks something like this:
```html
<nav class="toc" aria-labelledby="toc-heading">
@ -24,7 +24,7 @@ Pattern pages in **Infusion** that have two or more subheadings — `<h2>`s —
</nav>
```
Tables of contents are a neat way to break down the content of the page and give users a navigable overview. However, they may not be to your taste. Never fear, you can turn tables of contents off by adding `toc = false` to the TOML metadata for your pattern:
Tables of content are a neat way to break down the content of the page and give users a navigable overview. However, they may not be to your taste. Never fear, you can turn tables of content off by adding `toc = false` to the TOML metadata for your pattern:
```
+++

8
docs/404.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

8
docs/index.html
View File

@ -173,11 +173,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -223,11 +223,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

32
docs/index.xml
View File

@ -29,18 +29,18 @@ So, this&amp;hellip;
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/installation/</guid>
<description>Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let&amp;rsquo;s get set up step-by-step.
<description>Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let&amp;rsquo;s get everything installed step-by-step.
Install Hugo First you need to install Hugo globally.
OSX users If you are a Mac user and have Homebrew on your system, installing Hugo is simple:
brew install hugo Alternatively, you can manually install Hugo from a package. You can verify the installation was successful by typing:</description>
</item>
<item>
<title>Library structure</title>
<link>https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/</link>
<title>Project structure</title>
<link>https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/</guid>
<guid>https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/</guid>
<description>Before you can set about making documentation, you need to know where everything goes. The simplest folder structure looks like this:
content _index.md print-version.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 file for your home page. print-version.md — This is a placeholder for the single-page / print-friendly version of you library.</description>
</item>
@ -57,13 +57,13 @@ CodePen Infusion offers a couple of ways to do this. The first is by embedding C
</item>
<item>
<title>Library setup</title>
<link>https://thepaciellogroup.github.io/infusion/patterns/library-setup/</link>
<title>Setup</title>
<link>https://thepaciellogroup.github.io/infusion/patterns/setup/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/library-setup/</guid>
<guid>https://thepaciellogroup.github.io/infusion/patterns/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>
&amp;ldquo;Cleaning&amp;rdquo; the content folder Before you can start writing documentation, 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 the content you&amp;rsquo;re reading right now.</description>
</item>
<item>
@ -82,9 +82,9 @@ If you&amp;rsquo;re not familiar with writing markdown, there are a number of tu
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/serving/</guid>
<description>Serving locally While you&amp;rsquo;re creating content for your library, you&amp;rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command:
npm run serve This will serve your working library from localhost:1313. Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild. No need to refresh the web page!
Publishing on Github Pages Infusion creates a /docs folder containing the latest version of your library whenever you do an npm run build or a git commit.</description>
<description>Serving locally While you&amp;rsquo;re creating content for your project, you&amp;rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command:
npm run serve This will serve your working project from localhost:1313. Whenever you make changes to your files, the site will automatically rebuild. No need to refresh the web page!
Publishing on Github Pages Infusion creates a /docs folder containing the latest version of your site whenever you do an npm run build or a git commit.</description>
</item>
<item>
@ -104,7 +104,7 @@ Infusion offers another option: a special demo shortcode that allows you to writ
<guid>https://thepaciellogroup.github.io/infusion/patterns/printing/</guid>
<description>Infusion&amp;rsquo;s output site includes a one-page Print version of the generated library, available at /print-version. So, if your library base URL is https://yourName.github.io/your-library, you can print the whole library — to PDF if wanted — from the following address:
https://yourName.github.io/your-library/print-version Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, go ahead!
https://yourName.github.io/your-library/print-version Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, you can!
</description>
</item>
@ -219,7 +219,7 @@ Notes You may wish to pick out some content in your pattern&amp;rsquo;s document
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/writing/references/</guid>
<description>Cross-references Infusion identifies the main content files in your documentation as patterns, and they&amp;rsquo;re kept in the content → patterns folder. It&amp;rsquo;s easy to cross-reference patterns using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
<description>Cross-references Infusion identifies the main content files in your documentation as patterns, and they&amp;rsquo;re kept in the content/ patterns folder. It&amp;rsquo;s easy to cross-reference patterns using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
</item>
@ -229,7 +229,7 @@ I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} patt
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/</guid>
<description>A lot of the time, your larger patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.
<description>A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.
The example visually-hidden.md snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it&amp;rsquo;s nice to be able to just drop a snippet into your markdown content.</description>
</item>
@ -239,8 +239,8 @@ The example visually-hidden.md snippet describes the CSS needed to create conten
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/</guid>
<description>Pattern pages in Infusion that have two or more subheadings — &amp;lt;h2&amp;gt;s — automatically get a table of contents: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &amp;ldquo;Table of contents&amp;rdquo; label and uses an ordered list. The table of contents markup for the Library setup page looks something like this:
&amp;lt;nav class=&amp;quot;toc&amp;quot; aria-labelledby=&amp;quot;toc-heading&amp;quot;&amp;gt; &amp;lt;h2 id=&amp;quot;toc-heading&amp;quot;&amp;gt;Table of contents&amp;lt;/h2&amp;gt; &amp;lt;ol&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#cleaning-the-content-folder&amp;quot;&amp;gt;“Cleaning” the content folder&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-setup-command&amp;quot;&amp;gt;The setup command&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-config-file&amp;quot;&amp;gt;The config file&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#including-a-logo&amp;quot;&amp;gt;Including a logo&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ol&amp;gt; &amp;lt;/nav&amp;gt; Tables of contents are a neat way to break down the content of the page and give users a navigable overview.</description>
<description>Pattern pages in Infusion that have two or more subheadings (&amp;lt;h2&amp;gt;s) automatically get a table of contents: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &amp;ldquo;Table of contents&amp;rdquo; label and uses an ordered list. The table of contents markup for the Setup page looks something like this:
&amp;lt;nav class=&amp;quot;toc&amp;quot; aria-labelledby=&amp;quot;toc-heading&amp;quot;&amp;gt; &amp;lt;h2 id=&amp;quot;toc-heading&amp;quot;&amp;gt;Table of contents&amp;lt;/h2&amp;gt; &amp;lt;ol&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#cleaning-the-content-folder&amp;quot;&amp;gt;“Cleaning” the content folder&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-setup-command&amp;quot;&amp;gt;The setup command&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-config-file&amp;quot;&amp;gt;The config file&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#including-a-logo&amp;quot;&amp;gt;Including a logo&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ol&amp;gt; &amp;lt;/nav&amp;gt; Tables of content are a neat way to break down the content of the page and give users a navigable overview.</description>
</item>
<item>

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

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

8
docs/patterns/coding/color-palettes/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

8
docs/patterns/coding/command-line/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

8
docs/patterns/coding/demo-embedding/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

8
docs/patterns/coding/file-trees/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

8
docs/patterns/coding/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

8
docs/patterns/coding/tested/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

8
docs/patterns/coding/writing-inline-demos/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

8
docs/patterns/help/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

12
docs/patterns/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>
@ -409,11 +409,11 @@
<li>
<h2>
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/">
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Library setup
Setup
</a>
</h2>
</li>

18
docs/patterns/index.xml
View File

@ -16,20 +16,20 @@
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/installation/</guid>
<description>Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let&amp;rsquo;s get set up step-by-step.
<description>Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let&amp;rsquo;s get everything installed step-by-step.
Install Hugo First you need to install Hugo globally.
OSX users If you are a Mac user and have Homebrew on your system, installing Hugo is simple:
brew install hugo Alternatively, you can manually install Hugo from a package. You can verify the installation was successful by typing:</description>
</item>
<item>
<title>Library setup</title>
<link>https://thepaciellogroup.github.io/infusion/patterns/library-setup/</link>
<title>Setup</title>
<link>https://thepaciellogroup.github.io/infusion/patterns/setup/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/library-setup/</guid>
<guid>https://thepaciellogroup.github.io/infusion/patterns/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>
&amp;ldquo;Cleaning&amp;rdquo; the content folder Before you can start writing documentation, 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 the content you&amp;rsquo;re reading right now.</description>
</item>
<item>
@ -38,9 +38,9 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/serving/</guid>
<description>Serving locally While you&amp;rsquo;re creating content for your library, you&amp;rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command:
npm run serve This will serve your working library from localhost:1313. Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild. No need to refresh the web page!
Publishing on Github Pages Infusion creates a /docs folder containing the latest version of your library whenever you do an npm run build or a git commit.</description>
<description>Serving locally While you&amp;rsquo;re creating content for your project, you&amp;rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command:
npm run serve This will serve your working project from localhost:1313. Whenever you make changes to your files, the site will automatically rebuild. No need to refresh the web page!
Publishing on Github Pages Infusion creates a /docs folder containing the latest version of your site whenever you do an npm run build or a git commit.</description>
</item>
<item>
@ -50,7 +50,7 @@ Publishing on Github Pages Infusion creates a /docs folder containing the latest
<guid>https://thepaciellogroup.github.io/infusion/patterns/printing/</guid>
<description>Infusion&amp;rsquo;s output site includes a one-page Print version of the generated library, available at /print-version. So, if your library base URL is https://yourName.github.io/your-library, you can print the whole library — to PDF if wanted — from the following address:
https://yourName.github.io/your-library/print-version Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, go ahead!
https://yourName.github.io/your-library/print-version Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, you can!
</description>
</item>

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

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>
@ -429,7 +429,7 @@
<p><strong>Infusion</strong> is built using the static site engine, <a href="https://gohugo.io/">Hugo</a>, and NPM. The codebase is available to download on Github. Let&rsquo;s get set up step-by-step.</p>
<p><strong>Infusion</strong> is built using the static site engine, <a href="https://gohugo.io/">Hugo</a>, and NPM. The codebase is available to download on Github. Let&rsquo;s get everything installed step-by-step.</p>
<h2 id="install-hugo">Install Hugo</h2>
@ -464,7 +464,7 @@
<pre class="cmd"><code>git clone https://github.com/[your username]/infusion.git</code></pre>
<p>If the command line is not your thing, fork <a href="https://github.com/ThePacielloGroup/infusion">github.com/ThePacielloGroup/infusion</a> and choose <strong>Open in Desktop</strong> from <strong>Clone or download</strong> (see figure 1, below).</p>
<p>If the command line is not your thing, use Github&rsquo;s web interface to fork <a href="https://github.com/ThePacielloGroup/infusion">github.com/ThePacielloGroup/infusion</a> and choose <strong>Open in Desktop</strong> from <strong>Clone or download</strong> (see figure 1, below).</p>
<figure role="group" aria-describedby="caption-4f6ff97ad7397f1735a833534d0e2e4d">
@ -492,7 +492,7 @@
<pre class="cmd"><code>npm install</code></pre>
<p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> pattern.</p>
<p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Setup</a> pattern.</p>
</main>

8
docs/patterns/media/including-images/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

8
docs/patterns/media/including-videos/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

8
docs/patterns/media/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

10
docs/patterns/printing/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>
@ -412,7 +412,7 @@
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, go ahead!</p>
<p>Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, you can!</p>
</div>
</aside>

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

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>
@ -425,16 +425,16 @@
<h2 id="serving-locally">Serving locally</h2>
<p>While you&rsquo;re creating content for your library, you&rsquo;ll probably want to see what the finished product looks like. Fortunately, <strong>Infusion</strong> is easy to serve locally using the <code>serve</code> command:</p>
<p>While you&rsquo;re creating content for your project, you&rsquo;ll probably want to see what the finished product looks like. Fortunately, <strong>Infusion</strong> is easy to serve locally using the <code>serve</code> command:</p>
<pre class="cmd"><code>npm run serve</code></pre>
<p>This will serve your working library from <code>localhost:1313</code>. Whenever you make changes to your library&rsquo;s files, the site will automatically rebuild. No need to refresh the web page!</p>
<p>This will serve your working project from <code>localhost:1313</code>. Whenever you make changes to your files, the site will automatically rebuild. No need to refresh the web page!</p>
<h2 id="publishing-on-github-pages">Publishing on Github Pages</h2>
<p><strong>Infusion</strong> creates a <code>/docs</code> folder containing the latest version of your library whenever you do an <code>npm run build</code> or a <code>git commit</code>. So long as you forked the <strong>Infusion</strong> repository when making your own library (see <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a>), whenever you push to master, you will also be updating the site found at your Github Pages URL.</p>
<p><strong>Infusion</strong> creates a <code>/docs</code> folder containing the latest version of your site whenever you do an <code>npm run build</code> or a <code>git commit</code>. So long as you forked the <strong>Infusion</strong> repository when making your own version (see <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Setup</a>), whenever you push to master, you will also be updating the site found at your Github Pages URL.</p>
<p>This URL will be in the following format:</p>
@ -451,7 +451,7 @@
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>If you created a new library repo manually (without forking) you will find the <code>docs</code> folder is not automatically setup as the publishing source. This folder can be made the source for your Github Pages site by selecting it under <strong>Settings → Github Pages → Source</strong> in the web interface.</p>
<p>If you created a new repo&rsquo; manually (without forking) you will find the <code>docs</code> folder is not automatically setup as the publishing source. This folder can be made the source for your Github Pages site by selecting it under <strong>Settings → Github Pages → Source</strong> in the web interface.</p>
<p><img src="https://thepaciellogroup.github.io/infusion/images/serve_from_docs.png" alt="The publishing source dropdown menu on Github" /></p>

36
docs/patterns/library-setup/index.html → docs/patterns/setup/index.html
View File

@ -4,7 +4,7 @@
<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://thepaciellogroup.github.io/infusion/patterns/library-setup/">
<link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/setup/">
<link rel="apple-touch-icon" sizes="57x57" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
@ -31,7 +31,7 @@
</style>
<title>
Library setup | Infusion
Setup | Infusion
</title>
@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" aria-current="page">
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>
@ -394,7 +394,7 @@
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Library setup
Setup
</h1>
@ -439,7 +439,7 @@
<h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2>
<p>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 <strong>Infusion</strong> is a facsimile of the original, containing all this documentation content. We want to delete that content and replace it with some starter content. There&rsquo;s a simple <code>clean</code> command for this.</p>
<p>Before you can start writing documentation, there are a few things still to do in order to get set up. At the moment, your version of <strong>Infusion</strong> is a facsimile of the original, containing all the content you&rsquo;re reading right now. We want to delete that content and replace it with some starter content. There&rsquo;s a simple <code>clean</code> command for this.</p>
<aside aria-label="warning" class="note warning">
<div>
@ -455,11 +455,11 @@
<pre class="cmd"><code> npm run clean</code></pre>
<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://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library structure</a>.</p>
<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. Individual content pages in <strong>Infusion</strong> are referred to as &ldquo;patterns&rdquo; — think pattern libraries). Find out more about these in <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Project structure</a>.</p>
<h2 id="the-config-file">The config file</h2>
<p>You&rsquo;ll also want to name your library and configure one or two other things in the <code>config.toml</code> file that&rsquo;s found at the root of your project. Here&rsquo;s how that file looks:</p>
<p>You&rsquo;ll also want to name your project and configure one or two other things in the <code>config.toml</code> file that&rsquo;s found at the root of your project. Here&rsquo;s how that file looks:</p>
<pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
languageCode = "en-us"
@ -468,25 +468,25 @@ baseURL = "https://thepaciellogroup.github.io/infusion/"
theme = "infusion"
[params]
description = "Documentation for the **Infusion** pattern library builder. This documentation is constructed using the builder itself."
description = "Documentation for the **Infusion** pattern documentation builder. This documentation is constructed using the builder itself."
codePenUser = "Heydon"
</code></pre>
<ul>
<li><strong>title</strong> — This is the library&rsquo;s name, like &ldquo;Megacorp 5000 Pattern Library&rdquo;. You don&rsquo;t have to include the term &ldquo;pattern library&rdquo; if you don&rsquo;t want to. For <strong>Infusion&rsquo;s</strong> own version of <strong>Infusion</strong>, the <code>title</code> is, naturally, <em>Infusion</em> :-)</li>
<li><strong>title</strong> — This is the project&rsquo;s name, like &ldquo;Megacorp 5000 Pattern Library&rdquo;. You don&rsquo;t have to include the term &ldquo;documentation&rdquo; if you don&rsquo;t want to. For <strong>Infusion&rsquo;s</strong> own version of <strong>Infusion</strong>, the <code>title</code> is, predictably, <em>Infusion</em> :-)</li>
<li><strong>baseURL</strong> — This is the root of the live site. Typically you will publish the site to Github Pages, so this should be the base URL for your Github Pages site.</li>
<li><strong>theme</strong> — This is the theme the library is using. Don&rsquo;t change this from &ldquo;infusion&rdquo;.</li>
<li><strong>description</strong> — This is a short description of the library and comes under the logo. You can include markdown syntax here, like <em>&#x002a;&#x002a;Infusion&#x002a;&#x002a;</em> in the above example for making the name of the library bold.</li>
<li><strong>description</strong> — This is a short description of your documentation project and comes under the logo. You can include markdown syntax here, like <em>&#x002a;&#x002a;Infusion&#x002a;&#x002a;</em> in the above example for making the name of the library bold.</li>
<li><strong>codePenUser</strong> — If you want to embed codePens in your pattern files, you need to supply a codePen username here.</li>
</ul>
<h2 id="the-web-app-manifest">The Web App Manifest</h2>
<p><strong>Infusion</strong> libraries work as progressive web applications, meaning users can save them to their home screen and read them offline. The web app manifest, found at the root of the <code>static</code> folder defines names and icons for the app. You&rsquo;ll probably want to open <code>/static/manifest.json</code> and personalize the <code>name</code> and <code>short_name</code> values.</p>
<p><strong>Infusion</strong> projects work as progressive web applications, meaning users can save them to their home screen and read them offline. The web app manifest, found at the root of the <code>static</code> folder, defines names and icons for the app. You&rsquo;ll probably want to open <code>/static/manifest.json</code> and personalize the <code>name</code> and <code>short_name</code> values.</p>
<pre><code>{
&quot;name&quot;: &quot;Infusion Pattern Library Docs&quot;,
&quot;name&quot;: &quot;Infusion Documentation Builder&quot;,
&quot;short_name&quot;: &quot;Infusion Docs&quot;,
&quot;icons&quot;: [
{...
@ -507,7 +507,7 @@ theme = "infusion"
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>The <code>short_name</code> value refers to the text that appears under the icon on your homescreen. As the name suggests, it should be as short as possible to fit well.</p>
<p>The <code>short_name</code> value refers to the text that appears under the icon on your homescreen. As the name suggests, it should be as short as possible to fit well (12 characters or fewer is ideal).</p>
</div>
</aside>
@ -515,14 +515,14 @@ theme = "infusion"
<h2 id="including-a-logo">Including a logo</h2>
<p>In the <code>images/static</code> folder, you&rsquo;ll find a <code>logo.svg</code> file. Replace this file with your own company or project logo. Currently, only the SVG is supported this easily because SVG the superior format for logotypes. However, if you must use a different format, you can open up the <code>themes/infusion/layouts/_default/baseof.html</code> file and edit the image reference:</p>
<p>In the <code>images/static</code> folder, you&rsquo;ll find a <code>logo.svg</code> file. Replace this file with your own company or project logo, under the same file name. Currently, only SVG is supported this easily because SVG is the superior format for logos. However, if you must use a different format, you can open up the <code>themes/infusion/layouts/_default/baseof.html</code> file and edit the image reference:</p>
<pre><code class="language-html">&lt;a class=&quot;logo&quot; href=&quot;/&quot; aria-label=&quot;{{ .Site.Title }} pattern library home page&quot;&gt;
&lt;img src=&quot;{{ &quot;images/logo.svg&quot; | absURL }}&quot; alt=&quot;&quot;&gt;
&lt;/a&gt;
</code></pre>
<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://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Serving</a>.</p>
<p>Now that your logo is in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Project structure</a> to help you get writing, or find out how to serve the site locally and on Github Pages in <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Serving</a>.</p>
</main>

8
docs/patterns/updating/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

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

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>
@ -408,7 +408,7 @@
<ul>
<li><strong>label</strong> — This is the label for the the section heading.</li>
<li><strong>level</strong> — This is the heading level (e.g. <code>level=&quot;2&quot;</code> for a <code>&lt;h2&gt;</code>) that will contain the label. If you omit a level parameter, no heading is used; it&rsquo;s just a button.</li>
<li><strong>level</strong> — This is the heading level (e.g. <code>level=&quot;2&quot;</code> for an <code>&lt;h2&gt;</code>) that will contain the label. If you omit a level parameter, no heading is used; it&rsquo;s just a button.</li>
<li><strong>open</strong> — Include this and give it a value of &ldquo;true&rdquo; or &ldquo;yes&rdquo; to make the section expanded on page load.</li>
</ul>

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

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>
@ -397,11 +397,11 @@
<li>
<h2>
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Library structure
Project structure
</a>
</h2>
</li>

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

@ -11,11 +11,11 @@
<item>
<title>Library structure</title>
<link>https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/</link>
<title>Project structure</title>
<link>https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/</guid>
<guid>https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/</guid>
<description>Before you can set about making documentation, you need to know where everything goes. The simplest folder structure looks like this:
content _index.md print-version.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 file for your home page. print-version.md — This is a placeholder for the single-page / print-friendly version of you library.</description>
</item>
@ -57,7 +57,7 @@ Notes You may wish to pick out some content in your pattern&amp;rsquo;s document
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/writing/references/</guid>
<description>Cross-references Infusion identifies the main content files in your documentation as patterns, and they&amp;rsquo;re kept in the content → patterns folder. It&amp;rsquo;s easy to cross-reference patterns using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
<description>Cross-references Infusion identifies the main content files in your documentation as patterns, and they&amp;rsquo;re kept in the content/ patterns folder. It&amp;rsquo;s easy to cross-reference patterns using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
</item>
@ -67,7 +67,7 @@ I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} patt
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/</guid>
<description>A lot of the time, your larger patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.
<description>A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.
The example visually-hidden.md snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it&amp;rsquo;s nice to be able to just drop a snippet into your markdown content.</description>
</item>
@ -77,8 +77,8 @@ The example visually-hidden.md snippet describes the CSS needed to create conten
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/</guid>
<description>Pattern pages in Infusion that have two or more subheadings — &amp;lt;h2&amp;gt;s — automatically get a table of contents: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &amp;ldquo;Table of contents&amp;rdquo; label and uses an ordered list. The table of contents markup for the Library setup page looks something like this:
&amp;lt;nav class=&amp;quot;toc&amp;quot; aria-labelledby=&amp;quot;toc-heading&amp;quot;&amp;gt; &amp;lt;h2 id=&amp;quot;toc-heading&amp;quot;&amp;gt;Table of contents&amp;lt;/h2&amp;gt; &amp;lt;ol&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#cleaning-the-content-folder&amp;quot;&amp;gt;“Cleaning” the content folder&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-setup-command&amp;quot;&amp;gt;The setup command&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-config-file&amp;quot;&amp;gt;The config file&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#including-a-logo&amp;quot;&amp;gt;Including a logo&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ol&amp;gt; &amp;lt;/nav&amp;gt; Tables of contents are a neat way to break down the content of the page and give users a navigable overview.</description>
<description>Pattern pages in Infusion that have two or more subheadings (&amp;lt;h2&amp;gt;s) automatically get a table of contents: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &amp;ldquo;Table of contents&amp;rdquo; label and uses an ordered list. The table of contents markup for the Setup page looks something like this:
&amp;lt;nav class=&amp;quot;toc&amp;quot; aria-labelledby=&amp;quot;toc-heading&amp;quot;&amp;gt; &amp;lt;h2 id=&amp;quot;toc-heading&amp;quot;&amp;gt;Table of contents&amp;lt;/h2&amp;gt; &amp;lt;ol&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#cleaning-the-content-folder&amp;quot;&amp;gt;“Cleaning” the content folder&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-setup-command&amp;quot;&amp;gt;The setup command&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-config-file&amp;quot;&amp;gt;The config file&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#including-a-logo&amp;quot;&amp;gt;Including a logo&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ol&amp;gt; &amp;lt;/nav&amp;gt; Tables of content are a neat way to break down the content of the page and give users a navigable overview.</description>
</item>
</channel>

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

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>
@ -471,7 +471,7 @@ tags = [&quot;interactive&quot;, &quot;popup&quot;, &quot;javascript&quot;]
<h3 id="weight">Weight</h3>
<p>By default, patterns are listed in alphabetical order. However, sometimes you might like to change the order around. This is possible by adding a <code>weight</code> parameter. To make my menu button pattern appear at the top of its subsection, I would give it a <code>weight</code> of <code>1</code>:</p>
<p>By default, patterns are listed alphabetically in the navigation. However, sometimes you might like to change the order around. This is possible by adding a <code>weight</code> parameter. To make my menu button pattern appear at the top of its subsection, I would give it a <code>weight</code> of <code>1</code>:</p>
<pre><code>+++
title = &quot;Menu button&quot;

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

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

16
docs/patterns/writing/library-structure/index.html → docs/patterns/writing/project-structure/index.html
View File

@ -4,7 +4,7 @@
<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://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/">
<link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/">
<link rel="apple-touch-icon" sizes="57x57" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
@ -31,7 +31,7 @@
</style>
<title>
Library structure | Infusion
Project structure | Infusion
</title>
@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" aria-current="page">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>
@ -394,7 +394,7 @@
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Library structure
Project structure
</h1>
@ -473,7 +473,7 @@ title = &quot;Popups&quot;
+++
</code></pre>
<p>The <code>/patterns</code> folder itself does not need indexing explicitly in this way.</p>
<p>For each subfolder you create, you must also create one of these <code>_index.md</code> files. The <code>/patterns</code> folder itself does not need indexing explicitly in this way.</p>
<p><strong>Infusion</strong> does not currently support <em>sub</em>-subsections.</p>

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

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>
@ -431,7 +431,7 @@
<h2 id="cross-references">Cross-references</h2>
<p><strong>Infusion</strong> identifies the main content files in your documentation as <em>patterns</em>, and they&rsquo;re kept in the <strong>content → patterns</strong> folder. It&rsquo;s easy to cross-reference patterns using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
<p><strong>Infusion</strong> identifies the main content files in your documentation as <em>patterns</em>, and they&rsquo;re kept in the <strong>content/ patterns</strong> folder. It&rsquo;s easy to cross-reference patterns using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
<pre class=" "><code data-codeblock-shortcode>
I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
@ -453,7 +453,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<h2 id="wcag-references">WCAG References</h2>
<p><a href="https://www.w3.org/TR/WCAG/">WCAG 2.0</a> is the <em>de facto</em> standard for accessible interfaces. When writing about inclusive design patterns, sometimes you&rsquo;ll want to refer to WCAG to highlight which success criteria the pattern meets.</p>
<p><a href="https://www.w3.org/TR/WCAG/">WCAG 2.0</a> is the <em>de facto</em> standard for accessible interfaces. When writing about inclusive interfaces, sometimes you&rsquo;ll want to refer to WCAG to highlight which success criteria the pattern meets.</p>
<p>Instead of having to copy and paste content and links to WCAG, <strong>Infusion</strong> provides a shortcode mechanism that lets you simply list the success criteria by number:</p>

10
docs/patterns/writing/snippets/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>
@ -402,7 +402,7 @@
<p>A lot of the time, your larger patterns will share some common techniques and utilities. For this reason, <strong>Infusion</strong> lets you save snippets of markdown in a <strong>snippets</strong> folder, alongside the main content folder.</p>
<p>A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, <strong>Infusion</strong> lets you save snippets of markdown in a <strong>snippets</strong> folder, alongside the main content folder.</p>
<p>The example <code>visually-hidden.md</code> snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it&rsquo;s nice to be able to just drop a snippet into your markdown content. The <code>snippet</code> shortcode lets you do exactly that:</p>

12
docs/patterns/writing/tables-of-contents/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>
@ -402,7 +402,7 @@
<p>Pattern pages in <strong>Infusion</strong> that have two or more subheadings — <code>&lt;h2&gt;</code>s — automatically get a <strong>table of contents</strong>: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &ldquo;Table of contents&rdquo; label and uses an ordered list. The table of contents markup for the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> page looks something like this:</p>
<p>Pattern pages in <strong>Infusion</strong> that have two or more subheadings (<code>&lt;h2&gt;</code>s) automatically get a <strong>table of contents</strong>: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &ldquo;Table of contents&rdquo; label and uses an ordered list. The table of contents markup for the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Setup</a> page looks something like this:</p>
<pre><code class="language-html">&lt;nav class=&quot;toc&quot; aria-labelledby=&quot;toc-heading&quot;&gt;
&lt;h2 id=&quot;toc-heading&quot;&gt;Table of contents&lt;/h2&gt;
@ -423,7 +423,7 @@
&lt;/nav&gt;
</code></pre>
<p>Tables of contents are a neat way to break down the content of the page and give users a navigable overview. However, they may not be to your taste. Never fear, you can turn tables of contents off by adding <code>toc = false</code> to the TOML metadata for your pattern:</p>
<p>Tables of content are a neat way to break down the content of the page and give users a navigable overview. However, they may not be to your taste. Never fear, you can turn tables of content off by adding <code>toc = false</code> to the TOML metadata for your pattern:</p>
<pre><code>+++
title = &quot;My page with a few headings&quot;

70
docs/print-version/index.html
View File

@ -168,11 +168,11 @@
</li>
<li class="pattern">
<a href="#library-setup" >
<a href="#setup" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -218,11 +218,11 @@
<ul>
<li class="pattern">
<a href="#library-structure" >
<a href="#project-structure" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>
@ -393,7 +393,7 @@
</h1>
<p><strong>Infusion</strong> is built using the static site engine, <a href="https://gohugo.io/">Hugo</a>, and NPM. The codebase is available to download on Github. Let&rsquo;s get set up step-by-step.</p>
<p><strong>Infusion</strong> is built using the static site engine, <a href="https://gohugo.io/">Hugo</a>, and NPM. The codebase is available to download on Github. Let&rsquo;s get everything installed step-by-step.</p>
<h2 id="install-hugo">Install Hugo</h2>
@ -428,7 +428,7 @@
<pre class="cmd"><code>git clone https://github.com/[your username]/infusion.git</code></pre>
<p>If the command line is not your thing, fork <a href="https://github.com/ThePacielloGroup/infusion">github.com/ThePacielloGroup/infusion</a> and choose <strong>Open in Desktop</strong> from <strong>Clone or download</strong> (see figure 1, below).</p>
<p>If the command line is not your thing, use Github&rsquo;s web interface to fork <a href="https://github.com/ThePacielloGroup/infusion">github.com/ThePacielloGroup/infusion</a> and choose <strong>Open in Desktop</strong> from <strong>Clone or download</strong> (see figure 1, below).</p>
<figure role="group" aria-describedby="caption-4f6ff97ad7397f1735a833534d0e2e4d">
@ -456,16 +456,16 @@
<pre class="cmd"><code>npm install</code></pre>
<p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> pattern.</p>
<p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Setup</a> pattern.</p>
</div>
<div class="pattern-section">
<h1 id="library-setup" tabindex="-1">
<h1 id="setup" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Library setup
Setup
</h1>
@ -473,7 +473,7 @@
<h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2>
<p>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 <strong>Infusion</strong> is a facsimile of the original, containing all this documentation content. We want to delete that content and replace it with some starter content. There&rsquo;s a simple <code>clean</code> command for this.</p>
<p>Before you can start writing documentation, there are a few things still to do in order to get set up. At the moment, your version of <strong>Infusion</strong> is a facsimile of the original, containing all the content you&rsquo;re reading right now. We want to delete that content and replace it with some starter content. There&rsquo;s a simple <code>clean</code> command for this.</p>
<aside aria-label="warning" class="note warning">
<div>
@ -489,11 +489,11 @@
<pre class="cmd"><code> npm run clean</code></pre>
<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://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library structure</a>.</p>
<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. Individual content pages in <strong>Infusion</strong> are referred to as &ldquo;patterns&rdquo; — think pattern libraries). Find out more about these in <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Project structure</a>.</p>
<h2 id="the-config-file">The config file</h2>
<p>You&rsquo;ll also want to name your library and configure one or two other things in the <code>config.toml</code> file that&rsquo;s found at the root of your project. Here&rsquo;s how that file looks:</p>
<p>You&rsquo;ll also want to name your project and configure one or two other things in the <code>config.toml</code> file that&rsquo;s found at the root of your project. Here&rsquo;s how that file looks:</p>
<pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
languageCode = "en-us"
@ -502,25 +502,25 @@ baseURL = "https://thepaciellogroup.github.io/infusion/"
theme = "infusion"
[params]
description = "Documentation for the **Infusion** pattern library builder. This documentation is constructed using the builder itself."
description = "Documentation for the **Infusion** pattern documentation builder. This documentation is constructed using the builder itself."
codePenUser = "Heydon"
</code></pre>
<ul>
<li><strong>title</strong> — This is the library&rsquo;s name, like &ldquo;Megacorp 5000 Pattern Library&rdquo;. You don&rsquo;t have to include the term &ldquo;pattern library&rdquo; if you don&rsquo;t want to. For <strong>Infusion&rsquo;s</strong> own version of <strong>Infusion</strong>, the <code>title</code> is, naturally, <em>Infusion</em> :-)</li>
<li><strong>title</strong> — This is the project&rsquo;s name, like &ldquo;Megacorp 5000 Pattern Library&rdquo;. You don&rsquo;t have to include the term &ldquo;documentation&rdquo; if you don&rsquo;t want to. For <strong>Infusion&rsquo;s</strong> own version of <strong>Infusion</strong>, the <code>title</code> is, predictably, <em>Infusion</em> :-)</li>
<li><strong>baseURL</strong> — This is the root of the live site. Typically you will publish the site to Github Pages, so this should be the base URL for your Github Pages site.</li>
<li><strong>theme</strong> — This is the theme the library is using. Don&rsquo;t change this from &ldquo;infusion&rdquo;.</li>
<li><strong>description</strong> — This is a short description of the library and comes under the logo. You can include markdown syntax here, like <em>&#x002a;&#x002a;Infusion&#x002a;&#x002a;</em> in the above example for making the name of the library bold.</li>
<li><strong>description</strong> — This is a short description of your documentation project and comes under the logo. You can include markdown syntax here, like <em>&#x002a;&#x002a;Infusion&#x002a;&#x002a;</em> in the above example for making the name of the library bold.</li>
<li><strong>codePenUser</strong> — If you want to embed codePens in your pattern files, you need to supply a codePen username here.</li>
</ul>
<h2 id="the-web-app-manifest">The Web App Manifest</h2>
<p><strong>Infusion</strong> libraries work as progressive web applications, meaning users can save them to their home screen and read them offline. The web app manifest, found at the root of the <code>static</code> folder defines names and icons for the app. You&rsquo;ll probably want to open <code>/static/manifest.json</code> and personalize the <code>name</code> and <code>short_name</code> values.</p>
<p><strong>Infusion</strong> projects work as progressive web applications, meaning users can save them to their home screen and read them offline. The web app manifest, found at the root of the <code>static</code> folder, defines names and icons for the app. You&rsquo;ll probably want to open <code>/static/manifest.json</code> and personalize the <code>name</code> and <code>short_name</code> values.</p>
<pre><code>{
&quot;name&quot;: &quot;Infusion Pattern Library Docs&quot;,
&quot;name&quot;: &quot;Infusion Documentation Builder&quot;,
&quot;short_name&quot;: &quot;Infusion Docs&quot;,
&quot;icons&quot;: [
{...
@ -541,7 +541,7 @@ theme = "infusion"
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>The <code>short_name</code> value refers to the text that appears under the icon on your homescreen. As the name suggests, it should be as short as possible to fit well.</p>
<p>The <code>short_name</code> value refers to the text that appears under the icon on your homescreen. As the name suggests, it should be as short as possible to fit well (12 characters or fewer is ideal).</p>
</div>
</aside>
@ -549,14 +549,14 @@ theme = "infusion"
<h2 id="including-a-logo">Including a logo</h2>
<p>In the <code>images/static</code> folder, you&rsquo;ll find a <code>logo.svg</code> file. Replace this file with your own company or project logo. Currently, only the SVG is supported this easily because SVG the superior format for logotypes. However, if you must use a different format, you can open up the <code>themes/infusion/layouts/_default/baseof.html</code> file and edit the image reference:</p>
<p>In the <code>images/static</code> folder, you&rsquo;ll find a <code>logo.svg</code> file. Replace this file with your own company or project logo, under the same file name. Currently, only SVG is supported this easily because SVG is the superior format for logos. However, if you must use a different format, you can open up the <code>themes/infusion/layouts/_default/baseof.html</code> file and edit the image reference:</p>
<pre><code class="language-html">&lt;a class=&quot;logo&quot; href=&quot;/&quot; aria-label=&quot;{{ .Site.Title }} pattern library home page&quot;&gt;
&lt;img src=&quot;{{ &quot;images/logo.svg&quot; | absURL }}&quot; alt=&quot;&quot;&gt;
&lt;/a&gt;
</code></pre>
<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://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Serving</a>.</p>
<p>Now that your logo is in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Project structure</a> to help you get writing, or find out how to serve the site locally and on Github Pages in <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Serving</a>.</p>
</div>
@ -571,16 +571,16 @@ theme = "infusion"
<h2 id="serving-locally">Serving locally</h2>
<p>While you&rsquo;re creating content for your library, you&rsquo;ll probably want to see what the finished product looks like. Fortunately, <strong>Infusion</strong> is easy to serve locally using the <code>serve</code> command:</p>
<p>While you&rsquo;re creating content for your project, you&rsquo;ll probably want to see what the finished product looks like. Fortunately, <strong>Infusion</strong> is easy to serve locally using the <code>serve</code> command:</p>
<pre class="cmd"><code>npm run serve</code></pre>
<p>This will serve your working library from <code>localhost:1313</code>. Whenever you make changes to your library&rsquo;s files, the site will automatically rebuild. No need to refresh the web page!</p>
<p>This will serve your working project from <code>localhost:1313</code>. Whenever you make changes to your files, the site will automatically rebuild. No need to refresh the web page!</p>
<h2 id="publishing-on-github-pages">Publishing on Github Pages</h2>
<p><strong>Infusion</strong> creates a <code>/docs</code> folder containing the latest version of your library whenever you do an <code>npm run build</code> or a <code>git commit</code>. So long as you forked the <strong>Infusion</strong> repository when making your own library (see <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a>), whenever you push to master, you will also be updating the site found at your Github Pages URL.</p>
<p><strong>Infusion</strong> creates a <code>/docs</code> folder containing the latest version of your site whenever you do an <code>npm run build</code> or a <code>git commit</code>. So long as you forked the <strong>Infusion</strong> repository when making your own version (see <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Setup</a>), whenever you push to master, you will also be updating the site found at your Github Pages URL.</p>
<p>This URL will be in the following format:</p>
@ -597,7 +597,7 @@ theme = "infusion"
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>If you created a new library repo manually (without forking) you will find the <code>docs</code> folder is not automatically setup as the publishing source. This folder can be made the source for your Github Pages site by selecting it under <strong>Settings → Github Pages → Source</strong> in the web interface.</p>
<p>If you created a new repo&rsquo; manually (without forking) you will find the <code>docs</code> folder is not automatically setup as the publishing source. This folder can be made the source for your Github Pages site by selecting it under <strong>Settings → Github Pages → Source</strong> in the web interface.</p>
<p><img src="https://thepaciellogroup.github.io/infusion/images/serve_from_docs.png" alt="The publishing source dropdown menu on Github" /></p>
@ -624,7 +624,7 @@ theme = "infusion"
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, go ahead!</p>
<p>Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, you can!</p>
</div>
</aside>
@ -714,11 +714,11 @@ theme = "infusion"
<div class="pattern-section">
<h1 id="library-structure" tabindex="-1">
<h1 id="project-structure" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Library structure
Project structure
</h1>
@ -791,7 +791,7 @@ title = &quot;Popups&quot;
+++
</code></pre>
<p>The <code>/patterns</code> folder itself does not need indexing explicitly in this way.</p>
<p>For each subfolder you create, you must also create one of these <code>_index.md</code> files. The <code>/patterns</code> folder itself does not need indexing explicitly in this way.</p>
<p><strong>Infusion</strong> does not currently support <em>sub</em>-subsections.</p>
@ -850,7 +850,7 @@ tags = [&quot;interactive&quot;, &quot;popup&quot;, &quot;javascript&quot;]
<h3 id="weight">Weight</h3>
<p>By default, patterns are listed in alphabetical order. However, sometimes you might like to change the order around. This is possible by adding a <code>weight</code> parameter. To make my menu button pattern appear at the top of its subsection, I would give it a <code>weight</code> of <code>1</code>:</p>
<p>By default, patterns are listed alphabetically in the navigation. However, sometimes you might like to change the order around. This is possible by adding a <code>weight</code> parameter. To make my menu button pattern appear at the top of its subsection, I would give it a <code>weight</code> of <code>1</code>:</p>
<pre><code>+++
title = &quot;Menu button&quot;
@ -885,7 +885,7 @@ weight = 1
<ul>
<li><strong>label</strong> — This is the label for the the section heading.</li>
<li><strong>level</strong> — This is the heading level (e.g. <code>level=&quot;2&quot;</code> for a <code>&lt;h2&gt;</code>) that will contain the label. If you omit a level parameter, no heading is used; it&rsquo;s just a button.</li>
<li><strong>level</strong> — This is the heading level (e.g. <code>level=&quot;2&quot;</code> for an <code>&lt;h2&gt;</code>) that will contain the label. If you omit a level parameter, no heading is used; it&rsquo;s just a button.</li>
<li><strong>open</strong> — Include this and give it a value of &ldquo;true&rdquo; or &ldquo;yes&rdquo; to make the section expanded on page load.</li>
</ul>
@ -1065,7 +1065,7 @@ This is a warning! It's about something the reader should be careful to do or to
<h2 id="cross-references">Cross-references</h2>
<p><strong>Infusion</strong> identifies the main content files in your documentation as <em>patterns</em>, and they&rsquo;re kept in the <strong>content → patterns</strong> folder. It&rsquo;s easy to cross-reference patterns using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
<p><strong>Infusion</strong> identifies the main content files in your documentation as <em>patterns</em>, and they&rsquo;re kept in the <strong>content/ patterns</strong> folder. It&rsquo;s easy to cross-reference patterns using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
<pre class=" "><code data-codeblock-shortcode>
I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
@ -1087,7 +1087,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<h2 id="wcag-references">WCAG References</h2>
<p><a href="https://www.w3.org/TR/WCAG/">WCAG 2.0</a> is the <em>de facto</em> standard for accessible interfaces. When writing about inclusive design patterns, sometimes you&rsquo;ll want to refer to WCAG to highlight which success criteria the pattern meets.</p>
<p><a href="https://www.w3.org/TR/WCAG/">WCAG 2.0</a> is the <em>de facto</em> standard for accessible interfaces. When writing about inclusive interfaces, sometimes you&rsquo;ll want to refer to WCAG to highlight which success criteria the pattern meets.</p>
<p>Instead of having to copy and paste content and links to WCAG, <strong>Infusion</strong> provides a shortcode mechanism that lets you simply list the success criteria by number:</p>
@ -1501,7 +1501,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
</svg>
Snippets
</h1>
<p>A lot of the time, your larger patterns will share some common techniques and utilities. For this reason, <strong>Infusion</strong> lets you save snippets of markdown in a <strong>snippets</strong> folder, alongside the main content folder.</p>
<p>A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, <strong>Infusion</strong> lets you save snippets of markdown in a <strong>snippets</strong> folder, alongside the main content folder.</p>
<p>The example <code>visually-hidden.md</code> snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it&rsquo;s nice to be able to just drop a snippet into your markdown content. The <code>snippet</code> shortcode lets you do exactly that:</p>
@ -1530,7 +1530,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
</svg>
Tables of contents
</h1>
<p>Pattern pages in <strong>Infusion</strong> that have two or more subheadings — <code>&lt;h2&gt;</code>s — automatically get a <strong>table of contents</strong>: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &ldquo;Table of contents&rdquo; label and uses an ordered list. The table of contents markup for the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> page looks something like this:</p>
<p>Pattern pages in <strong>Infusion</strong> that have two or more subheadings (<code>&lt;h2&gt;</code>s) automatically get a <strong>table of contents</strong>: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &ldquo;Table of contents&rdquo; label and uses an ordered list. The table of contents markup for the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Setup</a> page looks something like this:</p>
<pre><code class="language-html">&lt;nav class=&quot;toc&quot; aria-labelledby=&quot;toc-heading&quot;&gt;
&lt;h2 id=&quot;toc-heading&quot;&gt;Table of contents&lt;/h2&gt;
@ -1551,7 +1551,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
&lt;/nav&gt;
</code></pre>
<p>Tables of contents are a neat way to break down the content of the page and give users a navigable overview. However, they may not be to your taste. Never fear, you can turn tables of contents off by adding <code>toc = false</code> to the TOML metadata for your pattern:</p>
<p>Tables of content are a neat way to break down the content of the page and give users a navigable overview. However, they may not be to your taste. Never fear, you can turn tables of content off by adding <code>toc = false</code> to the TOML metadata for your pattern:</p>
<pre><code>+++
title = &quot;My page with a few headings&quot;

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

6
docs/sitemap.xml
View File

@ -11,7 +11,7 @@
</url>
<url>
<loc>https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/</loc>
<loc>https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/</loc>
</url>
<url>
@ -23,11 +23,11 @@
</url>
<url>
<loc>https://thepaciellogroup.github.io/infusion/patterns/library-setup/</loc>
<loc>https://thepaciellogroup.github.io/infusion/patterns/media/</loc>
</url>
<url>
<loc>https://thepaciellogroup.github.io/infusion/patterns/media/</loc>
<loc>https://thepaciellogroup.github.io/infusion/patterns/setup/</loc>
</url>
<url>

8
docs/tags/markdown/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>

8
docs/tags/metadata/index.html
View File

@ -170,11 +170,11 @@
</li>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
<span class="text">Setup</span>
</a>
</li>
@ -220,11 +220,11 @@
<ul>
<li class="pattern">
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<a href="https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
<span class="text">Project structure</span>
</a>
</li>