skip to content

#
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 writing documentation, 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 the content you’re reading right now. We want to delete that content and replace it with some starter content. There’s a simple `clean` command for this.

If you are contributing to an existing Infusion library, do not run the following command. It will delete all of the patterns in that library. The `clean` command is just for libraries that you are starting from scratch.

      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. Individual content pages in Infusion are referred to as “patterns” — think pattern libraries). Find out more about these in
Project structure.

## The config file

You’ll also want to name your project 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://thepaciellogroup.github.io/infusion/"
    theme = "infusion"

    [params]
      description = "Documentation for the **Infusion** documentation builder. This documentation is constructed using the builder itself."
      codePenUser = "Heydon"

- title — This is the project’s name, like “Megacorp 5000 Pattern Library” or “Assplosion.js Documentation”. For Infusion’s own version of Infusion, the `title` is simply 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 your documentation project 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 projects 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 Documentation Builder",
     "short_name": "Infusion Docs",
     "icons": [
      {...

Infusion’s Docs, with `short_name` displayed, available from the homescreen of a Samsung/Android phone.

The `short_name` value refers to the text that appears under the icon on your homescreen. As the name suggests, it should be as short as possible to fit well (12 characters or fewer is ideal).

## 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, under the same file name. Currently, only SVG is supported this easily because SVG is the superior format for logos. 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 is in place, everything should be ready. Where next? You can learn about
Project structure to help you get writing, or find out how to serve the site locally and on Github Pages in
Serving.