{ "attributes": { "id": "getting-started", "linkText": "Getting Started", "title": "Getting Started" }, "body": "{{#fountainhead-header tagName=\"h2\" elementId=\"installation\"}}Installation{{/fountainhead-header}}\n

Install Ember Fountainhead using Ember CLI:

\n

ember install ember-fountainhead

\n

{{#fountainhead-alert brand='info' dismiss=false}}\n{{fountainhead-svg svgId='info'}}Fountainhead's target Node version is the active LTS,\nas recommended by Ember. Using Fountainhead on previous versions may not be possible.\n{{/fountainhead-alert}}

\n

* Currently Ember Fountainhead must be used inside of an Ember application.

\n{{#fountainhead-header tagName=\"h2\" elementId=\"documentation-generation\"}}Documentation Generation{{/fountainhead-header}}\n

If you already have YUIDoc documentation comments block (DocBlocks) in your\nsource code, you can generate Fountainhead documentation data files with the\ncommand ember docs.

\n

By default Fountainhead will generate data files any time you build your app,\nas well as rebuild the files any time your app changes. This can be disabled\nusing the liveEdit configuration.

\n

If you don't have DocBlock comments to your source code, you can start adding\nthem. Fountainhead uses YUIDoc for\nsource code DocBlock parsing. YUIDoc uses a syntax similar to JSDoc, but does not\nparse your source code, only the comments.

\n

See YUIDoc Syntax for details\non YUIDoc tags.

\n{{#fountainhead-header tagName=\"h2\" elementId=\"excluding-from-production\"}}Excluding from Production{{/fountainhead-header}}\n

To exclude Fountainhead from your production builds you can blacklist in your\nember-cli-build configuration using the addons.blacklist array:

\n
ember-cli-build.js
\n
module.exports = function(defaults) {\n  var app = new EmberApp(defaults, {\n    addons: {\n      blacklist: EmberApp.env() === 'production' ? ['ember-fountainhead'] : []\n    }\n  });\n\n  return app.toTree();\n};\n
\n\n
\n{{#fountainhead-header tagName=\"h2\" elementId=\"configuration\"}}Configuration{{/fountainhead-header}}\n

The Ember Fountainhead addon as well as the data file generation process can\nbe configured in a fountainhead.js file located in your repo's root:

\n
fountainhead.js
\n
module.exports = {\n  entry: ['app'], // Defaults to 'app' for apps and 'addon' for addons\n  output: {\n    path: 'docs' // path to save generated docs to\n    filename: 'fountainhead-data.json' // name to save generated file to\n  }\n}\n
\n

{{#fountainhead-alert brand='info' dismiss=false}}\n{{fountainhead-svg svgId='info'}}See {{link-to 'Configuring Fountainhead' 'guides' 'configuration'}}\nfor all possible configuration options.\n{{/fountainhead-alert}}

\n{{#fountainhead-header tagName=\"h2\" elementId=\"addon-styles\"}}Addon Styles{{/fountainhead-header}}\n

Ember Fountainhead's styles are bundled into your vendor.css by\ndefault. The styles are scoped to addon namespaces to prevent conflicts with\nyour application's styles. You can disable style sheet bundling by setting\nincludeVendorStyles to false in your fountainhead.js configuration file.

\n

If you'd like to extend Fountainhead's styles and your project uses SASS, you\ncan turn off the auto bundle to the vendor file and directly import Fountainhead\ninto your SASS: @import 'ember-fountainhead'

\n

See the themes\nfor variables you can override.

\n{{#fountainhead-header tagName=\"h2\" elementId=\"ember-component-playground\"}}Ember Component Playground{{/fountainhead-header}}\n

The Ember Component Playground\naddon is a great compliment to this addon that allows real time examples of\ncomponents. See the repo for installation.

\n", "frontmatter": "id: getting-started\nlinkText: Getting Started\ntitle: Getting Started", "id": "getting-started", "type": "guides" }