{ "attributes": { "id": "tools", "linkText": "Fountainhead Tools", "title": "Fountainhead Documentation Tools and Features" }, "body": "

Fountainhead isn't just about writing beautiful documentation. Fountainhead\ncomes with a set of tools for writing interactive documentation.

\n{{#fountainhead-header tagName=\"h2\" elementId=\"runtime-template-compilation\"}}Runtime Template Compilation{{/fountainhead-header}}\n

All DocBlock descriptions and guides are compiled to template partials during\nruntime. This lets you use any component available in your app into your descriptions.\nThis means that you're not limited to a predefined set of documentation components\npre-bundled with some library. Want to make a custom drawer component for rendering\nexamples of property values? With Fountainhead all you have to do is add the\ncomponent to your application and use it in a DocBlock.

\n{{#fountainhead-header tagName=\"h2\" elementId=\"crosslink-component\"}}CrossLink Component{{/fountainhead-header}}\n

Use the {{c-l class='CrossLink'}} component to reference modules, classes, methods\nand properties elsewhere in your documentation:

\n
/**\n * DocBlock for some class, with a direct link to the \\{{c-l 'init'}} method.\n * @property active\n * @type {boolean}\n */\n
\n

{{#c-l class='CrossLink'}}See the CrossLink Component for examples.{{/c-l}}

\n{{#fountainhead-header tagName=\"h2\" elementId=\"state-in-docblock-descriptions\"}}State in DocBlock Descriptions{{/fountainhead-header}}\n

Your documentation descriptions are wrapped in an instance of\nEmber Radical's rad-state\nfor a convenient and sandboxed state property and state actions. This is\nconvenient for including examples in your documentation that require simple\nstate management.

\n

Use state to access the sandboxed state and any of stateActions.open,\nstateActions.close and stateActions.toggleState to mutate the state.

\n{{#fountainhead-header tagName=\"h2\" elementId=\"glimmer-code-blocks\"}}Glimmer Code Blocks{{/fountainhead-header}}\n

Use the identifier glimmer with a fenced code block to highlight the code block\ncontents and render an unescaped example of the code block immediately after\nthe code block.

\n

Eg, the following code block:

\n
```glimmer\n  \\{{some-component example=true}}\n```\n
\n

Will actually be parsed as:

\n
```glimmer\n  \\{{some-component example=true}}\n```\n{{some-component example=true}}\n
\n

You can also add data when rendering you components, this is super useful for showing\nvariations of a theme or components in different states.

\n

At the top of your glimmer add data using a JSON string\ne.g. data={'things': ['primary', 'secondary', 'success']}. This will make every top level key available\nto your example and will be stripped from the displayed code.

\n

You can then use the properties in the template.

\n
{{#each colors as |color|}}\n  {{#fountainhead-button brand=color}}{{color}}{{/fountainhead-button}}\n{{/each}}\n
\n

data={\"colors\": [\"primary\", \"secondary\", \"success\"]}\n{{#each colors as |color|}}\n{{#fountainhead-button brand=color}}{{color}}{{/fountainhead-button}}\n{{/each}}

\n{{#fountainhead-header tagName=\"h2\" elementId=\"markdown-in-docblock-descriptions-and-guides\"}}Markdown in DocBlock Descriptions and Guides{{/fountainhead-header}}\n

Fountainhead has full support for markdown in documentation blocks and guides.\nIf you're not familiar with markdown, you can start with a tutorial at\nMarkdown Tutorial

\n

(Markdown is parsed using markdown-it)

\n", "frontmatter": "id: tools\nlinkText: Fountainhead Tools\ntitle: Fountainhead Documentation Tools and Features", "id": "tools", "type": "guides" }