From a9fb5b3e854b98dd7616fb6be1bd2eb2b2b7c86f Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 12 Oct 2026 03:40:59 +0000 Subject: [PATCH] Admin: write blog posts and manage images A Posts page lists every post with Write a post: title, topic, kind, date, summary, a cover picked from the vault or uploaded, the pages it is about, the Markdown body with a rendered preview, and Save draft or Publish. An Images page uploads several images into an _attachments folder, shows which notes use each one, copies its embed line, and deletes unused ones. The content service gains the attachment list, upload and delete endpoints behind the editor and admin tokens. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx --- docs/admin.md | 11 +- docs/content-service.md | 3 + services/admin/public/admin.css | 33 ++++ services/admin/public/admin.js | 25 +++ services/admin/src/client.ts | 23 +++ services/admin/src/layout.ts | 3 + services/admin/src/posts.ts | 260 +++++++++++++++++++++++++++++ services/admin/src/server.ts | 107 +++++++++++- services/admin/test/posts.test.ts | 44 +++++ services/content/src/http.ts | 75 +++++++++ services/content/src/vault.ts | 88 +++++++++- services/content/test/http.test.ts | 34 ++++ 12 files changed, 694 insertions(+), 12 deletions(-) create mode 100644 services/admin/public/admin.js create mode 100644 services/admin/src/posts.ts create mode 100644 services/admin/test/posts.test.ts diff --git a/docs/admin.md b/docs/admin.md index 938d035..1a0e957 100644 --- a/docs/admin.md +++ b/docs/admin.md @@ -19,6 +19,8 @@ the vault so Obsidian shows them too. Its changes are recorded with the author | Review | Held changes with the rules' reasons and a line diff against the live version. Accept puts it live (and into the vault, for API changes). Reject keeps the live version; for an edit made in Obsidian, "Reject and put the live version back" also rewrites the file. Earlier decisions are listed by status. | | Notes, Drafts | Browse and search every note, or only the unpublished ones. | | A note | A preview of the body, its fields, what links to it, Publish or Unpublish, and its history. Any earlier version can be compared with the live one and rolled back. | +| Posts | Every blog post, drafts first, and **Write a post**: title, topic, kind of post, publish date, summary, a cover picked from the vault or uploaded, the pages it is about, Feature it, case study details, and the Markdown body. Preview shows it rendered with its images; Save draft and Publish write the note to `Posts/`. Images added to the post are uploaded to `_attachments/Posts` and appended as `![[file]]` lines. | +| Images | Everything in `_attachments`, newest first, by folder, with which notes use each one. Upload several at once into a folder, copy an image's `![[file]]` line, and delete images no note uses. | | Capture | A status for the Now log, or a Library item with the option to post a status about it in the same step. | | Store | Orders open or closed per category, with the reopen date and turnaround, and open slots or stock per product line. | | Problems | Whole-folder problems, like links to notes that do not exist. | @@ -34,8 +36,13 @@ the vault so Obsidian shows them too. Its changes are recorded with the author same-origin` (or a matching `Origin`), so a page elsewhere cannot make the browser act on the admin page. - **Drafts cannot run code.** Previews show raw HTML as text and drop links that - are not http, https, mailto or relative. The page sends a content security - policy that allows no scripts at all; it works entirely with plain forms. + are not http, https, mailto or relative. The content security policy allows + only the page's own `/admin.js` (Copy buttons and a confirm before deleting + an image), never inline script, and every page still works with plain forms + when that script does not run. +- **Only images go into the vault.** Uploads are checked by extension and by + their first bytes, SVG is refused, and an image is deleted only when no note + uses it. ## Running it diff --git a/docs/content-service.md b/docs/content-service.md index c504b28..50cd13b 100644 --- a/docs/content-service.md +++ b/docs/content-service.md @@ -96,6 +96,9 @@ roles in `CONTENT_TOKENS`. | `POST /api/held//accept`, `/reject` | editor, admin | Decide a held change. `{ "restore": true }` on reject puts the live version back into the vault. | | `POST /api/note/rollback` | admin | `{ path, rev }` | | `POST /api/scan` | editor, admin | Compare the whole folder now. | +| `GET /api/attachments` | editor, admin | Every file in `_attachments`, newest first, with its folder, size and the notes whose text names it (`usedBy`). | +| `POST /api/attachments?folder=&name=` | editor, admin | The raw bytes of a PNG, JPEG, WebP, GIF or AVIF image (up to 15 MB; SVG is refused because it can carry script). It is saved in `_attachments/` under a lowercase, hyphenated name, with `-2`, `-3` added when the name is taken anywhere in `_attachments`. Answers `{ name }`. | +| `POST /api/attachments/delete` | editor, admin | `{ name }`. Refused with 409 while any note still uses the file. | | `POST /api/submissions` | intake, admin | File a saved copy of an inquiry or order. Answers `{ id, receipt }`. | | `POST /api/submissions//delivery` | intake (with the receipt, once), admin | `{ receipt, status: sent, failed or skipped, error? }`: how the email went. | | `GET /api/submissions?handled=`, `/api/submissions/` | admin | Saved copies, unhandled first, newest first, with counts. | diff --git a/services/admin/public/admin.css b/services/admin/public/admin.css index fc25df6..879b435 100644 --- a/services/admin/public/admin.css +++ b/services/admin/public/admin.css @@ -77,3 +77,36 @@ dl.fields dt { color: var(--muted); } dl.fields dd { margin: 0; word-break: break-word; } dl.fields pre { margin: 0; white-space: pre-wrap; } input.num { width: 90px; } + +/* Posts and Images */ +.head-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } +.button.primary { background: var(--teal); border-color: var(--teal); color: var(--midnight); font-weight: 600; } +.hint { margin: 4px 0 0; font-size: 13px; color: var(--muted); } +.post-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } +@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr; } } +.side .panel h2 { margin-top: 0; font-size: 1.05rem; } +.side input[name="links"] { margin-bottom: 8px; } +.body-text { font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.55; resize: vertical; min-height: 360px; } +.actions.stack { flex-direction: column; align-items: stretch; } +.actions.stack button { justify-content: center; } +.cover-preview { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; } +.cover-preview.wide { max-height: 320px; } +.post-preview h1 { margin-top: 4px; } +details summary { cursor: pointer; color: var(--muted); margin-top: 10px; } +.copy-row { display: flex; gap: 6px; align-items: center; } +.copy-row input { font-family: ui-monospace, monospace; font-size: 12px; padding: 4px 8px; } +.copy-row button { min-height: 30px; padding: 2px 12px; font-size: 13px; } +.thumbs { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } +.thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; margin-bottom: 6px; } +.folders { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } +.folders a { padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 14px; } +.folders a[aria-current] { border-color: var(--gold); color: var(--gold-bright); } +.images { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } +.images li { margin: 0; display: flex; flex-direction: column; gap: 10px; } +.images img, .images .file { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; background: var(--sky); } +.images .file { display: flex; align-items: center; justify-content: center; color: var(--muted); text-transform: uppercase; } +.images .meta { display: flex; flex-direction: column; gap: 6px; font-size: 14px; word-break: break-all; } +.images .used { font-size: 13px; } +form.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; } +form.inline button { min-height: 30px; padding: 2px 12px; font-size: 13px; } +.preview img { max-height: 480px; object-fit: contain; } diff --git a/services/admin/public/admin.js b/services/admin/public/admin.js new file mode 100644 index 0000000..25bb6c7 --- /dev/null +++ b/services/admin/public/admin.js @@ -0,0 +1,25 @@ +// The admin page's only script, and it is optional: every page works without +// it. It adds Copy buttons for embed lines and asks before a delete. +for (const b of document.querySelectorAll("button.copy[data-copy]")) { + b.addEventListener("click", async () => { + const text = b.getAttribute("data-copy") || ""; + try { + await navigator.clipboard.writeText(text); + } catch { + const input = b.previousElementSibling; + if (input && "select" in input) { + input.select(); + document.execCommand("copy"); + } + } + const was = b.textContent; + b.textContent = "Copied"; + setTimeout(() => (b.textContent = was), 1500); + }); +} +for (const f of document.querySelectorAll("form[action='/images/delete']")) { + f.addEventListener("submit", (e) => { + const name = f.querySelector("input[name=name]")?.value ?? "this image"; + if (!confirm(`Delete ${name} from the vault? This cannot be undone.`)) e.preventDefault(); + }); +} diff --git a/services/admin/src/client.ts b/services/admin/src/client.ts index d161fe4..7eaba83 100644 --- a/services/admin/src/client.ts +++ b/services/admin/src/client.ts @@ -117,6 +117,15 @@ export interface Suggestion { cover?: string; } +/** A file in the vault's `_attachments`, with the notes that use it. */ +export interface Attachment { + name: string; + folder: string; + size: number; + modified: string; + usedBy: { path: string; title: string; type: string }[]; +} + export type FullNote = Omit; export class ContentApi { @@ -172,6 +181,20 @@ export class ContentApi { suggestions = () => this.get("/api/suggestions"); dismissSuggestion = (key: string) => this.call<{ ok: boolean }>("POST", `/api/suggestions/${encodeURIComponent(key)}/dismiss`, {}); + attachments = () => this.get("/api/attachments"); + /** Add an image to `_attachments/`; answers with the name it was saved under. */ + async upload(folder: string, name: string, bytes: Uint8Array): Promise { + const res = await fetch(new URL(`/api/attachments?${new URLSearchParams({ folder, name })}`, this.base), { + method: "POST", + headers: { authorization: `Bearer ${this.token}`, "content-type": "application/octet-stream" }, + body: bytes, + }); + const data = (await res.json().catch(() => null)) as { name?: string; error?: string } | null; + if (!res.ok || !data?.name) throw new ApiError(res.status, data?.error ?? `The content service answered ${res.status}`, data); + return data.name; + } + deleteAttachment = (name: string) => this.call<{ ok: boolean }>("POST", "/api/attachments/delete", { name }); + /** Fetch an attachment to pass through to the browser. */ attachment = (name: string) => fetch(new URL(`/attachments/${encodeURIComponent(name)}`, this.base), { headers: { authorization: `Bearer ${this.token}` } }); diff --git a/services/admin/src/layout.ts b/services/admin/src/layout.ts index daed956..4067c7e 100644 --- a/services/admin/src/layout.ts +++ b/services/admin/src/layout.ts @@ -12,6 +12,8 @@ const nav: [string, string][] = [ ["/inbox", "Inbox"], ["/notes", "Notes"], ["/drafts", "Drafts"], + ["/posts", "Posts"], + ["/images", "Images"], ["/capture", "Capture"], ["/store", "Store"], ["/problems", "Problems"], @@ -29,6 +31,7 @@ export function layout(p: { title: string; path: string; held: number; inbox?: n +
diff --git a/services/admin/src/posts.ts b/services/admin/src/posts.ts new file mode 100644 index 0000000..5973f8a --- /dev/null +++ b/services/admin/src/posts.ts @@ -0,0 +1,260 @@ +/** + * Writing blog posts and managing images. A post is a `post` note written + * through the content service like any other change; images are files in the + * vault's `_attachments`, so Obsidian sees both. + */ +import { topics } from "@gk/schema"; +import type { Attachment, Note, Summary } from "./client.ts"; +import { html, qs, when, type Html } from "./html.ts"; +import { noteHref, preview } from "./pages.ts"; + +/** What the post form holds, from a note or from a posted form. */ +export interface PostDraft { + path?: string; + title: string; + date: string; + topic: string; + postType: string; + summary: string; + cover: string; + links: string[]; + pinned: boolean; + role: string; + employer: string; + period: string; + body: string; + publish: boolean; +} + +export const postTypes = ["article", "build log", "case study"] as const; + +/** Folders under `_attachments` the upload form offers; Posts comes first. */ +export const imageFolders = ["Posts", "Pages", "Workshop", "Library", "Tabletop", "Store"] as const; + +export const editHref = (path: string) => `/posts/edit${qs({ path })}`; +export const unlink = (v: unknown) => String(v ?? "").trim().replace(/^!?\[\[|\]\]$/g, "").split("|")[0]!.trim(); + +export function emptyPost(today: string): PostDraft { + return { title: "", date: today, topic: topics[0], postType: "article", summary: "", cover: "", links: [], pinned: false, role: "", employer: "", period: "", body: "", publish: false }; +} + +export function draftFromNote(n: Note): PostDraft { + const d = n.data; + return { + path: n.path, + title: n.title, + date: String(d.date ?? ""), + topic: String(d.topic ?? topics[0]), + postType: String(d.postType ?? "article"), + summary: String(d.summary ?? ""), + cover: unlink(d.cover), + links: Array.isArray(d.links) ? d.links.map(unlink).filter(Boolean) : [], + pinned: d.pinned === true, + role: String(d.role ?? ""), + employer: String(d.employer ?? ""), + period: String(d.period ?? ""), + body: n.body, + publish: n.publish, + }; +} + +export function draftFromForm(f: URLSearchParams): PostDraft { + const t = (k: string) => (f.get(k) ?? "").trim(); + return { + path: t("path") || undefined, + title: t("title"), + date: t("date"), + topic: t("topic"), + postType: t("postType") || "article", + summary: t("summary"), + cover: unlink(t("cover")), + links: f + .getAll("links") + .flatMap((v) => v.split("\n")) + .map(unlink) + .filter(Boolean), + pinned: f.get("pinned") === "1", + role: t("role"), + employer: t("employer"), + period: t("period"), + body: (f.get("body") ?? "").replace(/\r\n/g, "\n"), + publish: f.get("wasLive") === "1", + }; +} + +/** + * The note fields for a draft. On an update, an emptied optional field is + * sent as null so the content service drops it from the note. + */ +export function postFields(d: PostDraft, publish: boolean, update: boolean): Record { + const opt = (v: unknown, keep: boolean) => (keep ? v : update ? null : undefined); + const caseStudy = d.postType === "case study"; + const fields: Record = { + title: d.title, + date: d.date, + topic: d.topic, + postType: d.postType, + summary: d.summary, + publish, + cover: opt(`[[${d.cover}]]`, !!d.cover), + links: opt( + d.links.map((l) => `[[${l}]]`), + d.links.length > 0, + ), + pinned: opt(true, d.pinned), + role: opt(d.role, caseStudy && !!d.role), + employer: opt(d.employer, caseStudy && !!d.employer), + period: opt(d.period, caseStudy && !!d.period), + }; + for (const k of Object.keys(fields)) if (fields[k] === undefined) delete fields[k]; + return fields; +} + +const imageSrc = (name: string) => `/attachments/${encodeURIComponent(name)}`; +const kb = (n: number) => (n >= 1_000_000 ? `${(n / 1_000_000).toFixed(1)} MB` : `${Math.max(1, Math.round(n / 1000))} KB`); +const isImage = (name: string) => /\.(png|jpe?g|webp|gif|avif|svg)$/i.test(name); + +// ------------------------------------------------------------ posts list + +export function postsList(posts: Summary[]): Html { + const sorted = [...posts].sort((a, b) => Number(a.publish) - Number(b.publish) || b.acceptedAt.localeCompare(a.acceptedAt)); + return html`

