Support title, language and showCopy on {{docs-snippet}}

Fixes #37, fixes #38.

Author: dfreeman

addon/components/docs-demo/styles.scss

@@ -10,7 +10,7 @@
   }
 
   &__snippets-nav {
-    background: #E3E3E3;
+    background: $code-title-background-color;
     padding: 12px 16px;
     font-weight: bold;
   }

addon/components/docs-demo/x-snippet/styles.scss

@@ -1,6 +1,6 @@
 .docs-demo-snippet {
   font-size: 14px;
-  background: #f8f8f8;
+  background: $code-background-color;
 
   &__inner {
     padding: 15px 6px;

addon/components/docs-snippet/component.js

@@ -7,6 +7,10 @@ export default Component.extend({
   tagName: '',
   layout,
 
+  language: undefined,
+  title: undefined,
+  showCopy: false,
+
   _unindent: function(src) {
     if (!this.get('unindent')) {
       return src;

addon/components/docs-snippet/styles.scss

@@ -14,4 +14,11 @@
       opacity: 1;
     }
   }
+
+  &__title {
+    background-color: $code-title-background-color;
+    font-family: monospace;
+    font-size: 14px;
+    padding: 8px 15px;
+  }
 }

addon/components/docs-snippet/template.hbs

@@ -1,14 +1,16 @@
-<div class='docs-snippet' data-test-id={{name}}>
-  {{#copy-button
-    clipboardText=snippetText
-    title='copy to clipboard'
-  }}
-    Copy
-  {{/copy-button}}
+{{#if file}}
+  <div class='docs-snippet__title'>{{file}}</div>
+{{/if}}
 
-  {{#if hasBlock}}
-    {{code-snippet name=(concat name '.hbs')}}
-  {{else}}
-    {{code-snippet name=name language=language}}
+<div class='docs-snippet' data-test-id={{name}}>
+  {{#if showCopy}}
+    {{#copy-button
+      clipboardText=snippetText
+      title='copy to clipboard'
+    }}
+      Copy
+    {{/copy-button}}
   {{/if}}
+
+  {{code-snippet name=(if hasBlock (concat name '.hbs') name) language=language}}
 </div>

addon/styles/addon.scss

@@ -1,4 +1,5 @@
-$code-color: #fafafa; // #f5f2f0
+$code-background-color: #fafafa; // #f5f2f0
+$code-title-background-color: #e3e3e3;
 
 @import 'normalize';
 @import 'pod-styles';
@@ -77,7 +78,7 @@ button {
   }
 
   code {
-    background: $code-color;
+    background: $code-background-color;
   }
 
   blockquote {
@@ -103,8 +104,9 @@ button {
     // font-style: italic;
   }
 
-  pre {
-    background: $code-color;
+  // Applied to fenced code in compiled markdown
+  &__code {
+    background: $code-background-color;
     padding: 20px;
     overflow-x: scroll;
     font-size: 14px;

lib/utils/compile-markdown.js

@@ -28,7 +28,8 @@ class HBSRenderer extends marked.Renderer {
   }
 
   code() {
-    return this._escapeCurlies(super.code.apply(this, arguments));
+    let code = this._escapeCurlies(super.code.apply(this, arguments));
+    return code.replace(/^<pre>/, '<pre class="docs-md__code">');
   }
 
   // Unescape quotes in text, as they may be part of a Handlebars statement

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

@@ -43,7 +43,7 @@
   Here's the code that rendered the above demo (you can copy-paste this block to get going in your own app):
 </p>
 
-{{code-snippet name='docs-demo-basic-src.hbs'}}
+{{docs-snippet name='docs-demo-basic-src.hbs'}}
 
 <p>To explain,</p>
 
@@ -58,7 +58,7 @@
 
 <p>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.</p>
 
-<p>Use a file extension to help code-snippet identify and properly syntax highlight your snippet. Templates end in `.hbs`, JavaScript snippets end in `.js`, stylesheets in `.css` or `.scss`.</p>
+<p>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`.</p>
 
 {{#docs-demo as |demo|}}
   {{#demo.example data-test-id='docs-demo-multiple'}}
@@ -113,7 +113,7 @@
 
 <p>Here's the code for this:</p>
 
-{{code-snippet name='live-example-src.hbs'}}
+{{docs-snippet name='live-example-src.hbs'}}
 
 <p>Note that we're using the <code>demo.live-example</code> contextual component now. This component takes a block as a starting template for the user to see. It then puts that template into the <code>textarea</code>, and every time its value changes the template is recompiled and rerendered.</p>