Bump some deps, consolidate some docs

package.json

@@ -32,6 +32,7 @@
   },
   "resolutions": {
     "**/@ember/render-modifiers": "^2.0.0",
+    "**/@embroider/macros": "0.50.2",
     "**/ember-cli-babel": "^7.26.6",
     "**/ember-tether": "^2.0.1"
   },
@@ -66,7 +67,7 @@
     "ember-concurrency": "^2.0.0",
     "ember-decorators": "^6.1.1",
     "ember-fetch": "^8.1.1",
-    "ember-get-config": "^0.5.0",
+    "ember-get-config": "^1.0.0",
     "ember-keyboard": "^7.0.0-beta.0",
     "ember-modal-dialog": "yapplabs/ember-modal-dialog#76b74f1c4b791fed5b084836c3b1c8c54836ac71",
     "ember-responsive": "^4.0.2",
@@ -120,7 +121,7 @@
     "ember-cli-deploy-build": "^2.0.0",
     "ember-cli-deploy-git": "^1.3.4",
     "ember-cli-inject-live-reload": "^2.1.0",
-    "ember-cli-mirage": "^2.2.0",
+    "ember-cli-mirage": "^2.3.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
     "ember-component-css": "^0.7.4",

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

@@ -15,7 +15,19 @@ Of course, if your addon's components have some edge cases that would muddle up
 
 Let's look at a basic example:
 
-{{docs/components/docs-demo/demo1}}
+{{! BEGIN-SNIPPET docs-demo-basic-src.hbs }}
+{{#docs-demo as |demo|}}
+  {{#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 class="docs-border"}}
+    </div>
+  {{/demo.example}}
+
+  {{demo.snippet "docs-demo-basic.hbs"}}
+{{/docs-demo}}
+{{! END-SNIPPET }}
 
 Here's the code that rendered the above demo (you can copy-paste this block to get going in your own app):
 
@@ -34,10 +46,48 @@ You can render multiple snippets to support your example. This can be useful whe
 
 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}}
+{{#docs-demo as |demo|}}
+  {{#demo.example data-test-id="docs-demo-multiple.hbs"}}
+    {{!-- BEGIN-SNIPPET docs-demo-multiple.hbs --}}
+    <button 
+      class="docs-btn" 
+      {{on "click" (set this "isShowing" (not this.isShowing))}}
+    >
+      Press me!
+    </button>
+
+    <p class="docs-mt-4">
+      {{#if isShowing}}
+        Yep
+      {{else}}
+        Nope
+      {{/if}}
+    </p>
+    {{!-- END-SNIPPET --}}
+  {{/demo.example}}
+
+  {{demo.snippet "docs-demo-multiple.hbs"}}
+  {{demo.snippet "docs-demo-multiple.js" label="component.js"}}
+{{/docs-demo}}
 
 ## 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}}
+{{!-- BEGIN-SNIPPET docs-demo-custom-src.hbs --}}
+{{#docs-demo as |demo|}}
+  {{#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.md"
+    label="My Custom Label"
+    language="markdown"
+  }}
+{{/docs-demo}}
+{{!-- END-SNIPPET --}}

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

@@ -9,8 +9,25 @@ The component has three arguments. By default, these arguments are pulled from y
 
 As long as these are present, you can just render `{{docs-hero}}` with no arguments:
 
-{{docs/components/docs-hero/demo-1}}
+{{#docs-demo as |demo|}}
+  {{#demo.example name="docs-hero-1.hbs"}}
+    {{docs-hero}}
+  {{/demo.example}}
+
+  {{demo.snippet "docs-hero-1.hbs"}}
+{{/docs-demo}}
 
 You can also override any of the args if necessary:
 
-{{docs/components/docs-hero/demo-2}}
+{{#docs-demo as |demo|}}
+  {{#demo.example name="docs-hero-2.hbs"}}
+    {{docs-hero
+      prefix="EmberData"
+      heading="Something"
+      byline="The best addon ever. Now playing in theaters."
+      class="some-custom-class"
+    }}
+  {{/demo.example}}
+
+  {{demo.snippet "docs-hero-2.hbs"}}
+{{/docs-demo}}

tests/dummy/app/pods/docs/components/docs-snippet/template.md → tests/dummy/app/templates/docs/components/docs-snippet.md

@@ -6,7 +6,20 @@ Easily render a code snippet with syntax highlighting and a copy-to-clipboard bu
 
 To render a Handlebars snippet from one of your templates, wrap it in a `DocsSnippet` component:
 
-{{docs/components/docs-snippet/demo1}}
+<div class="docs-my-8">
+  {{#docs-snippet name="docs-snippet.hbs"}}
+    {{#docs-snippet name="your-snippet-name.hbs"}}
+      <div id="foo">
+        {{#my-awesome-thing
+          some=true
+          options=false
+        }}
+          <p>Something old, something new</p>
+        {{/my-awesome-thing}}
+      </div>
+    {{/docs-snippet}}
+  {{/docs-snippet}}
+</div>
 
 All snippets must have a globally unique name.
 
@@ -22,11 +35,25 @@ To do this, first mark up the source you want to display using comments that sta
 
 `BEGIN—SNIPPET` should be followed by a name, which you can use to identify the snippet.
 
-{{docs/components/docs-snippet/demo2}}
+<div class="docs-my-8">
+  {{#docs-snippet name="my-snippet-src.hbs"}}
+    // BEGIN-SNIPPET my-snippet.js
+    App = Ember.Application.extend({
+      modulePrefix: config.modulePrefix,
+      podModulePrefix: config.podModulePrefix,
+      Resolver
+    });
+    // END-SNIPPET
+  {{/docs-snippet}}
+</div>
 
 Then in any of your templates, you can use the non-block form of `docs-snippet` to render your named snippet:
 
-{{docs/components/docs-snippet/demo3}}
+<div class="docs-my-8">
+  {{#docs-snippet name="my-snippet-src2.hbs"}}
+    {{docs-snippet name="my-snippet.js"}}
+  {{/docs-snippet}}
+</div>
 
 Be sure to include the file extension.
 
@@ -42,4 +69,11 @@ Finally, you can use the `title` property to specify a header for your snippet,
 
 Here's what that looks like:
 
-{{docs/components/docs-snippet/demo4}}
+<div class="docs-my-8">
+  {{#docs-snippet name="docs-snippet-title-example.hbs" title="app/components/my-component.js" showCopy=false language="javascript"}}
+    import Component from '@ember/component';
+    export default Component.extend({
+      // ...
+    });
+  {{/docs-snippet}}
+</div>