{
  "attributes": {
    "id": "writing-guides",
    "linkText": "Writing Guides",
    "title": "Writing Guides with Ember Fountainhead"
  },
  "body": "<p>Fountainhead makes writing guides easy with these features:</p>\n<ul>\n<li>Guides can be written in markdown and include components from your application.</li>\n<li>Meta data for guides can be configured using a front matter block.</li>\n<li>Any guide saved in <code>/guides</code> will be observed by Ember CLI and live reload on change.</li>\n</ul>\n<p>We hope that these conveniences inspire you to write guides for your project!\nSemantically named variables and methods go a long way towards self documenting code,\nand API documentation helps for reference, but guides bridge the gap of providing\nproject overviews, architecture considerations and the <em>why</em> of code. For\ncontributors looking to get started with projects, these aspects can be really hard\nto deciper without a guide!</p>\n{{#fountainhead-header tagName=\"h2\" elementId=\"guide-discovery\"}}Guide Discovery{{/fountainhead-header}}\n<p>There are two ways Fountainhead can be configured to consume guides:</p>\n<ol>\n<li>Automatically, by saving the guide in <code>/guides</code></li>\n<li>Explicitly, by configuring the file path in the <code>fountainhead.guides</code> config.</li>\n</ol>\n{{#fountainhead-header tagName=\"h4\" elementId=\"automatic-discovery\"}}Automatic Discovery{{/fountainhead-header}}\n<p>Fountainhead will automatically consume any guide that is saved in <code>/guides</code>. The\nguides will be consumed alphabetically by file path+name and the order of guides in\nthe the navbar will match this order. See <a href=\"#ordering-guides\">Ordering Guides\n</a> for info on controlling the guide display order.</p>\n{{#fountainhead-header tagName=\"h4\" elementId=\"explicit-configuration\"}}Explicit Configuration{{/fountainhead-header}}\n<p>Guides from any location in your project can be consumed using the\n<code>fountainhead.guides</code> config in your <code>fountainhead.js</code> config file. Guides must be an\narray and can include paths to files or directories.</p>\n<p>{{#fountainhead-alert canDismiss=false brand='info'}}\n{{fountainhead-svg svgId='info'}} PRO TIP<br/>\nYou can create domain specific guides in your project source and include them in your\ndocumentation using the <code>guides</code> config. This can be especially helpful\nfor project features that require architecture/background knowledge that doesn't\nfit explicitly into the API documentation.\n{{/fountainhead-alert}}</p>\n<p>For example, this project has all of the setup and how-to guides in the <code>/guides</code>\ndirectory, but is also configured to include Release guides and an architecture\noverview of scroll targeting using the <code>guides</code> config:</p>\n<div class=\"code-block-file-name\">fountainhead.js</div>\n<pre class=\"language-javascript\"><code class=\"language-javascript\">module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  guides<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token string\">'addon/scroll-target.md'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\" spellcheck=\"true\">// Specific file in the addon directory</span>\n    <span class=\"token string\">'releases'</span> <span class=\"token comment\" spellcheck=\"true\">// Folder of release guides in project root</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span>\n</code></pre>\n{{#fountainhead-header tagName=\"h2\" elementId=\"adding-meta-data\"}}Adding Meta Data{{/fountainhead-header}}\n<p>You can include a <a href=\"https://www.npmjs.com/package/front-matter\">front matter</a> block in\na guide to easily configure meta data for the guide. The following configurations\ncan be used to control how your guide is displayed:</p>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th></th>\n<th>Use</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>id</code></td>\n<td><strong>Required</strong></td>\n<td>Unique identifier for a guide. Also used as the url model id</td>\n</tr>\n<tr>\n<td><code>[linkText]</code></td>\n<td><em>Optional</em></td>\n<td>Anchor text used in guide navigation</td>\n</tr>\n<tr>\n<td><code>[title]</code></td>\n<td><em>Optional</em></td>\n<td>Page header text</td>\n</tr>\n<tr>\n<td><code>[group]</code></td>\n<td><em>Optional</em></td>\n<td>Parent label to nest a set of groups under</td>\n</tr>\n<tr>\n<td><code>[private]</code></td>\n<td><em>Optional</em></td>\n<td>When true, guide is not parsed or included in nav</td>\n</tr>\n<tr>\n<td><code>[protected]</code></td>\n<td><em>Optional</em></td>\n<td>When true, guide is parsed and saved, but not included in meta</td>\n</tr>\n</tbody>\n</table>\n<div class=\"code-block-file-name\">your-guide&period;md</div>\n<pre class=\"language-markdown\"><code class=\"language-markdown\"><span class=\"token operator\">--</span><span class=\"token operator\">-</span>\nid<span class=\"token punctuation\">:</span> writing<span class=\"token operator\">-</span>guides\nlinkText<span class=\"token punctuation\">:</span> Writing Guides\ntitle<span class=\"token punctuation\">:</span> Writing Guides <span class=\"token keyword\">with</span> Ember Fountainhead\ngroup<span class=\"token punctuation\">:</span> How Tos\n<span class=\"token operator\">--</span><span class=\"token operator\">-</span>\n\nEmber Fountainhead makes writing guides easy<span class=\"token operator\">...</span>\n</code></pre>\n{{#fountainhead-header tagName=\"h4\" elementId=\"guide-access\"}}Guide Access{{/fountainhead-header}}\n<p>The <code>private</code> and <code>protected</code> meta attributes can be used to control what guides are\nconsumed and displayed by Fountainhead.</p>\n<ul>\n<li><code>private</code>: guides marked private are not parsed, saved or included in the meta for\nyour documentation. These guides are ignored by Fountainhead.</li>\n<li><code>protected</code>: guides marked protected are parsed and saved into <code>/docs/guides</code>, but\nthey are not included in your documentation meta. This is useful if you would like\nto write guides to link to interally, but not include them in the guide navigation.</li>\n</ul>\n{{#fountainhead-header tagName=\"h2\" elementId=\"grouping-guides\"}}Grouping Guides{{/fountainhead-header}}\n<p>Sets of guides can be grouped together in the guide navigation using a <code>group</code>\nattribute. This is useful if you have a set of guides that are related, but too long\nto contain in a single guide. You can create groups for your guides in two ways:</p>\n<ol>\n<li>On the fly: Include a <code>group</code> attribute in any guide. If that group doesn't exist\nFountainhead will create one and add that group to it.</li>\n<li>Explicitly: Groups can be configured in the <code>fountainhead.guides</code> config <em>(This\ncan be helfpul for guide ordering)</em>:</li>\n</ol>\n<pre class=\"language-javascript\"><code class=\"language-javascript\">  module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    guides<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'How Tos'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token comment\" spellcheck=\"true\">// Object literals are interpreted as a group config</span>\n    <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span>\n</code></pre>\n{{#fountainhead-header tagName=\"h4\" elementId=\"ordering-guides\"}}Ordering Guides{{/fountainhead-header}}\n<p>Guides are included in the guide navigation in this order:</p>\n<ol>\n<li>Guides auto discovered in <code>/guides</code> alphabetically by filepath+name</li>\n<li>Configured order of <code>fountainhead.guides</code> configuration array</li>\n</ol>\n<p>If you want to control the order of the guides listed in the navigation, you can use\nordered file names and folders, eg: <code>1_first-guide.md</code>, <code>2_second-guide.md</code>. See the\n<a href=\"https://github.com/healthsparq/ember-fountainhead/tree/master/guides\">guides directory</a>\nfor Fountainhead for a complex example.</p>\n",
  "frontmatter": "id: writing-guides\nlinkText: Writing Guides\ntitle: Writing Guides with Ember Fountainhead",
  "id": "writing-guides",
  "type": "guides"
}