Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-23 21:17:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Enable sliding categories and extract TODOs

Browse Source
This commit is contained in:
Zack Rauen 2023-09-30 00:13:37 -04:00
parent e7a3f6d17e
commit 5391521c08
11 changed files with 48 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
TODO.md Normal file
View File

@ -0,0 +1,29 @@
# TODOs
This doc contains a list of TODOs taken from the code and organized. This _does not_ includes things like upcoming features or fixes.
## Scripts
- Create a logger
- Modify esbuild to allow for a development build to contain debug logs
- Modify custom highlight.js plugin to include highlighting for jQuery global functions
- Either move highlight.js inclusion to template or use a mapping of note IDs to files
- Adjust search to use separate function (clean code)
- Consider never removing the search results from the page and update container instead
- Consolidate theme initialization (DRY)
## Styles
-
## Templates
- Consider adding highlight.js into the templates instead of scripts
- Find a better way to integrate ts/js to templates (maybe via includes?)
## Other
- Create a logical set of attributes for setting open-graph/twitter metadata
- Consider making book type notes explicitly required for full-link category
- This lets text type notes still have content but require clicking arrow to expand
- Find a way to better map template to notes and allow for automatically creating new ones

61
src/scripts/index.ts
View File

@ -1,30 +1,11 @@
// import fixActiveLink from "./fixes/activelink";
// import fixTableHeaders from "./fixes/tableheaders";
import highlight from "./modules/highlight";
// import buildSidenav from "./navigation/sidenav";
// import buildBreadcrumbs from "./navigation/breadcrumbs";
// import fixSubMenus from "./fixes/submenu";
import setupToC from "./modules/toc";
// import addExternalLinks from "./fixes/externallinks";
// import injectSwagger from "./other/swagger";
// import makeMobileMenu from "./other/mobile";
import setupExpanders from "./modules/expanders";
import setupMobileMenu from "./modules/mobile";
import setupSearch from "./modules/search";
import setupThemeSelector from "./modules/theme";
// const ETAPI_REF_NOTE_ID = "pPIXi0uwF5GX";
// const HIDDEN_SUBMENUS = ["blog"];
// const EXTERNAL_LINKS = {
// EGFtX8Uw96FQ: "https://github.com/zadam/trilium",
// dXAKFE0fJtom: "https://discord.gg/eTaTXUgcBr"
// };
// const ALIASES = {
// WqBnya4Ye8rS: "",
// ZapIU17QNEyU: "blog"
// };
function $try<T extends (...a: unknown[]) => unknown>(func: T, ...args: Parameters<T>) {
try {
func.apply(func, args);
@ -33,51 +14,9 @@ function $try<T extends (...a: unknown[]) => unknown>(func: T, ...args: Paramete
console.error(e); // eslint-disable-line no-console
}
}
/**
* Lots of these functions seem to depend on each other indirectly
* through DOM changes or classes or what-have-you. This is
* obviously not ideal as it makes things less clear, and also
* makes TypeScript less helpful.
*
* TODO: Find a good way of restructuring that allows things
* to act a bit more harmoniously.
*
* TODO: Make use of esbuild's define api to enable a debug
* build that contains all the console logs and such.
*/
// Perform fixes first
// $try(fixActiveLink, ALIASES);
// $try(fixTableHeaders);
// $try(fixSubMenus, HIDDEN_SUBMENUS);
// $try(addExternalLinks, EXTERNAL_LINKS);
// Now layout changes
// $try(buildBreadcrumbs);
// $try(buildSidenav);
$try(setupToC);
// Finally, other features
// TODO: how difficult this would be to implement via
// templates or trilium
$try(highlight);
// $try(injectSwagger, ETAPI_REF_NOTE_ID);
// "Standard" Modules I would recommend the new share
// theme have
$try(setupExpanders);
$try(setupMobileMenu);
$try(setupSearch);
$try(setupThemeSelector);
// $try(makeMobileMenu);
/**
* This no longer uses a traefik plugin and instead a custom
* template being served through Trilium.
*
* TODO: Figure out some good attributes to use to populate
* this inside the template to make it more dynamic
*/
// $try(addOpenGraphMeta);

40
src/scripts/modules/expanders.ts
View File

@ -1,30 +1,3 @@
// function anchorToId(anchor: HTMLAnchorElement) {
// return anchor.href.replace("./", "");
// }
//
// const stored = localStorage.getItem("expanded") ?? "[]";
// let parsed: string[];
// try {
// parsed = JSON.parse(stored) as string[];
// }
// catch (e) {
// parsed = [];
// }
// const state = new Set(parsed);
// const submenus = Array.from(document.querySelectorAll("#menu .submenu-item"));
// for (const sub of submenus) {
// try {
// if (state.has(anchorToId(sub.children[0] as HTMLAnchorElement))) sub.classList.add("expanded");
// }
// catch (e) {
// // TODO: create logger
// console.warn("Could not restore expanded state"); // eslint-disable-line no-console
// console.error(e); // eslint-disable-line no-console
// }
// }
// TODO: Swap this system to use type-book for full-link category
// In case a linked article lead to a new tree
const activeLink = document.querySelector("#menu a.active");
if (activeLink) {
@ -45,15 +18,10 @@ export default function setupExpanders() {
if ((e.target as Element).closest(".submenu-item,.item") !== ex) return;
e.preventDefault();
e.stopPropagation();
// ex.parentElement.parentElement.classList.toggle("expanded");
ex.classList.toggle("expanded");
// const id = anchorToId(ex.closest("a")!);
// if (state.has(id)) state.delete(id);
// else state.add(id);
// // TODO: be able to remove all submenus of currently collapsed
// localStorage.setItem("expanded", JSON.stringify([...state]));
const ul = ex.querySelector("ul")!;
ul.style.height = `${ul.scrollHeight}px`;
setTimeout(() => ex.classList.toggle("expanded"), 1);
setTimeout(() => ul.style.height = ``, 200);
});
}
}

