Merge pull request #51 from chrislopresto/freestyle-options

Scope freestyle options for safekeeping

README.md

@@ -136,7 +136,37 @@ By default, variants will be stacked. If you wish to view variants side by side,
 
 #### freestyle-note + freestyle-annotation
 
-Documentation coming soon...
+_TODO:_ [Simplify Technique for Including Notes](https://github.com/chrislopresto/ember-freestyle/issues/61)
+
+Use the `freestyle-note` component to add a markdown note for a specific `freestyle-usage`. Note that the `freestyle-note` slug must match the `freestyle-usage` slug followed by `:notes`.
+
+```hbs
+{{#freestyle-usage "globally-unique-slug" title="Title To Display In Style Guide"}}
+  {{x-foo propa="aaa" propb="bbb"}}
+{{/freestyle-usage}}
+{{#freestyle-note "globally-unique-slug:notes"}}
+  # Contextual Markdown Note for x-foo
+
+  You can write helpful _markdown_ notes explaining how the
+  `x-foo` component works.
+{{/freestyle-note}}
+```
+
+Use the `freestyle-annotation` component to add a general purpose note.
+
+```hbs
+{{#freestyle-annotation}}
+<h1>Contextual HTML Note for Anything in the Freestyle Guide</h1>
+
+<p>
+  You can write helpful HTML notes explaining anything in the
+  Freestyle guide.
+</p>
+{{/freestyle-annotation}}
+```
+
+Both the `freestyle-note` and `freestyle-annotation` components respect the
+`Show Notes` usage controls preference.
 
 ## Customizing the Colors in Ember Freestyle's Own UI
 
@@ -167,7 +197,9 @@ as follows:
 ```javascript
 var app = new EmberAddon(defaults, {
   // ...
-  snippetSearchPaths: ['tests/dummy/app', 'app/styles']
+  freestyle: {
+    snippetSearchPaths: ['tests/dummy/app', 'app/styles']
+  }
 });
 ```
 

ember-cli-build.js

@@ -9,7 +9,9 @@ module.exports = function(defaults) {
       browsers: ['last 2 version', '> 10%'],
       cascade: false
     },
-    snippetSearchPaths: ['tests/dummy/app', 'app/styles']
+    freestyle: {
+      snippetSearchPaths: ['tests/dummy/app', 'app/styles']
+    }
   });
 
   /*

index.js

@@ -36,14 +36,16 @@ module.exports = {
 
   snippetPaths: function() {
     if (this.app) {
-      return this.app.options.snippetPaths || ['snippets'];
+      var freestyleOptions = this.app.options.freestyle || {};
+      return freestyleOptions.snippetPaths || ['snippets'];
     }
     return ['snippets'];
   },
 
   snippetSearchPaths: function() {
     if (this.app) {
-      return this.app.options.snippetSearchPaths || ['app'];
+      var freestyleOptions = this.app.options.freestyle || {};
+      return freestyleOptions.snippetSearchPaths || ['app'];
     }
     return ['app'];
   },