From 32bd74fe2760220082cadabaac8901c48684792f Mon Sep 17 00:00:00 2001 From: zadam Date: Sat, 14 Jan 2023 22:50:04 +0100 Subject: [PATCH] build website improvements --- .../docs-website}/build_docs_website.js | 50 +++++++------------ src-build/docs-website/main.css | 45 +++++++++++++++++ src-build/docs-website/main.js | 30 +++++++++++ {src => src-build}/transform_api_docs.js | 0 4 files changed, 93 insertions(+), 32 deletions(-) rename {src => src-build/docs-website}/build_docs_website.js (78%) create mode 100644 src-build/docs-website/main.css create mode 100644 src-build/docs-website/main.js rename {src => src-build}/transform_api_docs.js (100%) diff --git a/src/build_docs_website.js b/src-build/docs-website/build_docs_website.js similarity index 78% rename from src/build_docs_website.js rename to src-build/docs-website/build_docs_website.js index 3738ff8ff..29564aa76 100644 --- a/src/build_docs_website.js +++ b/src-build/docs-website/build_docs_website.js @@ -1,44 +1,23 @@ const fs = require("fs-extra"); -const utils = require("./services/utils.js"); +const utils = require("../../src/services/utils.js"); const html = require("html"); +const SRC_DIR = './src-build/docs-website'; const USER_GUIDE_DIR = './docs/user_guide'; const META_PATH = USER_GUIDE_DIR + '/!!!meta.json'; const WEB_TMP_DIR = './tmp/user_guide_web'; fs.copySync(USER_GUIDE_DIR, WEB_TMP_DIR); -const meta = JSON.parse(fs.readFileSync(META_PATH).toString()); +const meta = JSON.parse(readFile(META_PATH)); const rootNoteMeta = meta.files[0]; const noteIdToMeta = {}; createNoteIdToMetaMapping(rootNoteMeta); addNavigationAndStyle(rootNoteMeta, WEB_TMP_DIR); -fs.writeFileSync(WEB_TMP_DIR + '/style.css', getCss()); - -function getCss() { - return ` -body { - display: flex; - flex-direction: row-reverse; - width: 1000px; - margin: auto; -} - -.note-tree-nav { - width: 200px; - margin-right: 20px; - overflow-x: auto; -} - -.note-tree-nav ul { - padding-left: 20px; -} - -.content { - width: 780px; -}`; -} +fs.writeFileSync(WEB_TMP_DIR + '/main.js', readFile(SRC_DIR + "/main.js")); +fs.writeFileSync(WEB_TMP_DIR + '/main.css', readFile(SRC_DIR + "/main.css")); +fs.cpSync('libraries/ckeditor/ckeditor-content.css' ,WEB_TMP_DIR + '/ckeditor-content.css'); function addNavigationAndStyle(noteMeta, parentDirPath) { const nav = createNavigation(rootNoteMeta, noteMeta); @@ -48,10 +27,13 @@ function addNavigationAndStyle(noteMeta, parentDirPath) { console.log(`Adding nav to ${filePath}`); - const content = fs.readFileSync(filePath).toString(); + const content = readFile(filePath); const depth = noteMeta.notePath.length - 1; const updatedContent = content - .replaceAll("", ``) + .replaceAll("", ` + + +`) .replaceAll("", nav + ""); const prettified = html.prettyPrint(updatedContent, {indent_size: 2}); fs.writeFileSync(filePath, prettified); @@ -63,8 +45,8 @@ function addNavigationAndStyle(noteMeta, parentDirPath) { } function createNavigation(rootMeta, sourceMeta) { - function saveNavigationInner(meta) { - let html = '
  • '; + function saveNavigationInner(meta, parentNoteId = 'root') { + let html = `
  • `; const escapedTitle = utils.escapeHtml(`${meta.prefix ? `${meta.prefix} - ` : ''}${meta.title}`); @@ -81,7 +63,7 @@ function createNavigation(rootMeta, sourceMeta) { html += '' @@ -141,3 +123,7 @@ function getTargetUrl(targetNoteId, sourceMeta) { return url; } + +function readFile(filePath) { + return fs.readFileSync(filePath).toString(); +} diff --git a/src-build/docs-website/main.css b/src-build/docs-website/main.css new file mode 100644 index 000000000..7ae2ed218 --- /dev/null +++ b/src-build/docs-website/main.css @@ -0,0 +1,45 @@ +body { + display: flex; + flex-direction: row-reverse; + width: 1100px; + margin: auto; + font-family: 'Lucida Grande', 'Lucida Sans Unicode', arial, sans-serif; +} + +.note-tree-nav { + padding-top: 10px; + width: 300px; + margin-right: 20px; + overflow-x: auto; +} + +.note-tree-nav ul { + padding-left: 20px; + list-style-type: none; +} + +.note-tree-nav ul li { + line-height: 150%; + font-size: 105%; +} + +.note-tree-nav > ul > li > a { + font-size: x-large; +} + +.note-tree-nav a { + text-decoration: none; +} + +.note-tree-nav li span.expander, .note-tree-nav li span.spacer { + width: 1em; + display: inline-block; +} + +.note-tree-nav li span.expander { + cursor: pointer; +} + +.content { + width: 780px; +} diff --git a/src-build/docs-website/main.js b/src-build/docs-website/main.js new file mode 100644 index 000000000..16c04cd58 --- /dev/null +++ b/src-build/docs-website/main.js @@ -0,0 +1,30 @@ +document.addEventListener('DOMContentLoaded', function () { + for (const li of document.querySelectorAll('.note-tree-nav li')) { + const branchId = li.getAttribute("data-branch-id"); + if (branchId.startsWith("root_")) { + // first level is expanded and cannot be collapsed + continue; + } + + const newDiv = document.createElement("span"); + const subList = li.querySelector('ul'); + + if (subList) { + const toggleVisibility = (show) => { + newDiv.innerHTML = show ? "▾ " : "▸ "; + subList.style.display = show ? 'block' : 'none'; + + localStorage.setItem(branchId, show ? "true" : "false"); + }; + + newDiv.classList.add("expander"); + newDiv.addEventListener('click', () => toggleVisibility(subList.style.display === 'none')); + + toggleVisibility(localStorage.getItem(branchId) === "true"); + } else { + newDiv.classList.add("spacer"); + } + + li.prepend(newDiv); + } +}, false); diff --git a/src/transform_api_docs.js b/src-build/transform_api_docs.js similarity index 100% rename from src/transform_api_docs.js rename to src-build/transform_api_docs.js