@commonpub/layer 0.5.3 → 0.5.5

package/components/editors/ProjectEditor.vue

@@ -47,7 +47,7 @@ const blockTypes: BlockTypeGroup[] = [
 ];
 
 const openSections = ref<Record<string, boolean>>({
-  meta: true, tags: true, visibility: true, cover: false, checklist: true,
+  meta: true, tags: true, visibility: true, cover: false, seo: false, checklist: true,
 });
 function toggleSection(key: string): void {
   openSections.value[key] = !openSections.value[key];
@@ -284,6 +284,14 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
           </div>
         </EditorsEditorSection>
 
+        <EditorsEditorSection title="SEO" icon="fa-magnifying-glass" :open="openSections.seo" @toggle="toggleSection('seo')">
+          <div class="cpub-pe-field">
+            <label class="cpub-pe-flabel">Meta Description</label>
+            <textarea class="cpub-pe-textarea" rows="3" :value="metadata.seoDescription as string" placeholder="Search engine description (recommended 50-160 chars)" @input="updateMeta('seoDescription', ($event.target as HTMLTextAreaElement).value)" />
+            <span class="cpub-pe-hint">{{ ((metadata.seoDescription as string) || '').length }}/160</span>
+          </div>
+        </EditorsEditorSection>
+
         <EditorsEditorSection title="Checklist" icon="fa-circle-check" :open="openSections.checklist" @toggle="toggleSection('checklist')">
           <div class="cpub-pe-checklist">
             <div v-for="item in checklist" :key="item.label" class="cpub-pe-check-item" :class="{ pass: item.pass }">

package/components/views/ExplainerView.vue

@@ -165,7 +165,18 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
 
 <template>
   <!-- Scroll viewer for ExplainerDocument format -->
-  <ScrollViewer v-if="isDocumentFormat && explainerDoc" :document="explainerDoc" />
+  <div v-if="isDocumentFormat && explainerDoc" class="cpub-scroll-viewer-wrap">
+    <ScrollViewer :document="explainerDoc" />
+    <NuxtLink
+      v-if="isOwner"
+      :to="`/${content.type}/${content.slug}/edit`"
+      class="cpub-scroll-edit-btn"
+      title="Edit explainer"
+      aria-label="Edit explainer"
+    >
+      <i class="fa-solid fa-pen"></i>
+    </NuxtLink>
+  </div>
 
   <!-- Block-based viewer fallback -->
   <div v-else class="cpub-explainer-view">
@@ -332,6 +343,30 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
 </template>
 
 <style scoped>
+/* ── SCROLL VIEWER WRAPPER + EDIT BUTTON ── */
+.cpub-scroll-viewer-wrap { position: relative; }
+.cpub-scroll-edit-btn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface, #1a1a1a);
+  border: 1px solid var(--border, #333);
+  color: var(--text-dim, #999);
+  font-size: 14px;
+  text-decoration: none;
+  z-index: 100;
+  transition: background 0.15s, color 0.15s;
+}
+.cpub-scroll-edit-btn:hover {
+  background: var(--accent-bg, #1a2a4a);
+  color: var(--accent, #5b9cf6);
+}
+
 /* ── PROGRESS BAR ── */
 .cpub-progress-line {
   position: fixed;

package/nuxt.config.ts

@@ -47,6 +47,7 @@ export default defineNuxtConfig({
     uiTheme('layouts.css'),
     uiTheme('forms.css'),
     uiTheme('editor-panels.css'),
+    '@commonpub/explainer/vue/theme/explainer-themes.css',
   ],
   runtimeConfig: {
     databaseUrl: '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "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.5.0",
     "@commonpub/config": "0.8.0",
     "@commonpub/editor": "0.5.0",
-    "@commonpub/explainer": "0.6.3",
+    "@commonpub/explainer": "0.7.0",
     "@commonpub/docs": "0.6.0",
+    "@commonpub/auth": "0.5.0",
     "@commonpub/learning": "0.5.0",
-    "@commonpub/schema": "0.8.16",
     "@commonpub/protocol": "0.9.6",
-    "@commonpub/server": "2.24.0",
-    "@commonpub/ui": "0.8.4"
+    "@commonpub/server": "2.25.0",
+    "@commonpub/ui": "0.8.4",
+    "@commonpub/schema": "0.8.17"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/[type]/[slug]/edit.vue

@@ -386,7 +386,7 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
       <div class="cpub-mode-tabs">
         <button :class="['cpub-mode-tab', { active: mode === 'write' }]" @click="mode = 'write'">Write</button>
         <button :class="['cpub-mode-tab', { active: mode === 'preview' }]" @click="enterPreview">Preview</button>
-        <button :class="['cpub-mode-tab', { active: mode === 'code' }]" @click="mode = 'code'">Code</button>
+        <button v-if="!isExplainer" :class="['cpub-mode-tab', { active: mode === 'code' }]" @click="mode = 'code'">Code</button>
       </div>
       <div class="cpub-topbar-spacer" />
       <div class="cpub-topbar-actions">
@@ -466,7 +466,7 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
             slug: (metadata.slug as string) || 'preview',
             subtitle: null,
             description: (metadata.description as string) || null,
-            content: blockEditor.toBlockTuples(),
+            content: isExplainer ? (explainerDocLatest ?? explainerDocInit) : blockEditor.toBlockTuples(),
             coverImageUrl: (metadata.coverImageUrl as string) || null,
             category: null,
             difficulty: (metadata.difficulty as string) || null,

package/pages/docs/[siteSlug]/[...pagePath].vue

@@ -9,9 +9,17 @@ const pagePath = computed(() => {
   return Array.isArray(p) ? p[p.length - 1] : p;
 });
 
+const selectedVersion = ref('');
+
 const { data: site } = useLazyFetch<{ id: string; name: string; slug: string; description: string; ownerId: string; versions: Array<{ id: string; label: string; slug: string; version: string; isDefault: boolean }> }>(() => `/api/docs/${siteSlug.value}`);
-const { data: nav } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => `/api/docs/${siteSlug.value}/nav`);
-const { data: pages } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => `/api/docs/${siteSlug.value}/pages`);
+const { data: nav, refresh: refreshNav } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => {
+  const base = `/api/docs/${siteSlug.value}/nav`;
+  return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
+});
+const { data: pages } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => {
+  const base = `/api/docs/${siteSlug.value}/pages`;
+  return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
+});
 
 // Fetch the rendered page (server-side markdown rendering or block content)
 interface RenderedPage {
@@ -37,7 +45,10 @@ const blockContent = computed<BlockTuple[]>(() => {
 });
 
 const { data: renderedPage, pending: pagePending, error: pageError, refresh: refreshPage } = useLazyFetch<RenderedPage>(
-  () => `/api/docs/${siteSlug.value}/pages/${pagePath.value}`,
+  () => {
+    const base = `/api/docs/${siteSlug.value}/pages/${pagePath.value}`;
+    return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
+  },
   { key: `doc-page-${siteSlug.value}-${pagePath.value}` },
 );
 
@@ -178,15 +189,20 @@ watch(searchQuery, (q) => {
   searchTimeout = setTimeout(handleSearch, 300);
 });
 
-// Version switching
-const selectedVersion = ref('');
+// Version switching — initialize from site data
 watch(site, (s) => {
   if (s?.versions?.length) {
     const def = s.versions.find((v: { isDefault: boolean }) => v.isDefault) ?? s.versions[0];
-    if (def) selectedVersion.value = def.version;
+    if (def && !selectedVersion.value) selectedVersion.value = def.version;
   }
 }, { immediate: true });
 
+// Reload page content and nav when version changes
+watch(selectedVersion, () => {
+  refreshNav();
+  refreshPage();
+});
+
 // Mobile sidebar
 const sidebarOpen = ref(false);
 

package/pages/docs/[siteSlug]/edit.vue

@@ -10,8 +10,26 @@ const siteSlug = computed(() => route.params.siteSlug as string);
 const { show: toast } = useToast();
 
 // ═══ DATA FETCHING ═══
-const { data: site, refresh: refreshSite } = await useFetch<{ id: string; name: string; slug: string; description: string; ownerId: string }>(() => `/api/docs/${siteSlug.value}`);
-const { data: rawPages, refresh: refreshPages } = await useFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null; content: string | BlockTuple[] | null; format?: string }>>(() => `/api/docs/${siteSlug.value}/pages`);
+const { data: site, refresh: refreshSite } = await useFetch<{ id: string; name: string; slug: string; description: string; ownerId: string; versions?: Array<{ id: string; version: string; isDefault: boolean }> }>(() => `/api/docs/${siteSlug.value}`);
+
+// Version selector
+const selectedVersion = ref('');
+watch(site, (s) => {
+  if (s?.versions?.length && !selectedVersion.value) {
+    const def = s.versions.find((v) => v.isDefault) ?? s.versions[0];
+    if (def) selectedVersion.value = def.version;
+  }
+}, { immediate: true });
+
+const { data: rawPages, refresh: refreshPages } = await useFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null; content: string | BlockTuple[] | null; format?: string }>>(() => {
+  const base = `/api/docs/${siteSlug.value}/pages`;
+  return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
+});
+
+watch(selectedVersion, () => {
+  selectedPageId.value = null;
+  refreshPages();
+});
 
 useSeoMeta({ title: () => `Edit ${site.value?.name ?? 'Docs'} — ${useSiteName()}` });
 
@@ -111,7 +129,7 @@ async function selectPage(pageId: string): Promise<void> {
 
   // Load properties
   pageSlug.value = page.slug ?? '';
-  pageStatus.value = ((page as Record<string, unknown>).status as 'draft' | 'published') || 'draft';
+  pageStatus.value = ((page as unknown as Record<string, unknown>).status as 'draft' | 'published') || 'draft';
   isDirty.value = false;
   autoSaveStatus.value = 'idle';
 
@@ -478,6 +496,13 @@ async function createVersion(): Promise<void> {
           <span class="cpub-docs-left-label">Pages</span>
           <span class="cpub-docs-page-count">{{ pages.length }}</span>
         </div>
+        <div v-if="site?.versions && site.versions.length > 1" class="cpub-docs-version-select">
+          <select v-model="selectedVersion" class="cpub-docs-version-dropdown" aria-label="Select version">
+            <option v-for="v in site.versions" :key="v.id" :value="v.version">
+              {{ v.version }}{{ v.isDefault ? ' (latest)' : '' }}
+            </option>
+          </select>
+        </div>
         <EditorsDocsPageTree
           :pages="treePages"
           :selected-page-id="selectedPageId"
@@ -794,6 +819,20 @@ async function createVersion(): Promise<void> {
   color: var(--text-faint);
 }
 
+.cpub-docs-version-select {
+  padding: 4px 0 6px;
+}
+.cpub-docs-version-dropdown {
+  width: 100%;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 4px 6px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border2);
+  color: var(--text);
+  cursor: pointer;
+}
+
 .cpub-docs-page-count {
   font-family: var(--font-mono);
   font-size: 9px;

package/pages/docs/[siteSlug]/index.vue

@@ -2,9 +2,17 @@
 const route = useRoute();
 const siteSlug = computed(() => route.params.siteSlug as string);
 
+const selectedVersion = ref('');
+
 const { data: site, pending: sitePending, error: siteError, refresh: refreshSite } = useLazyFetch<{ id: string; name: string; slug: string; description: string; ownerId: string; versions: Array<{ id: string; label: string; slug: string; version: string; isDefault: boolean }> }>(() => `/api/docs/${siteSlug.value}`);
-const { data: nav } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => `/api/docs/${siteSlug.value}/nav`);
-const { data: pages } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => `/api/docs/${siteSlug.value}/pages`);
+const { data: nav, refresh: refreshNav } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => {
+  const base = `/api/docs/${siteSlug.value}/nav`;
+  return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
+});
+const { data: pages, refresh: refreshPages } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => {
+  const base = `/api/docs/${siteSlug.value}/pages`;
+  return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
+});
 
 const { user } = useAuth();
 const isOwner = computed(() => site.value && user.value && site.value.ownerId === user.value.id);
