@commonpub/layer 0.1.3 → 0.2.0

package/composables/useMirrorContent.ts

@@ -18,16 +18,23 @@ export function useMirrorContent(fedContent: Ref<Record<string, unknown> | null>
 
     const title = (fc.title as string) || 'Untitled';
 
-    // Parse block content: may be BlockTuple JSON or raw HTML from federation
-    let content: unknown = fc.content;
-    if (typeof content === 'string') {
-      const trimmed = content.trim();
-      if (trimmed.startsWith('[[') || trimmed.startsWith('[["')) {
-        try { content = JSON.parse(trimmed); } catch { /* keep as string */ }
-      }
-      // If still a string (HTML from federation), wrap as BlockTuple array
-      if (typeof content === 'string' && content.trim()) {
-        content = [['paragraph', { html: content }]];
+    // Parse block content: prefer cpub:blocks (full fidelity from CommonPub instances),
+    // fall back to HTML content (from non-CommonPub instances or legacy federation)
+    let content: unknown;
+    if (Array.isArray(fc.cpubBlocks) && fc.cpubBlocks.length > 0) {
+      // CommonPub→CommonPub: original block structure preserved
+      content = fc.cpubBlocks;
+    } else {
+      content = fc.content;
+      if (typeof content === 'string') {
+        const trimmed = content.trim();
+        if (trimmed.startsWith('[[') || trimmed.startsWith('[["')) {
+          try { content = JSON.parse(trimmed); } catch { /* keep as string */ }
+        }
+        // If still a string (HTML from federation), wrap as BlockTuple array
+        if (typeof content === 'string' && content.trim()) {
+          content = [['paragraph', { html: content }]];
+        }
       }
     }
 
@@ -76,16 +83,6 @@ export function useMirrorContent(fedContent: Ref<Record<string, unknown> | null>
     } satisfies ContentViewData;
   });
 
-  const viewComponent = computed(() => {
-    switch (contentType.value) {
-      case 'article': return resolveComponent('ViewsArticleView');
-      case 'blog': return resolveComponent('ViewsBlogView');
-      case 'explainer': return resolveComponent('ViewsExplainerView');
-      case 'project': return resolveComponent('ViewsProjectView');
-      default: return null;
-    }
-  });
-
   const originDomain = computed(() => (fedContent.value?.originDomain as string) || 'unknown');
   const originUrl = computed(() => (fedContent.value?.url as string) || null);
   const authorHandle = computed(() => {
@@ -97,7 +94,6 @@ export function useMirrorContent(fedContent: Ref<Record<string, unknown> | null>
     contentType,
     actor,
     transformedContent,
-    viewComponent,
     originDomain,
     originUrl,
     authorHandle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -45,15 +45,15 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
+    "@commonpub/auth": "0.5.0",
     "@commonpub/config": "0.7.0",
     "@commonpub/docs": "0.5.0",
-    "@commonpub/auth": "0.5.0",
     "@commonpub/editor": "0.5.0",
     "@commonpub/learning": "0.5.0",
-    "@commonpub/server": "2.6.0",
-    "@commonpub/protocol": "0.9.3",
-    "@commonpub/ui": "0.7.1",
-    "@commonpub/schema": "0.8.7"
+    "@commonpub/protocol": "0.9.4",
+    "@commonpub/schema": "0.8.8",
+    "@commonpub/server": "2.7.0",
+    "@commonpub/ui": "0.7.1"
   },
   "scripts": {}
 }

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

@@ -57,16 +57,7 @@ const enrichedContent = computed(() => {
   return { ...content.value, readTime: readTime.value };
 });
 
-// Map content types to specialized view components
-const viewComponent = computed(() => {
-  switch (contentType.value) {
-    case 'article': return resolveComponent('ViewsArticleView');
-    case 'blog': return resolveComponent('ViewsBlogView');
-    case 'explainer': return resolveComponent('ViewsExplainerView');
-    case 'project': return resolveComponent('ViewsProjectView');
-    default: return null;
-  }
-});
+// Content type used for conditional view component rendering in template
 
 // Related content
 const { data: related } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
@@ -91,12 +82,11 @@ onMounted(() => {
       </NuxtLink>
     </div>
 
-    <!-- Specialized view -->
-    <component
-      v-if="viewComponent && typeof viewComponent !== 'string'"
-      :is="viewComponent"
-      :content="enrichedContent"
-    />
+    <!-- Specialized view by content type -->
+    <ViewsProjectView v-if="contentType === 'project'" :content="(enrichedContent as any)" />
+    <ViewsArticleView v-else-if="contentType === 'article'" :content="(enrichedContent as any)" />
+    <ViewsBlogView v-else-if="contentType === 'blog'" :content="(enrichedContent as any)" />
+    <ViewsExplainerView v-else-if="contentType === 'explainer'" :content="(enrichedContent as any)" />
 
     <!-- Fallback: generic view for unknown types -->
     <article v-else class="cpub-view">

package/pages/mirror/[id].vue

@@ -7,8 +7,8 @@ const id = route.params.id as string;
 const { data: fedContent, error, pending } = await useFetch<Record<string, unknown>>(`/api/federation/content/${id}`);
 
 const {
+  contentType,
   transformedContent,
-  viewComponent,
   originDomain,
   originUrl,
   authorHandle,
@@ -51,15 +51,13 @@ useSeoMeta({
       </div>
     </div>
 
-    <!-- Reuse existing content view component -->
-    <component
-      v-if="viewComponent && typeof viewComponent !== 'string'"
-      :is="viewComponent"
-      :content="transformedContent"
-      :federated-id="id"
-    />
+    <!-- Reuse existing content view components by type -->
+    <ViewsProjectView v-if="contentType === 'project'" :content="transformedContent" :federated-id="id" />
+    <ViewsArticleView v-else-if="contentType === 'article'" :content="transformedContent" :federated-id="id" />
+    <ViewsBlogView v-else-if="contentType === 'blog'" :content="transformedContent" :federated-id="id" />
+    <ViewsExplainerView v-else-if="contentType === 'explainer'" :content="transformedContent" :federated-id="id" />
 
-    <!-- Fallback for non-CommonPub content -->
+    <!-- Fallback for non-CommonPub content (Mastodon notes, Lemmy posts, etc.) -->
     <article v-else class="cpub-mirror-fallback">
       <div class="cpub-mirror-container">
         <img v-if="transformedContent.coverImageUrl" :src="transformedContent.coverImageUrl" :alt="transformedContent.title" class="cpub-mirror-cover" />