3
src/scripts/modules/highlight.ts
View File

@ -19,7 +19,6 @@ const highlightJQuery: HLJSPlugin = {
result.value = result.value.replaceAll(/([^A-Za-z0-9.])\$\((.+)\)/g, function(match, prefix, variable) {
return `${prefix}<span class="hljs-variable language_">$(</span>${variable}<span class="hljs-variable language_">)</span>`;
});
// TODO: add highlighting for static calls like $.ajax
}
};
@ -32,14 +31,12 @@ export default function addHljs() {
if (!codeblocks.length) return; // If there are none, don't add dependency
// Add the hightlight.js styles from the child note of this script
// TODO: make this a mapping
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "api/notes/cVaK9ZJwx5Hs/download";
document.head.append(link);
// Add the highlight.js script too
// TODO: make this a mappin as well
const script = document.createElement("script");
script.src = "api/notes/6PVElIem02b5/download";
script.addEventListener("load", () => {

3
src/scripts/modules/search.ts
View File

@ -25,7 +25,6 @@ function buildResultItem(result: SearchResult) {
export default function setupSearch() {
const searchInput: HTMLInputElement = document.querySelector(".search-input")!;
// TODO: move listener to another function
searchInput.addEventListener("keyup", debounce(async () => {
// console.log("CHANGE EVENT");
const current = document.body.dataset.noteId;
@ -48,7 +47,7 @@ export default function setupSearch() {
container.style.minWidth = `${rect.width}px`;
const existing = document.querySelector(".search-results");
if (existing) existing.replaceWith(container); // TODO: consider updating existing container and never removing
if (existing) existing.replaceWith(container);
else document.body.append(container);
}, 500));

1
src/scripts/modules/theme.ts
View File

@ -12,7 +12,6 @@ if (preference) {
export default function setupThemeSelector() {
const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!;
// TODO: consolidate this with initialization (DRY)
themeSwitch?.addEventListener("change", () => {
if (themeSwitch.checked) {
document.body.classList.add("theme-dark");

5
src/scripts/test.ts
View File

File diff suppressed because one or more lines are too long

2
src/styles/navbar/navbar.css
View File

@ -50,7 +50,7 @@
}
#menu li > ul {
transition: height 1000ms ease;
transition: height 200ms ease;
}
#menu li:not(.expanded) > ul {

18
src/templates/page.ejs
View File

@ -65,7 +65,7 @@ const customServerYml = `- url: "{protocol}://{domain}:{port}/etapi"
<% } %>
<%- header %>
<title><%= note.title %><% if (note.noteId !== subRoot.noteId) { %> - <%= subRoot.title %><% } %></title>
<!-- TODO: determine a good way to populate this via labels -->
<!-- HTML Meta Tags -->
<meta name="description" content="A website for guides, reference, showcase, inspiration, and more, all for Trilium Notes! Not convinced? Come see for yourself just what Trilium can do."
><!-- Facebook Meta Tags -->
@ -97,9 +97,9 @@ content = content.replaceAll(headingRe, (...match) => {
%>
<body data-note-id="<%= note.noteId %>" class="type-<%= note.type %><%= themeClass %>">
<div id="mobile-header">
<a href="./<%= subRoot.shareId %>">
<a href="./">
<% if (subRoot.hasRelation("shareLogo")) { %>
<img src="api/notes/<%= subRoot.getRelation("shareLogo").value %>/download" alt="Logo" />
<img src="api/images/<%= subRoot.getRelation("shareLogo").value %>/logo.svg" alt="Logo" />
<% } %>
<%= subRoot.title %>
</a>
@ -109,9 +109,9 @@ content = content.replaceAll(headingRe, (...match) => {
<div id="left-pane">
<div id="navigation">
<div id="site-header">
<a href="./<%= subRoot.shareId %>">
<a href="./">
<% if (subRoot.hasRelation("shareLogo")) { %>
<img src="api/notes/<%= subRoot.getRelation("shareLogo").value %>/download" alt="Logo" />
<img src="api/images/<%= subRoot.getRelation("shareLogo").value %>/logo.svg" alt="Logo" />
<% } %>
<%= subRoot.title %>
</a>
@ -198,12 +198,8 @@ content = content.replaceAll(headingRe, (...match) => {
<div id="toc-pane">
<h3>On This Page</h3>
<ul id="toc">
<%
let active = true;
for (const entry of toc) {
%>
<%- include('toc_item', {entry, active}) %>
<% active = false %>
<% for (const entry of toc) { %>
<%- include('toc_item', {entry}) %>
<% } %>
</ul>
</div>

4
src/templates/toc_item.ejs
View File

@ -5,14 +5,14 @@ const slug = slugify(entry.name);
<li>
<a href="#<%= slug %>"<% if (active) { %> class="active"<% } %>>
<a href="#<%= slug %>">
<%= entry.name %>
</a>
<% if (entry.children.length) { %>
<ul>
<% for (const subentry of entry.children) { %>
<%- include('toc_item', {entry: subentry, active: false}) %>
<%- include('toc_item', {entry: subentry}) %>
<% } %>
</ul>
<% } %>

8
src/templates/tree_item.ejs
View File

@ -6,10 +6,10 @@ const target = isExternalLink ? ` target="_blank" rel="noopener noreferrer"` : "
%>
<% if (note.noteId !== subRoot.noteId) { %>
<a class="<%= linkClass %>" href="<%= linkHref %>"<%= target %>>
<% if (note.hasVisibleChildren()) { %><button class="collapse-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle"><path d="M3 8L12 17L21 8"></path></svg></button><% } %>
<%= note.title %>
</a>
<a class="<%= linkClass %>" href="<%= linkHref %>"<%= target %>>
<% if (note.hasVisibleChildren()) { %><button class="collapse-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle"><path d="M3 8L12 17L21 8"></path></svg></button><% } %>
<%= note.title %>
</a>
<% } %>