diff options
Diffstat (limited to 'static')
-rw-r--r-- | static/hlraw.js | 39 | ||||
-rw-r--r-- | static/script.js | 59 | ||||
-rw-r--r-- | static/style.css | 167 |
3 files changed, 265 insertions, 0 deletions
diff --git a/static/hlraw.js b/static/hlraw.js new file mode 100644 index 0000000..8d57bb4 --- /dev/null +++ b/static/hlraw.js @@ -0,0 +1,39 @@ +(function() { + 'use strict'; + + var highlight = function(block, lang) { + var langs = lang.split('_'); + if (langs.length > 1) { + lang = langs[langs.length-1]; + } + if (!lang || typeof hljs.getLanguage(lang) === 'undefined') { + return; + } + var hl = hljs.highlight(lang, block.textContent, true); + block.innerHTML = hl.value; + }; + + var highlightAll = function() { + var rawBlocks = document.querySelectorAll('pre.cnm-raw code'); + for (var i=0; i<rawBlocks.length; i++) { + var code = rawBlocks[i]; + var classes = code.className.split(); + var lang = ''; + for (var j=0; j<classes.length; j++) { + if (classes[j].startsWith('cnm-raw-')) { + lang = classes[j].slice('cnm-raw-'.length); + break; + } + } + if (lang) { + try { + highlight(code, lang); + } catch (e) { + console.error(e); + } + } + } + }; + + highlightAll(); +})(); diff --git a/static/script.js b/static/script.js new file mode 100644 index 0000000..36e2b18 --- /dev/null +++ b/static/script.js @@ -0,0 +1,59 @@ +(function() { + 'use strict'; + + var init = function() { + var toggle = document.createElement('button'); + + var clickToggle = function() { + toggle.open = !toggle.open; + var open = toggle.open ? 'open' : ''; + var secs = document.querySelectorAll('section>details'); + for (var i=0; i<secs.length; i++) { + secs[i].open = open; + } + toggle.textContent = (toggle.open ? 'Collapse' : 'Expand') + ' all sections'; + }; + + toggle.addEventListener('click', clickToggle); + + var hashchange = function() { + var selected = []; + if (location.hash != '' && location.hash != '#') { + var h = location.hash.slice(1); + var el = document.getElementById(h); + while (el) { + if (el.tagName == 'DETAILS') { + selected.push(el); + } + el = el.parentNode; + } + } + + if (selected.length > 0) { + toggle.open = true; + clickToggle(); + for (var i=0; i<selected.length; i++) { + selected[i].open = 'open'; + } + selected[0].scrollIntoView(); + } else { + toggle.open = false; + clickToggle(); + } + }; + window.addEventListener('hashchange', hashchange); + + hashchange(); + if (document.querySelectorAll('main section').length > 0) { + var main = document.querySelector('main'); + main.insertBefore(toggle, main.firstChild); + } + + }; + + if (document.readyState !== 'loading') { + init(); + } else { + document.addEventListener('DOMContentLoaded', init); + } +})(); diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..752d538 --- /dev/null +++ b/static/style.css @@ -0,0 +1,167 @@ +html { + height: 100%; + font-family: sans-serif; + color: black; + background-color: white; +} + +body { + margin: 1em auto; + max-width: 50em; + padding: 0 0.5em; +} + +section { + margin: 0.25em; +} + +section h1, section h2, section h3, +section h4, section h5, section h6 { + padding: 0; + margin: 0; + display: inline-block; +} + +.sec-link { + display: none; +} + +:hover>*>.sec-link { + display: inline; +} + +a.cnp-external:after { + text-decoration: none; + color: gray; + display: inline-block; + font-size: 0.8em; + content: '\01f517'; +} + +a.cnp-external-cnp:after { + content: '[cnp]'; +} + +a.cnp-external-http:after { + content: '[http]'; +} + +a.cnp-external-https:after { + content: '[https]'; +} + +main { + border: 1px dashed #aaa; + tab-size: 4; + -moz-tab-size: 4; /* Pale Moon and older FF need prefix */ +} + +main, section { + padding: 0.75em; +} + +main:hover, section:hover { +} + +pre, code { + font-family: monospace, monospace; + font-size: 1em; +} + +pre { + margin: 0; + display: inline-block; + white-space: pre-wrap; +} + +code { + background-color: #f8f8f8; + border: 1px solid #ccc; +} + +pre.cnm-raw { + display: block; +} + +pre>code { + background-color: #fbfbfb; + display: block; + border: 1px solid black; + width: auto; + padding: 0.5em; + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +pre>code:hover { + background-color: #f4f4f4; +} + +p, figcaption, pre { + margin-bottom: 1em; +} + +figure { + border: 1px solid #aaa; + display: inline-block; + padding: 0 0.5em; + margin: 0 auto; +} + +summary { + cursor: pointer; +} + +details>summary>* { + text-decoration: underline; +} + +details[open]>summary>* { + text-decoration: none; +} + +header { +} + +footer { + padding-top: 0.5em; + font-size: 0.8em; +} + +footer details { + display: inline-block; +} + +table { + margin-top: 0.5em; + margin-bottom: 0.5em; + border-collapse: collapse; +} + +li p, li pre, li code, table p, table pre, table code { + padding: 0; + margin: 0; +} + +table, th, td { + border: 1px solid black; +} + +img { + padding-top: 0.5em; + max-width: 100%; +} + +#browser { + width: 100%; + border: 1px solid black; + padding: 1em; + display: flex; +} +#browser input[type=text] { + flex: 1; +} +#browser input[type=submit] { + border: 1px solid black; + margin-left: 0.5em; +} |