canonified URLs
This commit is contained in:
Heydon Pickering
parent
d81b537c0d
commit
e465efcf51
|
|
@ -1,6 +1,7 @@
|
|||
languageCode = "en-us"
|
||||
title = "Infusion"
|
||||
baseURL = "/"
|
||||
baseURL = "https://heydon.github.io/inclusive-pattern-library/"
|
||||
canonifyURLs = true
|
||||
theme = "infusion"
|
||||
|
||||
[params]
|
||||
|
|
|
|||
|
|
@ -13,5 +13,3 @@ Welcome to **Infusion**: a pattern library builder with a focus on inclusive int
|
|||
* Choose between plain or line-numbered code blocks
|
||||
* A responsive, screen reader and keyboard accessible output site
|
||||
{{% /ticks %}}
|
||||
|
||||
To get started using **Infusion**, you'll first need to look at the {{% pattern "Installation" %}} pattern.
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ toggle.addEventListener('click', (e) => {
|
|||
{{</codeBlock>}}
|
||||
{{</codeBlock>}}
|
||||
|
||||
The output will look like the following. Now you are able to refer to particular bits of the code, like the arrow function on line `3`.
|
||||
The output will look like the following. Now you can refer to particular bits of the code by line number, like the arrow function on line `3`.
|
||||
|
||||
{{<codeBlock lang="js" numbered="true">}}
|
||||
var toggle = demo.querySelector('[aria-pressed]');
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Categories on Infusion</title>
|
||||
<link>/categories/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/categories/</link>
|
||||
<description>Recent content in Categories on Infusion</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||
<atom:link href="https://heydon.github.io/inclusive-pattern-library/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
</channel>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/">
|
||||
<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" />
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/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="/patterns/installation/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/library-setup/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/serving/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/library-structure/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/expandable-sections/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/including-images/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/notes-and-warnings/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/references/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/code-blocks/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/codepen-embedding/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/writing-inline-demos/" >
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
|
|
@ -194,53 +194,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
<p>To get started using <strong>Infusion</strong>, you’ll first need to look at the
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="pattern-link" href="/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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
pattern.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
|
|
|
|||
|
|
@ -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>/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/</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="/index.xml" rel="self" type="application/rss+xml" />
|
||||
<atom:link href="https://heydon.github.io/inclusive-pattern-library/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Library structure</title>
|
||||
<link>/patterns/writing/library-structure/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/writing/library-structure/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/writing/markdown-and-metadata/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/writing/markdown-and-metadata/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/writing/expandable-sections/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/writing/expandable-sections/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/code/code-blocks/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/code/code-blocks/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/code/codepen-embedding/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/code/codepen-embedding/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/writing/including-images/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/writing/including-images/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/installation/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/installation/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/installation/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/library-setup/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/library-setup/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/writing/notes-and-warnings/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/writing/notes-and-warnings/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/writing/references/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/writing/references/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/serving/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/serving/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/serving/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/code/writing-inline-demos/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/code/writing-inline-demos/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/code/writing-inline-demos/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,243 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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 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">
|
||||
<title>
|
||||
|
||||
Code blocks | Infusion
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="display: none">
|
||||
<symbol id="bookmark">
|
||||
<g transform="translate(2266 3206.2)">
|
||||
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="w3c">
|
||||
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
|
||||
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tag">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="balloon">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<g>
|
||||
<path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
|
||||
<path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
|
||||
<path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
|
||||
<path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
|
||||
<path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
|
||||
<rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
|
||||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper">
|
||||
<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>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Writing</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Exhibiting code</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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/" >
|
||||
<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/" >
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>Code blocks</h1>
|
||||
|
||||
|
||||
|
||||
<p>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. <strong>Infusion</strong> will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.</p>
|
||||
|
||||
<p>So, this…</p>
|
||||
|
||||
<pre class=" "><code data-codeblock-shortcode>
|
||||
```html
|
||||
<button aria-pressed="false">toggle me</button>
|
||||
```
|
||||
</code></pre>
|
||||
|
||||
|
||||
<p>… will result in this:</p>
|
||||
|
||||
<pre><code class="language-html"><button aria-pressed="false">toggle me</button>
|
||||
</code></pre>
|
||||
|
||||
<p>Note that the syntax highlighting uses a greyscale theme. <strong>Infusion</strong> is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.</p>
|
||||
|
||||
<h2 id="line-numbered-code-blocks">Line-numbered code blocks</h2>
|
||||
|
||||
<p>In addition to the basic markdown support, <strong>Infusion</strong> provides a mechanism to display code blocks with line numbers. This is via the <code>codeBlock</code> shortcode. Here is the code for a block of JavaScript with line numbers:</p>
|
||||
|
||||
<pre class=" "><code data-codeblock-shortcode>
|
||||
{{<codeBlock lang="js" numbered="true">}}
|
||||
var toggle = demo.querySelector('[aria-pressed]');
|
||||
|
||||
toggle.addEventListener('click', (e) => {
|
||||
let pressed = e.target.getAttribute('aria-pressed') === 'true';
|
||||
e.target.setAttribute('aria-pressed', !pressed);
|
||||
});
|
||||
{{</codeBlock>}}
|
||||
</code></pre>
|
||||
|
||||
|
||||
<p>The output will look like the following. Now you can refer to particular bits of the code by line number, like the arrow function on line <code>3</code>.</p>
|
||||
|
||||
<pre class="language-js line-numbers"><code class="language-js" data-codeblock-shortcode>
|
||||
var toggle = demo.querySelector('[aria-pressed]');
|
||||
|
||||
toggle.addEventListener('click', (e) => {
|
||||
let pressed = e.target.getAttribute('aria-pressed') === 'true';
|
||||
e.target.setAttribute('aria-pressed', !pressed);
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,271 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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 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">
|
||||
<title>
|
||||
|
||||
CodePen embedding | Infusion
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="display: none">
|
||||
<symbol id="bookmark">
|
||||
<g transform="translate(2266 3206.2)">
|
||||
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="w3c">
|
||||
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
|
||||
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tag">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="balloon">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<g>
|
||||
<path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
|
||||
<path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
|
||||
<path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
|
||||
<path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
|
||||
<path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
|
||||
<rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
|
||||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper">
|
||||
<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>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Writing</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Exhibiting code</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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">
|
||||
<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/" >
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>CodePen embedding</h1>
|
||||
|
||||
<p>Sometimes just pictures of the pattern you’re documenting aren’t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.</p>
|
||||
|
||||
<p><strong>Infusion</strong> offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The <code>codePen</code> shortcode takes just one argument: the codePen’s <code>ID</code>.</p>
|
||||
|
||||
<pre class=" "><code data-codeblock-shortcode>
|
||||
{{% codePen VpVNKW %}}
|
||||
</code></pre>
|
||||
|
||||
|
||||
<p>This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</p>
|
||||
|
||||
|
||||
<iframe height='300' scrolling='no' title="code demonstration with codePen" src='//codepen.io/heydon/embed/VpVNKW/?height=265&theme-id=dark&default-tab=result,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
|
||||
<div>
|
||||
<a href="//codepen.io/heydon/pen/VpVNKW">See the demo on codePen</a>
|
||||
</div>
|
||||
</iframe>
|
||||
|
||||
|
||||
|
||||
<aside aria-label="warning" class="note warning">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/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>
|
||||
</aside>
|
||||
|
||||
|
||||
<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/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>
|
||||
|
||||
|
||||
.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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 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">
|
||||
<title>
|
||||
|
||||
Exhibiting code | Infusion
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="display: none">
|
||||
<symbol id="bookmark">
|
||||
<g transform="translate(2266 3206.2)">
|
||||
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="w3c">
|
||||
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
|
||||
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tag">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="balloon">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<g>
|
||||
<path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
|
||||
<path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
|
||||
<path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
|
||||
<path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
|
||||
<path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
|
||||
<rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
|
||||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper">
|
||||
<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>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Writing</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Exhibiting code</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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/" >
|
||||
<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/" >
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>
|
||||
|
||||
|
||||
Exhibiting code
|
||||
</h1>
|
||||
<ul class="patterns-list">
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/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>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/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>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/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>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
|
||||
<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>
|
||||
<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" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Code blocks</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/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>
|
||||
<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:
|
||||
&lt;button aria-pressed=&quot;false&quot;&gt;toggle me&lt;/button&gt; Note that the syntax highlighting uses a greyscale theme. Infusion is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>CodePen embedding</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/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>
|
||||
<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>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Writing inline demos</title>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/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>
|
||||
<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>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -0,0 +1,346 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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 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">
|
||||
<title>
|
||||
|
||||
Writing inline demos | Infusion
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="display: none">
|
||||
<symbol id="bookmark">
|
||||
<g transform="translate(2266 3206.2)">
|
||||
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="w3c">
|
||||
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
|
||||
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tag">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="balloon">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<g>
|
||||
<path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
|
||||
<path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
|
||||
<path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
|
||||
<path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
|
||||
<path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
|
||||
<rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
|
||||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper">
|
||||
<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>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Writing</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Exhibiting code</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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/" >
|
||||
<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">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>Writing inline demos</h1>
|
||||
|
||||
<p>There are some issues with
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
, like them not working offline. They also come with CodePen branding, which will clash with the pattern you’re trying to illustrate.</p>
|
||||
|
||||
<p><strong>Infusion</strong> offers another option: a special <code>demo</code> shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don’t have to worry about broken styles and global JS.</p>
|
||||
|
||||
<p>Here’s the example code for an inline demo of a toggle button:</p>
|
||||
|
||||
<pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
|
||||
{{<demo>}}
|
||||
<button aria-pressed="false">Toggle Me</button>
|
||||
<style>
|
||||
button {
|
||||
background: DarkCyan;
|
||||
color: white;
|
||||
border: 0;
|
||||
font-size: 1.5rem;
|
||||
padding: 0.5em 1em;
|
||||
border-right: 5px solid #000;
|
||||
border-bottom: 5px solid #000;
|
||||
}
|
||||
|
||||
[aria-pressed="true"] {
|
||||
border: 0;
|
||||
border-top: 5px solid #000;
|
||||
border-left: 5px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var toggle = demo.querySelector('[aria-pressed]');
|
||||
|
||||
toggle.addEventListener('click', (e) => {
|
||||
let pressed = e.target.getAttribute('aria-pressed') === 'true';
|
||||
e.target.setAttribute('aria-pressed', !pressed);
|
||||
});
|
||||
</script>
|
||||
{{</demo>}}
|
||||
</code></pre>
|
||||
|
||||
|
||||
<p>Note the <code>demo.querySelector</code> on line <code>21</code>. <strong>Infusion</strong> automatically provides <code>demo</code>, representing the root node of the demo. It’s like the <code>document</code> keyword but for a demo’s subtree.</p>
|
||||
|
||||
<p>Here’s a live demo of… the demo:</p>
|
||||
|
||||
<p>
|
||||
<div class="demo-container">
|
||||
|
||||
<div class="demo" id="demo-CiZsdDtidXR0b24"></div>
|
||||
|
||||
|
||||
<template id="template-CiZsdDtidXR0b24">
|
||||
|
||||
<button aria-pressed="false">Toggle Me</button>
|
||||
<style>
|
||||
button {
|
||||
background: DarkCyan;
|
||||
color: white;
|
||||
border: 0;
|
||||
font-size: 1.5rem;
|
||||
padding: 0.5em 1em;
|
||||
border-right: 5px solid #000;
|
||||
border-bottom: 5px solid #000;
|
||||
}
|
||||
|
||||
[aria-pressed="true"] {
|
||||
border: 0;
|
||||
border-top: 5px solid #000;
|
||||
border-left: 5px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var toggle = demo.querySelector('[aria-pressed]');
|
||||
|
||||
toggle.addEventListener('click', (e) => {
|
||||
let pressed = e.target.getAttribute('aria-pressed') === 'true';
|
||||
e.target.setAttribute('aria-pressed', !pressed);
|
||||
});
|
||||
</script>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
(function() {
|
||||
var root = document.getElementById('demo-CiZsdDtidXR0b24');
|
||||
if (document.head.attachShadow) {
|
||||
root.attachShadow({mode: 'open'});
|
||||
var template = document.getElementById('template-CiZsdDtidXR0b24');
|
||||
var script = template.content.querySelector('script');
|
||||
if (script) {
|
||||
script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtidXR0b24\').shadowRoot; ${script.textContent} })()`
|
||||
}
|
||||
root.shadowRoot.appendChild(document.importNode(template.content, true));
|
||||
} else {
|
||||
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<p><aside aria-label="note" class="note">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/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>
|
||||
</aside>
|
||||
</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/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" />
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/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="/patterns/installation/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/library-setup/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/serving/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/library-structure/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/expandable-sections/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/including-images/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/notes-and-warnings/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/references/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/code-blocks/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/codepen-embedding/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/writing-inline-demos/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/installation/">
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/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="/patterns/library-setup/">
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/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="/patterns/serving/">
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/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>
|
||||
|
|
|
|||
|
|
@ -2,20 +2,20 @@
|
|||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Patterns on Infusion</title>
|
||||
<link>/patterns/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/</link>
|
||||
<description>Recent content in Patterns on Infusion</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/patterns/index.xml" rel="self" type="application/rss+xml" />
|
||||
<atom:link href="https://heydon.github.io/inclusive-pattern-library/patterns/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Installation</title>
|
||||
<link>/patterns/installation/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/installation/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/installation/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/library-setup/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/library-setup/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/serving/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/serving/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/serving/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/installation/">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/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" />
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/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="/patterns/installation/" aria-current="page">
|
||||
<a href="/inclusive-pattern-library/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="/patterns/library-setup/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/serving/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/library-structure/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/expandable-sections/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/including-images/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/notes-and-warnings/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/references/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/code-blocks/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/codepen-embedding/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/writing-inline-demos/" >
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
|
|
@ -228,7 +228,7 @@
|
|||
|
||||
<aside aria-label="note" class="note">
|
||||
<div>
|
||||
<img src="/images/icon-info.svg" alt="">
|
||||
<img src="/inclusive-pattern-library/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="/patterns/library-setup/">
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,433 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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 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">
|
||||
<title>
|
||||
|
||||
Library setup | Infusion
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="display: none">
|
||||
<symbol id="bookmark">
|
||||
<g transform="translate(2266 3206.2)">
|
||||
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="w3c">
|
||||
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
|
||||
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tag">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="balloon">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<g>
|
||||
<path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
|
||||
<path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
|
||||
<path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
|
||||
<path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
|
||||
<path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
|
||||
<rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
|
||||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper">
|
||||
<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>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Writing</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Exhibiting code</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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/" >
|
||||
<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/" >
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>Library setup</h1>
|
||||
|
||||
|
||||
|
||||
<p>By now, you should have followed the
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
|
||||
|
||||
<h2 id="cleaning-the-content-folder">“Cleaning” the content folder</h2>
|
||||
|
||||
<p>Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of <strong>Infusion</strong> is a facsimile of the original, containing all this documentation content. We want to delete that content and replace it with some starter content. There’s a simple <code>clean</code> command for this.</p>
|
||||
|
||||
<aside aria-label="warning" class="note warning">
|
||||
<div>
|
||||
<img src="/inclusive-pattern-library/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>
|
||||
</aside>
|
||||
|
||||
|
||||
<pre class="cmd"><code>npm run clean</code></pre>
|
||||
|
||||
|
||||
<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in
|
||||
|
||||
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.</p>
|
||||
|
||||
<h2 id="the-setup-command">The <code>setup</code> command</h2>
|
||||
|
||||
<p>There’s another command, <code>setup</code>, which you need to run to create an initial build and make sure git is aware of the <code>public</code> folder it generates.</p>
|
||||
|
||||
<pre class="cmd"><code>npm run setup</code></pre>
|
||||
|
||||
|
||||
<h2 id="the-config-file">The config file</h2>
|
||||
|
||||
<p>You’ll also want to name your library and configure one or two other things in the <code>config.toml</code> file that’s found at the root of your project. Here’s how that file looks:</p>
|
||||
|
||||
<pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
|
||||
languageCode = "en-us"
|
||||
title = "Inclusive Pattern Docs"
|
||||
baseURL = "/"
|
||||
theme = "infusion"
|
||||
|
||||
[params]
|
||||
description = "Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself."
|
||||
codePenUser = "Heydon"
|
||||
</code></pre>
|
||||
|
||||
|
||||
<ul>
|
||||
<li><strong>title</strong> — This is the library’s name, like “Megacorp 5000 Pattern Library”. You don’t have to include the term “pattern library” if you don’t want to.</li>
|
||||
<li><strong>theme</strong> — This is the theme the library is using. Don’t change this from “infusion”.</li>
|
||||
<li><strong>description</strong> — This is a short description of the library and comes under the logo.</li>
|
||||
<li><strong>codePenUser</strong> — If you want to embed codePens in your pattern files, you need to supply a codePen username here.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="including-a-logo">Including a logo</h2>
|
||||
|
||||
<p>In the <code>static</code> folder, you’ll find a <code>logo.png</code> file. Replace this file with your own company or project logo. Currently, only the PNG format is supported.</p>
|
||||
|
||||
<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/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
Library structure
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
to help you get writing, or find out how to serve the library locally and on Github Pages in
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/serving/">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/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" />
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/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="/patterns/installation/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/library-setup/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/serving/" aria-current="page">
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/library-structure/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/expandable-sections/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/including-images/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/notes-and-warnings/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/references/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/code-blocks/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/codepen-embedding/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/writing-inline-demos/" >
|
||||
<a href="/inclusive-pattern-library/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="/images/icon-warning.svg" alt="">
|
||||
<img src="/inclusive-pattern-library/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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,289 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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 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">
|
||||
<title>
|
||||
|
||||
Expandable sections | Infusion
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<svg style="display: none">
|
||||
<symbol id="bookmark">
|
||||
<g transform="translate(2266 3206.2)">
|
||||
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="w3c">
|
||||
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
|
||||
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
|
||||
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="tag">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="balloon">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<g>
|
||||
<path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
|
||||
<path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
|
||||
<path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
|
||||
<path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
|
||||
<path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
|
||||
<rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
|
||||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="wrapper">
|
||||
<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>
|
||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Writing</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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/" >
|
||||
<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">
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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/" >
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Exhibiting code</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/inclusive-pattern-library/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/" >
|
||||
<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/" >
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>Expandable sections</h1>
|
||||
|
||||
<p>In some cases, where there is a lot of content, it’s helpful to collapse certain sections. That way, readers get an overview of what’s in the content and can choose where to focus in. <strong>Infusion</strong> provides a shortcode method for creating expandable sections which generates accessible markup using <code>aria-expanded</code>.</p>
|
||||
|
||||
<p>The <code>expandable</code> shortcode takes three parameters:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>label</strong> — This is the label for the the section heading.</li>
|
||||
<li><strong>level</strong> — This is the heading level (e.g. <code>2</code> or <code><h2></code>) that will contain the label. If you omit a level parameter, no heading is used; it’s just a button</li>
|
||||
<li><strong>open</strong> — Include this and give it a value of “true” or “yes” to make the section expanded on page load</li>
|
||||
</ul>
|
||||
|
||||
<p>Here’s what the code might look like for a simple expandable section containing markdown:</p>
|
||||
|
||||
<pre class=" "><code data-codeblock-shortcode>
|
||||
{{% expandable label="A section of dummy text" level="2" %}}
|
||||
Here is some markdown including [a link](https://twitter.com/heydonworks). Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.
|
||||
{{% /expandable %}}
|
||||
</code></pre>
|
||||
|
||||
|
||||
<p>Let’s look at what that outputs as:</p>
|
||||
|
||||
<div class="expandable-section">
|
||||
|
||||
<h2>
|
||||
|
||||
<button aria-expanded="false" data-expands="expandable-PHA+SGVyZSBpcyBzb21l">
|
||||
<span class="expandable-label">A section of dummy text</span>
|
||||
<svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
|
||||
<g transform="translate(0 -981.5)">
|
||||
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
|
||||
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</h2>
|
||||
|
||||
<div id="expandable-PHA+SGVyZSBpcyBzb21l" hidden>
|
||||
<p>Here is some markdown including <a href="https://twitter.com/heydonworks">a link</a>. Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Successive collapsible sections fit snugly together. The second of the following two has <code>open="true"</code>.</p>
|
||||
|
||||
<div class="expandable-section">
|
||||
|
||||
<h2>
|
||||
|
||||
<button aria-expanded="false" data-expands="expandable-PHA+TWF1cmlzIGVnZXQg">
|
||||
<span class="expandable-label">A section of dummy text</span>
|
||||
<svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
|
||||
<g transform="translate(0 -981.5)">
|
||||
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
|
||||
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</h2>
|
||||
|
||||
<div id="expandable-PHA+TWF1cmlzIGVnZXQg" hidden>
|
||||
<p>Mauris eget elit ut neque venenatis placerat id nec libero. Nunc accumsan cursus elit nec iaculis. Proin id rutrum magna, a aliquet sem. Sed et tortor id sem eleifend porta vitae eget elit. Cras sodales porta malesuada. Suspendisse at odio ac tortor.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="expandable-section">
|
||||
|
||||
<h2>
|
||||
|
||||
<button aria-expanded="true" data-expands="expandable-PHA+VXQgdnVscHV0YXRl">
|
||||
<span class="expandable-label">Another dummy section</span>
|
||||
<svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
|
||||
<g transform="translate(0 -981.5)">
|
||||
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
|
||||
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</h2>
|
||||
|
||||
<div id="expandable-PHA+VXQgdnVscHV0YXRl" >
|
||||
<p>Ut vulputate enim ut lorem iaculis, vel faucibus metus iaculis. Aliquam erat volutpat. Aliquam luctus orci vel consectetur dignissim. Nullam et efficitur lorem, et ornare est. Sed tristique porttitor justo, quis malesuada velit. Nullam et elit finibus, sollicitudin velit placerat, ultricies dui.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the “<code>%</code>” notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/writing/including-images/">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/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" />
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/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="/patterns/installation/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/library-setup/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/serving/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/library-structure/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/expandable-sections/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/including-images/" aria-current="page">
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/notes-and-warnings/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/references/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/code-blocks/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/codepen-embedding/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/writing-inline-demos/" >
|
||||
<a href="/inclusive-pattern-library/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="/images/icon-info.svg" alt="">
|
||||
<img src="/inclusive-pattern-library/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>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/writing/">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/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" />
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/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="/patterns/installation/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/library-setup/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/serving/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/library-structure/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/expandable-sections/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/including-images/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/notes-and-warnings/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/references/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/code-blocks/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/codepen-embedding/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/writing-inline-demos/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/library-structure/">
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/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="/patterns/writing/markdown-and-metadata/">
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/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="/patterns/writing/expandable-sections/">
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/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="/patterns/writing/including-images/">
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/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="/patterns/writing/notes-and-warnings/">
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/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="/patterns/writing/references/">
|
||||
<a href="https://heydon.github.io/inclusive-pattern-library/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>
|
||||
|
|
|
|||
|
|
@ -2,40 +2,40 @@
|
|||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Writing on Infusion</title>
|
||||
<link>/patterns/writing/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/</link>
|
||||
<description>Recent content in Writing on Infusion</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/patterns/writing/index.xml" rel="self" type="application/rss+xml" />
|
||||
<atom:link href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Library structure</title>
|
||||
<link>/patterns/writing/library-structure/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/writing/library-structure/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/writing/markdown-and-metadata/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/writing/markdown-and-metadata/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/writing/expandable-sections/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/writing/expandable-sections/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/writing/including-images/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/writing/including-images/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/writing/notes-and-warnings/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/writing/notes-and-warnings/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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>/patterns/writing/references/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/writing/references/</guid>
|
||||
<guid>https://heydon.github.io/inclusive-pattern-library/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,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/writing/library-structure/">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/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" />
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/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="/patterns/installation/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/library-setup/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/serving/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/library-structure/" aria-current="page">
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/expandable-sections/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/including-images/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/notes-and-warnings/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/references/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/code-blocks/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/codepen-embedding/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/writing-inline-demos/" >
|
||||
<a href="/inclusive-pattern-library/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="/images/icon-info.svg" alt="">
|
||||
<img src="/inclusive-pattern-library/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="/patterns/writing/markdown-and-metadata/">
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/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>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/writing/markdown-and-metadata/">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/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" />
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/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="/patterns/installation/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/library-setup/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/serving/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/library-structure/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/markdown-and-metadata/" aria-current="page">
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/expandable-sections/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/including-images/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/notes-and-warnings/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/references/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/code-blocks/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/codepen-embedding/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/writing-inline-demos/" >
|
||||
<a href="/inclusive-pattern-library/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="/images/icon-warning.svg" alt="">
|
||||
<img src="/inclusive-pattern-library/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>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/writing/notes-and-warnings/">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/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" />
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/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="/patterns/installation/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/library-setup/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/serving/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/library-structure/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/expandable-sections/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/including-images/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/notes-and-warnings/" aria-current="page">
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/references/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/code-blocks/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/codepen-embedding/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/writing-inline-demos/" >
|
||||
<a href="/inclusive-pattern-library/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="/images/icon-info.svg" alt="">
|
||||
<img src="/inclusive-pattern-library/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="/images/icon-warning.svg" alt="">
|
||||
<img src="/inclusive-pattern-library/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>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/writing/references/">
|
||||
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/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" />
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
<img src="https://heydon.github.io/inclusive-pattern-library/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="/patterns/installation/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/library-setup/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/serving/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/library-structure/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/markdown-and-metadata/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/expandable-sections/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/including-images/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/notes-and-warnings/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/references/" aria-current="page">
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/code-blocks/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/codepen-embedding/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/code/writing-inline-demos/" >
|
||||
<a href="/inclusive-pattern-library/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="/patterns/writing/notes-and-warnings/">
|
||||
<a class="pattern-link" href="https://heydon.github.io/inclusive-pattern-library/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="/images/icon-info.svg" alt="">
|
||||
<img src="/inclusive-pattern-library/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>
|
||||
|
|
|
|||
|
|
@ -3,79 +3,79 @@
|
|||
xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<url>
|
||||
<loc>/patterns/writing/library-structure/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/library-structure/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/writing/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/writing/markdown-and-metadata/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/markdown-and-metadata/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/writing/expandable-sections/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/</loc>
|
||||
<lastmod>2017-06-26T18:27:58+01:00</lastmod>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/categories/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/categories/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/code/code-blocks/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/code/code-blocks/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/code/codepen-embedding/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/code/codepen-embedding/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/code/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/code/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/writing/including-images/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/including-images/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/installation/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/installation/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/library-setup/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/library-setup/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/writing/notes-and-warnings/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/notes-and-warnings/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/writing/references/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/writing/references/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/serving/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/patterns/serving/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/tags/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/tags/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/code/writing-inline-demos/</loc>
|
||||
<loc>https://heydon.github.io/inclusive-pattern-library/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>/tags/</link>
|
||||
<link>https://heydon.github.io/inclusive-pattern-library/tags/</link>
|
||||
<description>Recent content in Tags on Infusion</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/tags/index.xml" rel="self" type="application/rss+xml" />
|
||||
<atom:link href="https://heydon.github.io/inclusive-pattern-library/tags/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
</channel>
|
||||
|
|
|
|||
Loading…
Reference in New Issue