From 9232b79925a2760f8222b26c8f0e00fc44949ea7 Mon Sep 17 00:00:00 2001 From: Starbeamrainbowlabs Date: Sun, 20 Jun 2021 01:51:55 +0100 Subject: [PATCH] docs: Spruce up reference page It looks much fancier now :D --- .docs/Reference.11tydata.js | 24 +++++++++ .docs/Reference.11tydata.json | 6 --- .docs/Reference.html | 98 +++++++++++++++++++++++++++++++++++ .docs/Reference.md | 1 - .docs/css/theme.css | 67 +++++++++++++++++++++++- .docs/lib/parse_sections.js | 28 ++++++++++ .docs/package-lock.json | 15 +++++- .docs/package.json | 3 +- 8 files changed, 232 insertions(+), 10 deletions(-) create mode 100644 .docs/Reference.11tydata.js delete mode 100644 .docs/Reference.11tydata.json create mode 100644 .docs/Reference.html delete mode 120000 .docs/Reference.md create mode 100644 .docs/lib/parse_sections.js diff --git a/.docs/Reference.11tydata.js b/.docs/Reference.11tydata.js new file mode 100644 index 0000000..a93e951 --- /dev/null +++ b/.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)) +} diff --git a/.docs/Reference.11tydata.json b/.docs/Reference.11tydata.json deleted file mode 100644 index 5506455..0000000 --- a/.docs/Reference.11tydata.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "layout": "theme.njk", - "title": "Reference", - "tags": "navigable", - "date": "2001-01-01" -} diff --git a/.docs/Reference.html b/.docs/Reference.html new file mode 100644 index 0000000..32e46eb --- /dev/null +++ b/.docs/Reference.html @@ -0,0 +1,98 @@ +
+
+

{{ section_intro.title }}

+

This is the full chat command reference for WorldEditAdditions. It has 2 parts:

+ +
    +
  1. A contents list of commands and their syntax
    2. +
  2. A full reference, with detailed explanations for each command
    3. +
+ +

After the contents, there is a filter box for filtering the detailed explanations to quickly find the one you're after.

+
+ +
+

+ 🔗 + Contents +

+ +
+ +
+
+ + +
+
+ + +
+
+ + + + {% for section in sections_help %} +
+

+ 🔗 + {{ section.title }} +

+ + {{ section.content }} +
+ {% endfor %} +
diff --git a/.docs/Reference.md b/.docs/Reference.md deleted file mode 120000 index 8e2095a..0000000 --- a/.docs/Reference.md +++ /dev/null @@ -1 +0,0 @@ -../Chat-Command-Reference.md \ No newline at end of file diff --git a/.docs/css/theme.css b/.docs/css/theme.css index 631893f..c91ff00 100644 --- a/.docs/css/theme.css +++ b/.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; +} diff --git a/.docs/lib/parse_sections.js b/.docs/lib/parse_sections.js new file mode 100644 index 0000000..d9e4678 --- /dev/null +++ b/.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; +} diff --git a/.docs/package-lock.json b/.docs/package-lock.json index c2c1970..845642d 100644 --- a/.docs/package-lock.json +++ b/.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", diff --git a/.docs/package.json b/.docs/package.json index 917c545..61199d1 100644 --- a/.docs/package.json +++ b/.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" } }