feat(build): update to nunjucks templates

feature/nunjucks-templating
swanky-docs · Aug 28, 2016 · 959e3fd · 959e3fd
1 parent 79f9bc1
commit 959e3fd
Show file tree

Hide file tree

Showing 12 changed files with 124 additions and 123 deletions.
diff --git a/templates/layouts/default.ejs b/templates/layouts/default.ejs
diff --git a/templates/layouts/default.html b/templates/layouts/default.html
@@ -0,0 +1,69 @@
+{% include '../partials/header.html' -%}
+
+<button id="navToggle" class="{$ styles['nav-toggle'] $}" type="button">
+    <span class="{$ styles['icon-bar'] $}"></span>
+    <span class="{$ styles['icon-bar'] $}"></span>
+    <span class="{$ styles['icon-bar'] $}"></span>
+</button>
+
+<div class="{$ styles.brand $}"><a href="{$ meta.serverPath $}" class="{$ styles.logo $}"></a></div>
+
+{% if meta.repository %}
+    <a href="{$ meta.repository $}" title="{$ meta.title $} Github Repo" target="_blank" class="{$ styles.github $}"></a>
+{% endif %}
+
+<aside id="offCanvasNav" class="{$ styles.sidebar $}">
+    <nav class="{$ styles.navigation $}">
+        <ul class="{$ styles.ul $}">
+            {% for item in meta.navigation %}
+                <li class="{$ styles.li $} {$ styles.active if (item.key == key or item.key == parentKey) else '' $}">
+                    <a href="{$ meta.serverPath if meta.production else '/' $}{$ item.url $}" title="{$ item.title $}"
+                       class="{$ styles.a $}">{$ item.title $}</a>
+                    {% if item.children %}
+                        <ul class="{$ styles.ul $}">
+                            {% for child in item.children %}
+                                <li class="{$ styles.li $} {$ styles.active if (child.key == key) else '' $}">
+
+                                    <a href="{$ meta.serverPath if meta.production else '/' $}{$ child.url $}"
+                                       title="{$ child.title $}" class="{$ styles.a $}">
+                                        {$ child.title $}
+                                    </a>
+
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    {% endif %}
+                </li>
+            {% endfor %}
+        </ul>
+    </nav>
+</aside>
+
+<section class="{$ styles.main $}">
+    <article>
+        {% if hasAnchors %}
+            <div class="{$ styles.anchors $}" data-gumshoe>
+                {% for item in contents %}
+                    {% if item.title %}
+                        <a href="#{$ item.key $}" class="{$ styles.a $}" data-scroll>{$ item.title $}</a>
+                    {% endif %}
+                {% endfor %}
+            </div>
+        {% endif %}
+        {% if parentKey %}
+            {% for item in meta.navigation %}
+                {% if item.key == parentKey %}
+                    <h1 class="{$ styles['page-header'] $} {$ styles.h1 $}" data-gumshoe-header>{$ item.title $}</h1>
+                {% endif %}
+            {% endfor %}
+        {% else %}
+            <h1 class="{$ styles['page-header'] $} {$ styles.h1 $}" data-gumshoe-header>{$ title $}</h1>
+        {% endif %}
+
+        {% for item in contents %}
+            {$ item.content $}
+        {% endfor %}
+    </article>
+</section>
+
+{% include '../partials/footer.html' -%}
diff --git a/templates/partials/content-wrapper.ejs b/templates/partials/content-wrapper.ejs
diff --git a/templates/partials/content-wrapper.html b/templates/partials/content-wrapper.html
@@ -0,0 +1,11 @@
+<section id="{$ id $}" class="{$ styles.section $}">
+    {% if (title and hasPreprocessor) %}
+        {% if hasParent %}
+            <h3 class="{$ styles.h3 $}">{$ title $}</h3>
+        {% else %}
+            <h2 class="{$ styles.h2 $}">{$ title $}</h2>
+        {% endif %}
+    {% endif %}
+
+    {$ content $}
+</section>
diff --git a/templates/partials/footer.ejs b/templates/partials/footer.ejs
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
@@ -0,0 +1,8 @@
+            <footer class="{$ styles.footer $}">
+                {% if meta.repository %}
+                    <div class="{$ styles.version $}">version {$ meta.version $}</div>
+                {% endif %}
+            </footer>
+        </div>
+    </body>
+</html>
diff --git a/templates/partials/header.ejs b/templates/partials/header.ejs
diff --git a/templates/partials/header.html b/templates/partials/header.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+    <title>{$ meta.title $} - {$ title $}</title>
+    <link rel="icon" href="{$ meta.serverPath if meta.production else '/' $}favicon.ico" type="image/x-icon"/>
+    <link rel="stylesheet" type="text/css" href="theme.css">
+    <link rel="stylesheet" type="text/css" href="docs.css">
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,600,600italic,300' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet">
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
+</head>
+
+<body class="{$ styles['has-anchors'] if hasAnchors else '' $}">
+    <div class="{$ styles['outer-wrap'] $}">
+        <div class="{$ styles['top-line'] $}"></div>
diff --git a/templates/partials/render.ejs b/templates/partials/render.ejs
diff --git a/templates/partials/render.html b/templates/partials/render.html
@@ -0,0 +1 @@
+{$ template $}
diff --git a/templates/partials/snippet.ejs b/templates/partials/snippet.ejs
diff --git a/templates/partials/snippet.html b/templates/partials/snippet.html
@@ -0,0 +1,15 @@
+<div class="{$ styles['code-snippet'] $}">
+    <div class="{$ styles['example-wrapper'] $}">
+        {$ template $}
+    </div>
+    <div class="{$ styles['window-bar'] $} sd-accordion">
+        <div class="{$ styles.circles $}">
+            <span class="{$ styles.circle $} {$ styles['circle-red'] $}"></span>
+            <span class="{$ styles.circle $} {$ styles['circle-yellow'] $}"></span>
+            <span class="{$ styles.circle $} {$ styles['circle-green'] $}"></span>
+        </div>
+    </div>
+    <div class="{$ styles['code-wrapper'] $} sd-panel">
+        <pre class="line-numbers"><code class="language-markup">{$ encode(template) $}</code></pre>
+    </div>
+</div>