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

paciello references

Browse Source
This commit is contained in:
Heydon Pickering 2017-08-07 22:20:49 +01:00
parent dc0717eaee
commit cd06389692
44 changed files with 1271 additions and 1270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -2,4 +2,5 @@
**Infusion** is a pattern library builder for inclusive designers. **Infusion** is a pattern library builder for inclusive designers.
[Documentation →](https://heydon.github.io/infusion) * [Documentation →](https://thepaciellogroup.github.io/infusion)
* [Contributing →](https://github.com/ThePacielloGroup/infusion/blob/master/CONTRIBUTING.md)

2
config.toml
View File

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

4
content/patterns/installation.md
View File

@ -31,11 +31,11 @@ It is likely you already have Node and NPM installed on your system. If so, you
## Get the files ## Get the files
**Infusion** is hosted on Github. To start using it, you'll need to get the files from there. If you are comfortable with the command line, just fork the [github.com/heydon/infusion](https://github.com/heydon/infusion) repository, then do a `git clone` to your local system. Replace `[your username]` in the following: **Infusion** is hosted on Github. To start using it, you'll need to get the files from there. If you are comfortable with the command line, just fork the [github.com/ThePacielloGroup/infusion](https://github.com/ThePacielloGroup/infusion) repository, then do a `git clone` to your local system. Replace `[your username]` in the following:
{{<cmd>}}git clone https://github.com/[your username]/infusion.git{{</cmd>}} {{<cmd>}}git clone https://github.com/[your username]/infusion.git{{</cmd>}}
If the command line is not your thing, fork [github.com/heydon/infusion](https://github.com/heydon/infusion) and choose **Open in Desktop** from **Clone or download** (see figure 1, below). 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).
{{% figure caption="The Github web interface" %}} {{% figure caption="The Github web interface" %}}
![The open in desktop option, revealed when clicking clone or download](/images/open_in_desktop.png) ![The open in desktop option, revealed when clicking clone or download](/images/open_in_desktop.png)

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

@ -26,7 +26,7 @@ You'll also want to name your library and configure one or two other things in t
{{<codeBlock lang="html" numbered="true">}} {{<codeBlock lang="html" numbered="true">}}
languageCode = "en-us" languageCode = "en-us"
title = "Infusion" title = "Infusion"
baseURL = "https://heydon.github.io/infusion/" baseURL = "https://thepaciellogroup.github.io/infusion/"
theme = "infusion" theme = "infusion"
[params] [params]

4
docs/categories/index.xml
View File

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

84
docs/index.html
View File

@ -5,26 +5,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Infusion Infusion
@ -118,13 +118,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -148,7 +148,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -157,7 +157,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -166,7 +166,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -175,7 +175,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -189,7 +189,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -198,7 +198,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -207,7 +207,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -216,7 +216,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -225,7 +225,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -234,7 +234,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -250,7 +250,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -259,7 +259,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -275,7 +275,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -284,7 +284,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -293,7 +293,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -302,7 +302,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -311,7 +311,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -320,7 +320,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -329,7 +329,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -367,7 +367,7 @@
</div> </div>
<p>To get started, take a look at <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Installation</a>.</p> <p>To get started, take a look at <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Installation</a>.</p>
</main> </main>
@ -378,10 +378,10 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
<script src="https://heydon.github.io/infusion/js/service-worker-registration.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/service-worker-registration.js"></script>
</body> </body>
</html> </html>

84
docs/index.xml
View File

@ -2,21 +2,21 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>The Infusion Pattern Library Builder on Infusion</title> <title>The Infusion Pattern Library Builder on Infusion</title>
<link>https://heydon.github.io/infusion/</link> <link>https://thepaciellogroup.github.io/infusion/</link>
<description>Recent content in The Infusion Pattern Library Builder on Infusion</description> <description>Recent content in The Infusion Pattern Library Builder on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<lastBuildDate>Mon, 26 Jun 2017 18:27:58 +0100</lastBuildDate> <lastBuildDate>Mon, 26 Jun 2017 18:27:58 +0100</lastBuildDate>
<atom:link href="https://heydon.github.io/infusion/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://thepaciellogroup.github.io/infusion/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Code blocks</title> <title>Code blocks</title>
<link>https://heydon.github.io/infusion/patterns/coding/code-blocks/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/code-blocks/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/</guid>
<description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block. <description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
So, this&amp;hellip; So, this&amp;hellip;
```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ``` &amp;hellip; will result in this: ```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ``` &amp;hellip; will result in this:
@ -25,10 +25,10 @@ So, this&amp;hellip;
<item> <item>
<title>Installation</title> <title>Installation</title>
<link>https://heydon.github.io/infusion/patterns/installation/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/installation/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/installation/</guid> <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 set up step-by-step.
Install Hugo First you need to install Hugo globally. 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: OSX users If you are a Mac user and have Homebrew on your system, installing Hugo is simple:
@ -37,20 +37,20 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
<item> <item>
<title>Library structure</title> <title>Library structure</title>
<link>https://heydon.github.io/infusion/patterns/writing/library-structure/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/library-structure/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/</guid>
<description>Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this: <description>Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this:
content _index.md 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> 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> </item>
<item> <item>
<title>Demo embedding</title> <title>Demo embedding</title>
<link>https://heydon.github.io/infusion/patterns/coding/demo-embedding/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/demo-embedding/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/</guid>
<description>Sometimes just pictures of the pattern you&amp;rsquo;re documenting aren&amp;rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality. <description>Sometimes just pictures of the pattern you&amp;rsquo;re documenting aren&amp;rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
CodePen Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID. CodePen Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
&amp;#x7b;{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description> &amp;#x7b;{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
@ -58,30 +58,30 @@ CodePen Infusion offers a couple of ways to do this. The first is by embedding C
<item> <item>
<title>Library setup</title> <title>Library setup</title>
<link>https://heydon.github.io/infusion/patterns/library-setup/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/library-setup/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/library-setup/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/library-setup/</guid>
<description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase. <description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
&amp;ldquo;Cleaning&amp;rdquo; the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.</description> &amp;ldquo;Cleaning&amp;rdquo; the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.</description>
</item> </item>
<item> <item>
<title>Markdown &amp; metadata</title> <title>Markdown &amp; metadata</title>
<link>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/</guid>
<description>In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&amp;rsquo;s recommended you use &amp;ldquo;kebab case&amp;rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &amp;ldquo;Menu button&amp;rdquo; should probably have the filename menu-button. Then you get a nice clean URL: username.github.io/your-library/patterns/menu-button. <description>In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&amp;rsquo;s recommended you use &amp;ldquo;kebab case&amp;rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &amp;ldquo;Menu button&amp;rdquo; should probably have the filename menu-button. Then you get a nice clean URL: username.github.io/your-library/patterns/menu-button.
If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description> If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
</item> </item>
<item> <item>
<title>Serving</title> <title>Serving</title>
<link>https://heydon.github.io/infusion/patterns/serving/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/serving/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/serving/</guid> <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: <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! 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> 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>
@ -89,20 +89,20 @@ Publishing on Github Pages Infusion creates a /docs folder containing the latest
<item> <item>
<title>Writing inline demos</title> <title>Writing inline demos</title>
<link>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/</guid>
<description>There are some issues with , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate. <description>There are some issues with , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description> Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
</item> </item>
<item> <item>
<title>Printing</title> <title>Printing</title>
<link>https://heydon.github.io/infusion/patterns/printing/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/printing/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/printing/</guid> <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: <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, go ahead!
</description> </description>
@ -110,10 +110,10 @@ https://yourName.github.io/your-library/print-version Print styles are also
<item> <item>
<title>Expandable sections</title> <title>Expandable sections</title>
<link>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/</guid>
<description>In some cases, where there is a lot of content, it&amp;rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&amp;rsquo;s in the content and can choose where to focus in. Infusion provides a shortcode method for creating expandable sections which generates accessible markup using aria-expanded. <description>In some cases, where there is a lot of content, it&amp;rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&amp;rsquo;s in the content and can choose where to focus in. Infusion provides a shortcode method for creating expandable sections which generates accessible markup using aria-expanded.
The expandable shortcode takes three parameters: The expandable shortcode takes three parameters:
label — This is the label for the the section heading. level — This is the heading level (e.</description> label — This is the label for the the section heading. level — This is the heading level (e.</description>
@ -121,29 +121,29 @@ The expandable shortcode takes three parameters:
<item> <item>
<title>Print version</title> <title>Print version</title>
<link>https://heydon.github.io/infusion/print-version/</link> <link>https://thepaciellogroup.github.io/infusion/print-version/</link>
<pubDate>Sat, 29 Jul 2017 22:48:43 +0100</pubDate> <pubDate>Sat, 29 Jul 2017 22:48:43 +0100</pubDate>
<guid>https://heydon.github.io/infusion/print-version/</guid> <guid>https://thepaciellogroup.github.io/infusion/print-version/</guid>
<description>You don&amp;rsquo;t want to edit this file :-)</description> <description>You don&amp;rsquo;t want to edit this file :-)</description>
</item> </item>
<item> <item>
<title>Color palettes</title> <title>Color palettes</title>
<link>https://heydon.github.io/infusion/patterns/coding/color-palettes/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/color-palettes/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/</guid>
<description>There&amp;rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values. <description>There&amp;rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
&amp;#x7b;{% colors &#34;#111111, #cccccc, #ffffff&#34; %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:</description> &amp;#x7b;{% colors &#34;#111111, #cccccc, #ffffff&#34; %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:</description>
</item> </item>
<item> <item>
<title>Command line</title> <title>Command line</title>
<link>https://heydon.github.io/infusion/patterns/coding/command-line/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/command-line/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/</guid>
<description>Your pattern documentation may need to include commands for installing packages or using CLIs. Infusion offers the cmd shortcode for making code blocks look like terminal commands. <description>Your pattern documentation may need to include commands for installing packages or using CLIs. Infusion offers the cmd shortcode for making code blocks look like terminal commands.
Here&amp;rsquo;s how you write it: Here&amp;rsquo;s how you write it:
&amp;#x7b;{&amp;lt;cmd}} npm run start &amp;#x7b;{&amp;lt;/cmd}} And here&amp;rsquo;s how it looks: &amp;#x7b;{&amp;lt;cmd}} npm run start &amp;#x7b;{&amp;lt;/cmd}} And here&amp;rsquo;s how it looks:
@ -153,10 +153,10 @@ npm run start The cmd shortcode currently only supports single commands. If y
<item> <item>
<title>File trees</title> <title>File trees</title>
<link>https://heydon.github.io/infusion/patterns/coding/file-trees/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/file-trees/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/</guid>
<description>Representing folder/file structures is simple and accessible in Infusion. Which is just as well, because some components may need to conform to a certain folder structure. <description>Representing folder/file structures is simple and accessible in Infusion. Which is just as well, because some components may need to conform to a certain folder structure.
The file tree is described using a markdown nested list structure: The file tree is described using a markdown nested list structure:
&amp;#x7b;{% fileTree %}} * Level 1 folder * Level 2 file * Level 2 folder * Level 3 file * Level 3 folder * Level 4 file * Level 3 folder * Level 4 file * Level 4 file * Level 3 file * Level 2 folder * Level 3 file * Level 3 file * Level 3 file * Level 2 file * Level 1 file &amp;#x7b;{% /fileTree %}} This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers:</description> &amp;#x7b;{% fileTree %}} * Level 1 folder * Level 2 file * Level 2 folder * Level 3 file * Level 3 folder * Level 4 file * Level 3 folder * Level 4 file * Level 4 file * Level 3 file * Level 2 folder * Level 3 file * Level 3 file * Level 3 file * Level 2 file * Level 1 file &amp;#x7b;{% /fileTree %}} This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers:</description>
@ -164,60 +164,60 @@ The file tree is described using a markdown nested list structure:
<item> <item>
<title>Including images</title> <title>Including images</title>
<link>https://heydon.github.io/infusion/patterns/media/including-images/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/media/including-images/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/media/including-images/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/media/including-images/</guid>
<description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in. <description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in.
content static images logo.png menu-button.gif When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description> content static images logo.png menu-button.gif When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
</item> </item>
<item> <item>
<title>Including videos</title> <title>Including videos</title>
<link>https://heydon.github.io/infusion/patterns/media/including-videos/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/media/including-videos/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/</guid>
<description>Infusion has a lot of its own shortcodes, but you can still use Hugo&amp;rsquo;s built in shortcodes. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video&amp;rsquo;s id. <description>Infusion has a lot of its own shortcodes, but you can still use Hugo&amp;rsquo;s built in shortcodes. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video&amp;rsquo;s id.
&amp;#x7b;{&amp;lt;youtube w7Ft2ymGmfc}} </description> &amp;#x7b;{&amp;lt;youtube w7Ft2ymGmfc}} </description>
</item> </item>
<item> <item>
<title>Notes &amp; warnings</title> <title>Notes &amp; warnings</title>
<link>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/</guid>
<description>Infusion acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of &amp;ldquo;shortcodes&amp;rdquo;. Shortcodes offer a simple syntax for including rich content. For example, Infusion provides shortcodes for including notes and warnings. <description>Infusion acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of &amp;ldquo;shortcodes&amp;rdquo;. Shortcodes offer a simple syntax for including rich content. For example, Infusion provides shortcodes for including notes and warnings.
Notes You may wish to pick out some content in your pattern&amp;rsquo;s documentation as a note — an aside to the main thrust of the pattern&amp;rsquo;s description. This is possible using the following syntax:</description> Notes You may wish to pick out some content in your pattern&amp;rsquo;s documentation as a note — an aside to the main thrust of the pattern&amp;rsquo;s description. This is possible using the following syntax:</description>
</item> </item>
<item> <item>
<title>References</title> <title>References</title>
<link>https://heydon.github.io/infusion/patterns/writing/references/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/references/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/references/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/writing/references/</guid>
<description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode: <description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description> I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
</item> </item>
<item> <item>
<title>Tables of contents</title> <title>Tables of contents</title>
<link>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</guid> <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: <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> &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>
</item> </item>
<item> <item>
<title>Tested using...</title> <title>Tested using...</title>
<link>https://heydon.github.io/infusion/patterns/coding/tested/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/tested/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/tested/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/tested/</guid>
<description>When you&amp;rsquo;re an inclusive designer, it&amp;rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users. <description>When you&amp;rsquo;re an inclusive designer, it&amp;rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users.
Infusion provided a tested shortcode that let&amp;rsquo;s you show which browsers and assistive technologies you&amp;rsquo;ve tried your design out in. Here&amp;rsquo;s an example. Note the commas and &amp;ldquo;+&amp;rdquo; signs. Infusion provided a tested shortcode that let&amp;rsquo;s you show which browsers and assistive technologies you&amp;rsquo;ve tried your design out in. Here&amp;rsquo;s an example. Note the commas and &amp;ldquo;+&amp;rdquo; signs.
&amp;#x7b;{% tested using=&#34;Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge&#34; %}} This outputs:</description> &amp;#x7b;{% tested using=&#34;Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge&#34; %}} This outputs:</description>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/code-blocks/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Code blocks | Infusion Code blocks | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -416,8 +416,8 @@ toggle.addEventListener('click', (e) => {
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/color-palettes/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Color palettes | Infusion Color palettes | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -409,8 +409,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/command-line/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Command line | Infusion Command line | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -395,8 +395,8 @@ npm run start
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Demo embedding | Infusion Demo embedding | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -454,7 +454,7 @@
<h2 id="inline-demos">Inline demos</h2> <h2 id="inline-demos">Inline demos</h2>
<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Writing inline demos</a>.</p> <p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Writing inline demos</a>.</p>
</main> </main>
@ -465,8 +465,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/file-trees/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
File trees | Infusion File trees | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -445,8 +445,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/coding/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Coding | Infusion Coding | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -354,7 +354,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -366,7 +366,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -378,7 +378,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -390,7 +390,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -402,7 +402,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -414,7 +414,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -426,7 +426,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/coding/tested/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -446,8 +446,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

32
docs/patterns/coding/index.xml
View File

@ -2,20 +2,20 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>Coding on Infusion</title> <title>Coding on Infusion</title>
<link>https://heydon.github.io/infusion/patterns/coding/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/</link>
<description>Recent content in Coding on Infusion</description> <description>Recent content in Coding on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<atom:link href="https://heydon.github.io/infusion/patterns/coding/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://thepaciellogroup.github.io/infusion/patterns/coding/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Code blocks</title> <title>Code blocks</title>
<link>https://heydon.github.io/infusion/patterns/coding/code-blocks/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/code-blocks/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/</guid>
<description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block. <description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
So, this&amp;hellip; So, this&amp;hellip;
```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ``` &amp;hellip; will result in this: ```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ``` &amp;hellip; will result in this:
@ -24,10 +24,10 @@ So, this&amp;hellip;
<item> <item>
<title>Demo embedding</title> <title>Demo embedding</title>
<link>https://heydon.github.io/infusion/patterns/coding/demo-embedding/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/demo-embedding/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/</guid>
<description>Sometimes just pictures of the pattern you&amp;rsquo;re documenting aren&amp;rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality. <description>Sometimes just pictures of the pattern you&amp;rsquo;re documenting aren&amp;rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
CodePen Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID. CodePen Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
&amp;#x7b;{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description> &amp;#x7b;{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
@ -35,30 +35,30 @@ CodePen Infusion offers a couple of ways to do this. The first is by embedding C
<item> <item>
<title>Writing inline demos</title> <title>Writing inline demos</title>
<link>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/</guid>
<description>There are some issues with , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate. <description>There are some issues with , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description> Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
</item> </item>
<item> <item>
<title>Color palettes</title> <title>Color palettes</title>
<link>https://heydon.github.io/infusion/patterns/coding/color-palettes/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/color-palettes/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/</guid>
<description>There&amp;rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values. <description>There&amp;rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
&amp;#x7b;{% colors &#34;#111111, #cccccc, #ffffff&#34; %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:</description> &amp;#x7b;{% colors &#34;#111111, #cccccc, #ffffff&#34; %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:</description>
</item> </item>
<item> <item>
<title>Command line</title> <title>Command line</title>
<link>https://heydon.github.io/infusion/patterns/coding/command-line/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/command-line/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/</guid>
<description>Your pattern documentation may need to include commands for installing packages or using CLIs. Infusion offers the cmd shortcode for making code blocks look like terminal commands. <description>Your pattern documentation may need to include commands for installing packages or using CLIs. Infusion offers the cmd shortcode for making code blocks look like terminal commands.
Here&amp;rsquo;s how you write it: Here&amp;rsquo;s how you write it:
&amp;#x7b;{&amp;lt;cmd}} npm run start &amp;#x7b;{&amp;lt;/cmd}} And here&amp;rsquo;s how it looks: &amp;#x7b;{&amp;lt;cmd}} npm run start &amp;#x7b;{&amp;lt;/cmd}} And here&amp;rsquo;s how it looks:
@ -68,10 +68,10 @@ npm run start The cmd shortcode currently only supports single commands. If y
<item> <item>
<title>File trees</title> <title>File trees</title>
<link>https://heydon.github.io/infusion/patterns/coding/file-trees/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/file-trees/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/</guid>
<description>Representing folder/file structures is simple and accessible in Infusion. Which is just as well, because some components may need to conform to a certain folder structure. <description>Representing folder/file structures is simple and accessible in Infusion. Which is just as well, because some components may need to conform to a certain folder structure.
The file tree is described using a markdown nested list structure: The file tree is described using a markdown nested list structure:
&amp;#x7b;{% fileTree %}} * Level 1 folder * Level 2 file * Level 2 folder * Level 3 file * Level 3 folder * Level 4 file * Level 3 folder * Level 4 file * Level 4 file * Level 3 file * Level 2 folder * Level 3 file * Level 3 file * Level 3 file * Level 2 file * Level 1 file &amp;#x7b;{% /fileTree %}} This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers:</description> &amp;#x7b;{% fileTree %}} * Level 1 folder * Level 2 file * Level 2 folder * Level 3 file * Level 3 folder * Level 4 file * Level 3 folder * Level 4 file * Level 4 file * Level 3 file * Level 2 folder * Level 3 file * Level 3 file * Level 3 file * Level 2 file * Level 1 file &amp;#x7b;{% /fileTree %}} This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers:</description>
@ -79,10 +79,10 @@ The file tree is described using a markdown nested list structure:
<item> <item>
<title>Tested using...</title> <title>Tested using...</title>
<link>https://heydon.github.io/infusion/patterns/coding/tested/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/coding/tested/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/tested/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/coding/tested/</guid>
<description>When you&amp;rsquo;re an inclusive designer, it&amp;rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users. <description>When you&amp;rsquo;re an inclusive designer, it&amp;rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users.
Infusion provided a tested shortcode that let&amp;rsquo;s you show which browsers and assistive technologies you&amp;rsquo;ve tried your design out in. Here&amp;rsquo;s an example. Note the commas and &amp;ldquo;+&amp;rdquo; signs. Infusion provided a tested shortcode that let&amp;rsquo;s you show which browsers and assistive technologies you&amp;rsquo;ve tried your design out in. Here&amp;rsquo;s an example. Note the commas and &amp;ldquo;+&amp;rdquo; signs.
&amp;#x7b;{% tested using=&#34;Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge&#34; %}} This outputs:</description> &amp;#x7b;{% tested using=&#34;Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge&#34; %}} This outputs:</description>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/tested/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Tested using... | Infusion Tested using... | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -383,7 +383,7 @@
<img src="https://heydon.github.io/infusion/images/browser-Firefox.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/browser-Firefox.svg" alt="">
<span><strong>Firefox</strong></span> <span><strong>Firefox</strong></span>
<span class="additional">with <strong>JAWS</strong></span> <span class="additional">with <strong>JAWS</strong></span>
@ -393,7 +393,7 @@
<img src="https://heydon.github.io/infusion/images/browser-Chrome.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/browser-Chrome.svg" alt="">
<span><strong>Chrome</strong></span> <span><strong>Chrome</strong></span>
</td> </td>
@ -404,7 +404,7 @@
<img src="https://heydon.github.io/infusion/images/browser-Safari-iOS.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/browser-Safari-iOS.svg" alt="">
<span><strong>Safari iOS</strong></span> <span><strong>Safari iOS</strong></span>
<span class="additional">with <strong>Voiceover</strong></span> <span class="additional">with <strong>Voiceover</strong></span>
@ -414,7 +414,7 @@
<img src="https://heydon.github.io/infusion/images/browser-Edge.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/browser-Edge.svg" alt="">
<span><strong>Edge</strong></span> <span><strong>Edge</strong></span>
</td> </td>
@ -448,8 +448,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Writing inline demos | Infusion Writing inline demos | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -514,7 +514,7 @@ toggle.addEventListener('click', (e) => {
</code></pre> </code></pre>
</p> </p>
<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p> <p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
</main> </main>
@ -525,8 +525,8 @@ toggle.addEventListener('click', (e) => {
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

88
docs/patterns/index.html
View File

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Patterns | Infusion Patterns | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -354,7 +354,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/installation/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -366,7 +366,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/library-setup/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -378,7 +378,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/serving/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -390,7 +390,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/printing/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -410,8 +410,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

20
docs/patterns/index.xml
View File

@ -2,20 +2,20 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>Patterns on Infusion</title> <title>Patterns on Infusion</title>
<link>https://heydon.github.io/infusion/patterns/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/</link>
<description>Recent content in Patterns on Infusion</description> <description>Recent content in Patterns on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<atom:link href="https://heydon.github.io/infusion/patterns/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://thepaciellogroup.github.io/infusion/patterns/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Installation</title> <title>Installation</title>
<link>https://heydon.github.io/infusion/patterns/installation/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/installation/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/installation/</guid> <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 set up step-by-step.
Install Hugo First you need to install Hugo globally. 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: OSX users If you are a Mac user and have Homebrew on your system, installing Hugo is simple:
@ -24,20 +24,20 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
<item> <item>
<title>Library setup</title> <title>Library setup</title>
<link>https://heydon.github.io/infusion/patterns/library-setup/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/library-setup/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/library-setup/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/library-setup/</guid>
<description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase. <description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
&amp;ldquo;Cleaning&amp;rdquo; the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.</description> &amp;ldquo;Cleaning&amp;rdquo; the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.</description>
</item> </item>
<item> <item>
<title>Serving</title> <title>Serving</title>
<link>https://heydon.github.io/infusion/patterns/serving/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/serving/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/serving/</guid> <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: <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! 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> 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>
@ -45,10 +45,10 @@ Publishing on Github Pages Infusion creates a /docs folder containing the latest
<item> <item>
<title>Printing</title> <title>Printing</title>
<link>https://heydon.github.io/infusion/patterns/printing/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/printing/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/printing/</guid> <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: <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, go ahead!
</description> </description>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/installation/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/installation/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Installation | Infusion Installation | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -416,16 +416,16 @@
<h2 id="get-the-files">Get the files</h2> <h2 id="get-the-files">Get the files</h2>
<p><strong>Infusion</strong> is hosted on Github. To start using it, you&rsquo;ll need to get the files from there. If you are comfortable with the command line, just fork the <a href="https://github.com/heydon/infusion">github.com/heydon/infusion</a> repository, then do a <code>git clone</code> to your local system. Replace <code>[your username]</code> in the following:</p> <p><strong>Infusion</strong> is hosted on Github. To start using it, you&rsquo;ll need to get the files from there. If you are comfortable with the command line, just fork the <a href="https://github.com/ThePacielloGroup/infusion">github.com/ThePacielloGroup/infusion</a> repository, then do a <code>git clone</code> to your local system. Replace <code>[your username]</code> in the following:</p>
<pre class="cmd"><code>git clone https://github.com/[your username]/infusion.git</code></pre> <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/heydon/infusion">github.com/heydon/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, 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"> <figure role="group" aria-describedby="caption-4f6ff97ad7397f1735a833534d0e2e4d">
<p><img src="https://heydon.github.io/infusion/images/open_in_desktop.png" alt="The open in desktop option, revealed when clicking clone or download" /></p> <p><img src="https://thepaciellogroup.github.io/infusion/images/open_in_desktop.png" alt="The open in desktop option, revealed when clicking clone or download" /></p>
<figcaption id="caption-4f6ff97ad7397f1735a833534d0e2e4d"> <figcaption id="caption-4f6ff97ad7397f1735a833534d0e2e4d">
The Github web interface The Github web interface
@ -449,7 +449,7 @@
<pre class="cmd"><code>npm install</code></pre> <pre class="cmd"><code>npm install</code></pre>
<p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://heydon.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/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>
</main> </main>
@ -460,8 +460,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/library-setup/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Library setup | Infusion Library setup | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -392,7 +392,7 @@
<p>By now, you should have followed the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p> <p>By now, you should have followed the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
<h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2> <h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2>
@ -412,7 +412,7 @@
<pre class="cmd"><code> npm run clean</code></pre> <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://heydon.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. 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>
<h2 id="the-config-file">The config file</h2> <h2 id="the-config-file">The config file</h2>
@ -421,7 +421,7 @@
<pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode> <pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
languageCode = "en-us" languageCode = "en-us"
title = "Infusion" title = "Infusion"
baseURL = "https://heydon.github.io/infusion/" baseURL = "https://thepaciellogroup.github.io/infusion/"
theme = "infusion" theme = "infusion"
[params] [params]
@ -469,7 +469,7 @@ theme = "infusion"
&lt;/a&gt; &lt;/a&gt;
</code></pre> </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://heydon.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://heydon.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&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>
</main> </main>
@ -480,8 +480,8 @@ theme = "infusion"
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/media/including-images/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Including images | Infusion Including images | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -412,7 +412,7 @@
<figure role="group" aria-describedby="caption-e259e3056337abf60723ee4eb78ed9b6"> <figure role="group" aria-describedby="caption-e259e3056337abf60723ee4eb78ed9b6">
<p><img src="https://heydon.github.io/infusion/images/bad_design_system.png" alt="Diagram of a design pattern represented by a turd emoji begetting three bad implementations" /></p> <p><img src="https://thepaciellogroup.github.io/infusion/images/bad_design_system.png" alt="Diagram of a design pattern represented by a turd emoji begetting three bad implementations" /></p>
<figcaption id="caption-e259e3056337abf60723ee4eb78ed9b6"> <figcaption id="caption-e259e3056337abf60723ee4eb78ed9b6">
A design system that uses a bad code example as a <strong>single source of truth</strong> only serves to proliferate bad code. A design system that uses a bad code example as a <strong>single source of truth</strong> only serves to proliferate bad code.
@ -439,8 +439,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/media/including-videos/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Including videos | Infusion Including videos | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -375,8 +375,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/media/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/media/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Media | Infusion Media | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -354,7 +354,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/media/including-images/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -366,7 +366,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -386,8 +386,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

12
docs/patterns/media/index.xml
View File

@ -2,30 +2,30 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>Media on Infusion</title> <title>Media on Infusion</title>
<link>https://heydon.github.io/infusion/patterns/media/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/media/</link>
<description>Recent content in Media on Infusion</description> <description>Recent content in Media on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<atom:link href="https://heydon.github.io/infusion/patterns/media/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://thepaciellogroup.github.io/infusion/patterns/media/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Including images</title> <title>Including images</title>
<link>https://heydon.github.io/infusion/patterns/media/including-images/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/media/including-images/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/media/including-images/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/media/including-images/</guid>
<description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in. <description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in.
content static images logo.png menu-button.gif When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description> content static images logo.png menu-button.gif When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
</item> </item>
<item> <item>
<title>Including videos</title> <title>Including videos</title>
<link>https://heydon.github.io/infusion/patterns/media/including-videos/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/media/including-videos/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/</guid>
<description>Infusion has a lot of its own shortcodes, but you can still use Hugo&amp;rsquo;s built in shortcodes. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video&amp;rsquo;s id. <description>Infusion has a lot of its own shortcodes, but you can still use Hugo&amp;rsquo;s built in shortcodes. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video&amp;rsquo;s id.
&amp;#x7b;{&amp;lt;youtube w7Ft2ymGmfc}} </description> &amp;#x7b;{&amp;lt;youtube w7Ft2ymGmfc}} </description>
</item> </item>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/printing/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/printing/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Printing | Infusion Printing | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -359,7 +359,7 @@
<p><strong>Infusion</strong>&rsquo;s output site includes a one-page <a class="pattern-link" href="https://heydon.github.io/infusion/print-version/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Print version</a> of the generated library, available at <code>/print-version</code>. So, if your library base URL is <code>https://yourName.github.io/your-library</code>, you can print the whole library — to PDF if wanted — from the following address:</p> <p><strong>Infusion</strong>&rsquo;s output site includes a one-page <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/print-version/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Print version</a> of the generated library, available at <code>/print-version</code>. So, if your library base URL is <code>https://yourName.github.io/your-library</code>, you can print the whole library — to PDF if wanted — from the following address:</p>
<pre><code>https://yourName.github.io/your-library/print-version <pre><code>https://yourName.github.io/your-library/print-version
</code></pre> </code></pre>
@ -384,8 +384,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/serving/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/serving/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Serving | Infusion Serving | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -393,7 +393,7 @@
<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>. 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><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>. 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://heydon.github.io/infusion/images/serve_from_docs.png" alt="The publishing source dropdown menu on Github" /></p> <p><img src="https://thepaciellogroup.github.io/infusion/images/serve_from_docs.png" alt="The publishing source dropdown menu on Github" /></p>
<p>Then, whenever you push to master, you will also be updating the site found at your Github Pages URL.</p> <p>Then, whenever you push to master, you will also be updating the site found at your Github Pages URL.</p>
@ -402,7 +402,7 @@
<pre><code>[your user name].github.io/[your library repo name] <pre><code>[your user name].github.io/[your library repo name]
</code></pre> </code></pre>
<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file as the <code>baseURL</code> value. See <a class="pattern-link" href="https://heydon.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> for more information.</p> <p>You&rsquo;ll also need to add it to your <code>config.toml</code> file as the <code>baseURL</code> value. 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> for more information.</p>
</main> </main>
@ -413,8 +413,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Expandable sections | Infusion Expandable sections | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -480,8 +480,8 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/writing/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Writing | Infusion Writing | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -354,7 +354,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -366,7 +366,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -378,7 +378,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -390,7 +390,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -402,7 +402,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/writing/references/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -414,7 +414,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -434,8 +434,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -2,40 +2,40 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>Writing on Infusion</title> <title>Writing on Infusion</title>
<link>https://heydon.github.io/infusion/patterns/writing/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/</link>
<description>Recent content in Writing on Infusion</description> <description>Recent content in Writing on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<atom:link href="https://heydon.github.io/infusion/patterns/writing/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://thepaciellogroup.github.io/infusion/patterns/writing/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Library structure</title> <title>Library structure</title>
<link>https://heydon.github.io/infusion/patterns/writing/library-structure/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/library-structure/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/</guid>
<description>Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this: <description>Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this:
content _index.md 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> 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> </item>
<item> <item>
<title>Markdown &amp; metadata</title> <title>Markdown &amp; metadata</title>
<link>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/</guid>
<description>In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&amp;rsquo;s recommended you use &amp;ldquo;kebab case&amp;rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &amp;ldquo;Menu button&amp;rdquo; should probably have the filename menu-button. Then you get a nice clean URL: username.github.io/your-library/patterns/menu-button. <description>In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&amp;rsquo;s recommended you use &amp;ldquo;kebab case&amp;rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &amp;ldquo;Menu button&amp;rdquo; should probably have the filename menu-button. Then you get a nice clean URL: username.github.io/your-library/patterns/menu-button.
If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description> If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
</item> </item>
<item> <item>
<title>Expandable sections</title> <title>Expandable sections</title>
<link>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/</guid>
<description>In some cases, where there is a lot of content, it&amp;rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&amp;rsquo;s in the content and can choose where to focus in. Infusion provides a shortcode method for creating expandable sections which generates accessible markup using aria-expanded. <description>In some cases, where there is a lot of content, it&amp;rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&amp;rsquo;s in the content and can choose where to focus in. Infusion provides a shortcode method for creating expandable sections which generates accessible markup using aria-expanded.
The expandable shortcode takes three parameters: The expandable shortcode takes three parameters:
label — This is the label for the the section heading. level — This is the heading level (e.</description> label — This is the label for the the section heading. level — This is the heading level (e.</description>
@ -43,30 +43,30 @@ The expandable shortcode takes three parameters:
<item> <item>
<title>Notes &amp; warnings</title> <title>Notes &amp; warnings</title>
<link>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/</guid>
<description>Infusion acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of &amp;ldquo;shortcodes&amp;rdquo;. Shortcodes offer a simple syntax for including rich content. For example, Infusion provides shortcodes for including notes and warnings. <description>Infusion acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of &amp;ldquo;shortcodes&amp;rdquo;. Shortcodes offer a simple syntax for including rich content. For example, Infusion provides shortcodes for including notes and warnings.
Notes You may wish to pick out some content in your pattern&amp;rsquo;s documentation as a note — an aside to the main thrust of the pattern&amp;rsquo;s description. This is possible using the following syntax:</description> Notes You may wish to pick out some content in your pattern&amp;rsquo;s documentation as a note — an aside to the main thrust of the pattern&amp;rsquo;s description. This is possible using the following syntax:</description>
</item> </item>
<item> <item>
<title>References</title> <title>References</title>
<link>https://heydon.github.io/infusion/patterns/writing/references/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/references/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/references/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/writing/references/</guid>
<description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode: <description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description> I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
</item> </item>
<item> <item>
<title>Tables of contents</title> <title>Tables of contents</title>
<link>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</guid> <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: <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> &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>
</item> </item>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Library structure | Infusion Library structure | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -438,7 +438,7 @@ title = &quot;Popups&quot;
</aside> </aside>
<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Markdown &amp; metadata</a>.</p> <p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Markdown &amp; metadata</a>.</p>
</main> </main>
@ -449,8 +449,8 @@ title = &quot;Popups&quot;
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Markdown &amp; metadata | Infusion Markdown &amp; metadata | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -364,7 +364,7 @@
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false"> <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
<use xlink:href="#tag"></use> <use xlink:href="#tag"></use>
</svg> </svg>
<a href="https://heydon.github.io/infusion/tags/metadata">metadata</a> <a href="https://thepaciellogroup.github.io/infusion/tags/metadata">metadata</a>
</li> </li>
@ -375,7 +375,7 @@
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false"> <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
<use xlink:href="#tag"></use> <use xlink:href="#tag"></use>
</svg> </svg>
<a href="https://heydon.github.io/infusion/tags/markdown">markdown</a> <a href="https://thepaciellogroup.github.io/infusion/tags/markdown">markdown</a>
</li> </li>
@ -446,8 +446,8 @@ weight = 1
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Notes &amp; warnings | Infusion Notes &amp; warnings | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -439,8 +439,8 @@ This is a warning! It's about something the reader should be careful to do or to
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/references/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
References | Infusion References | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -388,7 +388,7 @@
<h2 id="cross-references">Cross-references</h2> <h2 id="cross-references">Cross-references</h2>
<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://heydon.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> provides an easy mechanism to cross-reference patterns, by title, 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> <pre class=" "><code data-codeblock-shortcode>
I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here. I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
@ -824,8 +824,8 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Tables of contents | Infusion Tables of contents | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" aria-current="page"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -359,7 +359,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://heydon.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/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>
<pre><code class="language-html">&lt;nav class=&quot;toc&quot; aria-labelledby=&quot;toc-heading&quot;&gt; <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; &lt;h2 id=&quot;toc-heading&quot;&gt;Table of contents&lt;/h2&gt;
@ -397,8 +397,8 @@ toc = false
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/print-version/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/print-version/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Infusion Infusion
@ -113,8 +113,8 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
@ -378,16 +378,16 @@
<h2 id="get-the-files">Get the files</h2> <h2 id="get-the-files">Get the files</h2>
<p><strong>Infusion</strong> is hosted on Github. To start using it, you&rsquo;ll need to get the files from there. If you are comfortable with the command line, just fork the <a href="https://github.com/heydon/infusion">github.com/heydon/infusion</a> repository, then do a <code>git clone</code> to your local system. Replace <code>[your username]</code> in the following:</p> <p><strong>Infusion</strong> is hosted on Github. To start using it, you&rsquo;ll need to get the files from there. If you are comfortable with the command line, just fork the <a href="https://github.com/ThePacielloGroup/infusion">github.com/ThePacielloGroup/infusion</a> repository, then do a <code>git clone</code> to your local system. Replace <code>[your username]</code> in the following:</p>
<pre class="cmd"><code>git clone https://github.com/[your username]/infusion.git</code></pre> <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/heydon/infusion">github.com/heydon/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, 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"> <figure role="group" aria-describedby="caption-4f6ff97ad7397f1735a833534d0e2e4d">
<p><img src="https://heydon.github.io/infusion/images/open_in_desktop.png" alt="The open in desktop option, revealed when clicking clone or download" /></p> <p><img src="https://thepaciellogroup.github.io/infusion/images/open_in_desktop.png" alt="The open in desktop option, revealed when clicking clone or download" /></p>
<figcaption id="caption-4f6ff97ad7397f1735a833534d0e2e4d"> <figcaption id="caption-4f6ff97ad7397f1735a833534d0e2e4d">
The Github web interface The Github web interface
@ -411,7 +411,7 @@
<pre class="cmd"><code>npm install</code></pre> <pre class="cmd"><code>npm install</code></pre>
<p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://heydon.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/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>
</div> </div>
@ -424,7 +424,7 @@
</h1> </h1>
<p>By now, you should have followed the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p> <p>By now, you should have followed the <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
<h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2> <h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2>
@ -444,7 +444,7 @@
<pre class="cmd"><code> npm run clean</code></pre> <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://heydon.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. 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>
<h2 id="the-config-file">The config file</h2> <h2 id="the-config-file">The config file</h2>
@ -453,7 +453,7 @@
<pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode> <pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
languageCode = "en-us" languageCode = "en-us"
title = "Infusion" title = "Infusion"
baseURL = "https://heydon.github.io/infusion/" baseURL = "https://thepaciellogroup.github.io/infusion/"
theme = "infusion" theme = "infusion"
[params] [params]
@ -501,7 +501,7 @@ theme = "infusion"
&lt;/a&gt; &lt;/a&gt;
</code></pre> </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://heydon.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://heydon.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&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>
</div> </div>
@ -527,7 +527,7 @@ theme = "infusion"
<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>. 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><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>. 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://heydon.github.io/infusion/images/serve_from_docs.png" alt="The publishing source dropdown menu on Github" /></p> <p><img src="https://thepaciellogroup.github.io/infusion/images/serve_from_docs.png" alt="The publishing source dropdown menu on Github" /></p>
<p>Then, whenever you push to master, you will also be updating the site found at your Github Pages URL.</p> <p>Then, whenever you push to master, you will also be updating the site found at your Github Pages URL.</p>
@ -536,7 +536,7 @@ theme = "infusion"
<pre><code>[your user name].github.io/[your library repo name] <pre><code>[your user name].github.io/[your library repo name]
</code></pre> </code></pre>
<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file as the <code>baseURL</code> value. See <a class="pattern-link" href="https://heydon.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> for more information.</p> <p>You&rsquo;ll also need to add it to your <code>config.toml</code> file as the <code>baseURL</code> value. 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> for more information.</p>
</div> </div>
@ -547,7 +547,7 @@ theme = "infusion"
</svg> </svg>
Printing Printing
</h1> </h1>
<p><strong>Infusion</strong>&rsquo;s output site includes a one-page <a class="pattern-link" href="https://heydon.github.io/infusion/print-version/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Print version</a> of the generated library, available at <code>/print-version</code>. So, if your library base URL is <code>https://yourName.github.io/your-library</code>, you can print the whole library — to PDF if wanted — from the following address:</p> <p><strong>Infusion</strong>&rsquo;s output site includes a one-page <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/print-version/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Print version</a> of the generated library, available at <code>/print-version</code>. So, if your library base URL is <code>https://yourName.github.io/your-library</code>, you can print the whole library — to PDF if wanted — from the following address:</p>
<pre><code>https://yourName.github.io/your-library/print-version <pre><code>https://yourName.github.io/your-library/print-version
</code></pre> </code></pre>
@ -653,7 +653,7 @@ title = &quot;Popups&quot;
</aside> </aside>
<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Markdown &amp; metadata</a>.</p> <p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Markdown &amp; metadata</a>.</p>
</div> </div>
@ -908,7 +908,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> <h2 id="cross-references">Cross-references</h2>
<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://heydon.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> provides an easy mechanism to cross-reference patterns, by title, 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> <pre class=" "><code data-codeblock-shortcode>
I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here. I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
@ -1344,7 +1344,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
</svg> </svg>
Tables of contents Tables of contents
</h1> </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://heydon.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/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>
<pre><code class="language-html">&lt;nav class=&quot;toc&quot; aria-labelledby=&quot;toc-heading&quot;&gt; <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; &lt;h2 id=&quot;toc-heading&quot;&gt;Table of contents&lt;/h2&gt;
@ -1437,7 +1437,7 @@ toc = false
<figure role="group" aria-describedby="caption-e259e3056337abf60723ee4eb78ed9b6"> <figure role="group" aria-describedby="caption-e259e3056337abf60723ee4eb78ed9b6">
<p><img src="https://heydon.github.io/infusion/images/bad_design_system.png" alt="Diagram of a design pattern represented by a turd emoji begetting three bad implementations" /></p> <p><img src="https://thepaciellogroup.github.io/infusion/images/bad_design_system.png" alt="Diagram of a design pattern represented by a turd emoji begetting three bad implementations" /></p>
<figcaption id="caption-e259e3056337abf60723ee4eb78ed9b6"> <figcaption id="caption-e259e3056337abf60723ee4eb78ed9b6">
A design system that uses a bad code example as a <strong>single source of truth</strong> only serves to proliferate bad code. A design system that uses a bad code example as a <strong>single source of truth</strong> only serves to proliferate bad code.
@ -1609,7 +1609,7 @@ toggle.addEventListener('click', (e) => {
<h2 id="inline-demos">Inline demos</h2> <h2 id="inline-demos">Inline demos</h2>
<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Writing inline demos</a>.</p> <p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Writing inline demos</a>.</p>
</div> </div>
@ -1756,7 +1756,7 @@ toggle.addEventListener('click', (e) => {
</code></pre> </code></pre>
</p> </p>
<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p> <p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
</div> </div>
@ -1963,7 +1963,7 @@ npm run start
<img src="https://heydon.github.io/infusion/images/browser-Firefox.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/browser-Firefox.svg" alt="">
<span><strong>Firefox</strong></span> <span><strong>Firefox</strong></span>
<span class="additional">with <strong>JAWS</strong></span> <span class="additional">with <strong>JAWS</strong></span>
@ -1973,7 +1973,7 @@ npm run start
<img src="https://heydon.github.io/infusion/images/browser-Chrome.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/browser-Chrome.svg" alt="">
<span><strong>Chrome</strong></span> <span><strong>Chrome</strong></span>
</td> </td>
@ -1984,7 +1984,7 @@ npm run start
<img src="https://heydon.github.io/infusion/images/browser-Safari-iOS.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/browser-Safari-iOS.svg" alt="">
<span><strong>Safari iOS</strong></span> <span><strong>Safari iOS</strong></span>
<span class="additional">with <strong>Voiceover</strong></span> <span class="additional">with <strong>Voiceover</strong></span>
@ -1994,7 +1994,7 @@ npm run start
<img src="https://heydon.github.io/infusion/images/browser-Edge.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/browser-Edge.svg" alt="">
<span><strong>Edge</strong></span> <span><strong>Edge</strong></span>
</td> </td>
@ -2032,8 +2032,8 @@ npm run start
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

58
docs/sitemap.xml
View File

@ -3,126 +3,126 @@
xmlns:xhtml="http://www.w3.org/1999/xhtml"> xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/coding/code-blocks/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/installation/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/installation/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/writing/library-structure/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/writing/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/writing/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/coding/demo-embedding/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/library-setup/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/library-setup/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/media/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/media/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/serving/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/serving/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/printing/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/printing/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/print-version/</loc> <loc>https://thepaciellogroup.github.io/infusion/print-version/</loc>
<lastmod>2017-07-29T22:48:43+01:00</lastmod> <lastmod>2017-07-29T22:48:43+01:00</lastmod>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/</loc> <loc>https://thepaciellogroup.github.io/infusion/</loc>
<lastmod>2017-06-26T18:27:58+01:00</lastmod> <lastmod>2017-06-26T18:27:58+01:00</lastmod>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/categories/</loc> <loc>https://thepaciellogroup.github.io/infusion/categories/</loc>
<priority>0</priority> <priority>0</priority>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/coding/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/coding/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/coding/color-palettes/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/coding/command-line/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/coding/file-trees/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/media/including-images/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/media/including-images/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/media/including-videos/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/tags/markdown/</loc> <loc>https://thepaciellogroup.github.io/infusion/tags/markdown/</loc>
<priority>0</priority> <priority>0</priority>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/tags/metadata/</loc> <loc>https://thepaciellogroup.github.io/infusion/tags/metadata/</loc>
<priority>0</priority> <priority>0</priority>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/</loc>
<priority>0</priority> <priority>0</priority>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/writing/references/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/writing/references/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/</loc>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/tags/</loc> <loc>https://thepaciellogroup.github.io/infusion/tags/</loc>
<priority>0</priority> <priority>0</priority>
</url> </url>
<url> <url>
<loc>https://heydon.github.io/infusion/patterns/coding/tested/</loc> <loc>https://thepaciellogroup.github.io/infusion/patterns/coding/tested/</loc>
</url> </url>
</urlset> </urlset>

12
docs/tags/index.xml
View File

@ -2,29 +2,29 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>Tags on Infusion</title> <title>Tags on Infusion</title>
<link>https://heydon.github.io/infusion/tags/</link> <link>https://thepaciellogroup.github.io/infusion/tags/</link>
<description>Recent content in Tags on Infusion</description> <description>Recent content in Tags on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<atom:link href="https://heydon.github.io/infusion/tags/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://thepaciellogroup.github.io/infusion/tags/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Markdown</title> <title>Markdown</title>
<link>https://heydon.github.io/infusion/tags/markdown/</link> <link>https://thepaciellogroup.github.io/infusion/tags/markdown/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/tags/markdown/</guid> <guid>https://thepaciellogroup.github.io/infusion/tags/markdown/</guid>
<description></description> <description></description>
</item> </item>
<item> <item>
<title>Metadata</title> <title>Metadata</title>
<link>https://heydon.github.io/infusion/tags/metadata/</link> <link>https://thepaciellogroup.github.io/infusion/tags/metadata/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/tags/metadata/</guid> <guid>https://thepaciellogroup.github.io/infusion/tags/metadata/</guid>
<description></description> <description></description>
</item> </item>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/tags/markdown/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/tags/markdown/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Patterns tagged Markdown | Infusion Patterns tagged Markdown | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -357,7 +357,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -377,8 +377,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -2,20 +2,20 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>Markdown on Infusion</title> <title>Markdown on Infusion</title>
<link>https://heydon.github.io/infusion/tags/markdown/</link> <link>https://thepaciellogroup.github.io/infusion/tags/markdown/</link>
<description>Recent content in Markdown on Infusion</description> <description>Recent content in Markdown on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<atom:link href="https://heydon.github.io/infusion/tags/markdown/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://thepaciellogroup.github.io/infusion/tags/markdown/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Markdown &amp; metadata</title> <title>Markdown &amp; metadata</title>
<link>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/</guid>
<description>In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&amp;rsquo;s recommended you use &amp;ldquo;kebab case&amp;rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &amp;ldquo;Menu button&amp;rdquo; should probably have the filename menu-button. Then you get a nice clean URL: username.github.io/your-library/patterns/menu-button. <description>In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&amp;rsquo;s recommended you use &amp;ldquo;kebab case&amp;rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &amp;ldquo;Menu button&amp;rdquo; should probably have the filename menu-button. Then you get a nice clean URL: username.github.io/your-library/patterns/menu-button.
If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description> If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
</item> </item>

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

@ -4,26 +4,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/tags/metadata/"> <link rel="canonical" href="https://thepaciellogroup.github.io/infusion/tags/metadata/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png"> <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://heydon.github.io/infusion/images/apple-icon-60x60.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://heydon.github.io/infusion/images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://thepaciellogroup.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css"> <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<title> <title>
Patterns tagged Metadata | Infusion Patterns tagged Metadata | Infusion
@ -115,13 +115,13 @@
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
<div class="intro"> <div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page"> <a class="logo" href="https://thepaciellogroup.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt=""> <img src="https://thepaciellogroup.github.io/infusion/images/logo.svg" alt="">
</a> </a>
<p class="library-desc"> <p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself. Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version"> <a class="print" href="https://thepaciellogroup.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true"> <svg viewBox="0 0 50 50" aria-hidden="true">
<g transform="translate(-25.001 -1002.4)"> <g transform="translate(-25.001 -1002.4)">
<path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/> <path style="fill:#1a1a1a" d="m42.85 1008.1c-1.5847 0-2.8605 1.2758-2.8605 2.8605v7.1513h-8.5815c-1.5847 0-2.8605 1.2758-2.8605 2.8605v15.733c0 1.5847 1.2758 2.8605 2.8605 2.8605h8.9419v4.2908c0 1.5847 1.2758 2.8605 2.8605 2.8605h14.272c1.5847 0 2.8605-1.2758 2.8605-2.8605v-4.2908h8.2519c1.5847 0 2.8605-1.2758 2.8605-2.8605v-15.733c0-1.5847-1.2758-2.8605-2.8605-2.8605h-8.2519v-7.1513c0-1.5847-1.2758-2.8605-2.8605-2.8605h-14.632zm3.1147 3.0645h8.5815c1.5847 0 2.8119 1.2765 2.8605 2.8605l.12849 4.1623-14.303-.1259-.12849-4.0366c0-1.5847 1.2758-2.8605 2.8605-2.8605zm20.772 9.8078a2.0368 2.1326 0 0 1 .54472 .064 2.0368 2.1326 0 0 1 1.4833 2.5839l-.0029.014a2.0368 2.1326 0 0 1 -2.4749 1.542 2.0368 2.1326 0 0 1 -1.4749 -2.5895 2.0368 2.1326 0 0 1 1.9247 -1.6119zm-23.633 14.199h14.303v5.8243c0 1.5847-1.2758 2.8605-2.8605 2.8605h-8.5815c-1.5847 0-2.8605-1.2758-2.8605-2.8605v-5.8243zm3.5756 1.8939c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513zm0 2.8605c-.39618 0-.71512.319-.71512.7152s.31895.7151.71512.7151h7.1513c.39618 0 .71512-.3189.71512-.7151s-.31895-.7152-.71512-.7152h-7.1513z"/>
@ -145,7 +145,7 @@
<ul id="patterns-list"> <ul id="patterns-list">
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -154,7 +154,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -163,7 +163,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -172,7 +172,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50"> <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -186,7 +186,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -195,7 +195,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -204,7 +204,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -213,7 +213,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -222,7 +222,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -231,7 +231,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -247,7 +247,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -256,7 +256,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -272,7 +272,7 @@
<ul> <ul>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -281,7 +281,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -290,7 +290,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -299,7 +299,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -308,7 +308,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -317,7 +317,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -326,7 +326,7 @@
</li> </li>
<li class="pattern"> <li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" > <a href="https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -357,7 +357,7 @@
<li> <li>
<h2> <h2>
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"> <a href="https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use> <use xlink:href="#bookmark"></use>
</svg> </svg>
@ -377,8 +377,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script> <script src="https://thepaciellogroup.github.io/infusion/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

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

@ -2,20 +2,20 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>Metadata on Infusion</title> <title>Metadata on Infusion</title>
<link>https://heydon.github.io/infusion/tags/metadata/</link> <link>https://thepaciellogroup.github.io/infusion/tags/metadata/</link>
<description>Recent content in Metadata on Infusion</description> <description>Recent content in Metadata on Infusion</description>
<generator>Hugo -- gohugo.io</generator> <generator>Hugo -- gohugo.io</generator>
<language>en-us</language> <language>en-us</language>
<atom:link href="https://heydon.github.io/infusion/tags/metadata/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="https://thepaciellogroup.github.io/infusion/tags/metadata/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Markdown &amp; metadata</title> <title>Markdown &amp; metadata</title>
<link>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</link> <link>https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</guid> <guid>https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/</guid>
<description>In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&amp;rsquo;s recommended you use &amp;ldquo;kebab case&amp;rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &amp;ldquo;Menu button&amp;rdquo; should probably have the filename menu-button. Then you get a nice clean URL: username.github.io/your-library/patterns/menu-button. <description>In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&amp;rsquo;s recommended you use &amp;ldquo;kebab case&amp;rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &amp;ldquo;Menu button&amp;rdquo; should probably have the filename menu-button. Then you get a nice clean URL: username.github.io/your-library/patterns/menu-button.
If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description> If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
</item> </item>

6
package.json
View File

@ -14,14 +14,14 @@
], ],
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/Heydon/infusion.git" "url": "git+https://github.com/ThePacielloGroup/infusion.git"
}, },
"author": "Heydon Pickering <heydon@heydonworks.com> (http://www.heydonworks.com)", "author": "Heydon Pickering <heydon@heydonworks.com> (http://www.heydonworks.com)",
"license": "ISC", "license": "ISC",
"bugs": { "bugs": {
"url": "https://github.com/Heydon/infusion/issues" "url": "https://github.com/ThePacielloGroup/infusion/issues"
}, },
"homepage": "https://github.com/Heydon/infusion#readme", "homepage": "https://github.com/ThePacielloGroup/infusion#readme",
"devDependencies": { "devDependencies": {
"pre-commit": "^1.2.2", "pre-commit": "^1.2.2",
"sw-precache": "^5.2.0" "sw-precache": "^5.2.0"

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

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