skip to content W3C SVG

Project structure

Before you can set about making documentation, you need to know where everything goes. The simplest folder structure looks like this:

  • content
    • _index.md
    • print-version.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 file for your home page.
  • print-version.md — This is a placeholder for the single-page / print-friendly version of you library. Leave this file as it is.
  • /patterns — This is the folder where individual content files are kept. Infusion refers to each individual documentation file/page as a “pattern”.

Subsections

You may have noticed that this site’s navigation is divided partly into subsections, with labels like “Writing”. Infusion (or, rather, Hugo) allows you to create such subsections by simply nesting folders under the /patterns folder. In the following example, I have a subsection about different types of “popup” pattern.

  • content
    • _index.md
    • patterns
      • name-of-my-pattern.md
      • name-of-my-other-pattern.md
      • popups
        • _index.md
        • popup-menu.md
        • tooltips.md

Subfolders like /popups must each have an _index.md file. This file doesn’t need any content except the TOML metadata defining the title (name) of that subsection:

+++
title = "Popup windows"
+++

This title is what labels the subsection in the navigation, not the folder name (/popups, in this case). For each subfolder you create, you must also create one of these _index.md files. The /patterns folder itself does not need one, however.

Now that you know where to put everything, it’s time to talk about how to actually write individual patterns. Don’t worry, it’s pretty straightforward. Turn to Markdown & metadata.