@commonpub/layer 0.1.2 → 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.2",
+  "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/protocol": "0.9.3",
     "@commonpub/server": "2.6.0",
     "@commonpub/schema": "0.8.7",
-    "@commonpub/ui": "0.7.1"
+    "@commonpub/ui": "0.7.1",
+    "@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/hubs/index.vue

@@ -24,7 +24,7 @@ function hubLink(hub: Record<string, unknown>): string {
     <div class="cpub-hubs-header">
       <div>
         <h1 class="cpub-hubs-title">Hubs</h1>
-        <p class="cpub-hubs-desc">Communities, products, and companies on CommonPub</p>
+        <p class="cpub-hubs-desc">Communities, products, and companies on {{ useSiteName() }}</p>
       </div>
       <NuxtLink v-if="isAuthenticated" to="/hubs/create" class="cpub-btn cpub-btn-primary">
         <i class="fa-solid fa-plus"></i> Create Hub
@@ -91,8 +91,8 @@ function hubLink(hub: Record<string, unknown>): string {
 
 .cpub-hubs-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
 }
 
 .cpub-hub-card {
@@ -101,18 +101,17 @@ function hubLink(hub: Record<string, unknown>): string {
   overflow: hidden;
   text-decoration: none;
   color: inherit;
-  transition: box-shadow 0.15s, border-color 0.15s;
-  box-shadow: var(--shadow-md);
+  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
 }
 
 .cpub-hub-card:hover {
-  box-shadow: var(--shadow-lg);
-  border-color: var(--accent-border);
+  border-color: var(--accent);
+  transform: translateY(-2px);
 }
 
 .cpub-hub-card-banner {
-  height: 80px;
-  background: linear-gradient(135deg, var(--accent), var(--accent-border));
+  height: 72px;
+  background: linear-gradient(135deg, var(--surface2) 0%, var(--accent-bg-strong) 100%);
   background-size: cover;
   background-position: center;
   position: relative;
@@ -120,25 +119,29 @@ function hubLink(hub: Record<string, unknown>): string {
 
 .cpub-hub-card-icon {
   position: absolute;
-  bottom: -20px;
-  left: 18px;
-  width: 48px;
-  height: 48px;
+  bottom: -18px;
+  left: 16px;
+  width: 44px;
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--surface);
-  border: var(--border-width-default) solid var(--surface);
+  border: var(--border-width-default) solid var(--border);
   color: var(--accent);
-  font-size: 20px;
+  font-size: 18px;
   overflow: hidden;
-  box-shadow: var(--shadow-sm);
 }
 
 .cpub-hub-card-avatar { width: 100%; height: 100%; object-fit: cover; }
 
 .cpub-hub-card-body {
-  padding: 28px 18px 18px;
+  padding: 24px 16px 16px;
+}
+
+/* Reset borders on all card body children — prevent theme bleed */
+.cpub-hub-card-body > * {
+  border: none;
 }
 
 .cpub-hub-card-name-row {
@@ -166,6 +169,8 @@ function hubLink(hub: Record<string, unknown>): string {
   display: flex;
   align-items: center;
   gap: 14px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border2);
 }
 
 .cpub-hub-card-stat {
@@ -185,7 +190,7 @@ function hubLink(hub: Record<string, unknown>): string {
   letter-spacing: 0.08em;
   color: var(--accent);
   background: var(--accent-bg);
-  border: var(--border-width-default) solid var(--accent-border);
+  border: 1px solid var(--accent-border);
   padding: 2px 6px;
 }
 

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" />