lib/templates/component.hbs from cybrilla/parata

lib/templates/component.hbs
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Parata | {{titleize component.name}}</title>
  <link rel="stylesheet" href="/app.dist.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script>
  {{#each site.externalJavascripts}}
    <script src="/{{ this }}"></script>
  {{/each}}
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .sb-wrapper {
      width: 980px;
      padding-top: 80px;
      margin: 0px auto;
    }

    code.sb-code-block {
      display: block;
      background: #F5F5F5;
      padding: 0px 10px;
    }

    .sb-text {
      font-family: sans-serif;
      padding-bottom: 20px;
    }

    .sb-capitalize {
      text-transform: capitalize;
    }

    .sb-copy-btn {
      padding: 10px;
      cursor: pointer;
      background: #F5F5F5;
      outline: 0;
      border: 1px solid #999;
    }

    h1.sb-text {
      font-size: 36px;
      font-weight: bold;
    }

    h2.sb-text {
      font-size: 24px;
      padding-bottom: 20px;
      font-weight: bold;
    }

    p.sb-text {
      padding-bottom:  20px;
    }

    .sb-code-block {
      font-family: monospace;
      margin-top: 10px;
    }

    .sb-code-block > pre {
      margin: 0;
    }

    .sb-home-page {
      position: fixed;
      left: 0;
      padding: 10px;
      background: #EEE;
    }
  </style>
</head>
<body>
<a class="sb-text sb-home-page" href="/">Go back to Index</a>
<div class="sb-wrapper">
  <h1 class="sb-text">{{titleize component.name}}</h1>
  <p class="sb-text">{{ component.description }}</p>
  {{#each component.examples }}
  <div id="sb-component-{{ variant }}" class="sb-component">
    {{#if variant}}
    <h2 class="sb-text">
      <a href="#sb-component-{{ variant }}">.{{ variant }}</a></h2>
  </h2>
  {{/if}}
  {{{ code }}}
  <code class="sb-code-block">
    <pre id="sb-code-{{ variant }}">
            {{ code }}
    </pre>
    <button class="sb-copy-btn" id="sb-{{ variant }}-copy-btn" data-target="sb-code-{{ variant }}">COPY</button>
  </code>
</div>
{{#if scriptExample}}
<hr>
<code class="sb-code-block">
  <pre id="sb-code-{{ variant }}">
  {{ scriptExample }}
  </pre>
</code>
<script>
{{{ scriptExample }}}
</script>
{{/if}}
<script>
(function() {
 var client = new ZeroClipboard(document.getElementById('sb-{{ variant }}-copy-btn'));

 client.on( "ready", function( readyEvent ) {
   client.on( "copy", function( event ) {
     var clipboard = event.clipboardData,
     contents = document.getElementById(event.target.dataset.target)
     .innerHTML;

     // Replace html entities so that it will be copied as html onto the clipboard
     contents = contents.replace(/&amp;/g, '&')
     .replace(/&lt;/g, '<')
     .replace(/&gt;/g, '>')
     .replace(/&quot;/g, '"');

     clipboard.setData("text/plain", contents);
     alert("Copied to clipboard");
     });
   });
}());
</script>
<hr>
{{/each}}
  </div>
</body>
</html>