Documentation for the Infusion pattern library builder. This documentation is constructed using the builder itself.
-
-
-
-
-
-
-
-
-
-
diff --git a/public/index.xml b/public/index.xml
deleted file mode 100644
index 38d9c33..0000000
--- a/public/index.xml
+++ /dev/null
@@ -1,152 +0,0 @@
-
-
-
- The Infusion Pattern Library Builder on Infusion
- https://heydon.github.io/infusion/
- Recent content in The Infusion Pattern Library Builder on Infusion
- Hugo -- gohugo.io
- en-us
- Mon, 26 Jun 2017 18:27:58 +0100
-
-
-
-
-
- Library structure
- https://heydon.github.io/infusion/patterns/writing/library-structure/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/writing/library-structure/
- 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’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.
-
-
-
- Markdown & metadata
- https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/
- 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’s recommended you use “kebab case” to name the file ( words separated by hyphens). For example, a pattern with the title “Menu button” should probably have the filename menu-button. Then you get a nice clean URL: your-company.com/patterns/menu-button.
-If you’re not familiar with writing markdown, there are a number of tutorials available.
-
-
-
- Expandable sections
- https://heydon.github.io/infusion/patterns/writing/expandable-sections/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/writing/expandable-sections/
- 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. 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.
-
-
-
- Code blocks
- https://heydon.github.io/infusion/patterns/code/code-blocks/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/code/code-blocks/
- 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…
-```html <button aria-pressed="false"toggle me</button ``` … will result in this:
-<button aria-pressed="false">toggle me</button> 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.
-
-
-
- CodePen embedding
- https://heydon.github.io/infusion/patterns/code/codepen-embedding/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/code/codepen-embedding/
- 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.
-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’s ID.
-{{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:
-
-
-
- Color palettes
- https://heydon.github.io/infusion/patterns/code/color-palettes/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/code/color-palettes/
- There’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.
-{{% colors "#111111, #cccccc, #ffffff" %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:
-
-
-
- Including images
- https://heydon.github.io/infusion/patterns/writing/including-images/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/writing/including-images/
- From time to time, you’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’ll be mostly working in.
-├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion’s own logo will be included. You should replace this with your own company or project logo.
-
-
-
- Installation
- https://heydon.github.io/infusion/patterns/installation/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/installation/
- Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let’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:
-brew install hugo Alternatively, you can manually install Hugo from a package. You can verify the installation was successful by typing:
-
-
-
- Library setup
- https://heydon.github.io/infusion/patterns/library-setup/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/library-setup/
- 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.
-“Cleaning” the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.
-
-
-
- Notes & warnings
- https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/
- Infusion acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of “shortcodes”. 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’s documentation as a note — an aside to the main thrust of the pattern’s description. This is possible using the following syntax:
-
-
-
- References
- https://heydon.github.io/infusion/patterns/writing/references/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/writing/references/
- Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes & warnings pattern. Here’s what the markdown looks like, including the shortcode:
-I can reference the {{% 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.
-
-
-
- Serving
- https://heydon.github.io/infusion/patterns/serving/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/serving/
- Serving locally While you’re creating content for your library, you’ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command:
-npm run serve This will serve your working library on localhost:1313. Whenever you make changes to your library’s files, the site will automatically rebuild. No need to refresh the web page!
-Publishing on Github Pages There are three steps to hosting your library on Github Pages.
-
-
-
- Writing inline demos
- https://heydon.github.io/infusion/patterns/code/writing-inline-demos/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/code/writing-inline-demos/
- 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’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’t have to worry about broken styles and global JS.
-
-
-
-
\ No newline at end of file
diff --git a/public/js/dom-scripts.js b/public/js/dom-scripts.js
deleted file mode 100644
index 584aae6..0000000
--- a/public/js/dom-scripts.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/* expandable sections */
-(function () {
- function toggle (button, target) {
- var expanded = button.getAttribute('aria-expanded') === 'true'
- button.setAttribute('aria-expanded', !expanded)
- target.hidden = !target.hidden
- }
-
- var expanders = document.querySelectorAll('[data-expands]')
-
- Array.prototype.forEach.call(expanders, function (expander) {
- var target = document.getElementById(expander.getAttribute('data-expands'))
-
- expander.addEventListener('click', function () {
- toggle(expander, target)
- })
- })
-}());
-
-/* menu button */
-(function () {
- var button = document.getElementById('menu-button')
- var menu = document.getElementById('patterns-list')
- button.addEventListener('click', function() {
- var expanded = this.getAttribute('aria-expanded') === 'true'
- this.setAttribute('aria-expanded', !expanded)
- })
-}());
-
-/* persist navigation scroll point */
-(function () {
- window.addEventListener('unload', function() {
- var scrollPoint = document.getElementById('patterns-nav').scrollTop
- localStorage.setItem('scrollPoint', scrollPoint)
- })
-
- window.addEventListener('load', function() {
- document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'))
- })
-}());
diff --git a/public/js/prism.js b/public/js/prism.js
deleted file mode 100644
index 8e2ab17..0000000
--- a/public/js/prism.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript&plugins=line-numbers */
-var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof s)){h.lastIndex=0;var _=h.exec(w),P=1;if(!_&&m&&b!=t.length-1){if(h.lastIndex=k,_=h.exec(e),!_)break;for(var A=_.index+(d?_[1].length:0),j=_.index+_[0].length,x=b,O=k,S=t.length;S>x&&(j>O||!t[x].type&&!t[x-1].greedy);++x)O+=t[x].length,A>=O&&(++b,k=O);if(t[b]instanceof s||t[x-1].greedy)continue;P=x-b,w=e.slice(k,O),_.index-=k}if(_){d&&(p=_[1].length);var A=_.index+p,_=_[0].slice(p),j=A+_.length,N=w.slice(0,A),C=w.slice(j),E=[b,P];N&&(++b,k+=N.length,E.push(N));var L=new s(u,f?n.tokenize(_,f):_,y,_,m);if(E.push(L),C&&E.push(C),Array.prototype.splice.apply(t,E),1!=P&&n.matchGrammar(e,t,a,b,k,!0,u),l)break}else if(l)break}}}}},tokenize:function(e,t){var a=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}return n.matchGrammar(e,a,t,0,0,!1),a},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,!document.addEventListener||n.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
-Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\s\S])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\s\S]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
-Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
-Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
-Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;
-!function(){"undefined"!=typeof self&&self.Prism&&self.document&&Prism.hooks.add("complete",function(e){if(e.code){var t=e.element.parentNode,s=/\s*\bline-numbers\b\s*/;if(t&&/pre/i.test(t.nodeName)&&(s.test(t.className)||s.test(e.element.className))&&!e.element.querySelector(".line-numbers-rows")){s.test(e.element.className)&&(e.element.className=e.element.className.replace(s,"")),s.test(t.className)||(t.className+=" line-numbers");var n,a=e.code.match(/\n(?!$)/g),l=a?a.length+1:1,r=new Array(l+1);r=r.join(""),n=document.createElement("span"),n.setAttribute("aria-hidden","true"),n.className="line-numbers-rows",n.innerHTML=r,t.hasAttribute("data-start")&&(t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)),e.element.appendChild(n)}}})}();
diff --git a/public/js/webcomponents.js b/public/js/webcomponents.js
deleted file mode 100644
index 0b7e78d..0000000
--- a/public/js/webcomponents.js
+++ /dev/null
@@ -1,151 +0,0 @@
-(function(){
-/*
-
-Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-
- Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
- This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
- The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
- The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
- Code distributed by Google as part of the polymer project is also
- subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-
-Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-'use strict';var hb="undefined"!=typeof window&&window===this?this:"undefined"!=typeof global&&null!=global?global:this;
-(function(){function k(){var a=this;this.u={};this.g=document.documentElement;var b=new ra;b.rules=[];this.h=r.set(this.g,new r(b));this.i=!1;this.b=this.a=null;ib(function(){a.c()})}function D(){this.customStyles=[];this.enqueued=!1}function jb(){}function ba(a){this.cache={};this.c=void 0===a?100:a}function p(){}function r(a,b,c,d,e){this.D=a||null;this.b=b||null;this.qa=c||[];this.L=null;this.T=e||"";this.a=this.B=this.F=null}function q(){}function ra(){this.end=this.start=0;this.rules=this.parent=
-this.previous=null;this.cssText=this.parsedCssText="";this.atRule=!1;this.type=0;this.parsedSelector=this.selector=this.keyframesName=""}function Oc(a){function b(b,c){Object.defineProperty(b,"innerHTML",{enumerable:c.enumerable,configurable:!0,get:c.get,set:function(b){var d=this,e=void 0;m(this)&&(e=[],L(this,function(a){a!==d&&e.push(a)}));c.set.call(this,b);if(e)for(var f=0;f":return">";case '"':return""";case "\u00a0":return" "}}function Fb(a){for(var b={},c=0;c";break a;case Node.TEXT_NODE:h=h.data;h=l&&jd[l.localName]?h:h.replace(kd,Eb);break a;case Node.COMMENT_NODE:h="\x3c!--"+h.data+"--\x3e";break a;default:throw window.console.error(h),Error("not implemented");}}c+=h}return c}function M(a){A.currentNode=a;return A.parentNode()}function za(a){A.currentNode=
-a;return A.firstChild()}function Aa(a){A.currentNode=a;return A.lastChild()}function Gb(a){A.currentNode=a;return A.previousSibling()}function Hb(a){A.currentNode=a;return A.nextSibling()}function W(a){var b=[];A.currentNode=a;for(a=A.firstChild();a;)b.push(a),a=A.nextSibling();return b}function Ib(a){B.currentNode=a;return B.parentNode()}function Jb(a){B.currentNode=a;return B.firstChild()}function Kb(a){B.currentNode=a;return B.lastChild()}function Lb(a){B.currentNode=a;return B.previousSibling()}
-function Mb(a){B.currentNode=a;return B.nextSibling()}function Nb(a){var b=[];B.currentNode=a;for(a=B.firstChild();a;)b.push(a),a=B.nextSibling();return b}function Ob(a){return Ga(a,function(a){return W(a)})}function Pb(a){if(a.nodeType!==Node.ELEMENT_NODE)return a.nodeValue;a=document.createTreeWalker(a,NodeFilter.SHOW_TEXT,null,!1);for(var b="",c;c=a.nextNode();)b+=c.nodeValue;return b}function I(a,b,c){for(var d in b){var e=Object.getOwnPropertyDescriptor(a,d);e&&e.configurable||!e&&c?Object.defineProperty(a,
-d,b[d]):c&&console.warn("Could not define",d,"on",a)}}function N(a){I(a,Qb);I(a,Ha);I(a,Ia)}function Rb(a,b,c){Ab(a);c=c||null;a.__shady=a.__shady||{};b.__shady=b.__shady||{};c&&(c.__shady=c.__shady||{});a.__shady.previousSibling=c?c.__shady.previousSibling:b.lastChild;var d=a.__shady.previousSibling;d&&d.__shady&&(d.__shady.nextSibling=a);(d=a.__shady.nextSibling=c)&&d.__shady&&(d.__shady.previousSibling=a);a.__shady.parentNode=b;c?c===b.__shady.firstChild&&(b.__shady.firstChild=a):(b.__shady.lastChild=
-a,b.__shady.firstChild||(b.__shady.firstChild=a));b.__shady.childNodes=null}function Sb(a){var b=a.__shady&&a.__shady.parentNode,c,d=R(a);if(b||d){c=Tb(a);if(b){a.__shady=a.__shady||{};b.__shady=b.__shady||{};a===b.__shady.firstChild&&(b.__shady.firstChild=a.__shady.nextSibling);a===b.__shady.lastChild&&(b.__shady.lastChild=a.__shady.previousSibling);var e=a.__shady.previousSibling,f=a.__shady.nextSibling;e&&(e.__shady=e.__shady||{},e.__shady.nextSibling=f);f&&(f.__shady=f.__shady||{},f.__shady.previousSibling=
-e);a.__shady.parentNode=a.__shady.previousSibling=a.__shady.nextSibling=void 0;void 0!==b.__shady.childNodes&&(b.__shady.childNodes=null)}if(e=d){for(var g,e=d.la(),f=0;f]/g,id=Fb("area base br col command embed hr img input keygen link meta param source track wbr".split(" ")),jd=Fb("style script xmp iframe noembed noframes plaintext noscript".split(" ")),A=document.createTreeWalker(document,
-NodeFilter.SHOW_ALL,null,!1),B=document.createTreeWalker(document,NodeFilter.SHOW_ELEMENT,null,!1),Bd=Object.freeze({parentNode:M,firstChild:za,lastChild:Aa,previousSibling:Gb,nextSibling:Hb,childNodes:W,parentElement:Ib,firstElementChild:Jb,lastElementChild:Kb,previousElementSibling:Lb,nextElementSibling:Mb,children:Nb,innerHTML:Ob,textContent:Pb}),$a=Object.getOwnPropertyDescriptor(Element.prototype,"innerHTML")||Object.getOwnPropertyDescriptor(HTMLElement.prototype,"innerHTML"),ka=document.implementation.createHTMLDocument("inert").createElement("div"),
-ab=Object.getOwnPropertyDescriptor(Document.prototype,"activeElement"),Qb={parentElement:{get:function(){var a=this.__shady&&this.__shady.parentNode;a&&a.nodeType!==Node.ELEMENT_NODE&&(a=null);return void 0!==a?a:Ib(this)},configurable:!0},parentNode:{get:function(){var a=this.__shady&&this.__shady.parentNode;return void 0!==a?a:M(this)},configurable:!0},nextSibling:{get:function(){var a=this.__shady&&this.__shady.nextSibling;return void 0!==a?a:Hb(this)},configurable:!0},previousSibling:{get:function(){var a=
-this.__shady&&this.__shady.previousSibling;return void 0!==a?a:Gb(this)},configurable:!0},className:{get:function(){return this.getAttribute("class")||""},set:function(a){this.setAttribute("class",a)},configurable:!0},nextElementSibling:{get:function(){if(this.__shady&&void 0!==this.__shady.nextSibling){for(var a=this.nextSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return Mb(this)},configurable:!0},previousElementSibling:{get:function(){if(this.__shady&&void 0!==this.__shady.previousSibling){for(var a=
-this.previousSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.previousSibling;return a}return Lb(this)},configurable:!0}},Ha={childNodes:{get:function(){var a;if(this.__shady&&void 0!==this.__shady.firstChild){if(!this.__shady.childNodes){this.__shady.childNodes=[];for(var b=this.firstChild;b;b=b.nextSibling)this.__shady.childNodes.push(b)}a=this.__shady.childNodes}else a=W(this);a.item=function(b){return a[b]};return a},configurable:!0},childElementCount:{get:function(){return this.children.length},
-configurable:!0},firstChild:{get:function(){var a=this.__shady&&this.__shady.firstChild;return void 0!==a?a:za(this)},configurable:!0},lastChild:{get:function(){var a=this.__shady&&this.__shady.lastChild;return void 0!==a?a:Aa(this)},configurable:!0},textContent:{get:function(){if(this.__shady&&void 0!==this.__shady.firstChild){for(var a=[],b=0,c=this.childNodes,d;d=c[b];b++)d.nodeType!==Node.COMMENT_NODE&&a.push(d.textContent);return a.join("")}return Pb(this)},set:function(a){if(this.nodeType!==
-Node.ELEMENT_NODE)this.nodeValue=a;else{for(;this.firstChild;)this.removeChild(this.firstChild);this.appendChild(document.createTextNode(a))}},configurable:!0},firstElementChild:{get:function(){if(this.__shady&&void 0!==this.__shady.firstChild){for(var a=this.firstChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return Jb(this)},configurable:!0},lastElementChild:{get:function(){if(this.__shady&&void 0!==this.__shady.lastChild){for(var a=this.lastChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a=
-a.previousSibling;return a}return Kb(this)},configurable:!0},children:{get:function(){var a;this.__shady&&void 0!==this.__shady.firstChild?a=Array.prototype.filter.call(this.childNodes,function(a){return a.nodeType===Node.ELEMENT_NODE}):a=Nb(this);a.item=function(b){return a[b]};return a},configurable:!0},innerHTML:{get:function(){var a="template"===this.localName?this.content:this;return this.__shady&&void 0!==this.__shady.firstChild?Ga(a):Ob(a)},set:function(a){for(var b="template"===this.localName?
-this.content:this;b.firstChild;)b.removeChild(b.firstChild);for($a&&$a.set?$a.set.call(ka,a):ka.innerHTML=a;ka.firstChild;)b.appendChild(ka.firstChild)},configurable:!0}},Ec={shadowRoot:{get:function(){return this.__shady&&this.__shady.root||null},set:function(a){this.__shady=this.__shady||{};this.__shady.root=a},configurable:!0}},Ia={activeElement:{get:function(){var a;a=ab&&ab.get?ab.get.call(document):C.P?void 0:document.activeElement;if(a&&a.nodeType){var b=!!E(this);if(this===document||b&&this.host!==
-a&&this.host.contains(a)){for(b=R(a);b&&b!==this;)a=b.host,b=R(a);a=this===document?b?null:a:b===this?a:null}else a=null}else a=null;return a},set:function(){},configurable:!0}},Ab=C.P?function(){}:function(a){a.__shady&&a.__shady.Oa||(a.__shady=a.__shady||{},a.__shady.Oa=!0,I(a,Qb,!0))},zb=C.P?function(){}:function(a){a.__shady&&a.__shady.Ma||(a.__shady=a.__shady||{},a.__shady.Ma=!0,I(a,Ha,!0),I(a,Ec,!0))},la=null,Cd={blur:!0,focus:!0,focusin:!0,focusout:!0,click:!0,dblclick:!0,mousedown:!0,mouseenter:!0,
-mouseleave:!0,mousemove:!0,mouseout:!0,mouseover:!0,mouseup:!0,wheel:!0,beforeinput:!0,input:!0,keydown:!0,keyup:!0,compositionstart:!0,compositionupdate:!0,compositionend:!0,touchstart:!0,touchend:!0,touchmove:!0,touchcancel:!0,pointerover:!0,pointerenter:!0,pointerdown:!0,pointermove:!0,pointerup:!0,pointercancel:!0,pointerout:!0,pointerleave:!0,gotpointercapture:!0,lostpointercapture:!0,dragstart:!0,drag:!0,dragenter:!0,dragleave:!0,dragover:!0,drop:!0,dragend:!0,DOMActivate:!0,DOMFocusIn:!0,DOMFocusOut:!0,
-keypress:!0},mc={get composed(){!1!==this.isTrusted&&void 0===this.ha&&(this.ha=Cd[this.type]);return this.ha||!1},composedPath:function(){this.ta||(this.ta=Oa(this.__target,this.composed));return this.ta},get target(){return cc(this.currentTarget,this.composedPath())},get relatedTarget(){if(!this.ua)return null;this.va||(this.va=Oa(this.ua,!0));return cc(this.currentTarget,this.va)},stopPropagation:function(){Event.prototype.stopPropagation.call(this);this.ia=!0},stopImmediatePropagation:function(){Event.prototype.stopImmediatePropagation.call(this);
-this.ia=this.La=!0}},Qa={focus:!0,blur:!0},Dd=Pa(window.Event),Ed=Pa(window.CustomEvent),Fd=Pa(window.MouseEvent),Gd="function"===typeof Event?Event:function(a,b){b=b||{};var c=document.createEvent("Event");c.initEvent(a,!!b.bubbles,!!b.cancelable);return c};z.prototype.Wa=function(){return this.root.querySelectorAll("slot")};z.prototype.pa=function(a){return a.localName&&"slot"==a.localName};z.prototype.na=function(){return this.root.oa()?this.g(this.c()):[]};z.prototype.c=function(){for(var a=[],
-b=0,c=this.root.host.firstChild;c;c=c.nextSibling)a[b++]=c;return a};z.prototype.g=function(a){for(var b=[],c=this.root.la(),d=0,e=c.length,f;d "+b})));a=a.replace(Sd,function(a,b,c){return'[dir="'+c+'"] '+b+", "+b+'[dir="'+c+'"]'});return{value:a,Ua:b,stop:f}};q.prototype.u=function(a,b){a=a.split(Gc);a[0]+=b;return a.join(Gc)};q.prototype.U=function(a,b){var c=a.match(Hc);
-return(c=c&&c[2].trim()||"")?c[0].match(Ic)?a.replace(Hc,function(a,c,f){return b+f}):c.split(Ic)[0]===b?c:Td:a.replace(bb,b)};q.prototype.N=function(a){a.selector=a.parsedSelector;this.v(a);this.j(a,this.H)};q.prototype.v=function(a){a.selector===Ud&&(a.selector="html")};q.prototype.H=function(a){return a.match(cb)?this.g(a,Jc):this.u(a.trim(),Jc)};hb.Object.defineProperties(q.prototype,{c:{configurable:!0,enumerable:!0,get:function(){return"style-scope"}}});var Od=/:(nth[-\w]+)\(([^)]+)\)/,Jc=":not(.style-scope)",
-Fc=",",Qd=/(^|[\s>+~]+)((?:\[.+?\]|[^\s>+~=\[])+)/g,Ic=/[[.:#*]/,bb=":host",Ud=":root",cb="::slotted",Pd=new RegExp("^("+cb+")"),Hc=/(:host)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/,Rd=/(?:::slotted)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/,Sd=/(.*):dir\((?:(ltr|rtl))\)/,Nd=".",Gc=":",Md="class",Td="should_not_match",t=new q;r.get=function(a){return a?a.__styleInfo:null};r.set=function(a,b){return a.__styleInfo=b};r.prototype.c=function(){return this.D};r.prototype._getStyleRules=r.prototype.c;var Kc=function(a){return a.matches||
-a.matchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector||a.webkitMatchesSelector}(window.Element.prototype),Vd=navigator.userAgent.match("Trident");p.prototype.O=function(a){var b=this,c={},d=[],e=0;U(a,function(a){b.c(a);a.index=e++;b.N(a.m.cssText,c)},function(a){d.push(a)});a.b=d;a=[];for(var f in c)a.push(f);return a};p.prototype.c=function(a){if(!a.m){var b={},c={};this.b(a,c)&&(b.C=c,a.rules=null);b.cssText=this.M(a);a.m=b}};p.prototype.b=function(a,b){var c=a.m;if(c){if(c.C)return Object.assign(b,
-c.C),!0}else{for(var c=a.parsedCssText,d;a=na.exec(c);){d=(a[2]||a[3]).trim();if("inherit"!==d||"unset"!==d)b[a[1].trim()]=d;d=!0}return d}};p.prototype.M=function(a){return this.U(a.parsedCssText)};p.prototype.U=function(a){return a.replace(Ld,"").replace(na,"")};p.prototype.N=function(a,b){for(var c;c=Jd.exec(a);){var d=c[1];":"!==c[2]&&(b[d]=!0)}};p.prototype.da=function(a){for(var b=Object.getOwnPropertyNames(a),c=0,d;c *"===f||"html"===f,h=0===f.indexOf(":host")&&!g;"shady"===c&&(g=f===e+" > *."+e||-1!==f.indexOf("html"),h=!g&&0===f.indexOf(e));"shadow"===c&&(g=":host > *"===f||"html"===f,h=h&&!g);if(g||h)c=e,h&&(u&&!b.w&&(b.w=t.l(b,t.g,t.h(a),e)),c=b.w||e),d({fb:c,Za:h,mb:g})}};
-p.prototype.ba=function(a,b){var c={},d={},e=this,f=b&&b.__cssBuild;U(b,function(b){e.fa(a,b,f,function(f){Kc.call(a.lb||a,f.fb)&&(f.Za?e.b(b,c):e.b(b,d))})},null,!0);return{cb:d,Ya:c}};p.prototype.ea=function(a,b,c){var d=this,e=P(a),f=t.f(e.is,e.T),g=new RegExp("(?:^|[^.#[:])"+(a.extends?"\\"+f.slice(0,-1)+"\\]":f)+"($|[.:[\\s>+~])"),e=r.get(a).D,h=this.h(e,c);return t.b(a,e,function(a){d.H(a,b);u||vc(a)||!a.cssText||(d.G(a,h),d.l(a,g,f,c))})};p.prototype.h=function(a,b){a=a.b;var c={};if(!u&&a)for(var d=
-0,e=a[d];d=f._useCount&&f.parentNode&&f.parentNode.removeChild(f));u?e.a?(e.a.textContent=b,d=e.a):b&&(d=Ua(b,c,a.shadowRoot,e.b)):d?d.parentNode||(Vd&&-1this.c&&e.shift();this.cache[a]=e};ba.prototype.fetch=function(a,b,c){if(a=this.cache[a])for(var d=a.length-1;0<=d;d--){var e=a[d];if(this.a(e,b,c))return e}};if(!u){var Lc=new MutationObserver(yc),
-Mc=function(a){Lc.observe(a,{childList:!0,subtree:!0})};if(window.customElements&&!window.customElements.polyfillWrapFlushCallback)Mc(document);else{var eb=function(){Mc(document.body)};window.HTMLImports?window.HTMLImports.whenReady(eb):requestAnimationFrame(function(){if("loading"===document.readyState){var a=function(){eb();document.removeEventListener("readystatechange",a)};document.addEventListener("readystatechange",a)}else eb()})}jb=function(){yc(Lc.takeRecords())}}var ja={},zd=Promise.resolve(),
-Va=null,Ac=window.HTMLImports&&window.HTMLImports.whenReady||null,Wa,qa=null,aa=null;D.prototype.ya=function(){!this.enqueued&&aa&&(this.enqueued=!0,ib(aa))};D.prototype.b=function(a){a.__seenByShadyCSS||(a.__seenByShadyCSS=!0,this.customStyles.push(a),this.ya())};D.prototype.a=function(a){return a.__shadyCSSCachedStyle?a.__shadyCSSCachedStyle:a.getStyle?a.getStyle():a};D.prototype.c=function(){for(var a=this.customStyles,b=0;b
-
-
-
-
-
-
-
-
-
-
-
-
- Code blocks | Infusion
-
-
-
-
- skip to content
-
-
-
Documentation for the Infusion pattern library builder. This documentation is constructed using the builder itself.
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/public/patterns/code/index.xml b/public/patterns/code/index.xml
deleted file mode 100644
index 0f16b19..0000000
--- a/public/patterns/code/index.xml
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-
- Exhibiting code on Infusion
- https://heydon.github.io/infusion/patterns/code/
- Recent content in Exhibiting code on Infusion
- Hugo -- gohugo.io
- en-us
-
-
-
-
-
- Code blocks
- https://heydon.github.io/infusion/patterns/code/code-blocks/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/code/code-blocks/
- 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…
-```html <button aria-pressed="false"toggle me</button ``` … will result in this:
-<button aria-pressed="false">toggle me</button> 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.
-
-
-
- CodePen embedding
- https://heydon.github.io/infusion/patterns/code/codepen-embedding/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/code/codepen-embedding/
- 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.
-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’s ID.
-{{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:
-
-
-
- Color palettes
- https://heydon.github.io/infusion/patterns/code/color-palettes/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/code/color-palettes/
- There’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.
-{{% colors "#111111, #cccccc, #ffffff" %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:
-
-
-
- Writing inline demos
- https://heydon.github.io/infusion/patterns/code/writing-inline-demos/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/code/writing-inline-demos/
- 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’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’t have to worry about broken styles and global JS.
-
-
-
-
\ No newline at end of file
diff --git a/public/patterns/code/writing-inline-demos/index.html b/public/patterns/code/writing-inline-demos/index.html
deleted file mode 100644
index 4d7cc85..0000000
--- a/public/patterns/code/writing-inline-demos/index.html
+++ /dev/null
@@ -1,351 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
- Writing inline demos | Infusion
-
-
-
-
- skip to content
-
-
-
Documentation for the Infusion pattern library builder. This documentation is constructed using the builder itself.
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/public/patterns/index.xml b/public/patterns/index.xml
deleted file mode 100644
index a0dcaae..0000000
--- a/public/patterns/index.xml
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-
- Patterns on Infusion
- https://heydon.github.io/infusion/patterns/
- Recent content in Patterns on Infusion
- Hugo -- gohugo.io
- en-us
-
-
-
-
-
- Installation
- https://heydon.github.io/infusion/patterns/installation/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/installation/
- Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let’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:
-brew install hugo Alternatively, you can manually install Hugo from a package. You can verify the installation was successful by typing:
-
-
-
- Library setup
- https://heydon.github.io/infusion/patterns/library-setup/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/library-setup/
- 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.
-“Cleaning” the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.
-
-
-
- Serving
- https://heydon.github.io/infusion/patterns/serving/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/serving/
- Serving locally While you’re creating content for your library, you’ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command:
-npm run serve This will serve your working library on localhost:1313. Whenever you make changes to your library’s files, the site will automatically rebuild. No need to refresh the web page!
-Publishing on Github Pages There are three steps to hosting your library on Github Pages.
-
-
-
-
\ No newline at end of file
diff --git a/public/patterns/installation/index.html b/public/patterns/installation/index.html
deleted file mode 100644
index 50de432..0000000
--- a/public/patterns/installation/index.html
+++ /dev/null
@@ -1,308 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
- Installation | Infusion
-
-
-
-
- skip to content
-
-
-
Documentation for the Infusion pattern library builder. This documentation is constructed using the builder itself.
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/public/patterns/writing/index.xml b/public/patterns/writing/index.xml
deleted file mode 100644
index 5c144d0..0000000
--- a/public/patterns/writing/index.xml
+++ /dev/null
@@ -1,75 +0,0 @@
-
-
-
- Writing on Infusion
- https://heydon.github.io/infusion/patterns/writing/
- Recent content in Writing on Infusion
- Hugo -- gohugo.io
- en-us
-
-
-
-
-
- Library structure
- https://heydon.github.io/infusion/patterns/writing/library-structure/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/writing/library-structure/
- 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’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.
-
-
-
- Markdown & metadata
- https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/
- 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’s recommended you use “kebab case” to name the file ( words separated by hyphens). For example, a pattern with the title “Menu button” should probably have the filename menu-button. Then you get a nice clean URL: your-company.com/patterns/menu-button.
-If you’re not familiar with writing markdown, there are a number of tutorials available.
-
-
-
- Expandable sections
- https://heydon.github.io/infusion/patterns/writing/expandable-sections/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/writing/expandable-sections/
- 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. 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.
-
-
-
- Including images
- https://heydon.github.io/infusion/patterns/writing/including-images/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/writing/including-images/
- From time to time, you’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’ll be mostly working in.
-├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion’s own logo will be included. You should replace this with your own company or project logo.
-
-
-
- Notes & warnings
- https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/
- Infusion acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of “shortcodes”. 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’s documentation as a note — an aside to the main thrust of the pattern’s description. This is possible using the following syntax:
-
-
-
- References
- https://heydon.github.io/infusion/patterns/writing/references/
- Mon, 01 Jan 0001 00:00:00 +0000
-
- https://heydon.github.io/infusion/patterns/writing/references/
- Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes & warnings pattern. Here’s what the markdown looks like, including the shortcode:
-I can reference the {{% 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.
-
-
-
-
\ No newline at end of file
diff --git a/public/patterns/writing/library-structure/index.html b/public/patterns/writing/library-structure/index.html
deleted file mode 100644
index ce2a333..0000000
--- a/public/patterns/writing/library-structure/index.html
+++ /dev/null
@@ -1,297 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
- Library structure | Infusion
-
-
-
-
- skip to content
-
-
-
- 
