@commonpub/layer 0.21.9 → 0.21.11

package/components/blocks/BlockEmbedView.vue

@@ -1,21 +1,30 @@
 <script setup lang="ts">
 const props = defineProps<{ content: Record<string, unknown> }>();
 
-const url = computed(() => {
+// Translate common watch-page URLs into iframe-embeddable equivalents
+// so authors who paste a YouTube/Vimeo URL into the generic Embed block
+// don't end up with an iframe that the provider refuses to render
+// (X-Frame-Options / CSP frame-ancestors). Mirrors BlockVideoView.
+const embedUrl = computed(() => {
   const raw = (props.content.url as string) || '';
-  // Only allow http/https URLs — block javascript:, data:, etc.
-  if (raw && (raw.startsWith('https://') || raw.startsWith('http://'))) return raw;
+  if (!raw) return '';
+  const yt = raw.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{6,})/);
+  if (yt) return `https://www.youtube-nocookie.com/embed/${yt[1]}`;
+  const vimeo = raw.match(/vimeo\.com\/(\d+)/);
+  if (vimeo) return `https://player.vimeo.com/video/${vimeo[1]}`;
+  // Anything else: allow http(s) only (block javascript:, data:, etc.).
+  if (raw.startsWith('https://') || raw.startsWith('http://')) return raw;
   return '';
 });
 </script>
 
 <template>
-  <div v-if="url" class="cpub-block-embed">
+  <div v-if="embedUrl" class="cpub-block-embed">
     <div class="cpub-embed-label">
       <i class="fa-solid fa-globe"></i> Embed
     </div>
     <div class="cpub-embed-wrap">
-      <iframe :src="url" class="cpub-embed-iframe" frameborder="0" loading="lazy" title="Embedded content" />
+      <iframe :src="embedUrl" class="cpub-embed-iframe" frameborder="0" loading="lazy" title="Embedded content" />
     </div>
   </div>
 </template>

package/components/blocks/BlockVideoView.vue

@@ -7,8 +7,8 @@ const embedUrl = computed(() => {
   const u = url.value;
   if (!u) return '';
 
-  // YouTube — extract video ID and construct safe embed URL
-  const ytMatch = u.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]+)/);
+  // YouTube — handle watch + youtu.be + /embed/ + /v/ + /shorts/.
+  const ytMatch = u.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{6,})/);
   if (ytMatch) return `https://www.youtube-nocookie.com/embed/${ytMatch[1]}`;
 
   // Vimeo — extract video ID and construct safe embed URL

package/components/editors/ProjectEditor.vue

@@ -33,6 +33,13 @@ const blockTypes: BlockTypeGroup[] = [
       { type: 'downloads', label: 'Downloads', icon: 'fa-download', description: 'File attachments' },
     ],
   },
+  {
+    name: 'Media',
+    blocks: [
+      { type: 'video', label: 'Video', icon: 'fa-film', description: 'YouTube, Vimeo embed' },
+      { type: 'embed', label: 'Embed', icon: 'fa-globe', description: 'External embed (translates YouTube/Vimeo URLs)' },
+    ],
+  },
   {
     name: 'Rich',
     blocks: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.21.9",
+  "version": "0.21.11",
   "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/config": "0.13.0",
-    "@commonpub/docs": "0.6.3",
-    "@commonpub/explainer": "0.7.13",
     "@commonpub/auth": "0.6.0",
-    "@commonpub/learning": "0.5.2",
+    "@commonpub/docs": "0.6.3",
+    "@commonpub/protocol": "0.10.1",
     "@commonpub/schema": "0.16.0",
-    "@commonpub/protocol": "0.10.0",
-    "@commonpub/editor": "0.7.9",
-    "@commonpub/server": "2.54.0",
-    "@commonpub/ui": "0.8.5"
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/ui": "0.8.5",
+    "@commonpub/explainer": "0.7.15",
+    "@commonpub/config": "0.13.0",
+    "@commonpub/server": "2.54.2",
+    "@commonpub/editor": "0.7.10"
   },
   "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/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 };
+});