245 lines
7 KiB
Text
245 lines
7 KiB
Text
|
<!DOCTYPE html>
|
||
|
|
<!-- NOTE: Styling is based on the CommonMark specification template: -->
|
||
|
|
<!-- - https://github.com/commonmark/commonmark-spec/blob/master/tools/make_spec.lua -->
|
||
|
|
<!-- - https://github.com/commonmark/commonmark-spec/blob/master/tools/template.html -->
|
||
|
|
<!-- -->
|
||
|
|
<!-- NOTE: 'TODO:' comments will be followed up as task(s) on this issue: -->
|
||
|
|
<!-- - https://gitlab.com/gitlab-org/gitlab/-/issues/361241 -->
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title><%= title %></title>
|
||
|
|
<style type="text/css">
|
||
|
|
body {
|
||
|
|
font-family: Helvetica, arial, freesans, clean, sans-serif;
|
||
|
|
line-height: 1.4;
|
||
|
|
max-width: 48em;
|
||
|
|
margin: auto;
|
||
|
|
padding: 0 0.5em 4em;
|
||
|
|
color: #333333;
|
||
|
|
background-color: #ffffff;
|
||
|
|
font-size: 13pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#TOC ul { list-style: none; }
|
||
|
|
h1 {
|
||
|
|
font-size: 140%;
|
||
|
|
font-weight: bold;
|
||
|
|
border-top: 1px solid gray;
|
||
|
|
padding-top: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: 120%;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
font-size: 110%;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
h4 {
|
||
|
|
font-size: 100%;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* NOTE: "font-weight: bold" was applied to "a.definition" class in original CommonMark */
|
||
|
|
/* template, but in practice it was applied to all anchors */
|
||
|
|
a {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* TODO: Format whitespace in examples. This will require preprocessing to insert spans around them. */
|
||
|
|
/*span.space { position: relative; }*/
|
||
|
|
/*span.space:after {*/
|
||
|
|
/* content: "·";*/
|
||
|
|
/* position: absolute;*/
|
||
|
|
/* !* create a mark that indicates a space (trick from D. Greenspan) *!*/
|
||
|
|
/* top: 0; bottom: 7px; left: 1px; right: 1px;*/
|
||
|
|
/* color: #aaaaaa;*/
|
||
|
|
/*}*/
|
||
|
|
/*@media print {*/
|
||
|
|
/* a.dingus { display: none; }*/
|
||
|
|
/*}*/
|
||
|
|
|
||
|
|
div.example {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
text-align: justify;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre {
|
||
|
|
padding: 0.5em;
|
||
|
|
margin: 0.2em 0 0.5em;
|
||
|
|
font-size: 88%;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre {
|
||
|
|
white-space: pre-wrap; /* css-3 */
|
||
|
|
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
||
|
|
white-space: -o-pre-wrap; /* Opera 7 */
|
||
|
|
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
||
|
|
}
|
||
|
|
|
||
|
|
code {
|
||
|
|
font-family: monospace;
|
||
|
|
background-color: #d3e1e4;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre > code {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.example {
|
||
|
|
font-size: 0; /* hack to get width: 50% to work on inline-block */
|
||
|
|
padding-bottom: 6pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
.column pre {
|
||
|
|
font-size: 11pt;
|
||
|
|
padding: 2pt 6pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.examplenum {
|
||
|
|
font-size: 11pt;
|
||
|
|
text-align: left;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.column {
|
||
|
|
display: inline-block;
|
||
|
|
width: 50%;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.example > div:nth-child(2) {
|
||
|
|
clear: left;
|
||
|
|
background-color: #d3e1e4;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.example > div:nth-child(3) {
|
||
|
|
clear: right;
|
||
|
|
background-color: #c9cace;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media print {
|
||
|
|
@page {
|
||
|
|
size: auto;
|
||
|
|
margin: 1.2in 1.2in 1.2in 1.2in;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
line-height: 1.2;
|
||
|
|
font-size: 10pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
.column pre {
|
||
|
|
font-size: 9pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.examplenum {
|
||
|
|
font-size: 9pt;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<!-- TODO: Extract this javascript out to a separate file and unit test it -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
/* NOTE: The following code performs many of the pre-processing steps originally handled */
|
||
|
|
/* in https://github.com/commonmark/commonmark-spec/blob/master/tools/make_spec.lua */
|
||
|
|
|
||
|
|
/* Adds a div.example wrapper around each pair of example code blocks. */
|
||
|
|
function addAttributesToExampleWrapperDivs() {
|
||
|
|
const exampleAnchorTags = document.querySelectorAll("a[href^=\"#example-\"]");
|
||
|
|
for (const exampleAnchorTag of exampleAnchorTags) {
|
||
|
|
const examplenumDiv = exampleAnchorTag.parentElement;
|
||
|
|
examplenumDiv.classList.add("examplenum");
|
||
|
|
const exampleDiv = examplenumDiv.parentElement;
|
||
|
|
exampleDiv.classList.add("example");
|
||
|
|
exampleDiv.id = exampleAnchorTag.getAttribute("href").substring(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function addColumnClassToMarkdownDivs() {
|
||
|
|
const markdownCodeBlockDivs = document.querySelectorAll("div.markdown-code-block");
|
||
|
|
for (const markdownCodeBlockDiv of markdownCodeBlockDivs) {
|
||
|
|
markdownCodeBlockDiv.classList.add("column");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function addNumbersToHeaders() {
|
||
|
|
const headers = document.querySelectorAll('h1,h2,h3');
|
||
|
|
let h1Index = -1; // NOTE: -1 because we don't assign a number to the title
|
||
|
|
let h2Index = 0;
|
||
|
|
let h3Index = 0;
|
||
|
|
const tocEntries = [];
|
||
|
|
for (const header of headers) {
|
||
|
|
if (h1Index === -1) {
|
||
|
|
h1Index++;
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
|
||
|
|
const originalHeaderTextContent = header.textContent.trim();
|
||
|
|
const headerAnchor = originalHeaderTextContent.toLowerCase().replaceAll(' ', '-');
|
||
|
|
header.id = headerAnchor;
|
||
|
|
let indent;
|
||
|
|
let headerTextContent;
|
||
|
|
if (header.tagName === 'H1') {
|
||
|
|
h1Index++;
|
||
|
|
h2Index = 0;
|
||
|
|
h3Index = 0;
|
||
|
|
header.textContent = headerTextContent = h1Index + ' ' + originalHeaderTextContent;
|
||
|
|
indent = 0;
|
||
|
|
} else if (header.tagName === 'H2') {
|
||
|
|
h2Index++;
|
||
|
|
h3Index = 0;
|
||
|
|
header.textContent =
|
||
|
|
headerTextContent = h1Index + '.' + h2Index + ' ' + originalHeaderTextContent;
|
||
|
|
indent = 1;
|
||
|
|
} else if (header.tagName === 'H3') {
|
||
|
|
h3Index++;
|
||
|
|
header.textContent = headerTextContent =
|
||
|
|
h1Index + '.' + h2Index + '.' + h3Index + ' ' + originalHeaderTextContent;
|
||
|
|
indent = 2;
|
||
|
|
}
|
||
|
|
tocEntries.push({headerAnchor, headerTextContent, indent});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener("DOMContentLoaded", function(_event) {
|
||
|
|
addAttributesToExampleWrapperDivs();
|
||
|
|
addColumnClassToMarkdownDivs();
|
||
|
|
const tocEntries = addNumbersToHeaders();
|
||
|
|
addToc(tocEntries);
|
||
|
|
});
|
||
|
|
|
||
|
|
/* NOTE: The following code is to support the "Try it" interactive "dingus", which */
|
||
|
|
/* we do not yet support. But it is being left here for comparison context with the */
|
||
|
|
/* original CommonMark template. */
|
||
|
|
// $$(document).ready(function() {
|
||
|
|
// $$("div.example").each(function(e) {
|
||
|
|
// var t = $$(this).find('code.language-markdown').text();
|
||
|
|
// $$(this).find('a.dingus').click(function(f) {
|
||
|
|
// window.open('/dingus/?text=' +
|
||
|
|
// encodeURIComponent(t.replace(/→/g,"\t")));
|
||
|
|
// });
|
||
|
|
// });
|
||
|
|
// $$("code.language-markdown").dblclick(function(e) { window.open('/dingus/?text=' +
|
||
|
|
// encodeURIComponent($$(this).text()));
|
||
|
|
// });
|
||
|
|
// });
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1 class="title"><%= title %></h1>
|
||
|
|
<div class="version">Version <%= version %></div>
|
||
|
|
|
||
|
|
<%= body %>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|