mirror of
https://github.com/zadam/trilium.git
synced 2025-11-17 10:40:41 +01:00
build website improvements
This commit is contained in:
zadam
129
src-build/docs-website/build_docs_website.js
Normal file
129
src-build/docs-website/build_docs_website.js
Normal file
@@ -0,0 +1,129 @@
|
||||
const fs = require("fs-extra");
|
||||
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(readFile(META_PATH));
|
||||
const rootNoteMeta = meta.files[0];
|
||||
const noteIdToMeta = {};
|
||||
createNoteIdToMetaMapping(rootNoteMeta);
|
||||
|
||||
addNavigationAndStyle(rootNoteMeta, WEB_TMP_DIR);
|
||||
|
||||
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);
|
||||
|
||||
if (noteMeta.dataFileName) {
|
||||
const filePath = parentDirPath + "/" + noteMeta.dataFileName;
|
||||
|
||||
console.log(`Adding nav to ${filePath}`);
|
||||
|
||||
const content = readFile(filePath);
|
||||
const depth = noteMeta.notePath.length - 1;
|
||||
const updatedContent = content
|
||||
.replaceAll("</head>", `
|
||||
<link rel="stylesheet" href="${"../".repeat(depth)}main.css">
|
||||
<link rel="stylesheet" href="${"../".repeat(depth)}ckeditor-content.css">
|
||||
<script src="${"../".repeat(depth)}main.js"></script>`)
|
||||
.replaceAll("</body>", nav + "</body>");
|
||||
const prettified = html.prettyPrint(updatedContent, {indent_size: 2});
|
||||
fs.writeFileSync(filePath, prettified);
|
||||
}
|
||||
|
||||
for (const childNoteMeta of noteMeta.children || []) {
|
||||
addNavigationAndStyle(childNoteMeta, parentDirPath + '/' + noteMeta.dirFileName);
|
||||
}
|
||||
}
|
||||
|
||||
function createNavigation(rootMeta, sourceMeta) {
|
||||
function saveNavigationInner(meta, parentNoteId = 'root') {
|
||||
let html = `<li data-branch-id="${parentNoteId}_${meta.noteId}">`;
|
||||
|
||||
const escapedTitle = utils.escapeHtml(`${meta.prefix ? `${meta.prefix} - ` : ''}${meta.title}`);
|
||||
|
||||
if (meta.dataFileName) {
|
||||
const targetUrl = getTargetUrl(meta.noteId, sourceMeta);
|
||||
|
||||
html += `<a href="${targetUrl}">${escapedTitle}</a>`;
|
||||
}
|
||||
else {
|
||||
html += escapedTitle;
|
||||
}
|
||||
|
||||
if (meta.children && meta.children.length > 0) {
|
||||
html += '<ul>';
|
||||
|
||||
for (const child of meta.children) {
|
||||
html += saveNavigationInner(child, meta.noteId);
|
||||
}
|
||||
|
||||
html += '</ul>'
|
||||
}
|
||||
|
||||
return `${html}</li>`;
|
||||
}
|
||||
|
||||
return `<nav class="note-tree-nav"><ul>${saveNavigationInner(rootMeta)}</ul></nav>`;
|
||||
}
|
||||
|
||||
function createNoteIdToMetaMapping(noteMeta) {
|
||||
noteIdToMeta[noteMeta.noteId] = noteMeta;
|
||||
|
||||
for (const childNoteMeta of noteMeta.children || []) {
|
||||
createNoteIdToMetaMapping(childNoteMeta);
|
||||
}
|
||||
}
|
||||
|
||||
function getTargetUrl(targetNoteId, sourceMeta) {
|
||||
const targetMeta = noteIdToMeta[targetNoteId];
|
||||
|
||||
if (!targetMeta) {
|
||||
throw new Error(`Could not find note meta for noteId '${targetNoteId}'`);
|
||||
}
|
||||
|
||||
const targetPath = targetMeta.notePath.slice();
|
||||
const sourcePath = sourceMeta.notePath.slice();
|
||||
|
||||
// > 1 for edge case that targetPath and sourcePath are exact same (link to itself)
|
||||
while (targetPath.length > 1 && sourcePath.length > 1 && targetPath[0] === sourcePath[0]) {
|
||||
targetPath.shift();
|
||||
sourcePath.shift();
|
||||
}
|
||||
|
||||
let url = "../".repeat(sourcePath.length - 1);
|
||||
|
||||
for (let i = 0; i < targetPath.length - 1; i++) {
|
||||
const meta = noteIdToMeta[targetPath[i]];
|
||||
|
||||
if (!meta) {
|
||||
throw new Error(`Cannot resolve note '${targetPath[i]}' from path '${targetPath.toString()}'`);
|
||||
}
|
||||
|
||||
url += `${encodeURIComponent(meta.dirFileName)}/`;
|
||||
}
|
||||
|
||||
const targetPathNoteId = targetPath[targetPath.length - 1];
|
||||
const meta = noteIdToMeta[targetPathNoteId];
|
||||
|
||||
if (!meta) {
|
||||
throw new Error(`Cannot resolve note '${targetPathNoteId}' from path '${targetPath.toString()}'`);
|
||||
}
|
||||
|
||||
// link can target note which is only "folder-note" and as such will not have a file in an export
|
||||
url += encodeURIComponent(meta.dataFileName || meta.dirFileName);
|
||||
|
||||
return url;
|
||||
}
|
||||
|
||||
function readFile(filePath) {
|
||||
return fs.readFileSync(filePath).toString();
|
||||
}
|
||||
45
src-build/docs-website/main.css
Normal file
45
src-build/docs-website/main.css
Normal file
@@ -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;
|
||||
}
|
||||
30
src-build/docs-website/main.js
Normal file
30
src-build/docs-website/main.js
Normal file
@@ -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);
|
||||
260
src-build/transform_api_docs.js
Normal file
260
src-build/transform_api_docs.js
Normal file
@@ -0,0 +1,260 @@
|
||||
const sanitizeHtml = require('sanitize-html');
|
||||
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const html = require("html");
|
||||
|
||||
const TMP_API_DOCS = './tmp/api_docs';
|
||||
const TMP_FE_DOCS = TMP_API_DOCS + '/frontend_api';
|
||||
const TMP_BE_DOCS = TMP_API_DOCS + '/backend_api';
|
||||
|
||||
const sourceFiles = getFilesRecursively(TMP_API_DOCS);
|
||||
|
||||
for (const sourcePath of sourceFiles) {
|
||||
const content = fs.readFileSync(sourcePath).toString();
|
||||
const transformedContent = transform(content);
|
||||
const prettifiedContent = html.prettyPrint(transformedContent, {indent_size: 2});
|
||||
const filteredContent = prettifiedContent
|
||||
.replace(/<br \/>Documentation generated by <a href="https:\/\/github.com\/jsdoc\/jsdoc">[^<]+<\/a>/gi, '')
|
||||
.replace(/JSDoc: (Class|Module): [a-z]+/gi, '');
|
||||
|
||||
const destPath = sourcePath.replaceAll("tmp", "docs");
|
||||
|
||||
fs.mkdirSync(path.dirname(destPath), {recursive: true});
|
||||
fs.writeFileSync(destPath, filteredContent.trim());
|
||||
|
||||
console.log(destPath);
|
||||
}
|
||||
|
||||
const USER_GUIDE_DIR = './docs/user_guide';
|
||||
const META_PATH = USER_GUIDE_DIR + '/!!!meta.json';
|
||||
|
||||
const meta = JSON.parse(fs.readFileSync(META_PATH).toString());
|
||||
const rootNoteMeta = meta.files[0];
|
||||
|
||||
const {noteMeta: scriptApiDocsRoot, filePath: scriptApiDocsRootFilePath, notePath: scriptApiDocsRootNotePath} =
|
||||
findNoteMeta(rootNoteMeta, 'Script API', []);
|
||||
const BE_FILES = ['AbstractBeccaEntity', 'BAttribute', 'BBranch', 'BEtapiToken', 'BNote', 'BNoteRevision', 'BOption', 'BRecentNote', 'module-sql'];
|
||||
|
||||
const FE_FILES = ['FNote', 'FAttribute', 'FBranch', 'FNoteComplement'];
|
||||
|
||||
scriptApiDocsRoot.dirFileName = scriptApiDocsRoot.dataFileName.substr(0, scriptApiDocsRoot.dataFileName.length - 5);
|
||||
scriptApiDocsRoot.children = getScriptApiMeta();
|
||||
|
||||
fs.writeFileSync(META_PATH, JSON.stringify(meta, null, 2));
|
||||
const scriptApiDocsRootDir = USER_GUIDE_DIR + scriptApiDocsRootFilePath;
|
||||
|
||||
fs.mkdirSync(scriptApiDocsRootDir, {recursive: true});
|
||||
fs.mkdirSync(scriptApiDocsRootDir + '/BackendScriptApi', {recursive: true});
|
||||
fs.mkdirSync(scriptApiDocsRootDir + '/FrontendScriptApi', {recursive: true});
|
||||
|
||||
const BE_ROOT = scriptApiDocsRootDir + '/BackendScriptApi.html';
|
||||
const FE_ROOT = scriptApiDocsRootDir + '/FrontendScriptApi.html';
|
||||
|
||||
fs.copyFileSync(TMP_BE_DOCS + '/BackendScriptApi.html', BE_ROOT);
|
||||
fs.copyFileSync(TMP_FE_DOCS + '/FrontendScriptApi.html', FE_ROOT);
|
||||
|
||||
for (const file of BE_FILES) {
|
||||
fs.copyFileSync(TMP_BE_DOCS + '/' + file + '.html', `${scriptApiDocsRootDir}/BackendScriptApi/${file}.html`);
|
||||
}
|
||||
rewriteLinks(BE_ROOT, BE_FILES, 'BackendScriptApi');
|
||||
|
||||
for (const file of FE_FILES) {
|
||||
fs.copyFileSync(TMP_FE_DOCS + '/' + file + '.html', `${scriptApiDocsRootDir}/FrontendScriptApi/${file}.html`);
|
||||
}
|
||||
rewriteLinks(FE_ROOT, FE_FILES, 'FrontendScriptApi');
|
||||
|
||||
fs.rmSync(USER_GUIDE_DIR + '/index.html', {force: true});
|
||||
fs.rmSync(USER_GUIDE_DIR + '/navigation.html', {force: true});
|
||||
fs.rmSync(USER_GUIDE_DIR + '/style.css', {force: true});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function getFilesRecursively(directory) {
|
||||
const files = [];
|
||||
|
||||
function getFilesRecursivelyInner(directory) {
|
||||
const filesInDirectory = fs.readdirSync(directory);
|
||||
for (const file of filesInDirectory) {
|
||||
const absolute = path.join(directory, file);
|
||||
if (fs.statSync(absolute).isDirectory()) {
|
||||
getFilesRecursivelyInner(absolute);
|
||||
} else if (file.endsWith('.html')) {
|
||||
files.push(absolute);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getFilesRecursivelyInner(directory);
|
||||
|
||||
return files;
|
||||
}
|
||||
|
||||
function transform(content) {
|
||||
const result = sanitizeHtml(content, {
|
||||
allowedTags: [
|
||||
'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
|
||||
'li', 'b', 'i', 'strong', 'em', 'strike', 's', 'del', 'abbr', 'code', 'hr', 'br', 'div',
|
||||
'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'section', 'img',
|
||||
'figure', 'figcaption', 'span', 'label', 'input',
|
||||
],
|
||||
nonTextTags: [ 'style', 'script', 'textarea', 'option', 'h1', 'h2', 'h3', 'nav' ],
|
||||
allowedAttributes: {
|
||||
'a': [ 'href', 'class', 'data-note-path' ],
|
||||
'img': [ 'src' ],
|
||||
'section': [ 'class', 'data-note-id' ],
|
||||
'figure': [ 'class' ],
|
||||
'span': [ 'class', 'style' ],
|
||||
'label': [ 'class' ],
|
||||
'input': [ 'class', 'type', 'disabled' ],
|
||||
'code': [ 'class' ],
|
||||
'ul': [ 'class' ],
|
||||
'table': [ 'class' ],
|
||||
'en-media': [ 'hash' ]
|
||||
},
|
||||
allowedSchemes: ['http', 'https', 'ftp', 'mailto', 'data', 'evernote'],
|
||||
transformTags: {
|
||||
// 'h5': sanitizeHtml.simpleTransform('strong', {}, false),
|
||||
'table': sanitizeHtml.simpleTransform('table', {}, false)
|
||||
},
|
||||
});
|
||||
|
||||
return result.replace(/<table>/gi, '<figure class="table"><table>')
|
||||
.replace(/<\/table>/gi, '</table></figure>')
|
||||
.replace(/<div><\/div>/gi, '')
|
||||
.replace(/<h5>/gi, '<p><strong>')
|
||||
.replace(/<\/h5>/gi, '</strong></p>')
|
||||
.replace(/<h4>/gi, '<h2>')
|
||||
.replace(/<\/h4>/gi, '</h2>')
|
||||
.replace(/<span class="signature-attributes">opt<\/span>/gi, '')
|
||||
.replace(/<h2>.*new (BackendScriptApi|FrontendScriptApi).*<\/h2>/gi, '')
|
||||
;
|
||||
}
|
||||
|
||||
function findNoteMeta(noteMeta, name, notePath) {
|
||||
if (noteMeta.title === name) {
|
||||
return {
|
||||
noteMeta,
|
||||
filePath: '/' + noteMeta.dirFileName,
|
||||
notePath
|
||||
};
|
||||
}
|
||||
|
||||
for (const childMeta of noteMeta.children || []) {
|
||||
const ret = findNoteMeta(childMeta, name, [...notePath, childMeta.noteId]);
|
||||
|
||||
if (ret) {
|
||||
return {
|
||||
noteMeta: ret.noteMeta,
|
||||
filePath: '/' + noteMeta.dirFileName + ret.filePath,
|
||||
notePath: ret.notePath
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function rewriteLinks(rootFilePath, files, dir) {
|
||||
let content = fs.readFileSync(rootFilePath).toString();
|
||||
|
||||
for (const file of files) {
|
||||
content = content.replaceAll(`href="${file}.html"`, `href="${dir}/${file}.html"`);
|
||||
}
|
||||
|
||||
fs.writeFileSync(rootFilePath, content);
|
||||
}
|
||||
|
||||
function createChildren(files, notePath) {
|
||||
let positionCounter = 0;
|
||||
|
||||
const camelCase = name => {
|
||||
if (name === 'module-sql') {
|
||||
return 'moduleSql';
|
||||
} else if (/[^a-z]+/i.test(name)) {
|
||||
throw new Error(`Bad name '${name}'`);
|
||||
}
|
||||
|
||||
return name.charAt(0).toLowerCase() + name.substr(1);
|
||||
};
|
||||
|
||||
return files.map(file => {
|
||||
positionCounter += 10;
|
||||
|
||||
const noteId = "_" + camelCase(file);
|
||||
|
||||
return {
|
||||
"isClone": false,
|
||||
"noteId": noteId,
|
||||
"notePath": [
|
||||
...notePath,
|
||||
'_' + camelCase(file)
|
||||
],
|
||||
"title": file,
|
||||
"notePosition": positionCounter,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [],
|
||||
"format": "html",
|
||||
"dataFileName": file + ".html"
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getScriptApiMeta() {
|
||||
return [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "_frontendApi",
|
||||
"notePath": [
|
||||
...scriptApiDocsRootNotePath,
|
||||
"_frontendApi"
|
||||
],
|
||||
"title": "API docs",
|
||||
"notePosition": 10,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [],
|
||||
"format": "html",
|
||||
"dataFileName": "FrontendScriptApi.html",
|
||||
"dirFileName": "FrontendScriptApi",
|
||||
"children": createChildren(FE_FILES, [
|
||||
...scriptApiDocsRootNotePath,
|
||||
"_frontendApi"
|
||||
])
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "_backendApi",
|
||||
"notePath": [
|
||||
...scriptApiDocsRootNotePath,
|
||||
"_backendApi"
|
||||
],
|
||||
"title": "API docs",
|
||||
"notePosition": 20,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [],
|
||||
"format": "html",
|
||||
"dataFileName": "BackendScriptApi.html",
|
||||
"dirFileName": "BackendScriptApi",
|
||||
"children": createChildren(BE_FILES, [
|
||||
...scriptApiDocsRootNotePath,
|
||||
"_backendApi"
|
||||
])
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user