@@ -44,15 +52,19 @@ function toggleSection(id: string): void {
   else expandedSections.value.add(id);
 }
 
-// Version selector
-const selectedVersion = ref('');
+// Version selector — initialize from site data, refresh nav on change
 watch(site, (s) => {
   if (s?.versions?.length) {
     const def = s.versions.find((v: { isDefault: boolean }) => v.isDefault) ?? s.versions[0];
-    if (def) selectedVersion.value = def.version;
+    if (def && !selectedVersion.value) selectedVersion.value = def.version;
   }
 }, { immediate: true });
 
+watch(selectedVersion, () => {
+  refreshNav();
+  refreshPages();
+});
+
 // Search
 const searchQuery = ref('');
 const searchOpen = ref(false);

package/server/api/docs/[siteSlug]/pages/[pageId].get.ts

@@ -20,7 +20,15 @@ export default defineEventHandler(async (event) => {
   if (!page) throw createError({ statusCode: 404, statusMessage: 'Page not found' });
 
   // Handle dual-format content: BlockTuple[] (new) or markdown string (legacy)
-  const content = page.content;
+  // Content is stored as TEXT — JSON arrays come back as strings, need parsing
+  let content: string | unknown[] = page.content ?? '';
+  if (typeof content === 'string' && content.trimStart().startsWith('[')) {
+    try {
+      content = JSON.parse(content);
+    } catch {
+      // Not valid JSON — keep as markdown string
+    }
+  }
 
   if (Array.isArray(content)) {
     // New BlockTuple format — extract text for TOC generation

package/server/api/social/comments.post.ts

@@ -1,11 +1,22 @@
-import { createComment } from '@commonpub/server';
+import { createComment, onContentCommented } from '@commonpub/server';
 import type { CommentItem } from '@commonpub/server';
 import { createCommentSchema } from '@commonpub/schema';
 
+/** Content types that should federate comments */
+const FEDERABLE_COMMENT_TYPES = new Set(['project', 'article', 'blog', 'explainer']);
+
 export default defineEventHandler(async (event): Promise<CommentItem> => {
   const user = requireAuth(event);
   const db = useDB();
+  const config = useConfig();
   const input = await parseBody(event, createCommentSchema);
 
-  return createComment(db, user.id, input);
+  const comment = await createComment(db, user.id, input);
+
+  // Federate comment on content items (non-blocking)
+  if (FEDERABLE_COMMENT_TYPES.has(input.targetType)) {
+    onContentCommented(db, comment.id, user.id, input.targetType, input.targetId, config).catch(() => {});
+  }
+
+  return comment;
 });