Posts

Write a post
+

Every blog post, drafts first. A post saved here is a note in the vault's Posts folder, so you can also finish it in Obsidian.

+${sorted.length + ? html` + +${sorted.map( + (p) => html` + + + + +`, + )}
PostStateChanged
${p.title}${p.publish ? html`Live` : html`Draft`}${when(p.acceptedAt)}Note and history
` + : html`

No posts yet.

`}`; +} + +// ------------------------------------------------------------ editor + +export function postEditor(d: PostDraft, opts: { images: Attachment[]; notes: string[]; showPreview?: boolean }): Html { + const images = opts.images.filter((a) => isImage(a.name)); + const linkRows = [...d.links, "", "", ""].slice(0, Math.max(3, d.links.length + 1)); + return html`

${d.path ? html`Edit post` : html`Write a post`}

+

${d.path + ? html`${d.publish ? html`Live` : html`Draft`} Saved as ${d.path}.` + : html`Write in Markdown. Preview it, save it as a draft, or publish it to the Blog.`}

+
+ ${d.path ? html`` : ""} + ${d.publish ? html`` : ""} +
+
+ + + ${d.path ? html`

The title is the note's file name; rename it in Obsidian.

` : ""} +
+
+
+
+
+ + + + + + +

They are saved to the vault's Posts images and added to the end of the post; move the lines where you want them.

