cupper-hugo-theme/docs/index.xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>The Infusion Pattern Library Builder on Infusion</title>
    <link>https://heydon.github.io/infusion/</link>
    <description>Recent content in The Infusion Pattern Library Builder on Infusion</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>en-us</language>
    <lastBuildDate>Mon, 26 Jun 2017 18:27:58 +0100</lastBuildDate>
    
	<atom:link href="https://heydon.github.io/infusion/index.xml" rel="self" type="application/rss+xml" />
    
    
    <item>
      <title>Code blocks</title>
      <link>https://heydon.github.io/infusion/patterns/coding/code-blocks/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/coding/code-blocks/</guid>
      <description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
So, this&amp;hellip;
```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ```  &amp;hellip; will result in this:
&amp;lt;button aria-pressed=&amp;quot;false&amp;quot;&amp;gt;toggle me&amp;lt;/button&amp;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>Library structure</title>
      <link>https://heydon.github.io/infusion/patterns/writing/library-structure/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/writing/library-structure/</guid>
      <description>Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this:
 content  _index.md patterns  name-of-my-pattern.md name-of-my-other-pattern.md      /content - This is where all of your content lives. You won&amp;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>CodePen embedding</title>
      <link>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</guid>
      <description>Sometimes just pictures of the pattern you&amp;rsquo;re documenting aren&amp;rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
&amp;#x7b;{% codePen VpVNKW %}}  This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
    </item>
    
    <item>
      <title>Markdown &amp; metadata</title>
      <link>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</guid>
      <description>In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&amp;rsquo;s recommended you use &amp;ldquo;kebab case&amp;rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &amp;ldquo;Menu button&amp;rdquo; should probably have the filename menu-button. Then you get a nice clean URL: username.github.io/your-library/patterns/menu-button.
If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
    </item>
    
    <item>
      <title>Writing inline demos</title>
      <link>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/coding/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&amp;rsquo;re trying to illustrate.
Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
    </item>
    
    <item>
      <title>Expandable sections</title>
      <link>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</guid>
      <description>In some cases, where there is a lot of content, it&amp;rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&amp;rsquo;s in the content and can choose where to focus in. Infusion provides a shortcode method for creating expandable sections which generates accessible markup using aria-expanded.
