publish cycle
This commit is contained in:
parent
e465efcf51
commit
186624d27a
|
@ -1,6 +1,6 @@
|
|||
languageCode = "en-us"
|
||||
title = "Infusion"
|
||||
baseURL = "https://heydon.github.io/inclusive-pattern-library/"
|
||||
baseURL = "https://heydon.github.io/infusion/"
|
||||
canonifyURLs = true
|
||||
theme = "infusion"
|
||||
|
||||
|
|
|
@ -2,12 +2,12 @@
|
|||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Categories on Infusion</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/categories/</link>
|
||||
<link>https://heydon.github.io/infusion/categories/</link>
|
||||
<description>Recent content in Categories on Infusion</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="https://heydon.github.io/inclusive-pattern-library/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||
<atom:link href="https://heydon.github.io/infusion/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
</channel>
|
||||
|
|
|
@ -5,11 +5,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Infusion
|
||||
|
@ -57,8 +57,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -68,7 +68,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -76,7 +76,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -84,7 +84,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -97,42 +97,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -146,21 +146,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -203,6 +203,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -2,41 +2,41 @@
|
|||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>The Infusion Pattern Library Builder on Infusion</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/</link>
|
||||
<link>https://heydon.github.io/infusion/</link>
|
||||
<description>Recent content in The Infusion Pattern Library Builder on Infusion</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Mon, 26 Jun 2017 18:27:58 +0100</lastBuildDate>
|
||||
|
||||
<atom:link href="https://heydon.github.io/inclusive-pattern-library/index.xml" rel="self" type="application/rss+xml" />
|
||||
<atom:link href="https://heydon.github.io/infusion/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Library structure</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/writing/library-structure/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/</guid>
|
||||
<guid>https://heydon.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:
|
||||
└── content ├── _index.md └── patterns ├── name-of-my-pattern.md └── name-of-my-other-pattern.md /content - This is where all of your content lives. You won&rsquo;t need to visit any other folders very frequently. _index.md — This is the content for your home page. /patterns — This is the folder where individual pattern files are kept.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Markdown & metadata</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/</guid>
|
||||
<guid>https://heydon.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&rsquo;s recommended you use &ldquo;kebab case&rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &ldquo;Menu button&rdquo; should probably have the filename menu-button. Then you get a nice clean URL: your-company.com/patterns/menu-button.
|
||||
If you&rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Expandable sections</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</guid>
|
||||
<description>In some cases, where there is a lot of content, it&rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&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:
|
||||
label — This is the label for the the section heading. level — This is the heading level (e.</description>
|
||||
|
@ -44,10 +44,10 @@ The expandable shortcode takes three parameters:
|
|||
|
||||
<item>
|
||||
<title>Code blocks</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/code/code-blocks/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/code/code-blocks/</guid>
|
||||
<description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
|
||||
So, this&hellip;
|
||||
```html &lt;button aria-pressed="false"toggle me&lt;/button ``` &hellip; will result in this:
|
||||
|
@ -56,10 +56,10 @@ So, this&hellip;
|
|||
|
||||
<item>
|
||||
<title>CodePen embedding</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</guid>
|
||||
<description>Sometimes just pictures of the pattern you&rsquo;re documenting aren&rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
|
||||
Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&rsquo;s ID.
|
||||
&#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>
|
||||
|
@ -67,20 +67,20 @@ Infusion offers a couple of ways to do this. The first is by embedding CodePen d
|
|||
|
||||
<item>
|
||||
<title>Including images</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/writing/including-images/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/writing/including-images/</guid>
|
||||
<description>From time to time, you&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&rsquo;ll be mostly working in.
|
||||
├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Installation</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/installation/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/installation/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/installation/</guid>
|
||||
<guid>https://heydon.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&rsquo;s get set up step-by-step.
|
||||
1. Install Hugo First we need to install Hugo globally.
|
||||
OSX users If you are a Mac user and have Homebrew on your system, installing Hugo is simple:
|
||||
|
@ -89,40 +89,40 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
|
|||
|
||||
<item>
|
||||
<title>Library setup</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/library-setup/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/library-setup/</guid>
|
||||
<description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
|
||||
&ldquo;Cleaning&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>
|
||||
<title>Notes & warnings</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/</guid>
|
||||
<guid>https://heydon.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 &ldquo;shortcodes&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&rsquo;s documentation as a note — an aside to the main thrust of the pattern&rsquo;s description. This is possible using the following syntax:</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>References</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/writing/references/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/</guid>
|
||||
<guid>https://heydon.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; warnings pattern. Here&rsquo;s what the markdown looks like, including the shortcode:
|
||||
I can reference the &#x7b;{% pattern "Notes & warnings" %}} 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>
|
||||
<title>Serving</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/serving/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/serving/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/serving/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/serving/</guid>
|
||||
<description>Serving locally While you&rsquo;re creating content for your library, you&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 on localhost:1313. Whenever you make changes to your library&rsquo;s files, the site will automatically rebuild. No need to refresh the web page!
|
||||
Publishing on Github Pages The easiest way to host your pattern library so you have a link to share is to run the host command.</description>
|
||||
|
@ -130,10 +130,10 @@ Publishing on Github Pages The easiest way to host your pattern library so you h
|
|||
|
||||
<item>
|
||||
<title>Writing inline demos</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</guid>
|
||||
<description>There are some issues with CodePen embedding , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&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&rsquo;t have to worry about broken styles and global JS.</description>
|
||||
</item>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/code/code-blocks/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Code blocks | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" aria-current="page">
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -236,8 +236,8 @@ toggle.addEventListener('click', (e) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
CodePen embedding | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" aria-current="page">
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -201,7 +201,7 @@
|
|||
|
||||
<aside aria-label="warning" class="note warning">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/images/icon-warning.svg" alt="">
|
||||
<img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
|
||||
<p>The compiled site will output an error if your <code>config.toml</code> does not include your CodePen username (in the <code>codePenUser</code> parameter). This is needed to construct the embed URL.</p>
|
||||
|
||||
</div>
|
||||
|
@ -245,7 +245,7 @@
|
|||
|
||||
|
||||
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/">
|
||||
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
|
@ -264,8 +264,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/code/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/code/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Exhibiting code | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -186,7 +186,7 @@
|
|||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/">
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Code blocks
|
||||
</a>
|
||||
|
@ -196,7 +196,7 @@
|
|||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/">
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
CodePen embedding
|
||||
</a>
|
||||
|
@ -206,7 +206,7 @@
|
|||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/">
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Writing inline demos
|
||||
</a>
|
||||
|
@ -224,8 +224,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -2,20 +2,20 @@
|
|||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Exhibiting code on Infusion</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/code/</link>
|
||||
<description>Recent content in Exhibiting code on Infusion</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="https://heydon.github.io/inclusive-pattern-library/patterns/code/index.xml" rel="self" type="application/rss+xml" />
|
||||
<atom:link href="https://heydon.github.io/infusion/patterns/code/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Code blocks</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/code/code-blocks/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/code/code-blocks/</guid>
|
||||
<description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
|
||||
So, this&hellip;
|
||||
```html &lt;button aria-pressed="false"toggle me&lt;/button ``` &hellip; will result in this:
|
||||
|
@ -24,10 +24,10 @@ So, this&hellip;
|
|||
|
||||
<item>
|
||||
<title>CodePen embedding</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</guid>
|
||||
<description>Sometimes just pictures of the pattern you&rsquo;re documenting aren&rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
|
||||
Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&rsquo;s ID.
|
||||
&#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,10 +35,10 @@ Infusion offers a couple of ways to do this. The first is by embedding CodePen d
|
|||
|
||||
<item>
|
||||
<title>Writing inline demos</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</guid>
|
||||
<description>There are some issues with CodePen embedding , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&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&rsquo;t have to worry about broken styles and global JS.</description>
|
||||
</item>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Writing inline demos | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" aria-current="page">
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -196,7 +196,7 @@
|
|||
|
||||
|
||||
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/">
|
||||
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
|
@ -323,7 +323,7 @@ toggle.addEventListener('click', (e) => {
|
|||
|
||||
<p><aside aria-label="note" class="note">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/images/icon-info.svg" alt="">
|
||||
<img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
|
||||
<p>Firefox does not currently support Shadow DOM and <strong>Infusion</strong> does not include a polyfill. Firefox will output an error message. These demos function correctly in Chrome, Safari, and Opera.</p>
|
||||
|
||||
</div>
|
||||
|
@ -339,8 +339,8 @@ toggle.addEventListener('click', (e) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Patterns | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -186,7 +186,7 @@
|
|||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/installation/">
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Installation
|
||||
</a>
|
||||
|
@ -196,7 +196,7 @@
|
|||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/">
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Library setup
|
||||
</a>
|
||||
|
@ -206,7 +206,7 @@
|
|||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/serving/">
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Serving
|
||||
</a>
|
||||
|
@ -224,8 +224,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -2,20 +2,20 @@
|
|||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Patterns on Infusion</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/</link>
|
||||
<description>Recent content in Patterns on Infusion</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="https://heydon.github.io/inclusive-pattern-library/patterns/index.xml" rel="self" type="application/rss+xml" />
|
||||
<atom:link href="https://heydon.github.io/infusion/patterns/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Installation</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/installation/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/installation/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/installation/</guid>
|
||||
<guid>https://heydon.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&rsquo;s get set up step-by-step.
|
||||
1. Install Hugo First we need to install Hugo globally.
|
||||
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>
|
||||
<title>Library setup</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/library-setup/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/library-setup/</guid>
|
||||
<description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
|
||||
&ldquo;Cleaning&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>
|
||||
<title>Serving</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/serving/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/serving/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/serving/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/serving/</guid>
|
||||
<description>Serving locally While you&rsquo;re creating content for your library, you&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 on localhost:1313. Whenever you make changes to your library&rsquo;s files, the site will automatically rebuild. No need to refresh the web page!
|
||||
Publishing on Github Pages The easiest way to host your pattern library so you have a link to share is to run the host command.</description>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/installation/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/installation/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Installation | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" aria-current="page">
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -218,7 +218,7 @@
|
|||
|
||||
|
||||
<figure role="group" aria-describedby="VGhlIEdpdGh1YiB3ZWIg">
|
||||
<p><img src="/images/open_in_desktop.png" alt="The open in desktop option, revealed when clicking clone or download" /></p>
|
||||
<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>
|
||||
|
||||
<figcaption id="VGhlIEdpdGh1YiB3ZWIg">
|
||||
The Github web interface
|
||||
|
@ -228,7 +228,7 @@
|
|||
|
||||
<aside aria-label="note" class="note">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/images/icon-info.svg" alt="">
|
||||
<img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
|
||||
<p>If you do not have a version of the Github desktop client installed, follow the prompts after clicking <strong>Open in Desktop</strong>.</p>
|
||||
|
||||
</div>
|
||||
|
@ -265,7 +265,7 @@
|
|||
|
||||
|
||||
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/">
|
||||
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
|
@ -296,8 +296,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/library-setup/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Library setup | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" aria-current="page">
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -204,7 +204,7 @@
|
|||
|
||||
|
||||
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/installation/">
|
||||
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
|
@ -234,7 +234,7 @@
|
|||
|
||||
<aside aria-label="warning" class="note warning">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/images/icon-warning.svg" alt="">
|
||||
<img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
|
||||
<p>If you are contributing to an existing <strong>Infusion</strong> library, do not run the following command. It will delete all of the patterns in that library. The <code>clean</code> command is just for libraries that you are starting from scratch.</p>
|
||||
|
||||
</div>
|
||||
|
@ -247,7 +247,7 @@
|
|||
<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/inclusive-pattern-library/patterns/writing/library-structure/">
|
||||
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
|
@ -328,7 +328,7 @@ theme = "infusion"
|
|||
<p>Now that your logo’s in place, everything should be ready. Where next? You can learn about
|
||||
|
||||
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/">
|
||||
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
|
@ -403,7 +403,7 @@ theme = "infusion"
|
|||
|
||||
|
||||
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/serving/">
|
||||
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
|
@ -426,8 +426,8 @@ theme = "infusion"
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/serving/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/serving/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Serving | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" aria-current="page">
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -201,7 +201,7 @@
|
|||
|
||||
<aside aria-label="warning" class="note warning">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/images/icon-warning.svg" alt="">
|
||||
<img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
|
||||
<p>The <code>host</code> command <em>force</em> pushes the contents of the <code>public</code> folder to <code>gh-pages</code>. This is not in itself problematic since nothing is overwritten on the <code>master</code> branch. However, be aware that the command does not push your <code>master</code> branch changes to origin. You still have to commit and push any changes you’ve made locally.</p>
|
||||
|
||||
</div>
|
||||
|
@ -217,8 +217,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Expandable sections | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" aria-current="page">
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -282,8 +282,8 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/including-images/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Including images | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" aria-current="page">
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -192,7 +192,7 @@
|
|||
|
||||
<aside aria-label="note" class="note">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/images/icon-info.svg" alt="">
|
||||
<img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
|
||||
<p>When you first make a copy of <strong>Infusion</strong>, <strong>Infusion’s</strong> own logo will be included. You should replace this with your own company or project logo.</p>
|
||||
|
||||
</div>
|
||||
|
@ -219,7 +219,7 @@
|
|||
|
||||
|
||||
<figure role="group" aria-describedby="U3RldmUgRmF1bGtuZXIg">
|
||||
<p><img src="/images/steve_faulkner.jpg" alt="Steve Faulkner's face" /></p>
|
||||
<p><img src="https://heydon.github.io/infusion/images/steve_faulkner.jpg" alt="Steve Faulkner's face" /></p>
|
||||
|
||||
<figcaption id="U3RldmUgRmF1bGtuZXIg">
|
||||
Steve Faulkner works for The Paciello Group
|
||||
|
@ -248,8 +248,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Writing | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -186,7 +186,7 @@
|
|||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/">
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Library structure
|
||||
</a>
|
||||
|
@ -196,7 +196,7 @@
|
|||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/">
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Markdown & metadata
|
||||
</a>
|
||||
|
@ -206,7 +206,7 @@
|
|||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/">
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Expandable sections
|
||||
</a>
|
||||
|
@ -216,7 +216,7 @@
|
|||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/">
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Including images
|
||||
</a>
|
||||
|
@ -226,7 +226,7 @@
|
|||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/">
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Notes & warnings
|
||||
</a>
|
||||
|
@ -236,7 +236,7 @@
|
|||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/">
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
References
|
||||
</a>
|
||||
|
@ -254,8 +254,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -2,40 +2,40 @@
|
|||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Writing on Infusion</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/writing/</link>
|
||||
<description>Recent content in Writing on Infusion</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/index.xml" rel="self" type="application/rss+xml" />
|
||||
<atom:link href="https://heydon.github.io/infusion/patterns/writing/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Library structure</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/writing/library-structure/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/</guid>
|
||||
<guid>https://heydon.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:
|
||||
└── content ├── _index.md └── patterns ├── name-of-my-pattern.md └── name-of-my-other-pattern.md /content - This is where all of your content lives. You won&rsquo;t need to visit any other folders very frequently. _index.md — This is the content for your home page. /patterns — This is the folder where individual pattern files are kept.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Markdown & metadata</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/</guid>
|
||||
<guid>https://heydon.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&rsquo;s recommended you use &ldquo;kebab case&rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &ldquo;Menu button&rdquo; should probably have the filename menu-button. Then you get a nice clean URL: your-company.com/patterns/menu-button.
|
||||
If you&rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Expandable sections</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</guid>
|
||||
<description>In some cases, where there is a lot of content, it&rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&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:
|
||||
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>
|
||||
<title>Including images</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/writing/including-images/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/</guid>
|
||||
<guid>https://heydon.github.io/infusion/patterns/writing/including-images/</guid>
|
||||
<description>From time to time, you&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&rsquo;ll be mostly working in.
|
||||
├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Notes & warnings</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/</guid>
|
||||
<guid>https://heydon.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 &ldquo;shortcodes&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&rsquo;s documentation as a note — an aside to the main thrust of the pattern&rsquo;s description. This is possible using the following syntax:</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>References</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/</link>
|
||||
<link>https://heydon.github.io/infusion/patterns/writing/references/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/</guid>
|
||||
<guid>https://heydon.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; warnings pattern. Here&rsquo;s what the markdown looks like, including the shortcode:
|
||||
I can reference the &#x7b;{% pattern "Notes & warnings" %}} 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>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Library structure | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" aria-current="page">
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -213,7 +213,7 @@
|
|||
|
||||
<aside aria-label="note" class="note">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/images/icon-info.svg" alt="">
|
||||
<img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
|
||||
<p>Note that subfolders like <code>/popups</code> must each have an <code>_index.md</code> file. This file doesn’t need any content except the TOML metadata defining the title (name) of that subsection:</p>
|
||||
|
||||
<pre><code>+++
|
||||
|
@ -236,7 +236,7 @@ title = "Popups"
|
|||
|
||||
|
||||
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/">
|
||||
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
|
@ -285,8 +285,8 @@ title = "Popups"
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Markdown & metadata | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" aria-current="page">
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -219,7 +219,7 @@ weight = 1
|
|||
|
||||
<aside aria-label="warning" class="note warning">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/images/icon-warning.svg" alt="">
|
||||
<img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
|
||||
<p>The <code>weight</code> parameter should be an integer, not a string, so don’t use scare quotes around the value!</p>
|
||||
|
||||
</div>
|
||||
|
@ -235,8 +235,8 @@ weight = 1
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
Notes & warnings | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" aria-current="page">
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -198,7 +198,7 @@ This is a note! It's something the reader may like to know about but is suppleme
|
|||
|
||||
<aside aria-label="note" class="note">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/images/icon-info.svg" alt="">
|
||||
<img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
|
||||
<p>This is a note! It’s something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.</p>
|
||||
|
||||
</div>
|
||||
|
@ -220,7 +220,7 @@ This is a warning! It's about something the reader should be careful to do or to
|
|||
|
||||
<aside aria-label="warning" class="note warning">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/images/icon-warning.svg" alt="">
|
||||
<img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
|
||||
<p>This is a warning! It’s about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.</p>
|
||||
|
||||
</div>
|
||||
|
@ -236,8 +236,8 @@ This is a warning! It's about something the reader should be careful to do or to
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/">
|
||||
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/references/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
||||
<title>
|
||||
|
||||
References | Infusion
|
||||
|
@ -56,8 +56,8 @@
|
|||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
||||
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
||||
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/installation/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Installation</span>
|
||||
</a>
|
||||
|
@ -75,7 +75,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library setup</span>
|
||||
</a>
|
||||
|
@ -83,7 +83,7 @@
|
|||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/serving/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Serving</span>
|
||||
</a>
|
||||
|
@ -96,42 +96,42 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Library structure</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Markdown & metadata</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Expandable sections</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Including images</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Notes & warnings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/writing/references/" aria-current="page">
|
||||
<a href="https://heydon.github.io/infusion/patterns/writing/references/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>References</span>
|
||||
</a>
|
||||
|
@ -145,21 +145,21 @@
|
|||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Code blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>CodePen embedding</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
||||
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Writing inline demos</span>
|
||||
</a>
|
||||
|
@ -210,7 +210,7 @@
|
|||
|
||||
|
||||
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/">
|
||||
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
|
@ -239,7 +239,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here.
|
|||
|
||||
<aside aria-label="note" class="note">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/images/icon-info.svg" alt="">
|
||||
<img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
|
||||
<p>The title argument you supply to the shortcode must be exactly the same as the referenced pattern’s <code>title</code> metadata value and is case sensitive.</p>
|
||||
|
||||
</div>
|
||||
|
@ -637,8 +637,8 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here.
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -3,79 +3,79 @@
|
|||
xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/writing/library-structure/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/writing/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/</loc>
|
||||
<loc>https://heydon.github.io/infusion/</loc>
|
||||
<lastmod>2017-06-26T18:27:58+01:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/categories/</loc>
|
||||
<loc>https://heydon.github.io/infusion/categories/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/code/code-blocks/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/code/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/code/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/writing/including-images/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/installation/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/installation/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/library-setup/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/writing/references/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/serving/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/serving/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/tags/</loc>
|
||||
<loc>https://heydon.github.io/infusion/tags/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/</loc>
|
||||
<loc>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</loc>
|
||||
</url>
|
||||
|
||||
</urlset>
|
|
@ -2,12 +2,12 @@
|
|||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Tags on Infusion</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/tags/</link>
|
||||
<link>https://heydon.github.io/infusion/tags/</link>
|
||||
<description>Recent content in Tags on Infusion</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="https://heydon.github.io/inclusive-pattern-library/tags/index.xml" rel="self" type="application/rss+xml" />
|
||||
<atom:link href="https://heydon.github.io/infusion/tags/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
</channel>
|
||||
|
|
Loading…
Reference in New Issue
Block a user