@commonpub/layer 0.21.8 → 0.21.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.21.8",
+  "version": "0.21.10",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,16 +50,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.6.0",
     "@commonpub/docs": "0.6.3",
+    "@commonpub/explainer": "0.7.14",
+    "@commonpub/editor": "0.7.10",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/schema": "0.16.0",
-    "@commonpub/editor": "0.7.9",
-    "@commonpub/protocol": "0.10.0",
+    "@commonpub/server": "2.54.1",
     "@commonpub/ui": "0.8.5",
-    "@commonpub/explainer": "0.7.13",
-    "@commonpub/server": "2.54.0",
-    "@commonpub/config": "0.13.0"
+    "@commonpub/config": "0.13.0",
+    "@commonpub/auth": "0.6.0",
+    "@commonpub/schema": "0.16.0",
+    "@commonpub/protocol": "0.10.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/admin/settings.vue

@@ -52,6 +52,29 @@ async function addSetting(): Promise<void> {
   newKey.value = '';
   newValue.value = '';
 }
+
+// Maintenance: rewrite stored DO Spaces origin asset URLs → CDN edge.
+const cdnBusy = ref(false);
+const cdnResult = ref<string>('');
+async function backfillCdn(dryRun: boolean): Promise<void> {
+  if (!dryRun && !confirm('Rewrite all stored Spaces asset URLs to the CDN host? This updates the database.')) return;
+  cdnBusy.value = true;
+  cdnResult.value = '';
+  try {
+    const r = await $fetch<{ dryRun: boolean; hosts: { origin: string; cdn: string }; wouldRewrite?: Record<string, number>; rewritten?: Record<string, number> }>(
+      `/api/admin/storage/backfill-cdn-urls${dryRun ? '?dryRun=1' : ''}`,
+      { method: 'POST' },
+    );
+    const counts = r.wouldRewrite ?? r.rewritten ?? {};
+    const total = Object.values(counts).reduce((a, b) => a + b, 0);
+    const nonZero = Object.entries(counts).filter(([, v]) => v > 0).map(([k, v]) => `${k}=${v}`).join(', ');
+    cdnResult.value = `${r.dryRun ? 'Would rewrite' : 'Rewrote'} ${total} URL(s) → ${r.hosts.cdn}${nonZero ? ` (${nonZero})` : ''}.`;
+  } catch (err: unknown) {
+    cdnResult.value = `Failed: ${err instanceof Error ? err.message : 'see server logs'}`;
+  } finally {
+    cdnBusy.value = false;
+  }
+}
 </script>
 
 <template>
