docs: Spruce up reference page

It looks much fancier now :D

.docs/Reference.11tydata.js

@@ -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))
+}

.docs/Reference.11tydata.json

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

.docs/Reference.html

@@ -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>

.docs/Reference.md

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

.docs/css/theme.css

@@ -20,6 +20,7 @@
 	--bg-transcluscent-slight: rgba(255, 255, 255, 0.1);
 	--bg-transcluscent: rgba(255, 255, 255, 0.85);
 	--bg-transcluscent-alt: hsla(226, 59%, 38%, 0.8);
+	--bg-transcluscent-alt-slight: hsla(196, 91%, 62%, 0.23);
 	
 	/* --text-main: #3F57B4; */
 	--text-main: hsl(227, 70%, 35%);
@@ -73,6 +74,22 @@ title { string-set: page-title content(text); }
 }
 h1, h2, h3, h4, h5, h6 {
 	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 {
@@ -143,8 +160,9 @@ a:not(.nav):not(.bigbutton):visited { color: hsl(240, 77%, 60%); }
 pre {
 	page-break-inside: avoid;
 	break-inside: avoid;
-	padding: 0.5em 0.6em;
+	padding: 0.6em;
 	border: 0.2em solid var(--bg-transcluscent-alt);
+	border-radius: 0.25em;
 	background: var(--bg-transcluscent-alt);
 	box-shadow: inset 0 0 0.5em 0.1em var(--shadow-dark);
 	line-height: 1.75em;
@@ -153,10 +171,23 @@ pre {
 pre, code {
 	text-align: left;
 	font-size: 1rem;
+	font-family: "Source Code Pro", "Ubuntu Mono", monospace;
 	white-space: pre-wrap;
 	-moz-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 */
@@ -170,6 +201,21 @@ input[type=text], input[type=number], textarea
 	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 {
 	margin: 3em 0 0 0;
 	padding: 1em;
@@ -196,6 +242,8 @@ footer {
 .shadow-vertical{ box-shadow: 0 0		0.5em	0.25em	var(--shadow);	}
 .shadow-text	{ text-shadow: 0.15em 0.15em 0.15em		var(--shadow);	}
 
+.hidden			{ display: none;							}
+
 .bigbox {
 	display: flex;
 	flex-direction: column;
@@ -294,3 +342,20 @@ footer {
 .gallerybox {
 	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;
+}

.docs/lib/parse_sections.js

@@ -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;
+}

.docs/package-lock.json

@@ -11,7 +11,8 @@
 			"devDependencies": {
 				"@11ty/eleventy": "^0.12.1",
 				"@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": {
@@ -1864,6 +1865,12 @@
 			"integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==",
 			"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": {
 			"version": "1.7.3",
 			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -6121,6 +6128,12 @@
 			"integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==",
 			"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": {
 			"version": "1.7.3",
 			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",

.docs/package.json

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