apage
Version:
A single-page website from lots of markdown
398 lines (325 loc) • 15.7 kB
HTML
<html lang="en">
<head>
<title>Apage</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="generator" content="Apage 0.0.22 http://apage.richplastow.com/">
<style>
/* ‘Inspect Element’ here, for Apage’s injected CSS */
</style>
<script>
//// When the DOM is ready, set up Apage and inject the plugins.
window.addEventListener('load', function () { (function (d) { 'use strict';
//// Declare iterator, length and HTML-reference variables.
var i, l, $ref
//// Initialize three arrays which are available to all Apage plugins.
,arts = []
,resolvers = []
,updaters = []
//// Like jQuery, but native.
,$ = d.querySelector.bind(d)
,$$ = d.querySelectorAll.bind(d)
//// Get a reference to all `<article class="apage">` elements.
,$arts = $$('article.apage')
//// Convert JavaScript’s native `arguments` object to an array.
,getArgs = function (args, offset) {
return Array.prototype.slice.call(args, offset || 0);
}
//// `unattribute($ref,'data-apage-','opath'...)` removes data attributes.
,unattribute = function ($ref, prefix) {
for ( var i=0, suffs=getArgs(arguments,2), l=suffs.length; i<l; i++ ) {
$ref.removeAttribute(prefix + suffs[i]);
}
}
//// Runs each resolver in order. These are added by the plugins, below.
//// Resolvers are used to map a query to an article.
,resolve = function (query) {
for (var i=0, l=resolvers.length, backstop, result={}; i<l; i++) {
result = resolvers[i](query);
if (result.art) { break; } // `query` does resolve to an article
backstop = result.backstop || backstop; // may return a backstop
}
return result.art ? result.art : backstop; //@todo test logic of 'last valid backstop return' with several plugins at once
}
//// Runs each updater in order. These are added by the plugins, below.
//// Updaters change the current DOM state, eg to show a single article.
,update = function (query) {
for (var i=0, l=updaters.length, current=resolve(query); i<l; i++) {
updaters[i](current);
}
}
//// Tidies the URL hash and runs `update()` when the URL hash changes.
,onHashchange = function (event) {
update( window.location.hash.substr(1).replace(/\//g,'_') );
if (event) { event.preventDefault(); }
}
;
//// Populate the `arts` array using data from Apage `<ARTICLE>` elements.
//// Then, remove all 'data-apage-*' attributes except 'data-apage-dname'.
for (i=0, l=$arts.length; i<l; i++) {
$ref = $arts[i];
arts.push({
id: $ref.getAttribute('id')
,opath: $ref.getAttribute('data-apage-opath')
,dname: $ref.getAttribute('data-apage-dname')
,order: $ref.getAttribute('data-apage-order')
,front: JSON.parse( $ref.getAttribute('data-apage-front') )
,title: $ref.getAttribute('data-apage-title')
,$ref: $ref
});
unattribute($ref,'data-apage-','opath','order','front','title');
}
//// Begin injecting plugins.
// Generated by CoffeeScript 1.9.2
/*! Apage 0.0.22 //// MIT Licence //// http://apage.richplastow.com/
* plugin/cross-browser.litcoffee
*/
(function() {
$('style').innerHTML += "\n/* injected by Apage’s CrossBrowser plugin, and adapted from: */\n/* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */\n\n/* Document */\nhtml { font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100% }\nbody { margin:0 }\n\n/* HTML5 */\narticle,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,\nsection,summary { display:block }\naudio,canvas,progress,video { display:inline-block; vertical-align:baseline }\naudio:not([controls]) { display:none; height:0 }\n[hidden],template { display:none }\n\n/* Links */\na { background-color:transparent }\na:active,a:hover { outline:0 }\n\n/* Text */\nabbr[title] { border-bottom:1px dotted }\nb, strong { font-weight:bold }\ndfn { font-style:italic }\nh1 { font-size:2em; margin:0.67em 0 }\nmark { background:#ff0; color:#000 }\nsmall { font-size:80% }\nsub,sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline }\nsup { top:-0.5em }\nsub { bottom:-0.25em }\n\n/* Embedded */\nimg { border:0 }\nsvg:not(:root) { overflow:hidden }\n\n/* Grouping */\nfigure { margin:1em 40px }\nhr { box-sizing:content-box; height:0 }\npre { overflow:auto }\ncode,kbd,pre,samp { font-family:monospace,monospace; font-size:1em }\n\n/* Forms */\nbutton,input,optgroup,select,textarea { color:inherit; font:inherit; margin:0 }\nbutton { overflow:visible }\nbutton,select { text-transform:none }\nbutton,html input[type=\"button\"],input[type=\"reset\"],\ninput[type=\"submit\"] { -webkit-appearance:button; cursor:pointer }\nbutton[disabled],html input[disabled] { cursor:default }\nbutton::-moz-focus-inner,input::-moz-focus-inner{ border:0; padding:0 }\ninput { line-height:normal }\ninput[type=\"checkbox\"],input[type=\"radio\"] { box-sizing:border-box; padding:0 }\ninput[type=\"number\"]::-webkit-inner-spin-button,\ninput[type=\"number\"]::-webkit-outer-spin-button { height:auto }\ninput[type=\"search\"] { -webkit-appearance:textfield; box-sizing:content-box }\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration { -webkit-appearance:none }\nfieldset { border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em }\nlegend { border:0; padding:0 }\ntextarea { overflow:auto }\noptgroup { font-weight:bold }\n\n/* Tables */\ntable { border-collapse:collapse; border-spacing:0 }\ntd,th { padding:0 }\n";
}).call(this);
// Generated by CoffeeScript 1.9.2
/*! Apage 0.0.22 //// MIT Licence //// http://apage.richplastow.com/
* plugin/pagination.litcoffee
*/
(function() {
var $ref, art, i, len;
$('style').innerHTML += "\n/* injected by Apage’s Pagination plugin */\narticle { display: none; }\narticle.active { display: block; }";
$ref = document.createElement('article');
$ref.setAttribute('class', 'apage');
$ref.setAttribute('id', 'apage_undefined');
$ref.innerHTML = "<!-- injected by Apage’s Pagination plugin -->\n<h1>Article Not Found</h1>";
d.body.appendChild($ref);
arts.push({
id: 'undefined',
opath: '',
dname: '',
order: 0,
front: [],
title: 'Article Not Found',
$ref: $ref
});
for (i = 0, len = arts.length; i < len; i++) {
art = arts[i];
arts[art.id] = art;
}
arts['_'] = arts[0] || arts.undefined;
resolvers.push(function(query) {
if (!query) {
return {
art: arts[0]
};
}
if (arts[query]) {
return {
art: arts[query]
};
}
query = 'apage' + query;
if (arts[query]) {
return {
art: arts[query]
};
}
return {
backstop: arts.undefined
};
});
updaters.push(function(current) {
var j, len1;
for (j = 0, len1 = arts.length; j < len1; j++) {
art = arts[j];
art.$ref.className = art.$ref.className.replace(/\s*active|\s*$/g, '');
}
current.$ref.className += ' active';
return d.title = current.title;
});
}).call(this);
//// End injecting plugins.
//// Run each updater when the page loads, and when the URL hash changes.
onHashchange();
window.addEventListener('hashchange', onHashchange);
}).call(this, document) });
</script>
</head>
<body>
<article id="apage_readme"
class="apage"
data-apage-opath="/README.md"
data-apage-dname="_"
data-apage-order="-1"
data-apage-front='[]'
data-apage-title="Apage">
<h1>Apage</h1>
<h4>Apage generates a single HTML page from multiple markdown sources</h4>
<ul>
<li><a href="">Homepage</a></li>
<li><a href="#/doc/documentation">Documentation</a></li>
<li><a href="test/run-test.html">Test</a></li>
<li><a href="https://github.com/richplastow/apage">Fork Apage on GitHub</a></li>
</ul>
</article><!-- / #apage_readme -->
<article id="apage_doc_documentation"
class="apage"
data-apage-opath="/doc/00-documentation.md"
data-apage-dname="_doc_"
data-apage-order="0"
data-apage-front='[]'
data-apage-title="Documentation">
<h1>Documentation</h1>
<ul>
<li><a href="">Home</a> </li>
<li><a href="#/doc/installing-apage">Installing Apage</a> </li>
<li><a href="#/doc/testing-apage">Testing Apage</a> </li>
<li><a href="#/doc/installing-build-tools">Installing Build Tools</a> </li>
<li><a href="#/doc/the-build-process">The Build Process</a> </li>
<li><a href="#/doc/handy-scripts">Handy Scripts</a></li>
</ul>
</article><!-- / #apage_doc_documentation -->
<article id="apage_doc_installing-apage"
class="apage"
data-apage-opath="/doc/01-installing-apage.md"
data-apage-dname="_doc_"
data-apage-order="1"
data-apage-front='[]'
data-apage-title="Installing Apage">
<h1>Installing Apage</h1>
<p>Old fashioned browser install, providing <code>window.Apage</code>: </p>
<pre><code class="lang-html"><script src="http://apage.richplastow.com/build/apage.js"></script>
<script>console.log( new window.Apage().I ); // -> 'Apage'</script>
</code></pre>
<p>Install as a <a href="http://goo.gl/ZrbaB0">CommonJS Module</a>, eg for
<a href="https://nodejs.org/">Node</a>: </p>
<pre><code class="lang-javascript">var Apage = require('apage');
console.log( new Apage().I ); // -> 'Apage'
</code></pre>
<p>Install using <a href="http://goo.gl/mp7Snw">RequireJS inline-style</a>, providing <code>Apage</code>
as an argument: </p>
<pre><code class="lang-html"><script src="lib/require.js"></script>
<script>
require(['path/to/apage'], function(Apage) {
console.log( new Apage().I ); // -> 'Apage'
})
</script>
</code></pre>
<p>@todo more installation examples, including <code>$ npm install -g apage</code>, etc.</p>
</article><!-- / #apage_doc_installing-apage -->
<article id="apage_doc_testing-apage"
class="apage"
data-apage-opath="/doc/02-testing-apage.md"
data-apage-dname="_doc_"
data-apage-order="2"
data-apage-front='[]'
data-apage-title="Testing Apage">
<h1>Testing Apage</h1>
<p>Test with <a href="http://goo.gl/UYupZI">npm run-scripts</a> on the command line: </p>
<pre><code class="lang-bash">npm test
</code></pre>
<p>Test on the client:<br>Open <a href="test/run-test.html">test/run-test.html</a> in
a web browser</p>
</article><!-- / #apage_doc_testing-apage -->
<article id="apage_doc_installing-build-tools"
class="apage"
data-apage-opath="/doc/03-installing-build-tools.md"
data-apage-dname="_doc_"
data-apage-order="3"
data-apage-front='[["foo","123"],["bar","we're testing two single quotes can't break the attribute"],["bar","testing duplicate keys"]]'
data-apage-title="Installing Build Tools">
<h1>Installing Build Tools</h1>
<p>The following modules are listed in the <code>"devDependencies"</code> field of
‘package.json’, so running <code>npm install</code> will install them in the local
‘node_modules’ directory. However, you may find it useful to install them
globally on your machine, in which case the <code>-g</code> flag is your friend: </p>
<p>Install <a href="http://coffeescript.org/">coffee</a> 1.9.2 on the command line: </p>
<pre><code class="lang-bash">npm install -g coffee-script
</code></pre>
<p>Install <a href="http://nodemon.io/">nodemon</a> 1.3.7: </p>
<pre><code class="lang-bash">npm install -g nodemon
</code></pre>
</article><!-- / #apage_doc_installing-build-tools -->
<article id="apage_doc_the-build-process"
class="apage"
data-apage-opath="/doc/04-the-build-process.md"
data-apage-dname="_doc_"
data-apage-order="4"
data-apage-front='[]'
data-apage-title="The Build Process">
<h1>The Build Process</h1>
<h4>Build Apage on the command line</h4>
<pre><code class="lang-bash">npm run build
</code></pre>
<p>@todo discussion of the limitations of file-watching.</p>
</article><!-- / #apage_doc_the-build-process -->
<article id="apage_doc_handy-scripts"
class="apage"
data-apage-opath="/doc/05-handy-scripts.md"
data-apage-dname="_doc_"
data-apage-order="5"
data-apage-front='[]'
data-apage-title="Handy Scripts">
<h1>Handy Scripts</h1>
<h4><code>hi</code></h4>
<p>Opens up four useful project windows, saving you a few precious seconds at the
start of a development session. You will need Sublime Text installed, and a
symlink to its <code>subl</code> binary <a href="http://goo.gl/wJqkjY">added to your PATH</a>.<br>@todo cross-platform, eg <code>xdg-open</code> (*nix) and <code>start</code> (win)</p>
<pre><code class="lang-bash">npm run hi
</code></pre>
<p>Which runs: </p>
<pre><code class="lang-bash">open .; open index.html; open test/run-test.html; subl .
</code></pre>
<p>Which means: </p>
<ol>
<li>Open the present working directory. On OS X, this opens a Finder window</li>
<li>Open the project’s local homepage using the default browser</li>
<li>Open the client-side test page using the default browser</li>
<li>Open the project in Sublime Text</li>
</ol>
<h4><code>v:list</code></h4>
<p>Shows a list of files which contain the <code>version</code> string from ‘package.json’.
Each filename is suffixed by a colon, followed by the line-number where the
version string appears, eg <code>README.md:1 package.json:4</code>. </p>
<pre><code class="lang-bash">npm run v:list
</code></pre>
<p>Which runs: </p>
<pre><code class="lang-bash">grep -ron $npm_package_version {bin,src,*.json} | awk 1 ORS=' ' | sed "s@:$npm_package_version@@g"
</code></pre>
<p>Or verbosely: </p>
<pre><code class="lang-bash">grep --recursive --only-matching --line-number $npm_package_version \\
{bin,src,*.json} \\
| \\
awk 1 ORS=' ' \\
| \\
sed "s@:$npm_package_version@@g"
</code></pre>
<p>Which means: </p>
<ol>
<li>Use <code>grep</code> to get a newline-delimited list of files which contain the
<code>version</code> string from ‘package.json’<ul>
<li><code>--recursive</code> search in subdirectories</li>
<li><code>--only-matching</code> don’t show leading/trailing context in the results</li>
<li><code>--line-number</code> included after a colon, eg <code>bower.json:3</code></li>
</ul>
</li>
<li>Search in bin/, src/, package.json, bower.json, etc</li>
<li>Pipe the list to <code>awk</code></li>
<li><a href="http://goo.gl/1WNas5">Convert all newlines to spaces</a></li>
<li>Pipe the list to <code>sed</code></li>
<li>Delete the trailing colon and version from each filename, eg <code>:1.2.3-4</code></li>
</ol>
<p>If you want to find for a particular string in the repo content, use: </p>
<pre><code class="lang-bash">grep -r 'the string' *
</code></pre>
<h4><code>v:open</code></h4>
<p>Opens a list of files which contain the <code>version</code> string from ‘package.json’ in
Sublime Text. You will need Sublime Text installed, and a symlink to its <code>subl</code>
binary <a href="http://goo.gl/wJqkjY">added to your PATH</a>. </p>
<pre><code class="lang-bash">npm run v:open
</code></pre>
<p>Which runs: </p>
<pre><code class="lang-bash">subl $(npm run v:list --loglevel silent)
</code></pre>
<p>Note <code>--loglevel silent</code>, which prevents <code>subl</code> from being sent the results-log
which <code>npm run</code> usually outputs.</p>
</article><!-- / #apage_doc_handy-scripts -->
<!-- ‘Inspect Element’ here, for Apage’s injected elements -->
</body>
</html>