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) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
This commit is contained in:
Claude
2026-10-12 03:40:59 +00:00
parent 151bed230a
commit a9fb5b3e85
12 changed files with 694 additions and 12 deletions
+33
View File
@@ -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; }