https://thepaciellogroup.github.io/infusion/patterns/writing/ Recent content in Writing on Infusion Hugo -- gohugo.io en-us https://thepaciellogroup.github.io/infusion/patterns/writing/library-structure/ Mon, 01 Jan 0001 00:00:00 +0000 https://thepaciellogroup.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 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. https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/ Mon, 01 Jan 0001 00:00:00 +0000 https://thepaciellogroup.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: username.github.io/your-library/patterns/menu-button. If you’re not familiar with writing markdown, there are a number of tutorials available. https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/ Mon, 01 Jan 0001 00:00:00 +0000 https://thepaciellogroup.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. https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/ Mon, 01 Jan 0001 00:00:00 +0000 https://thepaciellogroup.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: https://thepaciellogroup.github.io/infusion/patterns/writing/references/ Mon, 01 Jan 0001 00:00:00 +0000 https://thepaciellogroup.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. https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/ Mon, 01 Jan 0001 00:00:00 +0000 https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/ Pattern pages in Infusion that have two or more subheadings — <h2>s — automatically get a table of contents: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the “Table of contents” label and uses an ordered list. The table of contents markup for the Library setup page looks something like this: <nav class="toc" aria-labelledby="toc-heading"> <h2 id="toc-heading">Table of contents</h2> <ol> <li> <a href="#cleaning-the-content-folder">“Cleaning” the content folder</a> </li> <li> <a href="#the-setup-command">The setup command</a> </li> <li> <a href="#the-config-file">The config file</a> </li> <li> <a href="#including-a-logo">Including a logo</a> </li> </ol> </nav> Tables of contents are a neat way to break down the content of the page and give users a navigable overview.