Update snippet names

dfreeman · dfreeman · commit 3efae81f446f · 2018-02-06T15:08:48.000-05:00
diff --git a/addon/components/docs-demo/x-live-example/component.js b/addon/components/docs-demo/x-live-example/component.js
@@ -11,9 +11,7 @@ export default Component.extend({
 
     // Set initial template from snippet
     let name = this.get('name');
-
-    // We support either .hbs snippets or .md
-    let rawTemplate = snippets[`${name}.hbs`] || snippets[`${name}.md`];
+    let rawTemplate = snippets[name] || '';
 
     this.set('rawTemplate', this._unindent(rawTemplate));
 
diff --git a/tests/dummy/app/app.js b/tests/dummy/app/app.js
@@ -3,7 +3,7 @@ import Resolver from './resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 
-// BEGIN-SNIPPET sample-snippet
+// BEGIN-SNIPPET sample-snippet.js
 const App = Application.extend({
   modulePrefix: config.modulePrefix,
   podModulePrefix: config.podModulePrefix,
diff --git a/tests/dummy/app/pods/application/template.hbs b/tests/dummy/app/pods/application/template.hbs
@@ -1,4 +1,4 @@
-{{! BEGIN-SNIPPET docs-demo-application-template }}
+{{! BEGIN-SNIPPET docs-demo-application-template.hbs }}
 {{outlet}}
 
 {{docs-keyboard-shortcuts}}
diff --git a/tests/dummy/app/pods/docs/components/docs-demo/controller.js b/tests/dummy/app/pods/docs/components/docs-demo/controller.js
@@ -1,13 +1,9 @@
-import Controller from '@ember/controller';
+import Controller from "@ember/controller";
 
 export default Controller.extend({
-
   actions: {
-    // BEGIN-SNIPPET docs-demo-multiple
     toggleIsShowing() {
-      this.toggleProperty('isShowing');
+      this.toggleProperty("isShowing");
     }
-    // END-SNIPPET
   }
-
 });
diff --git a/tests/dummy/app/pods/docs/components/docs-demo/demo1/template.hbs b/tests/dummy/app/pods/docs/components/docs-demo/demo1/template.hbs
@@ -1,11 +1,11 @@
-{{! BEGIN-SNIPPET docs-demo-basic-src }}
+{{! BEGIN-SNIPPET docs-demo-basic-src.hbs }}
 {{#docs-demo as |demo|}}
-  {{#demo.example name='docs-demo-basic'}}
-      <p>I am a <strong>handlebars</strong> template!</p>
-      <p>The value is: {{val}}</p>
-      <div>
-        {{input value=val}}
-      </div>
+  {{#demo.example name='docs-demo-basic.hbs'}}
+    <p>I am a <strong>handlebars</strong> template!</p>
+    <p>The value is: {{val}}</p>
+    <div>
+      {{input value=val}}
+    </div>
   {{/demo.example}}
 
   {{demo.snippet 'docs-demo-basic.hbs'}}
diff --git a/tests/dummy/app/pods/docs/components/docs-demo/demo2/component.js b/tests/dummy/app/pods/docs/components/docs-demo/demo2/component.js
@@ -1,13 +1,11 @@
-import Component from '@ember/component';
+import Component from "@ember/component";
 
 export default Component.extend({
-
   actions: {
-    // BEGIN-SNIPPET docs-demo-multiple
+    // BEGIN-SNIPPET docs-demo-multiple.js
     toggleIsShowing() {
-      this.toggleProperty('isShowing');
+      this.toggleProperty("isShowing");
     }
     // END-SNIPPET
   }
-  
 });
diff --git a/tests/dummy/app/pods/docs/components/docs-demo/demo2/template.hbs b/tests/dummy/app/pods/docs/components/docs-demo/demo2/template.hbs
@@ -1,6 +1,6 @@
 {{#docs-demo as |demo|}}
-  {{#demo.example data-test-id='docs-demo-multiple'}}
-    {{!-- BEGIN-SNIPPET docs-demo-multiple --}}
+  {{#demo.example data-test-id='docs-demo-multiple.hbs'}}
+    {{!-- BEGIN-SNIPPET docs-demo-multiple.hbs --}}
     <button onclick={{action 'toggleIsShowing'}}>
       Press me!
     </button>
diff --git a/tests/dummy/app/pods/docs/components/docs-demo/demo3/template.hbs b/tests/dummy/app/pods/docs/components/docs-demo/demo3/template.hbs
@@ -1,13 +1,13 @@
-{{!-- BEGIN-SNIPPET docs-demo-custom-src --}}
+{{!-- BEGIN-SNIPPET docs-demo-custom-src.hbs --}}
 {{#docs-demo as |demo|}}
-  {{#demo.example name='docs-demo-custom'}}
+  {{#demo.example name='docs-demo-custom.md'}}
     <pre>
     # Markdown
     - Has syntax highlighting, too
     </pre>
   {{/demo.example}}
 
   {{demo.snippet 'docs-demo-custom-src.hbs' label='Source'}}
-  {{demo.snippet 'docs-demo-custom.hbs' label='My Custom Label' language='markdown'}}
+  {{demo.snippet 'docs-demo-custom.md' label='My Custom Label' language='markdown'}}
 {{/docs-demo}}
 {{!-- END-SNIPPET --}}
diff --git a/tests/dummy/app/pods/docs/components/docs-demo/demo4/template.hbs b/tests/dummy/app/pods/docs/components/docs-demo/demo4/template.hbs
@@ -1,6 +1,6 @@
-{{! BEGIN-SNIPPET live-example-src }}
+{{! BEGIN-SNIPPET live-example-src.hbs }}
 {{#docs-demo as |demo|}}
-  {{#demo.live-example name='live-example'}}
+  {{#demo.live-example name='live-example.hbs'}}
     <p>The air up here is {{foo}}</p>
 
     {{input value=foo}}
diff --git a/tests/dummy/app/pods/docs/components/docs-hero/demo/template.hbs b/tests/dummy/app/pods/docs/components/docs-hero/demo/template.hbs
@@ -1,5 +1,5 @@
 {{#docs-demo as |demo|}}
-  {{#demo.example name='docs-hero'}}
+  {{#demo.example name='docs-hero.hbs'}}
     {{docs-hero
       logo='ember'
       slim-heading='Super'
diff --git a/tests/dummy/app/pods/docs/components/docs-logo/demo1/styles.scss b/tests/dummy/app/pods/docs/components/docs-logo/demo1/styles.scss
@@ -1,4 +1,4 @@
-// BEGIN-SNIPPET docs-logo-ember-styles
+// BEGIN-SNIPPET docs-logo-ember-styles.scss
 .my-ember-addon-logo {
   background: #333;
   color: white;
diff --git a/tests/dummy/app/pods/docs/components/docs-logo/demo1/template.hbs b/tests/dummy/app/pods/docs/components/docs-logo/demo1/template.hbs
@@ -1,5 +1,5 @@
 {{#docs-demo as |demo|}}
-  {{#demo.example name='docs-logo-ember'}}
+  {{#demo.example name='docs-logo-ember.hbs'}}
     <div class='my-ember-addon-logo'>
       {{docs-logo}}
     </div>
diff --git a/tests/dummy/app/pods/docs/components/docs-logo/demo2/styles.scss b/tests/dummy/app/pods/docs/components/docs-logo/demo2/styles.scss
@@ -1,6 +1,6 @@
-// BEGIN-SNIPPET docs-logo-ember-cli-styles
+// BEGIN-SNIPPET docs-logo-ember-cli-styles.scss
 .my-ember-cli-addon-logo {
-  background: #F44336;
+  background: #f44336;
   color: white;
   width: 50%;
   height: 50%;
diff --git a/tests/dummy/app/pods/docs/components/docs-logo/demo2/template.hbs b/tests/dummy/app/pods/docs/components/docs-logo/demo2/template.hbs
@@ -1,5 +1,5 @@
 {{#docs-demo as |demo|}}
-  {{#demo.example name='docs-logo-ember-cli'}}
+  {{#demo.example name='docs-logo-ember-cli.hbs'}}
     <div class='my-ember-cli-addon-logo'>
       {{docs-logo logo='ember-cli'}}
     </div>
diff --git a/tests/dummy/app/pods/docs/components/docs-logo/demo3/styles.scss b/tests/dummy/app/pods/docs/components/docs-logo/demo3/styles.scss
@@ -1,6 +1,6 @@
-// BEGIN-SNIPPET docs-logo-ember-data-styles
+// BEGIN-SNIPPET docs-logo-ember-data-styles.scss
 .my-ember-data-addon-logo {
-  background: #2196F3;
+  background: #2196f3;
   color: white;
   width: 50%;
   height: 50%;
diff --git a/tests/dummy/app/pods/docs/components/docs-logo/demo3/template.hbs b/tests/dummy/app/pods/docs/components/docs-logo/demo3/template.hbs
@@ -1,5 +1,5 @@
 {{#docs-demo as |demo|}}
-  {{#demo.example name='docs-logo-ember-data'}}
+  {{#demo.example name='docs-logo-ember-data.hbs'}}
     <div class='my-ember-data-addon-logo'>
       {{docs-logo logo='ember-data'}}
     </div>
diff --git a/tests/dummy/app/pods/docs/components/docs-navbar/template.md b/tests/dummy/app/pods/docs/components/docs-navbar/template.md
@@ -3,22 +3,24 @@
 A simple top-level nav that gives you an easy autogenerated logo via the <code>logo</code> and <code>name</code> attributes, and a link to your project's GitHub repo (read directly from your addon's package.json file).
 
 {{#docs-demo as |demo|}}
-  {{#demo.example name='docs-navbar'}}
+  {{#demo.example name='docs-navbar.hbs'}}
     {{docs-navbar logo='ember-cli' name='Addon Docs'}}
   {{/demo.example}}
-  {{demo.snippet 'docs-navbar.md'}}
+
+  {{demo.snippet 'docs-navbar.hbs'}}
 {{/docs-demo}}
 
 You can also pass in a block to render your own logo.
 
 {{#docs-demo as |demo|}}
-  {{#demo.example name='docs-navbar-custom-logo'}}
-    {{#docs-navbar githubUrl='https://github.com/ember-learn/ember-cli-addon-docs' }}
+  {{#demo.example name='docs-navbar-custom-logo.hbs'}}
+    {{#docs-navbar githubUrl='https://github.com/ember-learn/ember-cli-addon-docs'}}
       <img height='30px'
         src="/assets/images/rick-astley.jpg"
         alt="Never gonna give you up"
       />
     {{/docs-navbar}}
   {{/demo.example}}
-  {{demo.snippet 'docs-navbar-custom-logo.md'}}
+
+  {{demo.snippet 'docs-navbar-custom-logo.hbs'}}
 {{/docs-demo}}
diff --git a/tests/dummy/app/pods/docs/components/docs-snippet/demo1/template.hbs b/tests/dummy/app/pods/docs/components/docs-snippet/demo1/template.hbs
@@ -1,4 +1,4 @@
-{{#docs-snippet name="docs-snippet"}}
+{{#docs-snippet name="docs-snippet.hbs"}}
   <div id='foo'>
     {{#my-awesome-thing
       some=true
diff --git a/tests/dummy/app/pods/docs/components/docs-snippet/demo2/template.hbs b/tests/dummy/app/pods/docs/components/docs-snippet/demo2/template.hbs
@@ -1,5 +1,5 @@
-{{#docs-snippet name="my-snippet-src"}}
-  // BEGIN-SNIPPET my-snippet
+{{#docs-snippet name="my-snippet-src.hbs"}}
+  // BEGIN-SNIPPET my-snippet.js
   App = Ember.Application.extend({
     modulePrefix: config.modulePrefix,
     podModulePrefix: config.podModulePrefix,
diff --git a/tests/dummy/app/pods/docs/components/docs-snippet/demo3/template.hbs b/tests/dummy/app/pods/docs/components/docs-snippet/demo3/template.hbs
@@ -1,3 +1,3 @@
-{{#docs-snippet name="my-snippet-src2"}}
+{{#docs-snippet name="my-snippet-src2.hbs"}}
   {{docs-snippet name='my-snippet.js'}}
 {{/docs-snippet}}
diff --git a/tests/dummy/app/pods/docs/components/docs-snippet/demo4/template.hbs b/tests/dummy/app/pods/docs/components/docs-snippet/demo4/template.hbs
@@ -1,4 +1,4 @@
-{{#docs-snippet name="docs-snippet-title-example" title="app/components/my-component.js"}}
+{{#docs-snippet name="docs-snippet-title-example.js" title="app/components/my-component.js"}}
   import Component from '@ember/component';
   export default Component.extend({
     // ...
diff --git a/tests/dummy/app/pods/docs/components/docs-snippet/template.md b/tests/dummy/app/pods/docs/components/docs-snippet/template.md
@@ -4,7 +4,7 @@ Easily render a code snippet with syntax highlighting and a copy-to-clipboard bu
 
 ## Handlebars
 
-To render a Handlebars snippet from one of your templates, wrap it in `{{#docs-snippet name="your-snippet-name"}}`.
+To render a Handlebars snippet from one of your templates, wrap it in `{{#docs-snippet name="your-snippet-name.hbs"}}`.
 
 {{docs/components/docs-snippet/demo1}}
 
diff --git a/tests/dummy/app/pods/docs/quickstart/template.md b/tests/dummy/app/pods/docs/quickstart/template.md
@@ -4,31 +4,32 @@ This quickstart guide will get you going with a docs site for your brand new add
 
 1. **Install the addon.**
 
-  ```
-  ember install ember-learn/ember-cli-addon-docs
-  ```
+
+```
+ember install ember-learn/ember-cli-addon-docs
+```
 
 2. **Add the docs route.** Open `tests/dummy/app/router.js` and add a route named `docs`. Go ahead and make it nested, since this is where you'll be defining additional documentation pages.
 
-  {{#docs-snippet name='quickstart-router' title='tests/dummy/app/router.js'}}
-    this.route('docs', function() {
-      this.route('api', function() {
-        this.route('class', { path: '/:class_id' });
-      });
-    });
-  {{/docs-snippet}}
+{{#docs-snippet name='quickstart-router.js' title='tests/dummy/app/router.js'}}
+this.route('docs', function() {
+this.route('api', function() {
+this.route('class', { path: '/:class_id' });
+});
+});
+{{/docs-snippet}}
 
 3. **Create your app skeleton.** Open your application template and add the DocsNavbar component, customizing its properties for your project. You can also add the global keyboard shortcuts component (use `?` to show the help window). Here's our application template:
 
-  {{docs-snippet name="docs-demo-application-template" title="tests/dummy/app/templates/application.hbs"}}
+{{docs-snippet name="docs-demo-application-template.hbs" title="tests/dummy/app/templates/application.hbs"}}
 
 4. **Create your docs skeleton.** Create a template for the `docs` route and add the DocsViewer component.
 
-  {{#docs-snippet name='quickstart-skeleton' title='tests/dummy/app/pods/docs/template.hbs'}}
-    {{#docs-viewer as |viewer|}}
-      {{#viewer.nav as |nav|}}
-        {{nav.item 'Overview' 'docs.index'}}
-      {{/viewer.nav}}
+{{#docs-snippet name='quickstart-skeleton.hbs' title='tests/dummy/app/pods/docs/template.hbs'}}
+{{#docs-viewer as |viewer|}}
+{{#viewer.nav as |nav|}}
+{{nav.item 'Overview' 'docs.index'}}
+{{/viewer.nav}}
 
       {{#viewer.main}}
         <div class="docs-container docs__center">
@@ -38,56 +39,58 @@ This quickstart guide will get you going with a docs site for your brand new add
         </div>
       {{/viewer.main}}
     {{/docs-viewer}}
-  {{/docs-snippet}}
+
+{{/docs-snippet}}
 
 5. **Fill out the index of your docs page.** We called it Overview but you can call it whatever you want. Since Addon Docs supports markdown templates out of the box, we can make this a Markdown file.
 
-  {{#docs-snippet name='quickstart-markdown' title='tests/dummy/app/templates/docs/index.md' language='markdown'}}
-    # Overview
+{{#docs-snippet name='quickstart-markdown.md' title='tests/dummy/app/templates/docs/index.md' language='markdown'}} # Overview
 
     This is my new addon, and it rocks!
-  {{/docs-snippet}}
+
+{{/docs-snippet}}
 
 6. **Add a 404 route.** Add a route to the end of your router and create an associated template.
 
-  {{#docs-snippet name='quickstart-404-route' title='tests/dummy/app/router.js'}}
-    this.route('not-found', { path: '/*path' });
-  {{/docs-snippet}}
+{{#docs-snippet name='quickstart-404.js' title='tests/dummy/app/router.js'}}
+this.route('not-found', { path: '/\*path' });
+{{/docs-snippet}}
 
   <br />
 
-  {{#docs-snippet name='quickstart-404-template' title='tests/dummy/app/templates/not-found.hbs'}}
-    <div class="docs-container">
-      <h1>Not found</h1>
-      <p>This page doesn't exist. {{#link-to 'index'}}Head home?{{/link-to}}</p>
-    </div>
-  {{/docs-snippet}}
+{{#docs-snippet name='quickstart-404.hbs' title='tests/dummy/app/templates/not-found.hbs'}}
+<div class="docs-container">
+<h1>Not found</h1>
+<p>This page doesn't exist. {{#link-to 'index'}}Head home?{{/link-to}}</p>
+</div>
+{{/docs-snippet}}
 
 8. **Add more docs pages.** It's up to you how to structure your docs - use the Snippet, Viewer and Demo components to help you write your documentation. Let's add another page to ours: we'll add the route, link to our docs viewer, and the actual template.
 
-  {{#docs-snippet name='quickstart-more-docs' title='tests/dummy/app/router.js'}}
-    this.route('docs', function() {
-      this.route('installation');
-    });
-  {{/docs-snippet}}
+{{#docs-snippet name='quickstart-more-docs.js' title='tests/dummy/app/router.js'}}
+this.route('docs', function() {
+this.route('installation');
+});
+{{/docs-snippet}}
 
   <br />
 
-  {{#docs-snippet name='quickstart-more-nav' title='tests/dummy/app/templates/docs.hbs'}}
-    {{#viewer.nav as |nav|}}
-      {{nav.item 'Installation' 'docs.installation'}}
-    {{/viewer.nav}}
-  {{/docs-snippet}}
+{{#docs-snippet name='quickstart-more-nav.hbs' title='tests/dummy/app/templates/docs.hbs'}}
+{{#viewer.nav as |nav|}}
+{{nav.item 'Installation' 'docs.installation'}}
+{{/viewer.nav}}
+{{/docs-snippet}}
 
   <br />
 
-  {{#docs-snippet name='quickstart-installation-readme' title='tests/dummy/app/templates/docs/installation.md'}}
-    # Installation
+{{#docs-snippet name='quickstart-installation-readme.md' title='tests/dummy/app/templates/docs/installation.md'}} # Installation
 
     To install My Addon, run...
-  {{/docs-snippet}}
+
+{{/docs-snippet}}
 
 8. **Round out your site.**
-  - **Add a favicon.** We recommend using [Ember CLI Favicon]( https://github.com/davewasmer/ember-cli-favicon).
 
-  - **Install [Ember Router Scroll](https://github.com/dollarshaveclub/ember-router-scroll).**
+* **Add a favicon.** We recommend using [Ember CLI Favicon](https://github.com/davewasmer/ember-cli-favicon).
+
+* **Install [Ember Router Scroll](https://github.com/dollarshaveclub/ember-router-scroll).**
diff --git a/tests/dummy/app/pods/docs/template.hbs b/tests/dummy/app/pods/docs/template.hbs
@@ -1,5 +1,4 @@
-{{!-- BEGIN-SNIPPET docs-viewer --}}
-{{! tests/dummy/app/pods/docs/template.hbs }}
+{{!-- BEGIN-SNIPPET docs-viewer.hbs --}}
 {{#docs-viewer as |viewer|}}
   {{#viewer.nav as |nav|}}
     {{nav.item 'Introduction' 'docs.index'}}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-{{! BEGIN-SNIPPET docs-demo-application-template }}`
	`1`	`+{{! BEGIN-SNIPPET docs-demo-application-template.hbs }}`
`2`	`2`	`{{outlet}}`
`3`	`3`
`4`	`4`	`{{docs-keyboard-shortcuts}}`