Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{title}}</title>
<meta charset="utf-8"/>
<meta name="description" content="{{description}}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="{{&endpoint}}.dodgercms/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="{{&endpoint}}.dodgercms/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="{{&endpoint}}.dodgercms/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="{{&endpoint}}.dodgercms/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="{{&endpoint}}.dodgercms/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="{{&endpoint}}.dodgercms/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="{{&endpoint}}.dodgercms/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="{{&endpoint}}.dodgercms/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="{{&endpoint}}.dodgercms/apple-touch-icon-152x152.png" />
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" />
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>var KEY = '{{&key}}';</script>
<script>var BUCKET = '{{&bucket}}';</script>
<script>var ENDPOINT = '{{&endpoint}}';</script>
{{{{raw-helper}}}}
<script id="menu-partial" type="text/x-handlebars-template">
<ul class="pure-menu-list">
{{#unless index}}
<li class="pure-menu-item {{#if children}}has-children{{/if}}">
{{#if link}}
<a href="/{{link}}" class="pure-menu-link">{{label}}</a>
{{else}}
<span class="menu-folder-slug">{{label}}</span>
{{/if}}
</li>
{{#children}}
{{> menu}}
{{/children}}
{{/unless}}
</ul>
</script>
{{{{/raw-helper}}}}
{{{{raw-helper}}}}
<script id="nav-template" type="text/x-handlebars-template">
<div class="pure-menu">
<a class="pure-menu-heading" href="/"><img src="{{&endpoint}}.dodgercms/logo.png"></a>
<ul class="pure-menu-list">
{{#nav}}
{{#unless index}}
<li class="pure-menu-item {{#if children}}has-children{{/if}}">
{{#if link}}
<a href="/{{link}}" class="pure-menu-link">{{label}}</a>
{{else}}
<span class="menu-folder-slug">{{label}}</span>
{{/if}}
</li>
{{#children}}
{{> menu}}
{{/children}}
{{/unless}}
{{/nav}}
</ul>
</div>
</script>
{{{{/raw-helper}}}}
{{{{raw-helper}}}}
<script id="header-template" type="text/x-handlebars-template">
<div class="pure-menu pure-menu-horizontal breadcrumbs">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="/" class="pure-menu-link">Home</a>&raquo;</li>
{{#breadcrumbs}}
<li class="pure-menu-item">
{{#if @last}}
<span class="menu-slug">{{label}}</span>
{{else}}
{{#if link}}
<a href="/{{link}}" class="pure-menu-link">{{label}}</a>&raquo;
{{else}}
<span class="breadcrumbs-folder-slug">{{label}}</span>&raquo;
{{/if}}
{{/if}}
</li>
{{/breadcrumbs}}
</ul>
</div>
</script>
{{{{/raw-helper}}}}
<style>
body {
color: #777;
font-family: "Arimo", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
color: #5e5e5e;
}
h2 {
color: #6a6a6a;
}
code {
padding: 0.25em;
color: #333;
background: #f3f3f3;
-webkit-text-size-adjust: none;
border-radius: 3px;
}
.pure-img-responsive {
max-width: 100%;
height: auto;
}
/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#entry {
padding:1.5em 3.25em;
}
#entry .content img {
max-width: 100%;
border: 1px solid #ededed;
padding: 0.15em;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
position: relative;
padding-left: 0;
}
#layout.active #menu {
left: 350px;
width: 350px;
}
#layout.active .menu-link {
left: 350px;
}
/*
The content `<div>` is where all your content goes.
*/
.content {
margin: 0;
padding: 0;
margin-bottom: 50px;
line-height: 1.8em;
}
.header {
margin: 0;
padding: 0;
border-bottom: 1px solid #e1e1e1;
height:75px;
background-color: #f7f7f7;
}
.header .breadcrumbs {
padding: 1.75em 3.25em 0 3.25em;
}
.header .breadcrumbs .pure-menu-link {
padding: 0 0.25em 0 0 ;
color: #2980B9;
display: inline-block;
}
.header .breadcrumbs .pure-menu-link:hover {
text-decoration: none;
color:#146092;
background: none;
}
.header .breadcrumbs .menu-slug {
color: #404040;
}
.breadcrumbs .breadcrumbs-folder-slug {
padding: 0 0.25em 0 0;
color: #404040;
display: inline-block;
}
.breadcrumbs .breadcrumbs-folder-slug:hover {
background: none;
}
.title {
margin: 0 0 2em 0;
padding-bottom: 0.75em;
border-bottom: 1px solid #f0f0f0;
}
.title h1 {
margin: 0 0 0.1em 0;
font-size: 2.5em;
color: #404040;
font-weight: 400;
overflow:hidden;
}
.title p {
color: #9d9d9d;
padding: 0.25em 0;
margin: 0;
font-size: 100%;
}
.title .last-edited {
font-style: italic;
}
/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#menu {
margin-left: -350px; /* "#menu" width */
width: 350px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: #191818;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
font-size: 0.95em;
}
#menu ul.pure-menu-list {
margin-left: 0;
padding-left: 1.5em;
}
#menu ul.pure-menu-list span.menu-folder-slug {
text-transform: uppercase;
padding-top: 0.25em;
font-weight: 600;
color: #999;
}
#menu ul.pure-menu-list .has-children {
text-transform: uppercase;
padding-top: 0.25em;
}
#menu ul.pure-menu-list .has-children a {
font-weight: 600;
color: #999;
}
#menu ul.pure-menu-list li {
padding-top:0.25em;
padding-bottom:0.25em;
}
#menu ul.pure-menu-list ul {
margin-left: 0.5em;
padding-left: 0.5em;
}
#menu ul.pure-menu-list ul > li:first {
text-transform: uppercase;
}
/*
All anchors inside the menu should be styled like this.
*/
#menu .pure-menu-list a {
color: #797979;
border: none;
padding: 0.0em 0 0.0em 0.1em;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 300;
}
/*
Remove all background/borders, since we are applying them to #menu.
*/
#menu .pure-menu,
#menu .pure-menu ul {
border: none;
background: transparent;
}
/*
Change color of the anchor links on hover/focus.
*/
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
text-decoration: underline;
color: #929292;
background: none;
}
#menu .pure-menu li.has-children a:hover,
#menu .pure-menu li.has-children a:focus {
text-decoration: none;
color: #afafaf;
background: none;
}
/*
This styles the selected menu item `<li>`.
*/
#menu .pure-menu-selected,
#menu .pure-menu-heading {
background: #1f8dd6;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#menu .pure-menu-selected a {
color: #fff;
}
/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
color: #fff;
margin: 0 0 1.5em 0;
padding: 0;
height:75px;
overflow: hidden;
border-bottom: 1px solid #107AC0;
}
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/
/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
position: fixed;
display: block; /* show this only on small screens */
top: 0;
left: 0; /* "#menu width" */
background: #000;
background: rgba(0,0,0,0.7);
font-size: 10px; /* change this value to increase/decrease button size */
z-index: 10;
width: 1em;
height: auto;
padding: 1.5em;
}
.menu-link:hover,
.menu-link:focus {
background: #000;
}
.menu-link span {
position: relative;
display: block;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
background-color: #fff;
width: 100%;
height: 0.2em;
}
.menu-link span:before,
.menu-link span:after {
position: absolute;
margin-top: -0.5em;
content: " ";
}
.menu-link span:after {
margin-top: 0.5em;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {
#layout {
padding-left: 350px; /* left col width "#menu" */
left: 0;
}
#menu {
left: 350px;
}
.menu-link {
position: fixed;
left: 350px;
display: none;
}
#layout.active .menu-link {
left: 350px;
}
}
@media (max-width: 48em) {
/* Only apply this when the window is small. Otherwise, the following
* case results in extra padding on the left:
* Make the window small.
* Tap the menu to trigger the active state.
* Make the window large again.
*/
#layout.active {
position: relative;
left: 350px;
}
}
</style>
</head>
<body>
<div id="layout">
<a href="#menu" id="menuLink" class="menu-link">
<!-- Hamburger icon -->
<span></span>
</a>
<!-- Menu gets loaded dynamically -->
<nav id="menu"></nav>
<div id="header" class="header"></div>
<article id="entry">
<div class="title">
<h1>{{title}}</h1>
<p>Last edited on <span class="last-edited">{{modified}}</span></p>
</div>
<!-- The converted markdown content. -->
<div class="content">{{&body}}</div>
</article>
<footer>
</footer>
</div>
<script>
(function (window, document) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
requestCallback(JSON.parse(request.responseText));
}
};
request.open("GET", "{{&endpoint}}{{dataKey}}");
request.send();
// Retrieve the json file with menu data
function requestCallback(data) {
var parts = KEY.split('/');
var breadcrumbs = [];
// Use the menu json to build a tree list
buildFromSegments(data, breadcrumbs, parts);
var navTemplate = document.getElementById('nav-template').innerHTML;
var nav = Handlebars.compile(navTemplate);
var menuPartial = document.getElementById('menu-partial').innerHTML;
var menu = Handlebars.compile(menuPartial);
// Register the partial so it can be used in the nav template
Handlebars.registerPartial({
menu: menu
});
var navContext = {
nav: data,
endpoint: ENDPOINT
};
var navHtml = nav(navContext);
document.getElementById('menu').innerHTML = navHtml;
// Breadcrumbs
var headerTemplate = document.getElementById('header-template').innerHTML;
var header = Handlebars.compile(headerTemplate);
var headerContext = {
breadcrumbs: breadcrumbs
};
var headerHtml = header(headerContext);
document.getElementById('header').innerHTML = headerHtml;
};
function buildFromSegments(scope, breadcrumbs, pathSegments) {
// Remove the first segment from the path
var current = pathSegments.shift();
// See if that segment already exists in the current scope
var found = findInScope(scope, current);
// If we did not find a match, create the new object for this path segment
if (found) {
breadcrumbs.push({
label: found.label,
link: found.link
});
// If there are still path segments left, we need to go deeper
if (pathSegments.length) {
found.children = found.children || [];
buildFromSegments(found.children, breadcrumbs, pathSegments);
}
}
}
// Attempts to find a path segment in the current scope
function findInScope(scope, find) {
for (var i = 0; i < scope.length; i++) {
if (scope[i].part === find) {
return scope[i];
}
}
}
}(this, this.document));
</script>
<script>
(function (window, document) {
var layout = document.getElementById('layout'),
menu = document.getElementById('menu'),
menuLink = document.getElementById('menuLink');
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
length = classes.length;
for (var i = 0; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
menuLink.onclick = function (e) {
var active = 'active';
e.preventDefault();
toggleClass(layout, active);
toggleClass(menu, active);
toggleClass(menuLink, active);
};
}(this, this.document));
</script>
</body>
</html>