@@ -111,6 +134,25 @@ async function addSetting(): Promise<void> {
     </div>
     </template>
     <p v-else class="admin-empty">No settings configured.</p>
+
+    <section class="cpub-maint">
+      <h2 class="cpub-maint-title">Maintenance</h2>
+      <div class="cpub-maint-row">
+        <div>
+          <strong>Spaces → CDN URL backfill</strong>
+          <p class="cpub-maint-desc">
+            Rewrite stored DigitalOcean Spaces origin asset URLs to the CDN
+            edge host. Only affects existing rows (new uploads already use
+            the configured host). Idempotent; preview first.
+          </p>
+        </div>
+        <div class="cpub-maint-actions">
+          <button class="cpub-btn cpub-btn-sm" :disabled="cdnBusy" @click="backfillCdn(true)">Preview</button>
+          <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="cdnBusy" @click="backfillCdn(false)">Apply</button>
+        </div>
+      </div>
+      <p v-if="cdnResult" class="cpub-maint-result">{{ cdnResult }}</p>
+    </section>
   </div>
 </template>
 
@@ -172,8 +214,44 @@ async function addSetting(): Promise<void> {
   padding: var(--space-8) 0;
 }
 
+.cpub-maint {
+  margin-top: var(--space-8);
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  padding: var(--space-4);
+}
+.cpub-maint-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--space-4);
+}
+.cpub-maint-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+.cpub-maint-desc {
+  color: var(--text-dim);
+  font-size: var(--text-sm);
+  margin-top: var(--space-1);
+  max-width: 52ch;
+}
+.cpub-maint-actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+.cpub-maint-result {
+  margin-top: var(--space-3);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--text);
+}
+
 @media (max-width: 768px) {
   .settings-row { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
   .settings-add { flex-direction: column; }
+  .cpub-maint-row { flex-direction: column; }
 }
 </style>

package/pages/u/[username]/[type]/[slug]/index.vue

@@ -40,10 +40,15 @@ const isOwner = computed(() => user.value?.id === content.value?.author?.id);
 
 // Estimate reading time (~200 words per minute)
 const readTime = computed(() => {
-  if (!content.value?.content) return undefined;
-  const blocks = content.value.content as BlockTuple[];
+  // Explainer document-format content is an object ({hero,sections,…}),
+  // not a BlockTuple[] — only blog/project store an array. Guard the
+  // for…of: iterating the object threw "not iterable" and 500'd SSR for
+  // every document-format explainer.
+  const raw = content.value?.content;
+  if (!Array.isArray(raw)) return undefined;
+  const blocks = raw as BlockTuple[];
   let words = 0;
-  for (const [type, data] of blocks) {
+  for (const [, data] of blocks) {
     // Extract text from any string field in the block data
     for (const val of Object.values(data)) {
       if (typeof val === 'string' && val.trim()) {

package/server/api/admin/storage/backfill-cdn-urls.post.ts

@@ -0,0 +1,91 @@
+/**
+ * Admin maintenance: rewrite stored DigitalOcean Spaces ORIGIN asset
+ * URLs to the CDN edge host.
+ *
+ * POST /api/admin/storage/backfill-cdn-urls        (apply)
+ * POST /api/admin/storage/backfill-cdn-urls?dryRun=1  (counts only)
+ *
+ * WHY: object public URLs are frozen into the DB at upload time
+ * (files.public_url, content_items.cover_image_url,
+ * learning_paths.cover_image_url). Enabling S3_CDN only affects NEW
+ * uploads — existing rows keep the origin host until rewritten. This
+ * is the admin-UI equivalent of a one-off backfill, idempotent
+ * (re-running once rewritten is a no-op).
+ *
+ * Requires admin. Derives the origin→CDN host pair from the instance's
+ * own S3 env, so it can only ever rewrite THIS instance's Spaces host.
+ */
+import { contentItems, contests, files, hubs, learningPaths, products, users } from '@commonpub/schema';
+import { sql } from 'drizzle-orm';
+
+function spacesHosts(): { origin: string; cdn: string } | null {
+  const bucket = process.env.S3_BUCKET;
+  const endpoint = process.env.S3_ENDPOINT ?? '';
+  const region = process.env.S3_REGION;
+  if (!bucket) return null;
+  const m = endpoint.match(/^https?:\/\/([a-z0-9-]+)\.digitaloceanspaces\.com\/?$/i);
+  if (!m) return null;
+  const reg = region || m[1]!;
+  return {
+    origin: `${bucket}.${reg}.digitaloceanspaces.com`,
+    cdn: `${bucket}.${reg}.cdn.digitaloceanspaces.com`,
+  };
+}
+
+export default defineEventHandler(async (event) => {
+  requireAuth(event);
+  requireAdmin(event);
+
+  const hosts = spacesHosts();
+  if (!hosts) {
+    throw createError({
+      statusCode: 400,
+      statusMessage:
+        'This instance is not configured for DigitalOcean Spaces (need S3_BUCKET + a *.digitaloceanspaces.com S3_ENDPOINT).',
+    });
+  }
+  // Guard against a no-op host pair.
+  if (hosts.origin === hosts.cdn) {
+    throw createError({ statusCode: 400, statusMessage: 'Origin and CDN host are identical.' });
+  }
+
+  const dryRun = getQuery(event).dryRun === '1';
+  const db = useDB();
+  const like = `%${hosts.origin}%`;
+
+  // Every LOCAL column that the upload pipeline writes a Spaces public
+  // URL into (avatar/banner/icon/cover/banner/contest-banner/product-
+  // image + files + learning cover). Federation tables hold REMOTE
+  // URLs and are deliberately excluded so we never rewrite another host.
+  const n = async <T>(q: Promise<{ n: number }[]>): Promise<number> => (await q)[0]?.n ?? 0;
+
+  const counts = {
+    'files.publicUrl': await n(db.select({ n: sql<number>`count(*)::int` }).from(files).where(sql`${files.publicUrl} LIKE ${like}`)),
+    'contentItems.coverImageUrl': await n(db.select({ n: sql<number>`count(*)::int` }).from(contentItems).where(sql`${contentItems.coverImageUrl} LIKE ${like}`)),
+    'contentItems.bannerUrl': await n(db.select({ n: sql<number>`count(*)::int` }).from(contentItems).where(sql`${contentItems.bannerUrl} LIKE ${like}`)),
+    'learningPaths.coverImageUrl': await n(db.select({ n: sql<number>`count(*)::int` }).from(learningPaths).where(sql`${learningPaths.coverImageUrl} LIKE ${like}`)),
+    'users.avatarUrl': await n(db.select({ n: sql<number>`count(*)::int` }).from(users).where(sql`${users.avatarUrl} LIKE ${like}`)),
+    'users.bannerUrl': await n(db.select({ n: sql<number>`count(*)::int` }).from(users).where(sql`${users.bannerUrl} LIKE ${like}`)),
+    'hubs.iconUrl': await n(db.select({ n: sql<number>`count(*)::int` }).from(hubs).where(sql`${hubs.iconUrl} LIKE ${like}`)),
+    'hubs.bannerUrl': await n(db.select({ n: sql<number>`count(*)::int` }).from(hubs).where(sql`${hubs.bannerUrl} LIKE ${like}`)),
+    'contests.bannerUrl': await n(db.select({ n: sql<number>`count(*)::int` }).from(contests).where(sql`${contests.bannerUrl} LIKE ${like}`)),
+    'products.imageUrl': await n(db.select({ n: sql<number>`count(*)::int` }).from(products).where(sql`${products.imageUrl} LIKE ${like}`)),
+  };
+
+  if (dryRun) {
+    return { success: true, dryRun: true, hosts, wouldRewrite: counts };
+  }
+
+  await db.update(files).set({ publicUrl: sql`replace(${files.publicUrl}, ${hosts.origin}, ${hosts.cdn})` }).where(sql`${files.publicUrl} LIKE ${like}`);
+  await db.update(contentItems).set({ coverImageUrl: sql`replace(${contentItems.coverImageUrl}, ${hosts.origin}, ${hosts.cdn})` }).where(sql`${contentItems.coverImageUrl} LIKE ${like}`);
+  await db.update(contentItems).set({ bannerUrl: sql`replace(${contentItems.bannerUrl}, ${hosts.origin}, ${hosts.cdn})` }).where(sql`${contentItems.bannerUrl} LIKE ${like}`);
+  await db.update(learningPaths).set({ coverImageUrl: sql`replace(${learningPaths.coverImageUrl}, ${hosts.origin}, ${hosts.cdn})` }).where(sql`${learningPaths.coverImageUrl} LIKE ${like}`);
+  await db.update(users).set({ avatarUrl: sql`replace(${users.avatarUrl}, ${hosts.origin}, ${hosts.cdn})` }).where(sql`${users.avatarUrl} LIKE ${like}`);
+  await db.update(users).set({ bannerUrl: sql`replace(${users.bannerUrl}, ${hosts.origin}, ${hosts.cdn})` }).where(sql`${users.bannerUrl} LIKE ${like}`);
+  await db.update(hubs).set({ iconUrl: sql`replace(${hubs.iconUrl}, ${hosts.origin}, ${hosts.cdn})` }).where(sql`${hubs.iconUrl} LIKE ${like}`);
+  await db.update(hubs).set({ bannerUrl: sql`replace(${hubs.bannerUrl}, ${hosts.origin}, ${hosts.cdn})` }).where(sql`${hubs.bannerUrl} LIKE ${like}`);
+  await db.update(contests).set({ bannerUrl: sql`replace(${contests.bannerUrl}, ${hosts.origin}, ${hosts.cdn})` }).where(sql`${contests.bannerUrl} LIKE ${like}`);
+  await db.update(products).set({ imageUrl: sql`replace(${products.imageUrl}, ${hosts.origin}, ${hosts.cdn})` }).where(sql`${products.imageUrl} LIKE ${like}`);
+
+  return { success: true, dryRun: false, hosts, rewritten: counts };
+});