<%
  var config = config
%>
<!DOCTYPE html>
<html lang="<%= config.default.lang %>">
<head>
  <meta charset="<%= config.default.charset %>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><% if (key !== 'index') { %><%= pagetitle + ' | ' %><% } %><%= config.default.title %></title>
  <link rel="canonical" href="<%= config.default.publicPath %>">
  <meta name="description" content="<%= config.default.description %>">
  <meta name="author" content="<%= config.default.author %>">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="<%= config.default.title %>">
  <meta property="og:title" content="<% if (key !== 'index') { %><%= pagetitle + ' | ' %><% } %><%= config.default.title %>">
  <meta property="og:description" content="<%= config.default.description %>">
  <meta property="og:url" content="<%= config.default.publicPath %>">
  <meta property="og:image" content="<%= config.default.publicPath %>img/share/ogimage.png?r=2">
  <meta name="twitter:site" content="<%= config.default.twitter %>">
  <meta name="twitter:creator" content="<%= config.default.twitter %>">
  <meta name="twitter:url" content="<%= config.default.publicPath %>">
  <meta name="twitter:title" content="<% if (key !== 'index') { %><%= pagetitle + ' | ' %><% } %><%= config.default.title %>">
  <meta name="twitter:description" content="<%= config.default.description %>">
  <meta name="twitter:card" content="summary">
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="<%= config.default.title %>">
  <link rel="shortcut icon" href="/assets/share/favicon.ico">

  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  <link rel="stylesheet" href="/css/units.css">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css" rel="stylesheet">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

  <style>
    /* Document Page */
    .doc-component-box {
      padding: 100px 0 0;
      margin-top: 0;
    }
    .doc-component-box h3 {
      margin-top: 0;
    }
    .doc-component-box .doc-component-preview {
      margin: 40px -80px 0;
      padding: 40px 80px;
      background-color:#f2f2f2;
    }
    @media (max-width: 1199px) and (min-width: 769px) {
      .doc-component-box .doc-component-preview {
        margin: 40px -40px 0;
        padding: 40px 40px;
        background-color:#f2f2f2;
      }
    }
    @media (max-width: 768px) {
      .doc-component-box .doc-component-preview {
        margin: 40px -20px 0;
        padding: 40px 20px;
      }
    }
    .doc-component-box .doc-component-preview-inner {
      position: relative;
    }
    .doc-component-box .uc-code-unit {
      max-width: 800px;
      margin: 40px 0 0;
      padding-bottom: 40px;
      border-bottom: 1px solid #ebebeb;
    }
  </style>
</head>
<body class="page-<%= key %>">
