@commonpub/layer 0.21.15 → 0.21.17

package/components/views/ProjectView.vue

@@ -73,6 +73,20 @@ const authorUrl = computed(() =>
     : `/u/${props.content.author?.username}`,
 );
 
+/**
+ * Whether the right sidebar has any content to render. When false we
+ * suppress the sidebar `<aside>` AND the grid's 260px column so the
+ * content column gets the full width. Without this guard, projects
+ * with no BOM/parts AND no community hub get a squished content
+ * column with empty whitespace on the right (heatsynclabs.io
+ * report, 2026-05-19).
+ */
+const hasSidebar = computed(() => {
+  const bom = (props.content?.parts?.length ?? 0) > 0 || (bomProducts.value?.length ?? 0) > 0;
+  const community = hubsEnabled.value && !!props.content?.community;
+  return bom || community;
+});
+
 const formattedDate = computed(() => {
   const date = props.content?.publishedAt || props.content?.createdAt;
   if (!date) return '';
@@ -418,7 +432,7 @@ async function handleBuild(): Promise<void> {
 
     <!-- MAIN CONTENT GRID -->
     <div class="cpub-page-outer">
-      <div class="cpub-content-grid" :class="{ 'cpub-has-toc': tocEntries.length > 0 && activeTab === 'overview' }">
+      <div class="cpub-project-grid" :class="{ 'cpub-has-toc': tocEntries.length > 0 && activeTab === 'overview', 'cpub-has-sidebar': hasSidebar }">
         <!-- LEFT: TABLE OF CONTENTS -->
         <nav v-if="tocEntries.length > 0 && activeTab === 'overview'" class="cpub-toc-col">
           <div class="cpub-toc">
@@ -561,8 +575,9 @@ async function handleBuild(): Promise<void> {
           </template>
         </div>
 
-        <!-- RIGHT: SIDEBAR -->
-        <aside class="cpub-sidebar">
+        <!-- RIGHT: SIDEBAR (rendered only when there's BOM/community content;
+             the cpub-has-sidebar grid-class reserves the 260px column to match) -->
+        <aside v-if="hasSidebar" class="cpub-sidebar">
           <!-- BOM Summary -->
           <div v-if="content.parts?.length || bomProducts?.length" class="cpub-sb-card">
             <div class="cpub-sb-title">BOM Summary</div>
@@ -940,15 +955,29 @@ async function handleBuild(): Promise<void> {
   border-bottom-color: var(--border);
 }
 
-/* ── CONTENT GRID ── */
-.cpub-content-grid {
+/* ── CONTENT GRID ──
+   4 layouts via 2 boolean modifier classes:
+     base                              → content only
+     .cpub-has-toc                     → TOC + content
+     .cpub-has-sidebar                 → content + sidebar
+     .cpub-has-toc.cpub-has-sidebar    → TOC + content + sidebar
+   The sidebar 260px column is reserved ONLY when there's sidebar
+   content to put in it (BOM/parts OR community hub) — otherwise the
+   content column gets the freed width. */
+.cpub-project-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 260px;
+  grid-template-columns: minmax(0, 1fr);
   gap: clamp(16px, 3vw, 32px);
   align-items: start;
   padding-bottom: 64px;
 }
-.cpub-content-grid.cpub-has-toc {
+.cpub-project-grid.cpub-has-toc {
+  grid-template-columns: 200px minmax(0, 1fr);
+}
+.cpub-project-grid.cpub-has-sidebar {
+  grid-template-columns: minmax(0, 1fr) 260px;
+}
+.cpub-project-grid.cpub-has-toc.cpub-has-sidebar {
   grid-template-columns: 200px minmax(0, 1fr) 260px;
 }
 
@@ -1561,9 +1590,12 @@ async function handleBuild(): Promise<void> {
 
 /* ── RESPONSIVE ── */
 
-/* 1200px: Drop left TOC column, keep sidebar */
+/* 1200px: Drop left TOC column, keep sidebar if it exists */
 @media (max-width: 1200px) {
-  .cpub-content-grid.cpub-has-toc {
+  .cpub-project-grid.cpub-has-toc {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .cpub-project-grid.cpub-has-toc.cpub-has-sidebar {
     grid-template-columns: minmax(0, 1fr) 260px;
   }
   .cpub-toc-col { display: none; }
@@ -1571,8 +1603,10 @@ async function handleBuild(): Promise<void> {
 
 /* 1024px: Single column — sidebar stacks below content */
 @media (max-width: 1024px) {
-  .cpub-content-grid,
-  .cpub-content-grid.cpub-has-toc {
+  .cpub-project-grid,
+  .cpub-project-grid.cpub-has-toc,
+  .cpub-project-grid.cpub-has-sidebar,
+  .cpub-project-grid.cpub-has-toc.cpub-has-sidebar {
     grid-template-columns: minmax(0, 1fr);
   }
   .cpub-sidebar { position: static; }
@@ -1593,7 +1627,7 @@ async function handleBuild(): Promise<void> {
   .cpub-sidebar { position: static; }
   .cpub-author-tags .cpub-author-tag { padding: 2px 8px; font-size: 10px; }
   .cpub-author-row { flex-wrap: wrap; gap: 8px; }
-  .cpub-content-grid { padding-bottom: 32px; }
+  .cpub-project-grid { padding-bottom: 32px; }
 }
 
 /* 480px: Phone — compact everything */
@@ -1607,6 +1641,6 @@ async function handleBuild(): Promise<void> {
   .cpub-engage-btn { font-size: 11px; padding: 8px 10px; }
   .cpub-author-detail { font-size: 10px; }
   .cpub-toc-item { padding: 6px 0 6px 10px; font-size: 11px; min-height: 36px; display: flex; align-items: center; }
-  .cpub-content-grid { gap: 12px; padding-bottom: 24px; }
+  .cpub-project-grid { gap: 12px; padding-bottom: 24px; }
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.21.15",
+  "version": "0.21.17",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -51,14 +51,14 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.6.0",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/config": "0.13.0",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/server": "2.55.0",
-    "@commonpub/schema": "0.16.0",
     "@commonpub/editor": "0.7.10",
-    "@commonpub/learning": "0.5.2",
+    "@commonpub/schema": "0.16.0",
+    "@commonpub/server": "2.55.0",
     "@commonpub/protocol": "0.12.0",
-    "@commonpub/explainer": "0.7.15",
     "@commonpub/ui": "0.8.5"
   },
   "devDependencies": {