@commonpub/layer 0.8.0 → 0.8.1

package/components/editors/ArticleEditor.vue

@@ -358,6 +358,21 @@ const canvasMaxWidth = computed(() => {
             <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-ep-field">
+            <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="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-ae-cover" :class="{ 'has-image': !!coverImageUrl }">
             <template v-if="coverImageUrl">
               <img :src="coverImageUrl" alt="Cover image" class="cpub-ae-cover-img" />
@@ -429,21 +444,6 @@ const canvasMaxWidth = computed(() => {
             <label class="cpub-ep-flabel">Visibility</label>
             <EditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
           </div>
-          <div class="cpub-ep-field">
-            <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="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" />

package/components/views/ArticleView.vue

@@ -30,11 +30,14 @@ const tocHeadings = computed(() => {
       const block = b as [string, Record<string, unknown>];
       return block[0] === 'heading';
     })
-    .map((b: unknown, idx: number) => {
+    .map((b: unknown) => {
       const block = b as [string, Record<string, unknown>];
+      const text = (block[1].text as string) || 'Untitled';
+      // Must match BlockHeadingView's slug generation
+      const slug = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
       return {
-        id: `heading-${idx}`,
-        text: (block[1].text as string) || 'Untitled',
+        id: slug,
+        text,
         level: (block[1].level as number) || 2,
       };
     });
@@ -298,21 +301,18 @@ useJsonLd({
 
 <style scoped>
 /* ── TOC SIDEBAR ── */
-.cpub-article-toc-sidebar {
+.cpub-article-body-layout {
   display: none;
 }
 @media (min-width: 1200px) {
   .cpub-article-body-layout {
-    position: fixed;
-    right: max(24px, calc((100vw - 720px) / 2 - 240px));
-    top: 120px;
+    display: block;
+    position: absolute;
+    left: calc(100% + 32px);
+    top: 0;
     width: 200px;
-    z-index: 10;
-    pointer-events: none;
   }
   .cpub-article-toc-sidebar {
-    display: block;
-    pointer-events: auto;
     position: sticky;
     top: 80px;
   }
@@ -379,6 +379,7 @@ useJsonLd({
   max-width: 720px;
   margin: 0 auto;
   padding: 40px clamp(12px, 4vw, 24px) 80px;
+  position: relative;
 }
 
 /* ── TYPE BADGE ── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -51,12 +51,12 @@
     "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/learning": "0.5.0",
+    "@commonpub/schema": "0.9.6",
     "@commonpub/config": "0.9.1",
-    "@commonpub/docs": "0.6.2",
     "@commonpub/protocol": "0.9.8",
-    "@commonpub/schema": "0.9.6",
+    "@commonpub/learning": "0.5.0",
     "@commonpub/ui": "0.8.5",
     "@commonpub/server": "2.28.0",
     "@commonpub/explainer": "0.7.10"