Scope MD styles with a class

Author: samselikoff

addon/components/docs-hero/component.js

@@ -3,6 +3,7 @@ import layout from './template';
 
 /**
   A component that renders a hero banner. Useful for your docs site's homepage.
+
   @class DocsHero
   @public
 */

addon/components/docs-keyboard-shortcuts/component.js

@@ -6,7 +6,8 @@ import { EKMixin, keyUp } from 'ember-keyboard';
 import { inject as service } from '@ember/service';
 
 /**
-  A component that renders a hero banner. Useful for your docs site's homepage.
+  A component that enables keyboard shortcuts. Press '?' to toggle the keyboard shortcuts dialog.
+
   @class DocsKeyboardShortcuts
   @public
 */

addon/components/docs-link/component.js

@@ -0,0 +1,17 @@
+import LinkComponent from '@ember/routing/link-component';
+
+/**
+  Just a styled subclass of LinkComponent. Comes in handy when rending links in Markdown templates:
+
+  ```md
+  Here I am, telling you about {{docs-link 'another page' 'docs.x-foo'}}
+  ```
+
+  @class DocsLink
+  @public
+*/
+export default LinkComponent.extend({
+
+  classNames: 'docs-md__a'
+
+});

addon/styles/addon.scss

@@ -71,39 +71,26 @@ button {
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
 
-  h2 {
+  &__h2 {
     font-size: 24px;
     font-weight: 600;
     margin-top: 1.5em;
   }
 
-  p {
-  }
-
-  li {
-  }
-
-  code {
+  &__code {
     background: $code-background-color;
   }
 
-  blockquote {
+  &__blockquote {
     margin: 0;
     margin-bottom: .85em;
     padding: 0 15px;
     color: #858585;
     border-left: 4px solid #e5e5e5
   }
 
+  // Couldn't figure out how to add class in our Renderer
   aside {
-    // right side version
-    // font-size: small;
-    // width: 180px;
-    // position: absolute;
-    // left: 780px;
-    // line-height: 1.4;
-
-    // inline version
     background: #fafafa;
     padding: 10px 20px;
     margin-top: 20px;
@@ -118,7 +105,7 @@ button {
     font-size: 14px;
   }
 
-  a {
+  &__a {
     text-decoration: none;
     border-bottom: 1px solid #ccc;
     color: inherit;
@@ -128,7 +115,7 @@ button {
     }
   }
 
-  hr {
+  &__hr {
     height: 4px;
     padding: 0;
     margin: 1.7em 0;

app/components/docs-link.js

@@ -0,0 +1 @@
+export { default } from 'ember-cli-addon-docs/components/docs-link/component';

lib/utils/compile-markdown.js

@@ -44,4 +44,20 @@ class HBSRenderer extends marked.Renderer {
       .replace(/{{/g, '{{')
       .replace(/}}/g, '}}');
   }
+
+  heading(text, level) {
+    return `<h${level} class='docs-md__h${level}'>${text}</h${level}>`;
+  }
+
+  hr() {
+    return `<hr class='docs-md__hr'>`;
+  }
+
+  blockquote(text) {
+    return `<blockquote class='docs-md__blockquote'>${text}</blockquote>`;
+  }
+
+  link(href, title, text) {
+    return `<a href="${href}" title="${title}" class="docs-md__a">${text}</a>`;
+  }
 }

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

@@ -0,0 +1,9 @@
+{{#docs-snippet name="docs-snippet"}}
+  <div id='foo'>
+    {{#my-awesome-thing
+      some=true
+      options=false}}
+      <p>Something old, something new</p>
+    {{/my-awesome-thing}}
+  </div>
+{{/docs-snippet}}

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

@@ -0,0 +1,9 @@
+{{#docs-snippet name="my-snippet-src"}}
+  // BEGIN-SNIPPET my-snippet
+  App = Ember.Application.extend({
+    modulePrefix: config.modulePrefix,
+    podModulePrefix: config.podModulePrefix,
+    Resolver
+  });
+  // END-SNIPPET
+{{/docs-snippet}}

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

@@ -0,0 +1,3 @@
+{{#docs-snippet name="my-snippet-src2"}}
+  {{docs-snippet name='my-snippet.js'}}
+{{/docs-snippet}}

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

@@ -0,0 +1,6 @@
+{{#docs-snippet name="docs-snippet-title-example" title="app/components/my-component.js"}}
+  import Component from '@ember/component';
+  export default Component.extend({
+    // ...
+  });
+{{/docs-snippet}}