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. We want to delete that content and replace it with some starter content. There’s a simple clean
command for this.
npm run clean
This will leave your content
folder with just an _index.md
file and a patterns
folder containing a single demonstration pattern file. Find out more about these in Library structure.
The config file
You’ll also want to name your library and configure one or two other things in the config.toml
file that’s found at the root of your project. Here’s how that file looks:
languageCode = "en-us"
title = "Infusion"
baseURL = "https://heydon.github.io/infusion/"
theme = "infusion"
[params]
description = "Documentation for the **Infusion** pattern library builder. This documentation is constructed using the builder itself."
codePenUser = "Heydon"
- title — 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 Infusion’s own version of Infusion, the
title
is, naturally, Infusion :-) - baseURL — 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.
- theme — This is the theme the library is using. Don’t change this from “infusion”.
- description — This is a short description of the library and comes under the logo. You can include markdown syntax here, like **Infusion** in the above example for making the name of the library bold.
- codePenUser — If you want to embed codePens in your pattern files, you need to supply a codePen username here.
The Web App Manifest
Infusion libraries work as progressive web applications, meaning users can save them to their home screen and read them offline. The web app manifest, found at the root of the static
folder defines names and icons for the app. You’ll probably want to open /static/manifest.json
and personalize the name
and short_name
values.
{
"name": "Infusion Pattern Library Docs",
"short_name": "Infusion Docs",
"icons": [
{...
Including a logo
In the images/static
folder, you’ll find a logo.svg
file. Replace this file with your own company or project logo. Currently, only the SVG is supported this easily because SVG the superior format for logotypes. However, if you must use a different format, you can open up the themes/infusion/layouts/_default/baseof.html
file and edit the image reference:
<a class="logo" href="/" aria-label="{{ .Site.Title }} pattern library home page">
<img src="{{ "images/logo.svg" | absURL }}" alt="">
</a>
Now that your logo’s in place, everything should be ready. Where next? You can learn about Library structure to help you get writing, or find out how to serve the library locally and on Github Pages in Serving.