The expandable shortcode takes three parameters:
 label — This is the label for the the section heading. level — This is the heading level (e.</description>
    </item>
    
    <item>
      <title>Color palettes</title>
      <link>https://heydon.github.io/infusion/patterns/coding/color-palettes/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/coding/color-palettes/</guid>
      <description>There&amp;rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
&amp;#x7b;{% colors &#34;#111111, #cccccc, #ffffff&#34; %}}  The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:</description>
    </item>
    
    <item>
      <title>Command line</title>
      <link>https://heydon.github.io/infusion/patterns/coding/command-line/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/coding/command-line/</guid>
      <description>Your pattern documentation may need to include commands for installing packages or using CLIs. Infusion offers the cmd shortcode for making code blocks look like terminal commands.
Here&amp;rsquo;s how you write it:
&amp;#x7b;{&amp;lt;cmd}} npm run start &amp;#x7b;{&amp;lt;/cmd}}  And here&amp;rsquo;s how it looks:
npm run start    The cmd shortcode currently only supports single commands. If you want to show multiple, successive commands use separate cmd blocks.
  </description>
    </item>
    
    <item>
      <title>File trees</title>
      <link>https://heydon.github.io/infusion/patterns/coding/file-trees/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/coding/file-trees/</guid>
      <description>Representing folder/file structures is simple and accessible in Infusion. Which is just as well, because some components may need to conform to a certain folder structure.
The file tree is described using a markdown nested list structure:
&amp;#x7b;{% fileTree %}} * Level 1 folder * Level 2 file * Level 2 folder * Level 3 file * Level 3 folder * Level 4 file * Level 3 folder * Level 4 file * Level 4 file * Level 3 file * Level 2 folder * Level 3 file * Level 3 file * Level 3 file * Level 2 file * Level 1 file &amp;#x7b;{% /fileTree %}}  This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers:</description>
    </item>
    
    <item>
      <title>Including images</title>
      <link>https://heydon.github.io/infusion/patterns/media/including-images/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/media/including-images/</guid>
      <description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in.
├── content └── static └── images ├── logo.png └── menu-button.gif     When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
    </item>
    
    <item>
      <title>Including videos</title>
      <link>https://heydon.github.io/infusion/patterns/media/including-videos/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/media/including-videos/</guid>
      <description>Infusion has a lot of its own shortcodes, but you can still use Hugo&amp;rsquo;s built in shortcodes. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video&amp;rsquo;s id.
&amp;#x7b;{}}  </description>
    </item>
    
    <item>
      <title>Installation</title>
      <link>https://heydon.github.io/infusion/patterns/installation/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/installation/</guid>
      <description>Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let&amp;rsquo;s get set up step-by-step.
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:
brew install hugo Alternatively, you can manually install Hugo from a package. You can verify the installation was successful by typing:</description>
    </item>
    
    <item>
      <title>Library setup</title>
      <link>https://heydon.github.io/infusion/patterns/library-setup/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/library-setup/</guid>
      <description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
&amp;ldquo;Cleaning&amp;rdquo; the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.</description>
    </item>
    
    <item>
      <title>Notes &amp; warnings</title>
      <link>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</guid>
      <description>Infusion acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of &amp;ldquo;shortcodes&amp;rdquo;. Shortcodes offer a simple syntax for including rich content. For example, Infusion provides shortcodes for including notes and warnings.
Notes You may wish to pick out some content in your pattern&amp;rsquo;s documentation as a note — an aside to the main thrust of the pattern&amp;rsquo;s description. This is possible using the following syntax:</description>
    </item>
    
    <item>
      <title>References</title>
      <link>https://heydon.github.io/infusion/patterns/writing/references/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/writing/references/</guid>
      <description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} pattern here.  This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
    </item>
    
    <item>
      <title>Serving</title>
      <link>https://heydon.github.io/infusion/patterns/serving/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/serving/</guid>
      <description>Serving locally While you&amp;rsquo;re creating content for your library, you&amp;rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command:
npm run serve This will serve your working library from localhost:1313 (the exact URL will be determined by what&amp;rsquo;s in your baseURL and will be revealed to you by your terminal). Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild.</description>
    </item>
    
    <item>
      <title>Tables of contents</title>
      <link>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</guid>
      <description>Pattern pages in Infusion that have two or more subheadings — &amp;lt;h2&amp;gt;s — automatically get a table of contents: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &amp;ldquo;Table of contents&amp;rdquo; label and uses an ordered list. The table of contents markup for the Library setup page looks something like this:
&amp;lt;nav class=&amp;quot;toc&amp;quot; aria-labelledby=&amp;quot;toc-heading&amp;quot;&amp;gt; &amp;lt;h2 id=&amp;quot;toc-heading&amp;quot;&amp;gt;Table of contents&amp;lt;/h2&amp;gt; &amp;lt;ol&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#cleaning-the-content-folder&amp;quot;&amp;gt;“Cleaning” the content folder&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-setup-command&amp;quot;&amp;gt;The setup command&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-config-file&amp;quot;&amp;gt;The config file&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#including-a-logo&amp;quot;&amp;gt;Including a logo&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ol&amp;gt; &amp;lt;/nav&amp;gt;  Tables of contents are a neat way to break down the content of the page and give users a navigable overview.</description>
    </item>
    
    <item>
      <title>Tested using...</title>
      <link>https://heydon.github.io/infusion/patterns/coding/tested/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://heydon.github.io/infusion/patterns/coding/tested/</guid>
      <description>When you&amp;rsquo;re an inclusive designer, it&amp;rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users.
Infusion provided a tested shortcode that let&amp;rsquo;s you show which browsers and assistive technologies you&amp;rsquo;ve tried your design out in. Here&amp;rsquo;s an example. Note the commas and &amp;ldquo;+&amp;rdquo; signs.
&amp;#x7b;{% tested using=&#34;Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge&#34; %}}  This outputs:</description>
    </item>
    
  </channel>
</rss>