docs: Spruce up reference page

It looks much fancier now :D
This commit is contained in:
Starbeamrainbowlabs 2021-06-20 01:51:55 +01:00
parent cc20fb499d
commit 9232b79925
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
8 changed files with 232 additions and 10 deletions

View file

@ -0,0 +1,24 @@
const fs = require("fs");
const path = require("path");
const parse_sections = require("./lib/parse_sections.js");
const sections = parse_sections(fs.readFileSync(
path.resolve(
__dirname,
`../Chat-Command-Reference.md`
),
"utf-8"
));
console.log(`REFERENCE SECTION TITLES`, sections.slice(1)
.sort((a, b) => a.title.localeCompare(b.title)).map(s => s.title));
module.exports = {
layout: "theme.njk",
title: "Reference",
tags: "navigable",
date: "2001-01-01",
section_intro: sections[0],
sections_help: sections.slice(1)
.sort((a, b) => a.title.localeCompare(b.title))
}

View file

@ -1,6 +0,0 @@
{
"layout": "theme.njk",
"title": "Reference",
"tags": "navigable",
"date": "2001-01-01"
}

98
.docs/Reference.html Normal file
View file

@ -0,0 +1,98 @@
<main>
<section class="panel-generic">
<h1 id="{{ section.slug }}">{{ section_intro.title }}</h1>
<p>This is the full chat command reference for WorldEditAdditions. It has 2 parts:</p>
<ol>
<li>A contents list of commands and their syntax</li>
<li>A full reference, with detailed explanations for each command</li>
</ol>
<p>After the contents, there is a <a href="#filter">filter box</a> for filtering the detailed explanations to quickly find the one you're after.</p>
</section>
<section class="panel-generic">
<h2 id="contents" class="linked-section-heading">
<a class="section-link" href="#{{ section.slug }}">&#x1f517; <!-- Link Symbol --></a>
<span>Contents</span>
</h2>
<ul class="command-list">
{% for section in sections_help %}
<li><a href="#{{ section.slug }}">
<code>{{ section.title }}</code>
</a></li>
{% endfor %}
</ul>
</section>
<section id="filter" class="panel-generic">
<div class="form-item bigsearch">
<label for="input-filter">Filter:</label>
<input type="search" id="input-filter" />
</div>
<div class="form-item centre checkbox">
<input type="checkbox" id="input-searchall" placeholder="Start typing to filter the sections." />
<label for="input-searchall" title="If unchecked, only the title will be searched.">Search content</label>
</div>
</section>
<script>
function search_text(query, text) {
return text.toLocaleLowerCase().includes(query);
}
function do_filter() {
let el_search = document.querySelector("#input-filter");
let el_searchall = document.querySelector("#input-searchall");
let els_sections = document.querySelectorAll("section.filterable");
let query = el_search.value.toLocaleLowerCase();
let mode = el_searchall.checked ? "all" : "header";
console.log(`SEARCH | mode`, mode, `query`, query);
for(let i = 0; i < els_sections.length; i++) {
let el_next = els_sections[i];
let show = true;
if(query.length > 0) {
switch(mode) {
case "all":
show = search_text(query,
el_next.textContent
);
break;
case "header":
show = search_text(query,
el_next.querySelector(".linked-section-heading").textContent
);
break;
}
}
el_next.classList.remove("visible", "hidden");
el_next.classList.add(show ? "visible" : "hidden");
}
}
window.addEventListener("load", (_event) => {
let el_search = document.querySelector("#input-filter");
let el_searchall = document.querySelector("#input-searchall");
el_search.addEventListener("input", do_filter);
el_search.addEventListener("search", do_filter);
el_searchall.addEventListener("change", do_filter);
});
</script>
{% for section in sections_help %}
<section class="panel-generic filterable">
<h2 id="{{ section.slug }}" class="linked-section-heading">
<a class="section-link" href="#{{ section.slug }}">&#x1f517; <!-- Link Symbol --></a>
<span>{{ section.title }}</span>
</h2>
{{ section.content }}
</section>
{% endfor %}
</main>

View file

@ -1 +0,0 @@
../Chat-Command-Reference.md

View file

