@commonpub/layer 0.7.26 → 0.8.0

package/components/ContentTypeBadge.vue

@@ -5,9 +5,8 @@ defineProps<{
 
 const iconMap: Record<string, string> = {
   project: 'fa-solid fa-microchip',
-  article: 'fa-solid fa-file-lines',
-  guide: 'fa-solid fa-book',
   blog: 'fa-solid fa-pen-nib',
+  article: 'fa-solid fa-file-lines',
   explainer: 'fa-solid fa-lightbulb',
 };
 </script>

package/components/FederatedContentCard.vue

@@ -28,7 +28,7 @@ const actorName = computed(() =>
 
 const typeLabel = computed(() => {
   if (props.content.cpubType) return props.content.cpubType;
-  return props.content.apType === 'Note' ? 'post' : 'article';
+  return props.content.apType === 'Note' ? 'post' : 'blog';
 });
 
 const timeAgo = computed(() => {

package/components/editors/ArticleEditor.vue

@@ -154,6 +154,9 @@ const seoDomain = computed(() => {
 });
 const seoPreviewDesc = computed(() => (props.metadata.seoDescription as string) || (props.metadata.description as string) || '');
 
+// --- Schedule ---
+const scheduleEnabled = ref(false);
+
 // --- Right panel ---
 const openSections = ref<Record<string, boolean>>({
   content: true, seo: false, publishing: true, cover: false, banner: false,
@@ -174,7 +177,17 @@ const wordCount = computed(() => {
     const html = (block.content.html as string) || '';
     const text = (block.content.text as string) || '';
     const code = (block.content.code as string) || '';
-    const combined = html.replace(/<[^>]*>/g, ' ') + ' ' + text + ' ' + code;
+    const instructions = (block.content.instructions as string) || '';
+    let combined = html.replace(/<[^>]*>/g, ' ') + ' ' + text + ' ' + code + ' ' + instructions;
+    const children = block.content.children;
+    if (Array.isArray(children)) {
+      for (const child of children) {
+        const [, childData] = child as [string, Record<string, unknown>];
+        const childHtml = (childData?.html as string) || '';
+        const childCode = (childData?.code as string) || '';
+        combined += ' ' + childHtml.replace(/<[^>]*>/g, ' ') + ' ' + childCode;
+      }
+    }
     count += combined.split(/\s+/).filter((w) => w.length > 0).length;
   }
   return count;
@@ -336,9 +349,14 @@ const canvasMaxWidth = computed(() => {
             <label class="cpub-ep-flabel">Slug</label>
             <input class="cpub-ep-input" type="text" :value="metadata.slug" placeholder="auto-generated" @input="updateMeta('slug', ($event.target as HTMLInputElement).value)">
           </div>
+          <div class="cpub-ep-field">
+            <label class="cpub-ep-flabel">Subtitle <span class="cpub-ep-optional">(optional)</span></label>
+            <input class="cpub-ep-input" type="text" :value="metadata.subtitle as string" placeholder="Add a subtitle..." @input="updateMeta('subtitle', ($event.target as HTMLInputElement).value)">
+          </div>
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Description</label>
-            <textarea class="cpub-ep-textarea" rows="3" :value="metadata.description as string" placeholder="Brief description..." @input="updateMeta('description', ($event.target as HTMLTextAreaElement).value)" />
+            <textarea class="cpub-ep-textarea" rows="3" :value="metadata.description as string" placeholder="Brief description shown in feed previews..." @input="updateMeta('description', ($event.target as HTMLTextAreaElement).value)" />
+            <span class="cpub-ep-hint cpub-ep-hint-right">{{ ((metadata.description as string) || '').length }} / 300</span>
           </div>
           <div class="cpub-ae-cover" :class="{ 'has-image': !!coverImageUrl }">
             <template v-if="coverImageUrl">
@@ -393,9 +411,9 @@ const canvasMaxWidth = computed(() => {
           <div class="cpub-seo-card">
             <div class="cpub-seo-url">
               <span class="cpub-seo-favicon">C</span>
-              {{ seoDomain }} &rsaquo; article
+              {{ seoDomain }} &rsaquo; blog
             </div>
-            <div class="cpub-seo-title">{{ (metadata.title as string) || 'Article title' }}</div>
+            <div class="cpub-seo-title">{{ (metadata.title as string) || 'Post title' }}</div>
             <div class="cpub-seo-desc">{{ seoPreviewDesc || 'Post description will appear here...' }}</div>
           </div>
           <div class="cpub-ep-field" style="margin-top: 10px;">
@@ -415,18 +433,38 @@ const canvasMaxWidth = computed(() => {
             <label class="cpub-ep-flabel">Category</label>
             <select class="cpub-ep-select" :value="metadata.category || ''" @change="updateMeta('category', ($event.target as HTMLSelectElement).value)">
               <option value="">Select category</option>
-              <option value="technology">Technology</option>
-              <option value="hardware">Hardware</option>
-              <option value="ai-ml">AI &amp; Machine Learning</option>
+              <option value="article">Article</option>
+              <option value="blog">Blog Post</option>
               <option value="tutorial">Tutorial</option>
               <option value="deep-dive">Deep Dive</option>
               <option value="opinion">Opinion</option>
+              <option value="hardware">Hardware &amp; Makers</option>
+              <option value="software">Software</option>
+              <option value="ai-ml">AI &amp; Machine Learning</option>
+              <option value="homelab">Home Lab</option>
             </select>
           </div>
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Tags</label>
             <EditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
           </div>
+          <div class="cpub-ep-field">
+            <label class="cpub-ep-flabel">Series <span class="cpub-ep-optional">(optional)</span></label>
+            <input class="cpub-ep-input" type="text" :value="metadata.series as string" placeholder="e.g. Home Lab Chronicles" @input="updateMeta('series', ($event.target as HTMLInputElement).value)">
+          </div>
+          <div class="cpub-ep-field">
+            <label class="cpub-ae-schedule-row">
+              <span class="cpub-ae-toggle-switch">
+                <input v-model="scheduleEnabled" type="checkbox" />
+                <span class="cpub-ae-toggle-track" />
+              </span>
+              <span class="cpub-ae-toggle-label">Schedule for later</span>
+            </label>
+          </div>
+          <div v-if="scheduleEnabled" class="cpub-ep-field">
+            <label class="cpub-ep-flabel">Publish Date</label>
+            <input class="cpub-ep-input cpub-ep-input-mono" type="datetime-local" :value="metadata.scheduledAt as string" @input="updateMeta('scheduledAt', ($event.target as HTMLInputElement).value)">
+          </div>
         </EditorSection>
       </div>
     </aside>
@@ -629,4 +667,27 @@ const canvasMaxWidth = computed(() => {
 .cpub-ae-banner-preview { position: relative; margin-bottom: 8px; }
 .cpub-ae-banner-img { width: 100%; height: 80px; object-fit: cover; display: block; border: var(--border-width-default) solid var(--border); }
 .cpub-ae-banner-actions { display: flex; gap: 6px; margin-top: 6px; }
+
+/* Schedule toggle */
+.cpub-ae-schedule-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
+.cpub-ae-toggle-switch {
+  position: relative; width: 30px; height: 16px; flex-shrink: 0;
+}
+.cpub-ae-toggle-switch input { display: none; }
+.cpub-ae-toggle-track {
+  display: block; width: 100%; height: 100%; background: var(--surface3);
+  border: var(--border-width-default) solid var(--border); cursor: pointer; transition: background 0.15s; position: relative;
+}
+.cpub-ae-toggle-track::after {
+  content: ''; position: absolute; width: 8px; height: 8px;
+  background: var(--text-faint); top: 2px; left: 2px; transition: transform 0.15s, background 0.15s;
+}
+.cpub-ae-toggle-switch input:checked + .cpub-ae-toggle-track { background: var(--accent-bg); border-color: var(--accent); }
+.cpub-ae-toggle-switch input:checked + .cpub-ae-toggle-track::after { transform: translateX(14px); background: var(--accent); }
+.cpub-ae-toggle-label { font-size: 11px; color: var(--text-dim); }
+
+/* Optional hint / mono input */
+.cpub-ep-optional { font-size: 9px; font-weight: 400; color: var(--text-faint); }
+.cpub-ep-input-mono { font-family: var(--font-mono); font-size: 11px; }
+.cpub-ep-hint-right { text-align: right; display: block; }
 </style>

package/components/editors/BlogEditor.vue

@@ -108,7 +108,16 @@ const wordCount = computed(() => {
     const text = (block.content.text as string) || '';
     const code = (block.content.code as string) || '';
     const instructions = (block.content.instructions as string) || '';
-    const combined = html.replace(/<[^>]*>/g, ' ') + ' ' + text + ' ' + code + ' ' + instructions;
+    let combined = html.replace(/<[^>]*>/g, ' ') + ' ' + text + ' ' + code + ' ' + instructions;
+    const children = block.content.children;
+    if (Array.isArray(children)) {
+      for (const child of children) {
+        const [, childData] = child as [string, Record<string, unknown>];
+        const childHtml = (childData?.html as string) || '';
+        const childCode = (childData?.code as string) || '';
+        combined += ' ' + childHtml.replace(/<[^>]*>/g, ' ') + ' ' + childCode;
+      }
+    }
     count += combined.split(/\s+/).filter((w) => w.length > 0).length;
   }
   return count;

package/components/editors/ProjectEditor.vue

@@ -158,7 +158,17 @@ const wordCount = computed(() => {
     const text = (block.content.text as string) || '';
     const code = (block.content.code as string) || '';
     const instructions = (block.content.instructions as string) || '';
-    const combined = html.replace(/<[^>]*>/g, ' ') + ' ' + text + ' ' + code + ' ' + instructions;
+    let combined = html.replace(/<[^>]*>/g, ' ') + ' ' + text + ' ' + code + ' ' + instructions;
+    // Count words in nested children (build steps)
+    const children = block.content.children;
+    if (Array.isArray(children)) {
+      for (const child of children) {
+        const [, childData] = child as [string, Record<string, unknown>];
+        const childHtml = (childData?.html as string) || '';
+        const childCode = (childData?.code as string) || '';
+        combined += ' ' + childHtml.replace(/<[^>]*>/g, ' ') + ' ' + childCode;
+      }
+    }
     count += combined.split(/\s+/).filter((w) => w.length > 0).length;
   }
   return count;

package/components/views/ArticleView.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
 }>();
 
 const contentId = computed(() => props.content?.id);
-const contentType = computed(() => props.content?.type ?? 'article');
+const contentType = computed(() => props.content?.type ?? 'blog');
 const fedId = computed(() => props.federatedId);
 const { liked, bookmarked, likeCount, isFederated, toggleLike, toggleBookmark, share, fetchInitialState } = useEngagement({ contentId, contentType, federatedContentId: fedId });
 
@@ -65,6 +65,12 @@ async function handleFollowAuthor(): Promise<void> {
   }
 }
 
+// Series data — only available when content has series metadata
+const seriesPart = computed(() => props.content?.seriesPart as number | undefined);
+const seriesTitle = computed(() => props.content?.seriesTitle as string | undefined);
+const seriesTotalParts = computed(() => (props.content?.seriesTotalParts as number) || 0);
+const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value > 0);
+
 const config = useRuntimeConfig();
 useJsonLd({
   type: 'article',
@@ -97,7 +103,7 @@ useJsonLd({
     <div class="cpub-article-wrap">
 
       <!-- TYPE BADGE -->
-      <div class="cpub-content-type-badge"><i class="fa-solid fa-newspaper"></i> Article</div>
+      <div class="cpub-content-type-badge"><i class="fa-solid fa-pen-nib"></i> {{ content.category || 'Blog Post' }}</div>
 
       <!-- TITLE -->
       <h1 class="cpub-article-title">{{ content.title }}</h1>
@@ -122,6 +128,10 @@ useJsonLd({
             <span>{{ new Date(content.publishedAt || content.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) }}</span>
             <span class="cpub-sep">·</span>
             <span><i class="fa-regular fa-clock"></i> {{ content.readTime || '5 min read' }}</span>
+            <template v-if="hasSeries">
+              <span class="cpub-sep">·</span>
+              <span class="cpub-tag cpub-tag-accent">{{ seriesTitle }} · Part {{ seriesPart || 1 }} of {{ seriesTotalParts }}</span>
+            </template>
             <template v-if="content.tags?.length">
               <span class="cpub-sep">·</span>
               <NuxtLink :to="`/tags/${content.tags[0]?.slug || (content.tags[0]?.name || String(content.tags[0])).toLowerCase().replace(/\s+/g, '-')}`" class="cpub-tag cpub-tag-teal">{{ content.tags[0]?.name || content.tags[0] }}</NuxtLink>
@@ -167,6 +177,49 @@ useJsonLd({
         </template>
       </div>
 
+      <!-- SERIES NAVIGATION -->
+      <div v-if="hasSeries" class="cpub-series-nav">
+        <div class="cpub-series-header">
+          <div class="cpub-series-icon"><i class="fa-solid fa-layer-group"></i></div>
+          <div>
+            <div class="cpub-series-label">Series</div>
+            <div class="cpub-series-title">{{ seriesTitle }}</div>
+          </div>
+          <div style="margin-left:auto;">
+            <span class="cpub-tag cpub-tag-accent">Part {{ seriesPart || 1 }} of {{ seriesTotalParts }}</span>
+          </div>
+        </div>
+        <div class="cpub-series-progress">
+          <div class="cpub-series-progress-label">
+            <span>Progress</span>
+            <span>{{ seriesPart || 1 }} / {{ seriesTotalParts }} published</span>
+          </div>
+          <div class="cpub-series-progress-track">
+            <div class="cpub-series-progress-fill" :style="{ width: ((seriesPart || 1) / seriesTotalParts * 100) + '%' }"></div>
+          </div>
+        </div>
+        <div class="cpub-series-nav-btns">
+          <NuxtLink v-if="content.seriesPrev" :to="content.seriesPrev.url || '#'" class="cpub-series-nav-btn cpub-prev">
+            <div class="cpub-series-nav-dir"><i class="fa-solid fa-chevron-left"></i> Previous</div>
+            <div class="cpub-series-nav-ep">Part {{ (seriesPart || 2) - 1 }}</div>
+            <div class="cpub-series-nav-post-title">{{ content.seriesPrev.title }}</div>
+          </NuxtLink>
+          <div v-else class="cpub-series-nav-btn cpub-prev cpub-disabled">
+            <div class="cpub-series-nav-dir"><i class="fa-solid fa-chevron-left"></i> Previous</div>
+            <div class="cpub-series-nav-ep">—</div>
+          </div>
+          <NuxtLink v-if="content.seriesNext" :to="content.seriesNext.url || '#'" class="cpub-series-nav-btn cpub-next">
+            <div class="cpub-series-nav-dir">Next <i class="fa-solid fa-chevron-right"></i></div>
+            <div class="cpub-series-nav-ep">Part {{ (seriesPart || 1) + 1 }}</div>
+            <div class="cpub-series-nav-post-title">{{ content.seriesNext.title }}</div>
+          </NuxtLink>
+          <div v-else class="cpub-series-nav-btn cpub-next cpub-disabled">
+            <div class="cpub-series-nav-dir">Next <i class="fa-solid fa-chevron-right"></i></div>
+            <div class="cpub-series-nav-ep">Coming soon</div>
+          </div>
+        </div>
+      </div>
+
       <!-- TAGS -->
       <div v-if="content.tags?.length" class="cpub-tags-row">
         <div class="cpub-tags-label">Filed under</div>
@@ -183,7 +236,8 @@ useJsonLd({
 
       <!-- AUTHOR CARD -->
       <div v-if="content.author" class="cpub-author-card">
-        <div class="cpub-av cpub-av-xl">{{ content.author.displayName?.slice(0, 2).toUpperCase() || 'CP' }}</div>
+        <img v-if="content.author.avatarUrl" :src="content.author.avatarUrl" :alt="content.author.displayName ?? content.author.username ?? ''" class="cpub-av cpub-av-xl" style="object-fit:cover;border:2px solid var(--border);" />
+        <div v-else class="cpub-av cpub-av-xl">{{ content.author.displayName?.slice(0, 2).toUpperCase() || 'CP' }}</div>
         <div class="cpub-author-card-info">
           <div class="cpub-author-card-label">Written by</div>
           <div class="cpub-author-card-name">
@@ -194,7 +248,7 @@ useJsonLd({
           <div v-if="content.author.bio" class="cpub-author-card-bio">{{ content.author.bio }}</div>
           <div class="cpub-author-card-footer">
             <div class="cpub-author-card-stats">
-              <div class="cpub-author-card-stat"><span class="n">{{ content.author.articleCount ?? 0 }}</span><span class="l">articles</span></div>
+              <div class="cpub-author-card-stat"><span class="n">{{ content.author.articleCount ?? 0 }}</span><span class="l">posts</span></div>
               <div class="cpub-author-card-stat"><span class="n">{{ content.author.followerCount ?? 0 }}</span><span class="l">followers</span></div>
               <div class="cpub-author-card-stat"><span class="n">{{ content.author.totalViews ?? 0 }}</span><span class="l">total views</span></div>
             </div>
@@ -209,7 +263,7 @@ useJsonLd({
       </div>
 
       <!-- RELATED ARTICLES -->
-      <div v-if="content.related?.length" class="cpub-section-head">Related Articles</div>
+      <div v-if="content.related?.length" class="cpub-section-head">Related Posts</div>
       <div v-if="content.related?.length" class="cpub-related-grid">
         <NuxtLink
           v-for="item in content.related.slice(0, 3)"
@@ -576,6 +630,123 @@ useJsonLd({
   margin: 36px 0;
 }
 
+/* ── SERIES NAV ── */
+.cpub-series-nav {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: 20px;
+  margin: 40px 0;
+  box-shadow: var(--shadow-sm);
+}
+
+.cpub-series-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.cpub-series-icon {
+  width: 28px;
+  height: 28px;
+  background: var(--accent-bg);
+  border: var(--border-width-default) solid var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+.cpub-series-label {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.cpub-series-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.cpub-series-progress {
+  margin-bottom: 16px;
+}
+
+.cpub-series-progress-label {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  margin-bottom: 6px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.cpub-series-progress-track {
+  height: 4px;
+  background: var(--surface3);
+  overflow: hidden;
+  border: var(--border-width-default) solid var(--border2);
+}
+
+.cpub-series-progress-fill {
+  height: 100%;
+  background: var(--accent);
+}
+
+.cpub-series-nav-btns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.cpub-series-nav-btn {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: 12px 14px;
+  cursor: pointer;
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: inherit;
+  transition: background var(--transition-fast);
+}
+
+.cpub-series-nav-btn:hover { background: var(--surface2); }
+.cpub-series-nav-btn.cpub-next { text-align: right; }
+.cpub-series-nav-btn.cpub-disabled { opacity: 0.5; pointer-events: none; }
+
+.cpub-series-nav-dir {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cpub-series-nav-btn.cpub-next .cpub-series-nav-dir { justify-content: flex-end; }
+
+.cpub-series-nav-ep {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--accent);
+}
+
+.cpub-series-nav-post-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.35;
+}
+
 /* ── TAGS ROW ── */
 .cpub-tags-row {
   display: flex;
@@ -803,6 +974,8 @@ useJsonLd({
   .cpub-engage-btn { padding: 8px 12px; min-height: 36px; }
   .cpub-engage-sep { display: none; }
   .cpub-tag-link { padding: 4px 10px; font-size: 11px; min-height: 28px; display: inline-flex; align-items: center; }
+  .cpub-series-nav-btns { grid-template-columns: 1fr; }
+  .cpub-series-nav-btn { padding: 12px; min-height: 44px; }
 }
 
 @media (max-width: 480px) {

package/components/views/ProjectView.vue

@@ -111,8 +111,7 @@ const partsFromBlocks = computed<PartItem[]>(() => {
 interface BuildStep {
   number: number;
   title: string;
-  instructions: string;
-  image?: string;
+  children: Array<[string, Record<string, unknown>]>;
   time?: string;
 }
 
@@ -125,11 +124,25 @@ const buildStepsFromBlocks = computed<BuildStep[]>(() => {
     const [type, data] = block as [string, Record<string, unknown>];
     if (type === 'buildStep') {
       stepNum++;
+      // Migrate old format (instructions + image) to children
+      let children: Array<[string, Record<string, unknown>]> = [];
+      if (data.children && Array.isArray(data.children) && data.children.length > 0) {
+        children = data.children as Array<[string, Record<string, unknown>]>;
+      } else {
+        const instructions = data.instructions as string | undefined;
+        if (instructions && instructions.trim()) {
+          const html = instructions.startsWith('<') ? instructions : `<p>${instructions}</p>`;
+          children.push(['paragraph', { html }]);
+        }
+        const image = data.image as string | undefined;
+        if (image && image.trim()) {
+          children.push(['image', { src: image, alt: `Step ${stepNum}`, caption: '' }]);
+        }
+      }
       steps.push({
         number: (data.stepNumber as number) || stepNum,
         title: (data.title as string) || `Step ${stepNum}`,
-        instructions: (data.instructions as string) || '',
-        image: data.image as string | undefined,
+        children,
         time: data.time as string | undefined,
       });
     }
@@ -495,9 +508,8 @@ async function handleBuild(): Promise<void> {
                     <h3 class="cpub-build-step-title">{{ step.title }}</h3>
                     <span v-if="step.time" class="cpub-build-step-time"><i class="fa-regular fa-clock"></i> {{ step.time }}</span>
                   </div>
-                  <div class="cpub-build-step-body">
-                    <p>{{ step.instructions }}</p>
-                    <img v-if="step.image" :src="step.image" :alt="`Step ${step.number}`" class="cpub-build-step-img" />
+                  <div v-if="step.children.length > 0" class="cpub-build-step-body">
+                    <BlockContentRenderer :blocks="step.children" />
                   </div>
                 </div>
               </div>

package/composables/useContentTypes.ts

@@ -2,10 +2,9 @@
 
 export type ContentType = 'project' | 'article' | 'blog' | 'explainer';
 
-const CONTENT_TYPE_META: Record<ContentType, { label: string; plural: string; icon: string; route: string }> = {
+const CONTENT_TYPE_META: Record<string, { label: string; plural: string; icon: string; route: string }> = {
   project: { label: 'Project', plural: 'Projects', icon: 'fa-solid fa-microchip', route: '/project' },
-  article: { label: 'Article', plural: 'Articles', icon: 'fa-solid fa-file-lines', route: '/article' },
-  blog: { label: 'Blog', plural: 'Blogs', icon: 'fa-solid fa-pen-nib', route: '/blog' },
+  blog: { label: 'Blog', plural: 'Blog', icon: 'fa-solid fa-pen-nib', route: '/blog' },
   explainer: { label: 'Explainer', plural: 'Explainers', icon: 'fa-solid fa-lightbulb', route: '/explainer' },
 };
 
@@ -14,8 +13,8 @@ export function useContentTypes() {
 
   const enabledTypes = computed<ContentType[]>(() => {
     const raw = config.public.contentTypes as string;
-    if (!raw) return ['project', 'article', 'blog', 'explainer'];
-    return raw.split(',').map(s => s.trim()).filter(Boolean) as ContentType[];
+    if (!raw) return ['project', 'blog', 'explainer'];
+    return raw.split(',').map(s => s.trim()).filter(s => s !== 'article').filter(Boolean) as ContentType[];
   });
 
   const isTypeEnabled = (type: ContentType): boolean => {

package/composables/useMirrorContent.ts

@@ -6,7 +6,7 @@ import type { ContentViewData } from './useEngagement';
  */
 export function useMirrorContent(fedContent: Ref<Record<string, unknown> | null>) {
   const contentType = computed(() => {
-    const t = (fedContent.value?.cpubType as string) || (fedContent.value?.apType as string)?.toLowerCase() || 'article';
+    const t = (fedContent.value?.cpubType as string) || (fedContent.value?.apType as string)?.toLowerCase() || 'blog';
     return t;
   });
 

package/layouts/default.vue

@@ -112,7 +112,6 @@ const userUsername = computed(() => user.value?.username ?? '');
             <i class="fa-solid fa-newspaper"></i> Read <i class="fa-solid fa-chevron-down cpub-nav-caret" />
           </button>
           <div v-if="openDropdown === 'read'" class="cpub-nav-panel">
-            <NuxtLink to="/article" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-file-lines"></i> Articles</NuxtLink>
             <NuxtLink to="/blog" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-pen-nib"></i> Blog</NuxtLink>
           </div>
         </div>
@@ -202,7 +201,6 @@ const userUsername = computed(() => user.value?.username ?? '');
 
         <!-- Read -->
         <div class="cpub-mobile-section-label">Read</div>
-        <NuxtLink to="/article" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-file-lines"></i> Articles</NuxtLink>
         <NuxtLink to="/blog" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-pen-nib"></i> Blog</NuxtLink>
 
         <!-- Watch -->

package/nuxt.config.ts

@@ -90,7 +90,7 @@ export default defineNuxtConfig({
         admin: false,
         emailNotifications: false,
       },
-      contentTypes: 'project,article,blog,explainer',
+      contentTypes: 'project,blog,explainer',
       contestCreation: 'admin',
       instanceCookies: [] as Array<{ name: string; category: string; description: string; duration: string; provider?: string }>,
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.7.26",
+  "version": "0.8.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -51,15 +51,15 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.5.0",
-    "@commonpub/docs": "0.6.2",
     "@commonpub/editor": "0.7.9",
-    "@commonpub/explainer": "0.7.6",
-    "@commonpub/config": "0.9.0",
-    "@commonpub/protocol": "0.9.7",
     "@commonpub/learning": "0.5.0",
+    "@commonpub/config": "0.9.1",
+    "@commonpub/docs": "0.6.2",
+    "@commonpub/protocol": "0.9.8",
+    "@commonpub/schema": "0.9.6",
     "@commonpub/ui": "0.8.5",
-    "@commonpub/server": "2.27.7",
-    "@commonpub/schema": "0.9.5"
+    "@commonpub/server": "2.28.0",
+    "@commonpub/explainer": "0.7.10"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/create.vue

@@ -21,13 +21,13 @@ const allTypes = [
     badge: 'Popular',
   },
   {
-    type: 'article',
-    icon: 'fa-solid fa-file-lines',
-    color: 'var(--teal)',
-    bg: 'var(--teal-bg)',
-    border: 'var(--teal-border)',
-    name: 'Article',
-    desc: 'Write a long-form technical article with code examples, diagrams, and rich formatting.',
+    type: 'blog',
+    icon: 'fa-solid fa-pen-nib',
+    color: 'var(--pink)',
+    bg: 'var(--pink-bg)',
+    border: 'var(--pink-border)',
+    name: 'Blog',
+    desc: 'Write long-form content — articles, tutorials, deep dives, opinion pieces, or personal updates with rich formatting.',
   },
   {
     type: 'explainer',
@@ -38,15 +38,6 @@ const allTypes = [
     name: 'Explainer',
     desc: 'Create an interactive explorable explanation with sliders, quizzes, and section-by-section progression.',
   },
-  {
-    type: 'blog',
-    icon: 'fa-solid fa-pen-nib',
-    color: 'var(--pink)',
-    bg: 'var(--pink-bg)',
-    border: 'var(--pink-border)',
-    name: 'Blog Post',
-    desc: 'Share thoughts, tutorials, or updates with a clean writing experience and inline media.',
-  },
 ];
 
 const types = computed(() => allTypes.filter(t => isTypeEnabled(t.type as ContentType)));

package/pages/explore.vue

@@ -168,7 +168,7 @@ const sortOptions = [
     <div v-if="statsData" class="cpub-explore-stats">
       <div class="cpub-explore-stat">
         <span class="cpub-explore-stat-n">{{ statsData?.content?.total ?? 0 }}</span>
-        <span class="cpub-explore-stat-l">Projects & Articles</span>
+        <span class="cpub-explore-stat-l">Projects & Posts</span>
       </div>
       <div v-if="hubsEnabled" class="cpub-explore-stat">
         <span class="cpub-explore-stat-n">{{ statsData?.hubs?.total ?? 0 }}</span>

package/pages/index.vue

@@ -294,8 +294,8 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
               <span class="cpub-stat-lbl">Projects</span>
             </div>
             <div class="cpub-stat-block">
-              <span class="cpub-stat-num">{{ stats?.content?.byType?.article ?? 0 }}</span>
-              <span class="cpub-stat-lbl">Articles</span>
+              <span class="cpub-stat-num">{{ (stats?.content?.byType?.blog ?? 0) + (stats?.content?.byType?.article ?? 0) }}</span>
+              <span class="cpub-stat-lbl">Posts</span>
             </div>
             <div class="cpub-stat-block">
               <span class="cpub-stat-num">{{ stats?.users?.total ?? 0 }}</span>

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

@@ -343,7 +343,7 @@ async function handlePublish(): Promise<void> {
 
   <ContentPicker
     :open="showContentPicker"
-    :types="['article', 'project', 'explainer', 'blog']"
+    :types="['blog', 'project', 'explainer']"
     @update:open="showContentPicker = $event"
     @select="linkContent"
   />

package/pages/mirror/[id].vue

@@ -98,8 +98,7 @@ useSeoMeta({
 
     <!-- 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" />
+    <ViewsArticleView v-else-if="contentType === 'article' || contentType === 'blog'" :content="transformedContent" :federated-id="id" />
     <ViewsExplainerView v-else-if="contentType === 'explainer'" :content="transformedContent" :federated-id="id" />
 
     <!-- Fallback for non-CommonPub content (Mastodon notes, Lemmy posts, etc.) -->

package/pages/privacy.vue

@@ -31,7 +31,7 @@ const { federation: federationEnabled } = useFeatures();
         <ul>
           <li><strong>Account data:</strong> email address, username, password (stored as a secure hash)</li>
           <li><strong>Profile data:</strong> display name, bio, headline, location, website, avatar, banner image, social links, skills, pronouns, timezone (all optional)</li>
-          <li><strong>Content:</strong> projects, articles, blog posts, comments, and other content you create</li>
+          <li><strong>Content:</strong> projects, articles, comments, and other content you create</li>
           <li><strong>Activity data:</strong> likes, follows, bookmarks, hub memberships, learning path enrollments</li>
           <li><strong>Messages:</strong> direct messages you send to other users on this instance</li>
         </ul>
@@ -77,7 +77,7 @@ const { federation: federationEnabled } = useFeatures();
         <p>This instance participates in the <a href="https://activitypub.rocks" target="_blank" rel="noopener">ActivityPub</a> federation protocol. When you publish content or interact publicly, the following data may be shared with remote instances:</p>
         <ul>
           <li>Your username, display name, avatar, and bio</li>
-          <li>Your published content (projects, articles, blog posts)</li>
+          <li>Your published content (projects, articles, explainers)</li>
           <li>Your public interactions (likes, follows, comments on federated content)</li>
         </ul>
         <p>Your email address, location, social links, timezone, and other private profile fields are <strong>never</strong> shared via federation.</p>

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

@@ -130,8 +130,8 @@ provide(SEARCH_PRODUCTS_KEY, async (query: string) => {
 
 // --- Specialized editor component map ---
 const editorMap: Record<string, Component> = {
-  article: resolveComponent('EditorsArticleEditor') as Component,
-  blog: resolveComponent('EditorsBlogEditor') as Component,
+  blog: resolveComponent('EditorsArticleEditor') as Component,
+  article: resolveComponent('EditorsArticleEditor') as Component, // article merged into blog
   explainer: resolveComponent('EditorsExplainerEditor') as Component,
   project: resolveComponent('EditorsProjectEditor') as Component,
 };

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

@@ -90,8 +90,7 @@ onMounted(() => {
 
     <!-- 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)" />
+    <ViewsArticleView v-else-if="contentType === 'article' || contentType === 'blog'" :content="(enrichedContent as any)" />
     <ViewsExplainerView v-else-if="contentType === 'explainer'" :content="(enrichedContent as any)" />
 
     <!-- Fallback: generic view for unknown types -->

package/pages/u/[username]/index.vue

@@ -33,7 +33,7 @@ const activeTab = ref('projects');
 const tabDefs = computed(() => {
   const tabs = [
     { value: 'projects', label: 'Projects', icon: 'fa-solid fa-folder-open' },
-    { value: 'articles', label: 'Articles', icon: 'fa-solid fa-newspaper' },
+    { value: 'articles', label: 'Blog', icon: 'fa-solid fa-pen-nib' },
   ];
   if (explainersEnabled.value) {
     tabs.push({ value: 'explainers', label: 'Explainers', icon: 'fa-solid fa-book-open' });
@@ -52,7 +52,7 @@ const profileStats = computed(() => {
     { value: p.stats?.projects ?? 0, label: 'Projects' },
     { value: p.followerCount ?? p.stats?.followers ?? 0, label: 'Followers' },
     { value: p.followingCount ?? p.stats?.following ?? 0, label: 'Following' },
-    { value: p.stats?.articles ?? 0, label: 'Articles' },
+    { value: p.stats?.articles ?? 0, label: 'Posts' },
     { value: p.viewCount ?? 0, label: 'Total Views' },
     { value: p.likeCount ?? 0, label: 'Likes' },
   ];

package/server/api/hubs/[slug]/share.post.ts

@@ -49,7 +49,7 @@ export default defineEventHandler(async (event): Promise<HubPostItem> => {
   const sharePayload = JSON.stringify({
     federatedContentId: fedContent.id,
     title: fedContent.title,
-    type: fedContent.cpubType ?? fedContent.apType ?? 'article',
+    type: fedContent.cpubType ?? fedContent.apType ?? 'blog',
     coverImageUrl: fedContent.coverImageUrl ?? null,
     description: fedContent.summary ?? null,
     originUrl: fedContent.url ?? fedContent.objectUri,

package/server/middleware/blog-redirect.ts

@@ -0,0 +1,26 @@
+/**
+ * Server middleware: redirect article URLs to blog URLs.
+ * - /u/{username}/article/{slug} → /u/{username}/blog/{slug}
+ * - /u/{username}/article/{slug}/edit → /u/{username}/blog/{slug}/edit
+ * - /article → /blog (listing page)
+ *
+ * Article content type has been merged into blog. These 301 redirects
+ * ensure old URLs and bookmarks continue working.
+ */
+export default defineEventHandler((event) => {
+  const path = getRequestURL(event).pathname;
+
+  // Redirect /article listing to /blog
+  if (path === '/article' || path === '/article/') {
+    const query = getRequestURL(event).search;
+    return sendRedirect(event, `/blog${query}`, 301);
+  }
+
+  // Redirect /u/{username}/article/{slug}[/edit] to /u/{username}/blog/{slug}[/edit]
+  const match = path.match(/^\/u\/([^/]+)\/article\/(.+)$/);
+  if (!match) return;
+
+  const newPath = `/u/${match[1]}/blog/${match[2]}`;
+  const query = getRequestURL(event).search;
+  return sendRedirect(event, `${newPath}${query}`, 301);
+});

package/server/middleware/content-ap.ts

@@ -1,6 +1,6 @@
 import { contentToArticle } from '@commonpub/protocol';
 import { contentItems, users } from '@commonpub/schema';
-import { eq, and, isNull } from 'drizzle-orm';
+import { eq, and, isNull, sql } from 'drizzle-orm';
 
 /**
  * Middleware: serve ActivityPub Article JSON-LD for content URIs.
@@ -26,12 +26,18 @@ export default defineEventHandler(async (event) => {
   const config = useConfig();
   if (!config.features.federation) return;
 
-  const [, username, type, slug] = match;
-  if (!username || !type || !slug) return;
+  const [, username, rawType, slug] = match;
+  if (!username || !rawType || !slug) return;
+  const type = rawType === 'article' ? 'blog' : rawType; // normalize article→blog
 
   const db = useDB();
   const domain = config.instance.domain;
 
+  // For blog type, also match 'article' in DB (transition: pre-migration rows still have type='article')
+  const typeFilter = type === 'blog'
+    ? sql`${contentItems.type} IN ('blog', 'article')`
+    : eq(contentItems.type, type as 'project' | 'explainer');
+
   const [row] = await db
     .select({
       content: contentItems,
@@ -44,7 +50,7 @@ export default defineEventHandler(async (event) => {
     .innerJoin(users, eq(contentItems.authorId, users.id))
     .where(and(
       eq(users.username, username),
-      eq(contentItems.type, type as 'project' | 'article' | 'blog' | 'explainer'),
+      typeFilter,
       eq(contentItems.slug, slug),
       eq(contentItems.status, 'published'),
       isNull(contentItems.deletedAt),

package/server/plugins/migrate-article-to-blog.ts

@@ -0,0 +1,67 @@
+/**
+ * One-time data migration: article → blog type merge.
+ *
+ * Converts content_items with type='article' to type='blog', preserving the
+ * original intent by setting category='article' (only when category is empty).
+ *
+ * Handles the edge case where the same author has both type='article' and
+ * type='blog' with the same slug — appends '-2' to the article's slug before
+ * converting to avoid unique constraint violation on (authorId, type, slug).
+ *
+ * Idempotent — safe to run on every startup. Once no article rows remain,
+ * this is a no-op SELECT that returns 0.
+ *
+ * Can be removed after confirming both instances have been migrated.
+ */
+import { contentItems } from '@commonpub/schema';
+import { eq, and, sql, isNull } from 'drizzle-orm';
+
+export default defineNitroPlugin((nitro) => {
+  setTimeout(async () => {
+    try {
+      const db = useDB();
+
+      const [{ count: articleCount }] = await db
+        .select({ count: sql<number>`count(*)::int` })
+        .from(contentItems)
+        .where(eq(contentItems.type, 'article'));
+
+      if (articleCount === 0) return;
+
+      // Handle slug collisions: if author has both article/slug and blog/slug,
+      // rename the article's slug before converting type
+      await db.execute(sql`
+        UPDATE content_items a
+        SET slug = a.slug || '-2'
+        WHERE a.type = 'article'
+          AND EXISTS (
+            SELECT 1 FROM content_items b
+            WHERE b.type = 'blog'
+              AND b.author_id = a.author_id
+              AND b.slug = a.slug
+          )
+      `);
+
+      // Set category='article' for rows that don't already have a category,
+      // so the original "article" intent is preserved as metadata
+      await db
+        .update(contentItems)
+        .set({ category: 'article' })
+        .where(and(
+          eq(contentItems.type, 'article'),
+          isNull(contentItems.category),
+        ));
+
+      // Convert the type
+      await db
+        .update(contentItems)
+        .set({ type: 'blog' })
+        .where(eq(contentItems.type, 'article'));
+
+      console.log(`[migrate-article-to-blog] Converted ${articleCount} article(s) to blog type (category preserved)`);
+    } catch (err) {
+      // Log but don't crash the app — migration can retry on next restart
+      console.warn('[migrate-article-to-blog] Migration failed, will retry on next restart:', (err as Error).message);
+    }
+  }, 3000);
+});

package/server/routes/hubs/[slug]/posts/[postId].ts

@@ -59,7 +59,7 @@ export default defineEventHandler(async (event) => {
     try {
       const shared = JSON.parse(post.content) as Record<string, unknown>;
       ext['cpub:sharedContent'] = {
-        type: shared.type ?? 'article',
+        type: shared.type ?? 'blog',
         title: shared.title ?? '',
         summary: shared.description ?? null,
         coverImageUrl: shared.coverImageUrl ?? null,