forked from bitfragment/mindoc
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
220 lines (207 loc) · 13.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="template for a single self-contained, very mobile-friendly HTML document">
<title>mindoc</title>
<!-- Yahoo! CDN combo URL for selected Pure.css modules -->
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.6.0/base-min.css&pure/0.6.0/grids-responsive-min.css&pure/0.6.0/menus-min.css&pure/0.6.0/tables-min.css">
<!-- Extra styles -->
<style>
body{margin:1em 0 0}.pure-g{padding:0 1em}.pure-menu-link:focus{background-color:#d3d3d3}nav{margin:0 0 1em;padding:0 0 1em;border-bottom:1px solid #ccc}footer{margin:5em 0 1em}pre{white-space:pre-wrap;margin-left:3em}code{font-size:89%;color:#191919}.author{margin-bottom:0;padding-bottom:0}.headnote,.published,.license{font-size:89%;margin-bottom:.75em}@media screen and (max-width:35.5em){thead{display:none}tr,th,td{display:block}td{border-top:0}tr td:first-child{border-top:1px solid #ddd;font-weight:700}}
</style>
</head>
<body>
<section id="page-content">
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1 pure-u-md-1 pure-u-lg-1 pure-u-xl-1">
<!-- page content begins here -->
<header>
<h1 class="title">mindoc</h1>
</header>
<section id="about" class="level2">
<h2>About</h2>
<p><strong>mindoc</strong> is a template for a single self-contained, very mobile-friendly HTML document. A <a href="http://pandoc.org/">Pandoc</a> template is included and is the most useful of the three template files.</p>
<p><strong>mindoc</strong> is deliberately tiny. It uses a subset of <a href="https://github.com/yahoo/pure/">Pure.css</a> modules loaded from a CDN, with added or modified styles and <a href="https://bitfragment.github.io/mindoc/docs/mindoc.html">JavaScript</a> inlined.</p>
<p>It was designed for publishing single essays and course syllabi, but might also be suitable for very simple documentation of other kinds.</p>
<p><strong>mindoc</strong> has been tested with Pandoc 1.19.2.1.</p>
</section>
<section id="installation" class="level2">
<h2>Installation</h2>
<p>Get a blank HTML template <a href="https://raw.githubusercontent.com/bitfragment/mindoc/master/dist/mindoc-blank.html">here</a> or the Pandoc template <a href="https://raw.githubusercontent.com/bitfragment/mindoc/master/dist/mindoc-pandoc.html">here</a> (right-click and choose “Save Link As…”, “Download Linked File”, “Download Linked File As…”, etc.). All three files can be found in the <strong><a href="https://github.com/bitfragment/mindoc/tree/master/dist">dist</a></strong> directory of the project <a href="https://github.com/bitfragment/mindoc">repository</a>.</p>
</section>
<section id="usage" class="level2">
<h2>Usage</h2>
<p>Simply edit <a href="https://raw.githubusercontent.com/bitfragment/mindoc/master/dist/mindoc-blank.html">mindoc-blank.html</a>, or use <a href="https://raw.githubusercontent.com/bitfragment/mindoc/master/dist/mindoc-pandoc.html">mindoc-pandoc.html</a> with Pandoc’s <code>--template</code> option:</p>
<pre><code>pandoc mydocument.md --template mindoc-pandoc.html -o mydocument.html</code></pre>
<p>Pandoc’s <code>stdout</code> can be piped to a utility like <a href="https://github.com/kangax/html-minifier">html-minifier</a>:</p>
<pre><code>pandoc mydocument.md --template mindoc-pandoc.html | html-minifier -c -minifier.conf -o mydocument.html</code></pre>
<p>Use <a href="http://gruntjs.com/">Grunt</a> with a plugin like <a href="https://github.com/gmp26/grunt-panda">grunt-panda</a> to automate document conversion:</p>
<pre><code>grunt.initConfig({
panda: {
options: {
pandocOptions: [
'--template=lib/mindoc/dist/mindoc-pandoc.html',
'--to=html5',
'--section-divs',
'--smart',
'--variable=lang:en'
]
},
files: {
src: 'src/mydocument.md',
dest: 'dist/mydocument.html'
}
},
});</code></pre>
</section>
<section id="features" class="level2">
<h2>Features</h2>
<section id="navigation" class="level3">
<h3>Navigation</h3>
<p>If you invoke Pandoc’s option <code>--section-divs</code>, <strong>mindoc</strong> will add a page navigation menu like the one on this demo page. The menu will include all <strong>level 2</strong> headers (no subheaders) plus sections for an abstract and footnotes, if either exist.</p>
<p>If you want a “References” section providing sources for <a href="http://pandoc.org/README.html#citations">citations</a>, you should end your document with a <strong>level 2</strong> header titled “References”.</p>
<p>Navigation menu item text is formed from Pandoc’s automatically generated <a href="http://pandoc.org/README.html#header-identifiers">header identifiers</a> by replacing hyphens with spaces and capitalizing the first letter:</p>
<table>
<thead>
<tr class="header">
<th style="text-align: left;">Identifier</th>
<th style="text-align: left;">Navigation item text</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;"><code>header-identifiers-in-html</code></td>
<td style="text-align: left;">Header identifiers in html</td>
</tr>
<tr class="even">
<td style="text-align: left;"><code>dogs--in-my-house</code></td>
<td style="text-align: left;">Dogs in my house</td>
</tr>
<tr class="odd">
<td style="text-align: left;"><code>html-s5-or-rtf</code></td>
<td style="text-align: left;">Html s5 or rtf</td>
</tr>
<tr class="even">
<td style="text-align: left;"><code>applications</code></td>
<td style="text-align: left;">Applications</td>
</tr>
<tr class="odd">
<td style="text-align: left;"><code>section</code></td>
<td style="text-align: left;">Section</td>
</tr>
</tbody>
</table>
<p>This has obvious limitations, worth keeping in mind when composing section headers in your source document.</p>
</section>
<section id="pandoc-template-variables" class="level3">
<h3>Pandoc template variables</h3>
<p><strong>mindoc</strong> adds the following additional <a href="http://pandoc.org/README.html#templates">template variables</a> to Pandoc’s default html template, along with minimal styling. You can use these additional variables in a YAML <a href="http://pandoc.org/README.html#metadata-blocks">metadata block</a> in your Markdown document:</p>
<table>
<thead>
<tr class="header">
<th style="text-align: left;">Template variable</th>
<th style="text-align: left;">Value appears in:</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;"><code>description</code></td>
<td style="text-align: left;">Content of HTML tag <code>meta name="description"</code></td>
</tr>
<tr class="even">
<td style="text-align: left;"><code>headnote</code></td>
<td style="text-align: left;">Document, preceding value of variable <code>published</code></td>
</tr>
<tr class="odd">
<td style="text-align: left;"><code>published</code></td>
<td style="text-align: left;">Document, preceding value of variable <code>license</code></td>
</tr>
<tr class="even">
<td style="text-align: left;"><code>license</code></td>
<td style="text-align: left;">Document, preceding value of variable <code>title</code></td>
</tr>
<tr class="odd">
<td style="text-align: left;"><code>version</code></td>
<td style="text-align: left;">Document, preceding value of variable <code>date</code></td>
</tr>
<tr class="even">
<td style="text-align: left;"><code>abstract</code></td>
<td style="text-align: left;">Document, preceding the table of contents (if any)</td>
</tr>
</tbody>
</table>
<p><code>headnote</code> is useful for prepending a distribution notice (for example, “Draft copy. Please do not redistribute without permission”).</p>
<p><code>published</code> can be used to prepend publication information.</p>
<section id="multiple-authors" class="level4">
<h4>Multiple authors</h4>
<p><strong>mindoc</strong> also adds the variables <code>affiliation</code> and <code>email</code> for document authors, and handles multiple authors (the following example is modified from Pandoc’s documentation):</p>
<pre><code>---
author:
- name: Author One
affiliation: University of Somewhere
email: foo@bar
- name: Author Two
affiliation: University of Nowhere
email: bar@foo
---</code></pre>
</section>
<section id="passing-values-of-template-variables-to-pandoc-with-grunt" class="level4">
<h4>Passing values of template variables to Pandoc with Grunt</h4>
<p>As with other Pandoc commands and variables, you can pass the values of template variables to Pandoc using <a href="http://gruntjs.com/">Grunt</a> with a plugin like <a href="https://github.com/gmp26/grunt-panda">grunt-panda</a>:</p>
<pre><code>grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
panda: {
options: {
pandocOptions: [
'--template=lib/mindoc/dist/mindoc-pandoc.html',
'--to=html5',
'--section-divs',
'--smart',
'--variable=lang:en',
'--variable=description:<%= pkg.description %>',
'--variable=version:<%= pkg.version %>',
'--variable=headnote:"Draft copy."'
]
},
files: {
src: 'src/mydocument.md',
dest: 'dist/mydocument.html'
}
},
});</code></pre>
<p>Here the values of the Pandoc template variables <code>description</code> and <code>version</code> are taken from values in the file <code>package.json</code> and inserted using Grunt template strings, whereas the value of <code>headnote</code> is specified explicitly.</p>
</section>
</section>
<section id="pure.css-classes" class="level3">
<h3>Pure.css classes</h3>
<p><strong>mindoc</strong> also adds the following Pure.css classes to HTML elements in Pandoc output:</p>
<ul>
<li><a href="http://purecss.io/tables/">Table classes</a>, as above</li>
</ul>
</section>
</section>
<section id="examples" class="level2">
<h2>Examples</h2>
<ol type="1">
<li>You’re looking at one. View the <a href="https://raw.githubusercontent.com/bitfragment/mindoc/master/src/mindoc.md">Markdown source</a> that produced this page.</li>
<li>A <a href="http://bitfragment.net/dhhist/">course syllabus</a> for “Historicizing ‘Digital Humanities’”</li>
<li>Author’s preprint version of an <a href="http://bitfragment.net/files/multilingualism.html">article</a>; and <a href="http://bitfragment.net/files/jshist.html">another</a></li>
</ol>
</section>
<!-- page content ends here -->
</div> <!-- pure-u-1... -->
</div> <!-- pure-g -->
</section> <!-- page-content -->
<div class="pure-g">
<footer><a href="https://bitfragment.github.io/mindoc">mindoc</a> v1.1.0</footer>
</div>
<script>
var mindoc=function(){function e(e){return e=e.toLowerCase(),e.charAt(0).toUpperCase()+e.substr(1)}function n(e){var n=new RegExp(/^\b[a-z]\S+\b-\b\S+\b/);return n.test(e)&&(e=e.replace(/-+/g," ")),e}function t(t){return t=n(t),e(t)}function r(e,n){return!!e.className.match(new RegExp("(\\s|^)"+n+"(\\s|)"))}function a(e,n){r(e,n)||(e.className+=" "+n)}function o(e,n){if(r(e,n)){var t=new RegExp("(\\s|^)"+n+"(\\s|)");e.className=e.className.replace(t," ")}}function u(){var e,n,t={table:"pure-table pure-table-bordered"};Object.keys(t).forEach(function(r){if(e=document.getElementsByTagName(r),n=e.length,n>1)for(var o=0;n>o;o++)a(e[o],t[r])})}function c(e,n){for(var t=0,r=e.length;r>t;t++)for(var a=e[t].getElementsByTagName("a"),u=0,c=a.length;c>u;u++)a[u].addEventListener("click",function(){o(n,"hidden")})}function i(e,n){for(var t=0,r=e.length;r>t;t++)e[t].addEventListener("click",function(){o(n,"hidden")})}function d(){var e=document.createElement("li");return a(e,"pure-menu-item"),e}function l(e){var n=document.createElement("a");return n.id="menu-"+e,n.href="#",n.innerHTML=t(e),a(n,"pure-menu-link"),n}function m(e){var n=document.createDocumentFragment(),t=document.createElement("nav"),r=document.createElement("div"),o=document.createElement("ul");n.appendChild(t),t.appendChild(r),r.appendChild(o),a(r,"pure-menu"),a(o,"pure-menu-list");var u="All sections",c=d();a(c,"pure-menu-selected"),o.appendChild(c),c.appendChild(l(u));for(var i,m,s=0,f=e.length;f>s;s++)i=e[s].getAttribute("id"),m=d(),o.appendChild(m),m.appendChild(l(i));var p=document.getElementById("page-content");document.querySelector("body").insertBefore(n,p)}function s(e){var n;e.hasAttribute("pure-menu-selected")||(n=document.querySelector(".pure-menu-selected"),o(n,"pure-menu-selected"),a(e,"pure-menu-selected"))}function f(e,n){var t,u=n.getAttribute("id"),c=u.replace(/menu-/,""),i=document.getElementById(u).parentNode;s(i);for(var d in e)t=e[d],r(t,"hidden")||a(t,"hidden"),t.getAttribute("id")===c&&r(t,"hidden")&&o(t,"hidden")}function p(e){var n;for(var t in e)n=e[t],r(n,"hidden")&&o(n,"hidden")}function v(e){for(var n=document.querySelectorAll(".pure-menu-link"),t=0,r=n.length;r>t;t++)0===t?n[t].addEventListener("click",function(){p(e)}):n[t].addEventListener("click",function(){f(e,this)})}return{main:function(){if(u(),document.getElementsByClassName("level2").length>0){var e,n=[];["abstract","level2","footnotes"].forEach(function(t){e=document.getElementsByClassName(t);for(var r=0,a=e.length;a>r;r++)n.push(e[r])});var t;for(var o in n)t=n[o],r(t,"level2")||a(t,"level2"),r(t,"footnotes")&&t.setAttribute("id","footnotes");m(n),v(n);var d=document.getElementsByClassName("citation"),l=document.getElementById("references");c(d,l);var s=document.getElementsByClassName("footnoteRef"),f=document.getElementById("footnotes");i(s,f)}}}}();window.addEventListener("load",function(){mindoc.main()});
</script>
<!-- For debugging local scripts -->
<!-- <script src="../build/mindoc.js"></script> -->
</body>
</html>