@commonpub/layer 0.1.3 → 0.1.4

package/composables/useMirrorContent.ts

@@ -76,16 +76,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 +87,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.1.4",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -49,11 +49,11 @@
     "@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/server": "2.6.0",
+    "@commonpub/schema": "0.8.7",
     "@commonpub/ui": "0.7.1",
-    "@commonpub/schema": "0.8.7"
+    "@commonpub/learning": "0.5.0"
   },
   "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" />