mirror of
https://github.com/sbrl/Minetest-WorldEditAdditions.git
synced 2024-11-27 17:43:53 +01:00
docs: Spruce up reference page
It looks much fancier now :D
This commit is contained in:
Starbeamrainbowlabs
parent
cc20fb499d
commit
9232b79925
24
.docs/Reference.11tydata.js
Normal file
24
.docs/Reference.11tydata.js
Normal 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))
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"layout": "theme.njk",
|
||||
"title": "Reference",
|
||||
"tags": "navigable",
|
||||
"date": "2001-01-01"
|
||||
}
|
||||
98
.docs/Reference.html
Normal file
98
.docs/Reference.html
Normal 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 }}">🔗 <!-- 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 }}">🔗 <!-- Link Symbol --></a>
|
||||
<span>{{ section.title }}</span>
|
||||
</h2>
|
||||
|
||||
{{ section.content }}
|
||||
</section>
|
||||
{% endfor %}
|
||||
</main>
|
||||
@ -1 +0,0 @@
|
||||
../Chat-Command-Reference.md
|
||||
@ -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;
|
||||
}
|
||||
|
||||
28
.docs/lib/parse_sections.js
Normal file
28
.docs/lib/parse_sections.js
Normal 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;
|
||||
}
|
||||
15
.docs/package-lock.json
generated
15
.docs/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user