477 lines
19 KiB
HTML
477 lines
19 KiB
HTML
<!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/infusion/patterns/library-setup/">
|
|
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
|
|
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
|
|
<title>
|
|
|
|
Library setup | Infusion
|
|
|
|
</title>
|
|
</head>
|
|
<body>
|
|
<a href="#main">skip to content</a>
|
|
<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="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
|
|
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
|
|
</a>
|
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
|
</div>
|
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
|
<button id="menu-button" aria-expanded="false">Menu</button>
|
|
|
|
|
|
<ul id="patterns-list">
|
|
|
|
<li class="pattern">
|
|
<a href="https://heydon.github.io/infusion/patterns/installation/" >
|
|
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span class="text">Installation</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="https://heydon.github.io/infusion/patterns/library-setup/" aria-current="page">
|
|
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span class="text">Library setup</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="https://heydon.github.io/infusion/patterns/serving/" >
|
|
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span class="text">Serving</span>
|
|
</a>
|
|
</li>
|
|
|
|
|
|
<li>
|
|
<h3>Writing</h3>
|
|
<ul>
|
|
|
|
<li class="pattern">
|
|
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
|
|
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span class="text">Library structure</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
|
|
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span class="text">Markdown & metadata</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
|
|
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span class="text">Expandable sections</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
|
|
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span class="text">Including images</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
|
|
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span class="text">Notes & warnings</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
|
|
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span class="text">References</span>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<h3>Exhibiting code</h3>
|
|
<ul>
|
|
|
|
<li class="pattern">
|
|
<a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
|
|
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span class="text">Code blocks</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
|
|
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span class="text">CodePen embedding</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
|
|
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span class="text">Color palettes</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
|
|
<svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span class="text">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/infusion/patterns/installation/">
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
|
|
<p>If you are contributing to an existing <strong>Infusion</strong> library, do not run the following command. It will delete all of the patterns in that library. The <code>clean</code> command is just for libraries that you are starting from scratch.</p>
|
|
|
|
</div>
|
|
</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/infusion/patterns/writing/library-structure/">
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.</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 = "Infusion"
|
|
baseURL = "https://heydon.github.io/infusion/"
|
|
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. For <strong>Infusion’s</strong> version of <strong>Infusion</strong>, the <code>title</code> is, naturally, <em>Infusion</em> :-)</li>
|
|
<li><strong>baseURL</strong> — This is the root of the live site. Typically you will publish the site to Github Pages, so this should be the base URL for your Github Pages site. More information is available in
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/">
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.</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. You can include HTML like <code><em></code> and <code><strong></code>.</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/infusion/patterns/writing/library-structure/">
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
to help you get writing, or find out how to serve the library locally and on Github Pages in
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/">
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.</p>
|
|
|
|
</main>
|
|
|
|
<footer role="contentinfo">
|
|
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
|
|
For general enquiries, contact us on info@paciellogroup.com
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
|
|
|
|
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
|
|
</body>
|
|
</html>
|