+
+
+
+

Cover image

+ ${d.cover ? html`` : ""} + + + + +
+
+

Pages it is about

+

Library items, crafts, makes, games: the site links the post from each page and back.

+ ${linkRows.map((l, i) => html``)} + ${opts.notes.map((n) => html` +
+
+ +
+ Case study details + + + +
+
+
+ + + +
+
+
+
+${opts.showPreview + ? html`

Preview

+
+ ${d.cover ? html`` : ""} +

${d.topic} · ${d.date}

+

${d.title || "Untitled"}

+ ${d.summary ? html`

${d.summary}

` : ""} + ${preview(d.body)} +
` + : ""} +${imageStrip(images)}`; +} + +/** The newest vault images under the editor, each with its embed line to copy. */ +function imageStrip(images: Attachment[]): Html { + if (!images.length) return html``; + return html`

Images in the vault

+

Copy a line into the post to show that image. Manage images

+
    ${images.slice(0, 24).map( + (a) => html`
    • `, + )}
`; +} + +// ------------------------------------------------------------ images + +export function imagesPage(list: Attachment[], folder: string): Html { + const folders = [...new Set(list.map((a) => a.folder))].sort((a, b) => a.localeCompare(b)); + const shown = folder ? list.filter((a) => a.folder === folder) : list; + return html`

Images

+

Everything in the vault's _attachments, newest first. Images added here land in the vault, so Obsidian shows them too.

+
+

Add images

+
+
+
+
+

PNG, JPEG, WebP, GIF or AVIF, up to 15 MB each. Names are made lowercase with hyphens, and a name already in the vault gets a number.

+
+
+ +${shown.length + ? html`
    ${shown.map( + (a) => html`
  • + ${isImage(a.name) ? html`` : html`
    ${a.name.split(".").pop()}
    `} +
    + ${a.name} + ${a.folder || "Top level"} · ${kb(a.size)} · ${when(a.modified)} + + ${a.usedBy.length + ? html`Used by ${a.usedBy.map((u, i) => html`${i ? ", " : ""}${u.title}`)}` + : html`
    Not used by any note.
    `} +
    +
    • `, + )}
` + : html`

No images here yet.

`}`; +} diff --git a/services/admin/src/server.ts b/services/admin/src/server.ts index e101aad..139ba9a 100644 --- a/services/admin/src/server.ts +++ b/services/admin/src/server.ts @@ -16,15 +16,21 @@ import { html, qs, type Html } from "./html.ts"; import { layout, type Flash } from "./layout.ts"; import * as pages from "./pages.ts"; import * as inbox from "./inbox.ts"; +import * as posts from "./posts.ts"; import { suggestionChange, suggestionsPanel } from "./suggestions.ts"; const css = readFileSync(new URL("../public/admin.css", import.meta.url), "utf8"); +const js = readFileSync(new URL("../public/admin.js", import.meta.url), "utf8"); + +/** The largest form with files: a few photos at a time. */ +const MAX_UPLOAD = 60_000_000; class Redirect { constructor(readonly to: string) {} } type Form = URLSearchParams; +type Upload = { field: string; name: string; bytes: Uint8Array }; type Page = { title: string; body: Html }; export function createAdminServer(api: ContentApi, opts: { now?: () => Date } = {}) { @@ -112,6 +118,19 @@ export function createAdminServer(api: ContentApi, opts: { now?: () => Date } = } case "/problems": return { title: "Problems", body: pages.problemsView(await api.problems()) }; + case "/posts": + return { title: "Posts", body: posts.postsList(await api.notes({ type: "post", limit: 1000 })) }; + case "/posts/new": + return editorPage(posts.emptyPost(today())); + case "/posts/edit": { + const note = await api.note(required(q, "path")); + if (note.type !== "post") return new Redirect(pages.noteHref(note.path)); + return editorPage(posts.draftFromNote(note)); + } + case "/images": { + const folder = q.get("folder") ?? ""; + return { title: "Images", body: posts.imagesPage(await api.attachments(), folder === "-" ? "" : folder) }; + } } if (path === "/inbox") { const show = q.get("show") ?? "open"; @@ -131,8 +150,53 @@ export function createAdminServer(api: ContentApi, opts: { now?: () => Date } = throw new ApiError(404, "There is no page here.", null); } - async function post(path: string, f: Form): Promise { + async function editorPage(d: posts.PostDraft, showPreview = false): Promise { + const [images, notes] = await Promise.all([api.attachments(), api.notes({ limit: 5000 })]); + const names = [...new Set(notes.filter((n) => n.type !== "post" && n.type !== "status").map((n) => n.title))].sort((a, b) => a.localeCompare(b)); + return { title: d.title || "Write a post", body: posts.postEditor(d, { images, notes: names, showPreview }) }; + } + + /** Save the post form: upload its images, then preview, save a draft or publish. */ + async function savePost(f: Form, files: Upload[]): Promise { + const d = posts.draftFromForm(f); + const cover = files.find((u) => u.field === "coverFile"); + if (cover) d.cover = await api.upload("Posts", cover.name, cover.bytes); + for (const u of files.filter((x) => x.field === "bodyImages")) { + const name = await api.upload("Posts", u.name, u.bytes); + d.body = `${d.body.trimEnd()}\n\n![[${name}]]\n`; + } + const action = f.get("action") ?? "draft"; + if (action === "preview") return editorPage(d, true); + if (!d.title) throw new ApiError(400, "A post needs a title", null); + const publish = action === "publish"; + const o = d.path + ? await api.apply({ op: "update", path: d.path, fields: posts.postFields(d, publish, true), body: d.body }) + : await api.apply({ op: "create", data: { type: "post", ...posts.postFields(d, publish, false) }, body: d.body }); + const saved = publish ? (d.publish ? "Saved. The live post is updated." : "Published. It is on the Blog now.") : d.publish ? "Taken off the site and saved as a draft." : "Draft saved."; + if (o.status === "rejected") { + // Keep what was typed: show the form again with the reasons. + const page = await editorPage(d); + return { ...page, body: html`${page.body}` }; + } + return after(posts.editHref(o.path), o, saved); + } + + async function post(path: string, f: Form, files: Upload[] = []): Promise { switch (path) { + case "/posts/save": + return savePost(f, files); + case "/images/upload": { + const folder = f.get("folder") || "Posts"; + const added: string[] = []; + for (const u of files.filter((x) => x.field === "files")) added.push(await api.upload(folder, u.name, u.bytes)); + if (!added.length) throw new ApiError(400, "Choose at least one image", null); + return new Redirect(`/images${qs({ folder, msg: `Added ${added.join(", ")}.` })}`); + } + case "/images/delete": { + const name = required(f, "name"); + await api.deleteAttachment(name); + return new Redirect(`/images${qs({ folder: f.get("folder") || undefined, msg: `Deleted ${name}.` })}`); + } case "/scan": { const r = await api.scan(); return new Redirect(`/${qs({ msg: `Scanned: ${r.changed} changed, ${r.held} held.` })}`); @@ -258,13 +322,17 @@ export function createAdminServer(api: ContentApi, opts: { now?: () => Date } = res.setHeader("referrer-policy", "same-origin"); res.setHeader( "content-security-policy", - "default-src 'self'; img-src 'self' data: https:; style-src 'self' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; script-src 'none'; form-action 'self'; frame-ancestors 'none'", + "default-src 'self'; img-src 'self' data: https:; style-src 'self' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; script-src 'self'; form-action 'self'; frame-ancestors 'none'", ); if (url.pathname === "/admin.css") { res.writeHead(200, { "content-type": "text/css; charset=utf-8", "cache-control": "max-age=300" }); return res.end(css); } + if (url.pathname === "/admin.js") { + res.writeHead(200, { "content-type": "text/javascript; charset=utf-8", "cache-control": "max-age=300" }); + return res.end(js); + } if (url.pathname === "/health") { res.writeHead(200, { "content-type": "application/json" }); return res.end('{"ok":true}'); @@ -296,10 +364,14 @@ export function createAdminServer(api: ContentApi, opts: { now?: () => Date } = if (method === "POST") { if (!sameOrigin(req)) return text(res, 403, "Form posts must come from the admin page itself."); - const form = new URLSearchParams(await readBody(req)); - const r = await post(url.pathname, form); - res.writeHead(303, { location: r.to }); - return res.end(); + const { form, files } = await readForm(req); + const r = await post(url.pathname, form, files); + if (r instanceof Redirect) { + res.writeHead(303, { location: r.to }); + return res.end(); + } + const held = await api.held().then((h) => h.length).catch(() => 0); + return page(res, 200, r, url, held); } if (method !== "GET") return text(res, 405, "Method not allowed"); @@ -392,15 +464,32 @@ function safeBack(referer: string | undefined): URL | null { } } -async function readBody(req: IncomingMessage): Promise { +async function readBody(req: IncomingMessage, max: number): Promise { const chunks: Buffer[] = []; let size = 0; for await (const c of req) { size += (c as Buffer).length; - if (size > 200_000) throw new ApiError(413, "The form is too large", null); + if (size > max) throw new ApiError(413, "The form is too large", null); chunks.push(c as Buffer); } - return Buffer.concat(chunks).toString("utf8"); + return Buffer.concat(chunks); +} + +/** A posted form: plain fields, and any chosen files when it was sent as multipart. */ +async function readForm(req: IncomingMessage): Promise<{ form: URLSearchParams; files: Upload[] }> { + const type = req.headers["content-type"] ?? ""; + if (!type.startsWith("multipart/form-data")) { + return { form: new URLSearchParams((await readBody(req, 200_000)).toString("utf8")), files: [] }; + } + const data = await new Request("http://admin/", { method: "POST", headers: { "content-type": type }, body: new Uint8Array(await readBody(req, MAX_UPLOAD)) }).formData(); + const form = new URLSearchParams(); + const files: Upload[] = []; + for (const [field, v] of data.entries()) { + if (typeof v === "string") form.append(field, v); + // An empty file input still posts a nameless, empty part. + else if (v.size > 0 && v.name) files.push({ field, name: v.name, bytes: new Uint8Array(await v.arrayBuffer()) }); + } + return { form, files }; } function text(res: ServerResponse, status: number, body: string) { diff --git a/services/admin/test/posts.test.ts b/services/admin/test/posts.test.ts new file mode 100644 index 0000000..c50293f --- /dev/null +++ b/services/admin/test/posts.test.ts @@ -0,0 +1,44 @@ +import { describe, expect, it } from "vitest"; +import { draftFromForm, postFields } from "../src/posts.ts"; + +const form = (pairs: [string, string][]) => new URLSearchParams(pairs); + +describe("post form", () => { + const d = draftFromForm( + form([ + ["title", " Pouring galaxy dice "], + ["date", "2026-10-12"], + ["topic", "Making"], + ["postType", "article"], + ["summary", "How the set came together."], + ["cover", "[[galaxy.jpg]]"], + ["links", "Resin"], + ["links", "[[Galaxy dice]]"], + ["links", ""], + ["role", "Ignored for articles"], + ["body", "Line one\r\nLine two"], + ]), + ); + + it("reads the form into a draft", () => { + expect(d).toMatchObject({ title: "Pouring galaxy dice", cover: "galaxy.jpg", links: ["Resin", "Galaxy dice"], body: "Line one\nLine two" }); + }); + + it("writes note fields, with links and the cover as wikilinks", () => { + expect(postFields(d, true, false)).toEqual({ + title: "Pouring galaxy dice", + date: "2026-10-12", + topic: "Making", + postType: "article", + summary: "How the set came together.", + publish: true, + cover: "[[galaxy.jpg]]", + links: ["[[Resin]]", "[[Galaxy dice]]"], + }); + }); + + it("clears emptied fields on an update", () => { + const f = postFields({ ...d, cover: "", links: [] }, false, true); + expect(f).toMatchObject({ cover: null, links: null, pinned: null, role: null, publish: false }); + }); +}); diff --git a/services/content/src/http.ts b/services/content/src/http.ts index fae292b..a0179d3 100644 --- a/services/content/src/http.ts +++ b/services/content/src/http.ts @@ -15,9 +15,12 @@ import type { Change, ContentService } from "./service.ts"; import type { Author, StoredNote } from "./store.ts"; import { handleSubmissions } from "./submissions.ts"; import { handleSuggestions } from "./suggestions.ts"; +import { uploadTypes } from "./vault.ts"; import { heldView, noteView, outcomeView, revisionView, summaryView } from "./views.ts"; const MAX_BODY = 1_000_000; +/** The largest image the admin page can add. */ +const MAX_IMAGE = 15_000_000; class HttpError extends Error { constructor(readonly status: number, message: string) { @@ -73,6 +76,15 @@ export function createHttpServer(service: ContentService, config: Pick (n && !n.removed && (n.publish || can.readDrafts(role)) ? n : null); + /** Every attachment with the notes that link or embed it. */ + function attachmentList() { + const notes = store.list({ limit: 100_000 }); + return service.vault.attachmentFiles().map((a) => ({ + ...a, + usedBy: notes.filter((n) => n.text.includes(a.name)).map((n) => ({ path: n.path, title: n.title, type: n.type })), + })); + } + async function route(req: IncomingMessage, res: ServerResponse) { const url = new URL(req.url ?? "/", "http://localhost"); const path = url.pathname; @@ -196,6 +208,11 @@ export function createHttpServer(service: ContentService, config: Pick a.name === body.data.name); + if (!one) throw new HttpError(404, "No such attachment"); + if (one.usedBy.length) { + throw new HttpError(409, `${one.name} is still used by ${one.usedBy.map((u) => u.title).join(", ")}`); + } + service.vault.removeAttachment(one.name); + return send(res, 200, { ok: true }); + } + if (path === "/api/scan") { need(can.review(role)); return send(res, 200, service.scan()); @@ -296,6 +341,36 @@ async function readJson(req: IncomingMessage): Promise { } } +async function readBytes(req: IncomingMessage, max: number): Promise { + let size = 0; + const chunks: Buffer[] = []; + for await (const chunk of req) { + size += (chunk as Buffer).length; + if (size > max) throw new HttpError(413, `Images can be up to ${Math.round(max / 1_000_000)} MB`); + chunks.push(chunk as Buffer); + } + return Buffer.concat(chunks); +} + +/** Whether the bytes start the way the extension says, so only images land in the vault. */ +function looksLike(ext: string, b: Buffer): boolean { + const at = (i: number, s: string) => b.subarray(i, i + s.length).toString("latin1") === s; + switch (ext) { + case ".png": + return at(0, "\x89PNG"); + case ".jpg": + case ".jpeg": + return b[0] === 0xff && b[1] === 0xd8 && b[2] === 0xff; + case ".gif": + return at(0, "GIF8"); + case ".webp": + return at(0, "RIFF") && at(8, "WEBP"); + case ".avif": + return at(4, "ftyp"); + } + return false; +} + function send(res: ServerResponse, status: number, body: unknown) { res.writeHead(status, { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" }); res.end(JSON.stringify(body)); diff --git a/services/content/src/vault.ts b/services/content/src/vault.ts index fbac3e8..4a2bbf9 100644 --- a/services/content/src/vault.ts +++ b/services/content/src/vault.ts @@ -2,7 +2,7 @@ * The Site folder on disk. Only the content service reads or writes it. */ import { createHash } from "node:crypto"; -import { existsSync, mkdirSync, readFileSync, readdirSync, renameSync, statSync, writeFileSync } from "node:fs"; +import { existsSync, mkdirSync, readFileSync, readdirSync, renameSync, statSync, unlinkSync, writeFileSync } from "node:fs"; import { basename, dirname, join, relative, sep } from "node:path"; export const hashText = (text: string) => createHash("sha256").update(text).digest("hex"); @@ -22,6 +22,42 @@ export function isNotePath(rel: string): boolean { return true; } +/** Image types the admin page may add to `_attachments`. SVG stays out: it can carry script. */ +export const uploadTypes: Record = { + ".png": "image/png", + ".jpg": "image/jpeg", + ".jpeg": "image/jpeg", + ".webp": "image/webp", + ".gif": "image/gif", + ".avif": "image/avif", +}; + +/** A safe attachment file name: lowercase words joined by hyphens, plus the extension. */ +export function attachmentName(original: string): string | null { + const m = /^(.*?)(\.[A-Za-z0-9]+)?$/.exec(basename(original.replace(/\\/g, "/"))); + const ext = (m?.[2] ?? "").toLowerCase(); + if (!uploadTypes[ext]) return null; + const stem = (m?.[1] ?? "") + .normalize("NFKD") + .replace(/[\u0300-\u036f]/g, "") + .toLowerCase() + .replace(/[^a-z0-9]+/g, "-") + .replace(/^-+|-+$/g, "") + .slice(0, 80); + return `${stem || "image"}${ext === ".jpeg" ? ".jpg" : ext}`; +} + +/** A folder under `_attachments`: one plain name like Posts or Pages. */ +const folderOk = (f: string) => /^[A-Za-z0-9][A-Za-z0-9 _-]{0,40}$/.test(f); + +export interface AttachmentFile { + name: string; + /** The folder under `_attachments`, or "" for its top level. */ + folder: string; + size: number; + modified: string; +} + export class Vault { constructor(readonly dir: string) {} @@ -77,6 +113,56 @@ export class Vault { return out; } + /** Every file in `_attachments` with its folder, size and time. */ + attachmentFiles(): AttachmentFile[] { + const root = join(this.dir, "_attachments"); + const out: AttachmentFile[] = []; + const walk = (d: string) => { + if (!existsSync(d)) return; + for (const e of readdirSync(d, { withFileTypes: true })) { + if (e.name.startsWith(".")) continue; + const full = join(d, e.name); + if (e.isDirectory()) walk(full); + else if (e.isFile()) { + const st = statSync(full); + const folder = relative(root, d).split(sep).join("/"); + out.push({ name: e.name, folder, size: st.size, modified: st.mtime.toISOString() }); + } + } + }; + walk(root); + return out.sort((a, b) => b.modified.localeCompare(a.modified) || a.name.localeCompare(b.name)); + } + + /** + * Add an image to `_attachments/`. Names are made safe, and a name + * already used anywhere in `_attachments` gets -2, -3 and so on, because + * Obsidian links attachments by file name alone. + */ + addAttachment(folder: string, original: string, bytes: Uint8Array): string { + if (!folderOk(folder)) throw new Error("Use a plain folder name, like Posts"); + const safe = attachmentName(original); + if (!safe) throw new Error(`Only ${Object.keys(uploadTypes).join(", ")} images can be added`); + const taken = new Set(this.listAttachments().map((n) => n.toLowerCase())); + const dot = safe.lastIndexOf("."); + let name = safe; + for (let i = 2; taken.has(name.toLowerCase()); i++) name = `${safe.slice(0, dot)}-${i}${safe.slice(dot)}`; + const full = join(this.dir, "_attachments", folder, name); + mkdirSync(dirname(full), { recursive: true }); + const tmp = join(dirname(full), `.${name}.${process.pid}.tmp`); + writeFileSync(tmp, bytes); + renameSync(tmp, full); + return name; + } + + /** Delete an attachment by file name. False when there is none. */ + removeAttachment(name: string): boolean { + const file = name.includes("/") || name.includes("\\") || name.includes("..") ? null : this.attachmentPath(name); + if (!file) return false; + unlinkSync(file); + return true; + } + /** Absolute path of an attachment by file name, for serving images. */ attachmentPath(name: string): string | null { const walk = (d: string): string | null => { diff --git a/services/content/test/http.test.ts b/services/content/test/http.test.ts index 3931aa2..8554081 100644 --- a/services/content/test/http.test.ts +++ b/services/content/test/http.test.ts @@ -77,6 +77,40 @@ describe("sync reports", () => { }); }); +describe("attachments", () => { + const png = Buffer.concat([Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]), Buffer.alloc(32)]); + const upload = (name: string, bytes: Buffer, token = T.admin) => + fetch(`${base}/api/attachments?folder=Posts&name=${encodeURIComponent(name)}`, { + method: "POST", + headers: { authorization: `Bearer ${token}`, "content-type": "application/octet-stream" }, + body: new Uint8Array(bytes), + }); + + it("adds an image under a safe, unused name", async () => { + const a = (await (await upload("My Photo!.PNG", png)).json()) as { name: string }; + const b = (await (await upload("my photo.png", png)).json()) as { name: string }; + expect(a.name).toBe("my-photo.png"); + expect(b.name).toBe("my-photo-2.png"); + expect((await get("/attachments/my-photo-2.png", T.reader)).status).toBe(200); + }); + + it("turns away other files and other roles", async () => { + expect((await upload("x.svg", Buffer.from(""))).status).toBe(400); + expect((await upload("x.png", Buffer.from("not a png"))).status).toBe(400); + expect((await upload("x.png", png, T.agent)).status).toBe(403); + expect((await get("/api/attachments", T.reader)).status).toBe(403); + }); + + it("lists images with the notes that use them, and deletes only unused ones", async () => { + await post_("/api/changes", T.admin, { op: "create", data: post("With a photo"), body: "![[my-photo.png]]" }); + const list = (await (await get("/api/attachments", T.admin)).json()) as { name: string; folder: string; usedBy: { title: string }[] }[]; + expect(list.find((a) => a.name === "my-photo.png")).toMatchObject({ folder: "Posts", usedBy: [{ title: "With a photo" }] }); + expect((await post_("/api/attachments/delete", T.admin, { name: "my-photo.png" })).status).toBe(409); + expect((await post_("/api/attachments/delete", T.admin, { name: "my-photo-2.png" })).status).toBe(200); + expect((await get("/attachments/my-photo-2.png", T.reader)).status).toBe(404); + }); +}); + describe("MCP server", () => { it("lets an agent search, post a status and draft a post, but not publish it", async () => { const client = new Client({ name: "test", version: "1.0.0" });