@a83/orbiter-admin 0.3.11 → 0.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a83/orbiter-admin",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "Standalone admin server for Orbiter CMS",
   "type": "module",
   "main": "./src/server.js",
@@ -28,6 +28,7 @@
   "dependencies": {
     "@a83/orbiter-core": "^0.3.2",
     "@hono/node-server": "^1.14.4",
-    "hono": "^4.7.11"
+    "hono": "^4.7.11",
+    "sharp": "^0.34.5"
   }
 }

package/public/editor.html

@@ -133,6 +133,21 @@
     .media-drop-zone img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
     .media-drop-label { font-size:9px; color:var(--muted); letter-spacing:.08em; position:relative; z-index:1; }
     .media-drop-zone.has-image .media-drop-label { display:none; }
+    /* Comments */
+    .comment-item { padding:8px 0; border-bottom:1px solid var(--line2); }
+    .comment-item:last-child { border-bottom:none; }
+    .comment-item.resolved { opacity:.45; }
+    .comment-meta { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
+    .comment-user { font-size:10px; font-family:var(--mono); color:var(--accent); }
+    .comment-date { font-size:10px; color:var(--muted); margin-left:auto; }
+    .comment-body { font-size:12px; color:var(--text); line-height:1.5; word-break:break-word; }
+    .comment-actions { display:flex; gap:6px; margin-top:4px; }
+    .comment-actions button { font-size:9px; font-family:var(--mono); background:none; border:none; color:var(--muted); cursor:pointer; padding:0; }
+    .comment-actions button:hover { color:var(--text); }
+    .comment-input { width:100%; background:var(--bg0); border:1px solid var(--line); padding:6px 8px; color:var(--heading); font-family:var(--mono); font-size:11px; outline:none; resize:vertical; transition:border-color .15s; border-radius:var(--radius); box-sizing:border-box; min-height:56px; }
+    .comment-input:focus { border-color:var(--accent); }
+    .comment-submit { margin-top:4px; width:100%; padding:6px; background:var(--accent-bg); border:1px solid var(--accent); color:var(--accent); font-family:var(--mono); font-size:10px; cursor:pointer; border-radius:var(--radius); transition:background .12s; }
+    .comment-submit:hover { background:var(--accent); color:var(--bg0); }
     .weekday-grid { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
     .wd-btn { height:26px; min-width:32px; padding:0 4px; background:var(--bg0); border:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:9px; cursor:pointer; transition:all .1s; border-radius:2px; }
     .wd-btn.active { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); }
@@ -486,12 +501,13 @@
     document.getElementById('collection-id-display').textContent = COLLECTION;
 
     // Load collection schema + entry
-    const [colData, entryData, versionsData, activityData, mediaData] = await Promise.all([
+    const [colData, entryData, versionsData, activityData, mediaData, commentsData] = await Promise.all([
       fetch(`/api/collections/${COLLECTION}`,{credentials:'include'}).then(r=>r.ok?r.json():null),
       IS_NEW ? null : fetch(`/api/collections/${COLLECTION}/entries/${SLUG}`,{credentials:'include'}).then(r=>r.ok?r.json():null),
       IS_NEW ? [] : fetch(`/api/collections/${COLLECTION}/entries/${SLUG}/versions`,{credentials:'include'}).then(r=>r.ok?r.json():[]).catch(()=>[]),
       IS_NEW ? [] : fetch(`/api/collections/${COLLECTION}/entries/${SLUG}/activity`,{credentials:'include'}).then(r=>r.ok?r.json():[]).catch(()=>[]),
       fetch('/api/media',{credentials:'include'}).then(r=>r.json()).catch(()=>[]),
+      IS_NEW ? [] : fetch(`/api/collections/${COLLECTION}/entries/${SLUG}/comments`,{credentials:'include'}).then(r=>r.ok?r.json():[]).catch(()=>[]),
     ]);
 
     if (!colData) { location.replace('/collections.html'); }
@@ -691,6 +707,24 @@
         </div>
         ${versionsData.length ? `<div class="meta-section"><div class="meta-label">History</div>${versHtml}</div>` : ''}
         ${activityData.length ? `<div class="meta-section"><div class="meta-label">Activity</div>${actHtml}</div>` : ''}
+        ${IS_NEW ? '' : `<div class="meta-section" id="comments-section">
+          <div class="meta-label">Comments <span id="comment-count" style="color:var(--muted)">${commentsData.length ? '(' + commentsData.length + ')' : ''}</span></div>
+          <div id="comments-list">${commentsData.map(cm=>`
+            <div class="comment-item${cm.resolved?` resolved`:''}" data-cid="${cm.id}">
+              <div class="comment-meta">
+                <span class="comment-user">${escHtml(cm.username)}</span>
+                <span class="comment-date">${new Date(cm.created_at).toLocaleDateString()}</span>
+              </div>
+              <div class="comment-body">${escHtml(cm.body)}</div>
+              <div class="comment-actions">
+                <button class="cm-resolve-btn" data-cid="${cm.id}" data-resolved="${cm.resolved}">${cm.resolved?'Unresolve':'Resolve'}</button>
+                <button class="cm-delete-btn" data-cid="${cm.id}">Delete</button>
+              </div>
+            </div>
+          `).join('')}</div>
+          <textarea class="comment-input" id="comment-input" placeholder="Add a comment…" rows="2"></textarea>
+          <button class="comment-submit" id="comment-submit">Post comment</button>
+        </div>`}
       `;
 
       // Wire up weekday toggles
@@ -770,6 +804,47 @@
         });
       });
 
+      // Comments
+      if (!IS_NEW) {
+        const targetSlug = currentSlug || SLUG;
+
+        document.getElementById('comment-submit')?.addEventListener('click', async () => {
+          const inp  = document.getElementById('comment-input');
+          const body = inp.value.trim();
+          if (!body) return;
+          const res = await fetch(`/api/collections/${COLLECTION}/entries/${targetSlug}/comments`, {
+            method: 'POST', credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ body }),
+          });
+          if (res.ok) { inp.value = ''; location.reload(); }
+        });
+
+        panel.querySelectorAll('.cm-resolve-btn').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            const resolved = btn.dataset.resolved === '0' || btn.dataset.resolved === 'false' ? true : false;
+            await fetch(`/api/comments/${btn.dataset.cid}/resolve`, {
+              method: 'PATCH', credentials: 'include',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ resolved }),
+            });
+            const item = btn.closest('.comment-item');
+            if (item) {
+              item.classList.toggle('resolved', resolved);
+              btn.textContent = resolved ? 'Unresolve' : 'Resolve';
+              btn.dataset.resolved = resolved ? '1' : '0';
+            }
+          });
+        });
+
+        panel.querySelectorAll('.cm-delete-btn').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            await fetch(`/api/comments/${btn.dataset.cid}`, { method: 'DELETE', credentials: 'include' });
+            btn.closest('.comment-item')?.remove();
+          });
+        });
+      }
+
       // Slug input → slug preview
       document.getElementById('slug-input').addEventListener('input', e=>{
         e.target.dataset.manual='1';

package/public/settings.html

@@ -437,6 +437,18 @@
           </div>
         </div>
 
+        <div class="settings-group">
+          <div class="group-header">Image optimization</div>
+          <div class="setting-row">
+            <div><div class="setting-label">Max width</div><div class="setting-desc">Images wider than this are resized on upload (px). Leave blank to disable.</div></div>
+            <input class="input" name="media.img_max_width" type="number" min="400" max="8000" step="100" value="${get('media.img_max_width')||'2400'}" placeholder="2400" />
+          </div>
+          <div class="setting-row">
+            <div><div class="setting-label">Quality</div><div class="setting-desc">JPEG / WebP / AVIF compression quality (1–100)</div></div>
+            <input class="input" name="media.img_quality" type="number" min="1" max="100" value="${get('media.img_quality')||'85'}" placeholder="85" />
+          </div>
+        </div>
+
         <div class="save-row">
           <button type="submit" class="btn-save">Save settings</button>
         </div>

package/src/routes/comments.js

@@ -0,0 +1,48 @@
+import { Hono } from 'hono';
+import { openPod } from '@a83/orbiter-core';
+
+export const commentRoutes = new Hono();
+
+// GET /api/collections/:id/entries/:slug/comments
+commentRoutes.get('/:collectionId/entries/:slug/comments', (c) => {
+  const { collectionId, slug } = c.req.param();
+  const db    = openPod(c.get('podPath'));
+  const entry = db.db.prepare('SELECT id FROM _entries WHERE collection_id = ? AND slug = ?').get(collectionId, slug);
+  if (!entry) { db.close(); return c.json({ error: 'Not found' }, 404); }
+  const comments = db.getComments(entry.id);
+  db.close();
+  return c.json(comments);
+});
+
+// POST /api/collections/:id/entries/:slug/comments
+commentRoutes.post('/:collectionId/entries/:slug/comments', async (c) => {
+  const { collectionId, slug } = c.req.param();
+  const { body } = await c.req.json();
+  if (!body?.trim()) return c.json({ error: 'body required' }, 400);
+  const db    = openPod(c.get('podPath'));
+  const entry = db.db.prepare('SELECT id FROM _entries WHERE collection_id = ? AND slug = ?').get(collectionId, slug);
+  if (!entry) { db.close(); return c.json({ error: 'Not found' }, 404); }
+  const username = c.get('user')?.username ?? 'unknown';
+  const id = db.createComment(entry.id, username, body.trim());
+  db.close();
+  return c.json({ ok: true, id }, 201);
+});
+
+// PATCH /api/comments/:id/resolve
+commentRoutes.patch('/comments/:id/resolve', async (c) => {
+  const { id } = c.req.param();
+  const { resolved } = await c.req.json();
+  const db = openPod(c.get('podPath'));
+  db.resolveComment(id, resolved !== false);
+  db.close();
+  return c.json({ ok: true });
+});
+
+// DELETE /api/comments/:id
+commentRoutes.delete('/comments/:id', (c) => {
+  const { id } = c.req.param();
+  const db = openPod(c.get('podPath'));
+  db.deleteComment(id);
+  db.close();
+  return c.json({ ok: true });
+});

package/src/routes/media.js

@@ -1,6 +1,27 @@
 import { Hono } from 'hono';
 import { openPod, getMediaBackend } from '@a83/orbiter-core';
 import { randomUUID } from 'node:crypto';
+import sharp from 'sharp';
+
+const IMAGE_TYPES = new Set(['image/jpeg', 'image/png', 'image/webp', 'image/avif', 'image/tiff']);
+
+async function optimizeImage(buffer, mimeType, db) {
+  if (!IMAGE_TYPES.has(mimeType)) return buffer;
+  const maxWidth = parseInt(db.getMeta('media.img_max_width') ?? '2400', 10);
+  const quality  = parseInt(db.getMeta('media.img_quality')   ?? '85',   10);
+  try {
+    const img  = sharp(buffer);
+    const meta = await img.metadata();
+    if (meta.width && meta.width > maxWidth) img.resize({ width: maxWidth, withoutEnlargement: true });
+    if (mimeType === 'image/jpeg') return await img.jpeg({ quality, mozjpeg: true }).toBuffer();
+    if (mimeType === 'image/png')  return await img.png({ quality }).toBuffer();
+    if (mimeType === 'image/webp') return await img.webp({ quality }).toBuffer();
+    if (mimeType === 'image/avif') return await img.avif({ quality }).toBuffer();
+    return await img.toBuffer();
+  } catch {
+    return buffer;
+  }
+}
 
 export const mediaRoutes = new Hono();
 
@@ -58,11 +79,12 @@ mediaRoutes.post('/', async (c) => {
 
   if (!file || typeof file === 'string') return c.json({ error: 'No file provided' }, 400);
 
-  const buffer  = Buffer.from(await file.arrayBuffer());
-  const id      = randomUUID();
-  const db      = openPod(c.get('podPath'));
+  const rawBuffer = Buffer.from(await file.arrayBuffer());
+  const id        = randomUUID();
+  const db        = openPod(c.get('podPath'));
 
   try {
+    const buffer  = await optimizeImage(rawBuffer, file.type, db);
     const backend = getMediaBackend(db);
     await backend.upload(id, file.name, file.type, buffer.byteLength, buffer, alt, folder);
     const item    = db.getMediaItem(id);
@@ -99,13 +121,14 @@ mediaRoutes.post('/import-url', async (c) => {
   }
   if (!resp.ok) return c.json({ error: `Remote returned ${resp.status}` }, 400);
 
-  const mime     = (resp.headers.get('content-type') || 'application/octet-stream').split(';')[0].trim();
-  const buffer   = Buffer.from(await resp.arrayBuffer());
-  const filename = url.split('/').pop()?.split('?')[0] || 'imported';
-  const id       = randomUUID();
-  const db       = openPod(c.get('podPath'));
+  const mime      = (resp.headers.get('content-type') || 'application/octet-stream').split(';')[0].trim();
+  const rawBuffer = Buffer.from(await resp.arrayBuffer());
+  const filename  = url.split('/').pop()?.split('?')[0] || 'imported';
+  const id        = randomUUID();
+  const db        = openPod(c.get('podPath'));
 
   try {
+    const buffer  = await optimizeImage(rawBuffer, mime, db);
     const backend = getMediaBackend(db);
     await backend.upload(id, filename, mime, buffer.byteLength, buffer, alt ?? null, folder ?? '');
     const item    = db.getMediaItem(id);

package/src/routes/meta.js

@@ -10,6 +10,7 @@ const ALLOWED_KEYS = [
   'media.backend', 'media.local_path',
   'media.github_token', 'media.github_repo', 'media.github_branch', 'media.github_dir',
   'media.s3_bucket', 'media.s3_region', 'media.s3_endpoint', 'media.s3_access_key', 'media.s3_secret_key', 'media.s3_public_url',
+  'media.img_max_width', 'media.img_quality',
   'api.enabled', 'api.token', 'preview.token',
   'dashboard.notes', 'dashboard.todos',
   'ui.theme',

package/src/server.js

@@ -22,6 +22,7 @@ import { searchRoutes }     from './routes/search.js';
 import { githubRoutes }     from './routes/github.js';
 import { infoRoutes }       from './routes/info.js';
 import { importRoutes }     from './routes/import.js';
+import { commentRoutes }    from './routes/comments.js';
 import { requireAuth }      from './middleware/auth.js';
 
 const { version: adminVersion } = JSON.parse(
@@ -71,6 +72,8 @@ export function createApp(podPath) {
   api.route('/github',       githubRoutes);
   api.route('/info',         infoRoutes);
   api.route('/import',       importRoutes);
+  api.route('/collections',  commentRoutes);
+  api.route('/',             commentRoutes);
 
   app.route('/api', api);