@ -20,6 +20,7 @@
--bg-transcluscent-slight: rgba(255, 255, 255, 0.1); --bg-transcluscent-slight: rgba(255, 255, 255, 0.1);
--bg-transcluscent: rgba(255, 255, 255, 0.85); --bg-transcluscent: rgba(255, 255, 255, 0.85);
--bg-transcluscent-alt: hsla(226, 59%, 38%, 0.8); --bg-transcluscent-alt: hsla(226, 59%, 38%, 0.8);
--bg-transcluscent-alt-slight: hsla(196, 91%, 62%, 0.23);
/* --text-main: #3F57B4; */ /* --text-main: #3F57B4; */
--text-main: hsl(227, 70%, 35%); --text-main: hsl(227, 70%, 35%);
@ -73,6 +74,22 @@ title { string-set: page-title content(text); }
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
text-align: center; text-align: center;
word-wrap: break-word;
}
.linked-section-heading {
display: flex;
}
.linked-section-heading > a.section-link {
opacity: 0.75;
text-decoration: none;
transition: 0.25s opacity;
}
.linked-section-heading > a.section-link:hover {
opacity: 1;
}
.linked-section-heading > span {
flex: 1;
word-wrap: anywhere;
} }
nav { nav {
@ -143,8 +160,9 @@ a:not(.nav):not(.bigbutton):visited { color: hsl(240, 77%, 60%); }
pre { pre {
page-break-inside: avoid; page-break-inside: avoid;
break-inside: avoid; break-inside: avoid;
padding: 0.5em 0.6em; padding: 0.6em;
border: 0.2em solid var(--bg-transcluscent-alt); border: 0.2em solid var(--bg-transcluscent-alt);
border-radius: 0.25em;
background: var(--bg-transcluscent-alt); background: var(--bg-transcluscent-alt);
box-shadow: inset 0 0 0.5em 0.1em var(--shadow-dark); box-shadow: inset 0 0 0.5em 0.1em var(--shadow-dark);
line-height: 1.75em; line-height: 1.75em;
@ -153,10 +171,23 @@ pre {
pre, code { pre, code {
text-align: left; text-align: left;
font-size: 1rem; font-size: 1rem;
font-family: "Source Code Pro", "Ubuntu Mono", monospace;
white-space: pre-wrap; white-space: pre-wrap;
-moz-tab-size: 4; -moz-tab-size: 4;
tab-size: 4; tab-size: 4;
} }
pre > code { background: transparent; padding: 0; }
code {
background: var(--bg-transcluscent-alt-slight);
border-radius: 0.25em;
padding: 0.15em;
}
label {
font-weight: bold;
cursor: pointer;
padding: 0.25em 0.45em;
}
/* todo add the rest of the textbox like inputs here */ /* todo add the rest of the textbox like inputs here */
@ -170,6 +201,21 @@ input[type=text], input[type=number], textarea
border-radius: 5px; border-radius: 5px;
} }
.form-item {
display: flex;
margin: 0.5em 0;
}
.form-item.checkbox:not(.centre) > label { flex: 1; }
.form-item:not(.checkbox):not(.centre) > input { flex: 1; }
.form-item.centre { justify-content: center; }
.bigsearch {
flex-direction: row;
}
.bigsearch > input[type=search] {
width: 100%;
box-sizing: border-box;
}
footer { footer {
margin: 3em 0 0 0; margin: 3em 0 0 0;
padding: 1em; padding: 1em;
@ -196,6 +242,8 @@ footer {
.shadow-vertical{ box-shadow: 0 0 0.5em 0.25em var(--shadow); } .shadow-vertical{ box-shadow: 0 0 0.5em 0.25em var(--shadow); }
.shadow-text { text-shadow: 0.15em 0.15em 0.15em var(--shadow); } .shadow-text { text-shadow: 0.15em 0.15em 0.15em var(--shadow); }
.hidden { display: none; }
.bigbox { .bigbox {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -294,3 +342,20 @@ footer {
.gallerybox { .gallerybox {
background: var(--bg-transcluscent); background: var(--bg-transcluscent);
} }
.command-list {
margin: 0;
padding: 0;
list-style-type: none;
word-wrap: anywhere;
}
.command-list > li > a {
text-decoration: none;
}
.command-list code {
display: block;
padding: 0.5em;
box-sizing: border-box;
margin: 0.5em;
}

View file

@ -0,0 +1,28 @@
const htmlentities = require("htmlentities");
const markdown = require("markdown-it")({
xhtmlOut: true
});
module.exports = function parse_sections(source) {
const lines = source.split(/\r?\n/gi);
const result = [];
let acc = [];
for(let line of lines) {
if(line.startsWith(`#`) && !line.startsWith(`###`)) {
if(acc.length > 0) {
let title = acc[0].match(/#+\s+(.+)\s*/)[1].replace(/^`*|`*$/g, "");
result.push({
title: htmlentities.encode(title),
slug: title.toLowerCase().replace(/[^a-z0-9-_\s]+/gi, "")
.replace(/\s+/g, "-"),
content: markdown.render(acc.slice(1).join("\n"))
});
}
acc = [ line ];
}
else
acc.push(line);
}
return result;
}

View file

@ -11,7 +11,8 @@
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^0.12.1", "@11ty/eleventy": "^0.12.1",
"@11ty/eleventy-img": "^0.9.0", "@11ty/eleventy-img": "^0.9.0",
"html-entities": "^2.3.2" "html-entities": "^2.3.2",
"htmlentities": "^1.0.0"
} }
}, },
"node_modules/@11ty/dependency-tree": { "node_modules/@11ty/dependency-tree": {
@ -1864,6 +1865,12 @@
"integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==", "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==",
"dev": true "dev": true
}, },
"node_modules/htmlentities": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/htmlentities/-/htmlentities-1.0.0.tgz",
"integrity": "sha1-CTqMH7Cd/l4Wn8M9CVdIJdYeQKQ=",
"dev": true
},
"node_modules/http-errors": { "node_modules/http-errors": {
"version": "1.7.3", "version": "1.7.3",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz", "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@ -6121,6 +6128,12 @@
"integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==", "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==",
"dev": true "dev": true
}, },
"htmlentities": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/htmlentities/-/htmlentities-1.0.0.tgz",
"integrity": "sha1-CTqMH7Cd/l4Wn8M9CVdIJdYeQKQ=",
"dev": true
},
"http-errors": { "http-errors": {
"version": "1.7.3", "version": "1.7.3",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz", "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",

View file

@ -21,6 +21,7 @@
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^0.12.1", "@11ty/eleventy": "^0.12.1",
"@11ty/eleventy-img": "^0.9.0", "@11ty/eleventy-img": "^0.9.0",
"html-entities": "^2.3.2" "html-entities": "^2.3.2",
"htmlentities": "^1.0.0"
} }
} }