Basking: sign in with Authentik only, pages that nest and link
Sign-in is now OpenID Connect against Authentik (authorization code flow with PKCE, state and nonce). The password, API tokens and the add command are gone; each person who signs in gets a private notebook in a folder named from a hash of who they are. An optional allowed list is checked on every request. Notes become pages with titles, a tree of subpages, [[links]] with backlinks that follow renames, a Ctrl+K finder, slash commands, list continuation, and Write and Read modes. Autosave keeps the text through a dropped connection or an expired session. Export opens as an Obsidian vault. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
VeillaxandClaude Sonnet 5.5 committed
1 parent
b548faa258
commit
98f7730913
19 files changed
+3291
-1578
No files matched your search
@@ -0,0 +1,276 @@
|
||||
'use strict';
|
||||
|
||||
// ---------- text helpers: edits go through the browser so Undo keeps working ----------
|
||||
function replaceRange(ta, from, to, text) {
|
||||
ta.focus(); ta.setSelectionRange(from, to);
|
||||
const ok = text === '' ? document.execCommand('delete') : document.execCommand('insertText', false, text);
|
||||
if (!ok) { ta.setRangeText(text, from, to, 'end'); ta.dispatchEvent(new Event('input', { bubbles: true })); }
|
||||
}
|
||||
const lineStart = (v, pos) => v.lastIndexOf('\n', pos - 1) + 1;
|
||||
const lineEnd = (v, pos) => { const k = v.indexOf('\n', pos); return k < 0 ? v.length : k; };
|
||||
|
||||
// Where the caret is, in pixels inside the text box, found by laying the same text out in a hidden copy.
|
||||
function caretXY(ta, pos) {
|
||||
const cs = getComputedStyle(ta), mirror = h('div', { class: 'mirror' }), mark = h('span', {}, '.');
|
||||
for (const p of ['fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'paddingTop', 'paddingLeft', 'paddingRight', 'tabSize'])
|
||||
mirror.style[p] = cs[p];
|
||||
mirror.style.width = ta.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight) + 'px';
|
||||
mirror.append(ta.value.slice(0, pos), mark);
|
||||
document.body.append(mirror);
|
||||
const at = { x: mark.offsetLeft, y: mark.offsetTop, lh: parseFloat(cs.lineHeight) || 24 };
|
||||
mirror.remove();
|
||||
return at;
|
||||
}
|
||||
|
||||
// ---------- the "/" commands and the "[[" page picker ----------
|
||||
const SLASH = [
|
||||
{ name: 'Heading 1', hint: '#', keys: 'h1 heading title', text: '# ' },
|
||||
{ name: 'Heading 2', hint: '##', keys: 'h2 heading', text: '## ' },
|
||||
{ name: 'Heading 3', hint: '###', keys: 'h3 heading', text: '### ' },
|
||||
{ name: 'To-do list', hint: '- [ ]', keys: 'todo task checkbox check', text: '- [ ] ' },
|
||||
{ name: 'Bulleted list', hint: '-', keys: 'bullet list ul', text: '- ' },
|
||||
{ name: 'Numbered list', hint: '1.', keys: 'number list ol', text: '1. ' },
|
||||
{ name: 'Quote', hint: '>', keys: 'quote callout', text: '> ' },
|
||||
{ name: 'Code block', hint: '```', keys: 'code pre', text: '```\n\n```', caret: 4 },
|
||||
{ name: 'Divider', hint: '---', keys: 'divider line hr rule', text: '---\n' },
|
||||
{ name: 'Link to a page', hint: '[[', keys: 'link page wiki mention', text: '[[', again: true },
|
||||
{ name: 'Link to today', hint: () => isoDay(new Date()), keys: 'today date journal day', text: () => '[[' + isoDay(new Date()) + ']]' },
|
||||
{ name: 'Current time', hint: () => hhmm(new Date()), keys: 'time clock now', text: () => hhmm(new Date()) + ' ' },
|
||||
];
|
||||
|
||||
function makePopup(ta, wrap) {
|
||||
const el = h('div', { class: 'popup', role: 'listbox', 'aria-label': 'Suggestions', hidden: true });
|
||||
wrap.append(el);
|
||||
let items = [], sel = 0, onPick = null;
|
||||
function draw() {
|
||||
fill(el, items.map((it, i) => h('div', {
|
||||
class: 'popup-row' + (i === sel ? ' on' : ''), role: 'option', 'aria-selected': String(i === sel),
|
||||
onmousedown: e => { e.preventDefault(); sel = i; pop.pick(); },
|
||||
}, h('span', { class: 'popup-name' }, it.name), it.hint ? h('span', { class: 'popup-hint' }, typeof it.hint === 'function' ? it.hint() : it.hint) : null)));
|
||||
el.querySelector('.on')?.scrollIntoView({ block: 'nearest' });
|
||||
}
|
||||
const pop = {
|
||||
get open() { return !el.hidden; },
|
||||
show(list, pick, pos) {
|
||||
if (!list.length) return pop.hide();
|
||||
items = list; onPick = pick; sel = 0; draw(); el.hidden = false;
|
||||
const c = caretXY(ta, pos);
|
||||
el.style.left = Math.max(0, Math.min(ta.offsetLeft + c.x, wrap.clientWidth - 270)) + 'px';
|
||||
el.style.top = (ta.offsetTop + c.y + c.lh) + 'px';
|
||||
},
|
||||
hide() { el.hidden = true; items = []; },
|
||||
move(d) { sel = (sel + d + items.length) % items.length; draw(); },
|
||||
pick() { const it = items[sel]; pop.hide(); if (it) onPick(it); },
|
||||
};
|
||||
return pop;
|
||||
}
|
||||
|
||||
function pageChoices(q) {
|
||||
const lq = q.trim().toLowerCase();
|
||||
const rank = p => { const t = p.title.toLowerCase(); return t === lq ? 0 : t.startsWith(lq) ? 1 : 2; };
|
||||
const list = S.pages.filter(p => p.title && (!lq || p.title.toLowerCase().includes(lq)))
|
||||
.sort((a, b) => rank(a) - rank(b) || a.title.localeCompare(b.title)).slice(0, 7)
|
||||
.map(p => ({ name: p.title, hint: p.daily ? 'Journal' : S.byId.get(p.parent)?.name || '' }));
|
||||
if (lq && !S.byTitle.has(lq)) list.push({ name: 'Create "' + q.trim() + '"', hint: 'New page', create: q.trim() });
|
||||
return list;
|
||||
}
|
||||
|
||||
function enhance(ta, wrap) {
|
||||
const pop = makePopup(ta, wrap);
|
||||
|
||||
function check() {
|
||||
if (ta.selectionStart !== ta.selectionEnd) return pop.hide();
|
||||
const pos = ta.selectionStart, ls = lineStart(ta.value, pos), before = ta.value.slice(ls, pos);
|
||||
let m;
|
||||
if ((m = /\[\[([^\[\]|\n]*)$/.exec(before))) {
|
||||
const from = pos - m[1].length;
|
||||
pop.show(pageChoices(m[1]), it => {
|
||||
const closed = ta.value.startsWith(']]', pos);
|
||||
replaceRange(ta, from, closed ? pos + 2 : pos, (it.create || it.name) + ']]');
|
||||
}, pos);
|
||||
} else if ((m = /^(\s*)\/([a-z0-9]{0,16})$/i.exec(before))) {
|
||||
const q = m[2].toLowerCase(), from = ls + m[1].length;
|
||||
pop.show(SLASH.filter(c => !q || c.name.toLowerCase().includes(q) || c.keys.includes(q)), c => {
|
||||
const text = typeof c.text === 'function' ? c.text() : c.text;
|
||||
replaceRange(ta, from, pos, text);
|
||||
if (c.caret) ta.setSelectionRange(from + c.caret, from + c.caret);
|
||||
if (c.again) check();
|
||||
}, pos);
|
||||
} else pop.hide();
|
||||
}
|
||||
|
||||
function continueList(e) {
|
||||
if (ta.selectionStart !== ta.selectionEnd) return false;
|
||||
const pos = ta.selectionStart, v = ta.value, ls = lineStart(v, pos), le = lineEnd(v, pos), line = v.slice(ls, le);
|
||||
const m = /^(\s*)([-*+]|(\d+)([.)]))\s+(\[[ xX]\]\s+)?/.exec(line);
|
||||
if (!m || pos < ls + m[0].length) return false;
|
||||
e.preventDefault();
|
||||
if (line.trim() === m[0].trim()) { replaceRange(ta, ls, le, ''); return true; } // an empty item ends the list
|
||||
const marker = m[3] ? (Number(m[3]) + 1) + m[4] : m[2];
|
||||
replaceRange(ta, pos, pos, '\n' + m[1] + marker + ' ' + (m[5] ? '[ ] ' : ''));
|
||||
return true;
|
||||
}
|
||||
function indentList(e) {
|
||||
if (ta.selectionStart !== ta.selectionEnd) return false;
|
||||
const pos = ta.selectionStart, v = ta.value, ls = lineStart(v, pos), line = v.slice(ls, lineEnd(v, pos));
|
||||
if (!/^\s*([-*+]|\d+[.)])\s/.test(line)) return false; // anywhere else, Tab keeps moving focus
|
||||
e.preventDefault();
|
||||
if (!e.shiftKey) { replaceRange(ta, ls, ls, ' '); ta.setSelectionRange(pos + 2, pos + 2); }
|
||||
else {
|
||||
const n = line.startsWith(' ') ? 2 : /^[ \t]/.test(line) ? 1 : 0;
|
||||
if (n) { replaceRange(ta, ls, ls + n, ''); ta.setSelectionRange(pos - n, pos - n); }
|
||||
}
|
||||
return true;
|
||||
}
|
||||
function wrapSelection(mark) {
|
||||
const s = ta.selectionStart, e = ta.selectionEnd, sel = ta.value.slice(s, e);
|
||||
replaceRange(ta, s, e, mark + sel + mark);
|
||||
ta.setSelectionRange(s + mark.length, s + mark.length + sel.length);
|
||||
}
|
||||
|
||||
ta.addEventListener('keydown', e => {
|
||||
if (pop.open) {
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); pop.move(e.key === 'ArrowDown' ? 1 : -1); return; }
|
||||
if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); pop.pick(); return; }
|
||||
if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); pop.hide(); return; }
|
||||
}
|
||||
if (e.isComposing) return;
|
||||
const plain = !e.ctrlKey && !e.metaKey && !e.altKey;
|
||||
if (e.key === 'Enter' && plain && !e.shiftKey) continueList(e);
|
||||
else if (e.key === 'Tab' && plain) indentList(e);
|
||||
else if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && (e.key === 'b' || e.key === 'i')) { e.preventDefault(); wrapSelection(e.key === 'b' ? '**' : '*'); }
|
||||
});
|
||||
ta.addEventListener('input', check);
|
||||
ta.addEventListener('click', check);
|
||||
ta.addEventListener('keyup', e => { if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) check(); });
|
||||
ta.addEventListener('blur', () => setTimeout(pop.hide, 150));
|
||||
return pop;
|
||||
}
|
||||
|
||||
// ---------- the page editor: autosaves title and text, and notices when a page changed elsewhere ----------
|
||||
// With no note it starts a new page, which is only created once something is typed.
|
||||
function pageEditor({ note, parent = '', fixedTitle, onCreated, onSaved }) {
|
||||
let cur = note || null, titleDirty = false, bodyDirty = false, saving = false, queued = false, blocked = false;
|
||||
let timer = null, retry = null, badTitle = null, mode = 'write';
|
||||
|
||||
const titleEl = h('input', { class: 'title-input', type: 'text', placeholder: 'Untitled', 'aria-label': 'Page title', maxlength: 120, autocomplete: 'off', spellcheck: 'true' });
|
||||
titleEl.value = fixedTitle ?? note?.title ?? '';
|
||||
if (fixedTitle != null) { titleEl.readOnly = true; titleEl.tabIndex = -1; }
|
||||
const titleErr = h('p', { class: 'err small', role: 'alert', hidden: true });
|
||||
const ta = h('textarea', { class: 'write big', 'aria-label': 'Page text', placeholder: "Write something, or type '/' for commands, '[[' to link a page" });
|
||||
ta.value = note?.body ?? '';
|
||||
const view = h('div', { class: 'view', hidden: true });
|
||||
const wrap = h('div', { class: 'editor-wrap' }, ta, view);
|
||||
const status = h('span', { class: 'sub', role: 'status' });
|
||||
const notice = h('div', { class: 'notice notice-warning', hidden: true });
|
||||
const say = t => { status.textContent = t; };
|
||||
const fit = () => { ta.style.height = 'auto'; ta.style.height = ta.scrollHeight + 2 + 'px'; };
|
||||
enhance(ta, wrap);
|
||||
|
||||
const dirty = () => titleDirty || bodyDirty;
|
||||
const ctl = { save, dirty };
|
||||
S.editors.add(ctl);
|
||||
|
||||
function flag(msg) { notice.hidden = !msg; if (msg) fill(notice, icon('alert', 16), msg); }
|
||||
|
||||
async function save() {
|
||||
clearTimeout(timer); timer = null; clearTimeout(retry); retry = null;
|
||||
if (blocked) return;
|
||||
const t = titleEl.value, b = ta.value;
|
||||
const sendTitle = titleDirty && t !== badTitle, sendBody = bodyDirty;
|
||||
if (!sendTitle && !sendBody) return;
|
||||
if (saving) { queued = true; return; }
|
||||
if (!cur && !t.trim() && !b.trim()) { titleDirty = bodyDirty = false; return; } // nothing worth keeping
|
||||
saving = true; say('Saving');
|
||||
try {
|
||||
let n;
|
||||
if (!cur) n = await api('POST', '/api/notes', { title: sendTitle ? t : '', body: b, parent }, { keepalive: b.length < 15000 });
|
||||
else {
|
||||
const payload = { base: cur.updated };
|
||||
if (sendTitle) payload.title = t;
|
||||
if (sendBody) payload.body = b;
|
||||
n = await api('PUT', '/api/notes/' + cur.id, payload, { keepalive: b.length < 15000 });
|
||||
}
|
||||
const created = !cur;
|
||||
cur = n;
|
||||
if (sendTitle) { if (titleEl.value === t) titleDirty = false; badTitle = null; titleErr.hidden = true; }
|
||||
if (sendBody && ta.value === b) bodyDirty = false;
|
||||
flag(null);
|
||||
say(dirty() ? 'Unsaved' : 'Saved');
|
||||
if (created) onCreated?.(cur);
|
||||
onSaved?.(cur, { renamed: sendTitle });
|
||||
} catch (e) {
|
||||
if (e.status === 409) conflict(e.data.note);
|
||||
else if (e.status === 422 && e.data?.code === 'title_taken') {
|
||||
badTitle = t; titleErr.textContent = 'Another page already has this title. Pick a different one.'; titleErr.hidden = false;
|
||||
say('Unsaved'); queued = bodyDirty || !cur && !!b.trim();
|
||||
} else if (e.status === 401) {
|
||||
say('Not saved');
|
||||
flag([h('span', { class: 'grow' }, 'Your session ended, so your latest changes are not saved yet. Your text is still here.'),
|
||||
h('a', { class: 'btn-link', href: '/auth/login?next=' + encodeURIComponent(location.hash), target: '_blank', rel: 'noopener' }, 'Sign in again'),
|
||||
h('span', { class: 'sub' }, 'Opens in a new tab. Come back afterwards and this page saves itself.')]);
|
||||
retry = setTimeout(save, 4000);
|
||||
} else {
|
||||
say('Not saved');
|
||||
if (e.offline || e.status >= 500) { flag(e.message + ' Trying again.'); retry = setTimeout(save, 5000); }
|
||||
else toast(e.message, true);
|
||||
}
|
||||
} finally {
|
||||
saving = false;
|
||||
if (queued) { queued = false; save(); }
|
||||
}
|
||||
}
|
||||
|
||||
function conflict(theirs) {
|
||||
blocked = true; say('Not saved');
|
||||
flag([h('span', { class: 'grow' }, 'This page changed somewhere else, probably on another device.'),
|
||||
h('button', { class: 'ghost', onclick: () => { cur = theirs; blocked = false; titleDirty = titleEl.value !== theirs.title; bodyDirty = ta.value !== theirs.body; flag(null); save(); } }, 'Keep my version'),
|
||||
h('button', { class: 'ghost', onclick: () => {
|
||||
cur = theirs; blocked = false; titleDirty = bodyDirty = false; titleEl.value = theirs.title; ta.value = theirs.body;
|
||||
flag(null); say('Saved'); fit(); if (mode === 'read') render(); onSaved?.(cur, { renamed: true });
|
||||
} }, 'Use the other version')]);
|
||||
}
|
||||
|
||||
const later = () => { clearTimeout(timer); timer = setTimeout(save, 700); };
|
||||
titleEl.addEventListener('input', () => { titleDirty = true; titleErr.hidden = true; if (badTitle !== null && titleEl.value !== badTitle) badTitle = null; say('Unsaved'); later(); });
|
||||
titleEl.addEventListener('blur', () => save());
|
||||
titleEl.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter' && !e.isComposing) { e.preventDefault(); setMode('write'); ta.focus(); ta.setSelectionRange(0, 0); }
|
||||
});
|
||||
ta.addEventListener('input', () => { bodyDirty = true; say('Unsaved'); fit(); later(); });
|
||||
|
||||
// Write shows the text box; Read shows the page as it will look, with tasks you can tick and links you can follow.
|
||||
function render() { view.replaceChildren(ta.value.trim() ? md(ta.value, ticked, true) : h('p', { class: 'dim' }, 'Nothing here yet. Click to start writing.')); }
|
||||
function ticked(line, checked) {
|
||||
const lines = ta.value.split('\n');
|
||||
lines[line] = lines[line].replace(/\[( |x|X)\]/, checked ? '[x]' : '[ ]');
|
||||
ta.value = lines.join('\n'); bodyDirty = true; say('Unsaved'); render(); later();
|
||||
}
|
||||
function setMode(m) {
|
||||
mode = m;
|
||||
if (m === 'read') { render(); fit(); }
|
||||
ta.hidden = m === 'read'; view.hidden = m === 'write';
|
||||
if (m === 'write') fit();
|
||||
ctl.onMode?.(m);
|
||||
}
|
||||
view.addEventListener('click', e => {
|
||||
if (e.target.closest('a,input,button') || inSelection()) return;
|
||||
setMode('write'); ta.focus(); ta.setSelectionRange(ta.value.length, ta.value.length);
|
||||
});
|
||||
|
||||
window.addEventListener('resize', fit);
|
||||
// Getters must be defined on the object itself; Object.assign would copy their values once.
|
||||
Object.defineProperties(ctl, { mode: { get: () => mode }, note: { get: () => cur }, body: { get: () => ta.value } });
|
||||
return Object.assign(ctl, {
|
||||
titleEl, titleErr, ta, view, wrap, status, notice, setMode,
|
||||
fit, flush: () => save(),
|
||||
// Insert the time where the caret is, on a line of its own.
|
||||
stamp() {
|
||||
setMode('write'); ta.focus();
|
||||
const at = ta.selectionStart, before = ta.value.slice(0, at), line = before.slice(before.lastIndexOf('\n') + 1);
|
||||
const lead = line.trim() ? '\n\n' : before && !before.endsWith('\n\n') && before.endsWith('\n') ? '\n' : '';
|
||||
replaceRange(ta, at, ta.selectionEnd, lead + hhmm(new Date()) + ' ');
|
||||
},
|
||||
dispose() { S.editors.delete(ctl); window.removeEventListener('resize', fit); clearTimeout(timer); clearTimeout(retry); },
|
||||
});
|
||||
}
|
||||
Reference in new issue
Block a user