Make doc pages MD

Author: samselikoff

tests/dummy/app/pods/docs/components/docs-demo/demo1/template.hbs

@@ -0,0 +1,13 @@
+{{! BEGIN-SNIPPET docs-demo-basic-src }}
+{{#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}}
+
+  {{demo.snippet 'docs-demo-basic.hbs'}}
+{{/docs-demo}}
+{{! END-SNIPPET }}

tests/dummy/app/pods/docs/components/docs-demo/demo2/component.js

@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+
+  actions: {
+    // BEGIN-SNIPPET docs-demo-multiple
+    toggleIsShowing() {
+      this.toggleProperty('isShowing');
+    }
+    // END-SNIPPET
+  }
+  
+});

tests/dummy/app/pods/docs/components/docs-demo/demo2/template.hbs

@@ -0,0 +1,18 @@
+{{#docs-demo as |demo|}}
+  {{#demo.example data-test-id='docs-demo-multiple'}}
+    {{!-- BEGIN-SNIPPET docs-demo-multiple --}}
+    <button onclick={{action 'toggleIsShowing'}}>
+      Press me!
+    </button>
+
+    {{#if isShowing}}
+      <p>Yep</p>
+    {{else}}
+      <p>Nope</p>
+    {{/if}}
+    {{!-- END-SNIPPET --}}
+  {{/demo.example}}
+
+  {{demo.snippet 'docs-demo-multiple.hbs'}}
+  {{demo.snippet 'docs-demo-multiple.js' label='component.js'}}
+{{/docs-demo}}

tests/dummy/app/pods/docs/components/docs-demo/demo3/template.hbs

@@ -0,0 +1,13 @@
+{{!-- BEGIN-SNIPPET docs-demo-custom-src --}}
+{{#docs-demo as |demo|}}
+  {{#demo.example name='docs-demo-custom'}}
+    <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'}}
+{{/docs-demo}}
+{{!-- END-SNIPPET --}}

tests/dummy/app/pods/docs/components/docs-demo/demo4/template.hbs

@@ -0,0 +1,9 @@
+{{! BEGIN-SNIPPET live-example-src }}
+{{#docs-demo as |demo|}}
+  {{#demo.live-example name='live-example'}}
+    <p>The air up here is {{foo}}</p>
+
+    {{input value=foo}}
+  {{/demo.live-example}}
+{{/docs-demo}}
+{{! END-SNIPPET }}

tests/dummy/app/pods/docs/components/docs-demo/template.hbs

@@ -0,0 +1,57 @@
+# Docs Demo
+
+This component provides you with a way to show example code. It also renders the actual template used to generate the example, so you don't have to worry about keeping the code snippet and the live example in sync.
+
+It's also an important part of your addon's testing story. If you write demos for most of your addon's functionality in your documentation app using this helper component, and then write acceptance tests against those demos, your acceptance tests will accomplish two things:
+
+- They verify your addon's behavior
+- They ensure all of that behavior is working in your docs site, and up-to-date with your addon's actual APIs
+
+This saves you from ever having to remember that second step of "updating the docs" every time you change your libary.
+
+Of course, if your addon's components have some edge cases that would muddle up your documentation site too much, you can fall back to using integration tests. But try to keep most of the behavior in the docs pages — that way your users will know about it.
+
+## Basic usage
+
+Let's look at a basic example:
+
+{{docs/components/docs-demo/demo1}}
+
+Here's the code that rendered the above demo (you can copy-paste this block to get going in your own app):
+
+{{docs-snippet name='docs-demo-basic-src.hbs'}}
+
+To explain,
+
+- `{{docs-demo}}` is the wrapping component
+- The contextual component `{{#demo.example}}{{/demo.example}}` provides a wrapper to display your example. You'll pass a block to this component with the actual code you're demoing - for example, showing off how to use your button.
+- You also need to pass a `name=` to demo.example in order to identify your snippet.
+- Finally, the `{{demo.snippet}}` component lets you render different named snippets that you've identified via demo.example wrappers or other code comment blocks in your source.
+
+## Multiple snippets
+
+You can render multiple snippets to support your example. This can be useful when part of your example relies on code defined elsewhere, for example in a controller or stylesheet.
+
+Use a file extension to help docs-snippet identify and properly syntax highlight your snippet. Templates end in `.hbs`, JavaScript snippets end in `.js`, stylesheets in `.css` or `.scss`.
+
+{{docs/components/docs-demo/demo2}}
+
+## Custom Snippet Handling
+
+If you wish to override the inferred label or syntax highlighting for a snippet, you can specify `label` and `language` properties.
+
+{{docs/components/docs-demo/demo3}}
+
+## Live examples
+
+You can also make a live example, so your users can edit your demos and try out your components for themselves.
+
+{{docs/components/docs-demo/demo4}}
+
+Here's the code for this:
+
+{{docs-snippet name='live-example-src.hbs'}}
+
+Note that we're using the `demo.live-example` contextual component now. This component takes a block as a starting template for the user to see. It then puts that template into the `textarea`, and every time its value changes the template is recompiled and rerendered.
+
+If there is a template compilation error it should show instead of the rendered output.

tests/dummy/app/pods/docs/components/docs-demo/template.md

@@ -1,7 +1,3 @@
-<h1>Docs Hero</h1>
-
-<p>This component helps you quickly get a hero section on your addon's homepage. The hero on the homepage of this site is an example.</p>
-
 {{#docs-demo as |demo|}}
   {{#demo.example name='docs-hero'}}
     {{docs-hero

…s/docs/components/docs-hero/template.hbs …s/components/docs-hero/demo/template.hbstests/dummy/app/pods/docs/components/docs-hero/template.hbs renamed to tests/dummy/app/pods/docs/components/docs-hero/demo/template.hbs tests/dummy/app/pods/docs/components/docs-hero/template.hbs renamed to tests/dummy/app/pods/docs/components/docs-hero/demo/template.hbs

@@ -0,0 +1,5 @@
+# Docs Hero
+
+This component helps you quickly get a hero section on your addon's homepage. The hero on the homepage of this site is an example.
+
+{{docs/components/docs-hero/demo}}

tests/dummy/app/pods/docs/components/docs-hero/template.md

@@ -0,0 +1,10 @@
+// BEGIN-SNIPPET docs-logo-ember-styles
+.my-ember-addon-logo {
+  background: #333;
+  color: white;
+  width: 50%;
+  height: 50%;
+  margin: 0 auto;
+  padding: 20px;
+}
+// END-SNIPPET