@commonpub/layer 0.7.24 → 0.7.25

package/components/blocks/BlockBuildStepView.vue

@@ -1,14 +1,39 @@
 <script setup lang="ts">
+/**
+ * Build step viewer — renders step header + nested children via BlockContentRenderer.
+ * Migrates old flat format (instructions + image) to children on render.
+ */
+import type { BlockTuple } from '@commonpub/editor';
+
 const props = defineProps<{
   content: Record<string, unknown>;
   stepNumber?: number;
 }>();
 
 const title = computed(() => (props.content.title as string) || `Step ${props.stepNumber ?? 1}`);
-const instructions = computed(() => (props.content.instructions as string) || '');
 const time = computed(() => (props.content.time as string) || '');
-const image = computed(() => (props.content.image as string) || '');
 const num = computed(() => props.stepNumber ?? (props.content.stepNumber as number) ?? 1);
+
+/** Resolve children — migrate from old flat format if needed */
+const children = computed<BlockTuple[]>(() => {
+  if (props.content.children && Array.isArray(props.content.children) && props.content.children.length > 0) {
+    return props.content.children as BlockTuple[];
+  }
+  // Migrate old format
+  const result: BlockTuple[] = [];
+  const instructions = props.content.instructions as string | undefined;
+  if (instructions && instructions.trim()) {
+    const html = instructions.startsWith('<') ? instructions : `<p>${instructions}</p>`;
+    result.push(['paragraph', { html }]);
+  }
+  const image = props.content.image as string | undefined;
+  if (image && image.trim()) {
+    result.push(['image', { src: image, alt: `Step ${num.value}`, caption: '' }]);
+  }
+  return result;
+});
+
+const hasChildren = computed(() => children.value.length > 0);
 </script>
 
 <template>
@@ -18,9 +43,8 @@ const num = computed(() => props.stepNumber ?? (props.content.stepNumber as numb
       <h3 class="cpub-step-title">{{ title }}</h3>
       <span v-if="time" class="cpub-step-time"><i class="fa-regular fa-clock"></i> {{ time }}</span>
     </div>
-    <div class="cpub-step-body">
-      <p v-if="instructions">{{ instructions }}</p>
-      <img v-if="image" :src="image" :alt="`Step ${num}`" class="cpub-step-img" loading="lazy" />
+    <div v-if="hasChildren" class="cpub-step-body">
+      <BlockContentRenderer :blocks="children" />
     </div>
   </div>
 </template>
@@ -78,15 +102,4 @@ const num = computed(() => props.stepNumber ?? (props.content.stepNumber as numb
   line-height: 1.7;
   color: var(--text-dim);
 }
-
-.cpub-step-body p { margin: 0 0 12px; }
-.cpub-step-body p:last-child { margin-bottom: 0; }
-
-.cpub-step-img {
-  width: 100%;
-  max-height: 400px;
-  object-fit: cover;
-  border: var(--border-width-default) solid var(--border);
-  margin-top: 12px;
-}
 </style>

package/package.json

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

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

@@ -57,9 +57,9 @@ const projectTemplate: [string, Record<string, unknown>][] = [
   ['heading', { text: 'Prerequisites', level: 2 }],
   ['paragraph', { html: '<ul><li><p>Required tools, accounts, or hardware</p></li><li><p>Link each tool/service on first mention</p></li></ul>' }],
   ['partsList', { parts: [] }],
-  ['buildStep', { stepNumber: 1, instructions: 'Brief context sentence — why this step matters.\n\nNumbered steps with imperative verbs. Use code blocks for commands, inline code for filenames and values.\n\nAfter key steps, state what the reader should see or expect.', image: '', time: '' }],
-  ['buildStep', { stepNumber: 2, instructions: 'Continue the pattern. Each build step = one phase of the build.\n\nLink to external repos for full code instead of pasting walls of code.', image: '', time: '' }],
-  ['buildStep', { stepNumber: 3, instructions: 'Add as many steps as needed. Each step should be a clear, actionable phase.', image: '', time: '' }],
+  ['buildStep', { stepNumber: 1, title: 'Set Up', time: '', children: [['paragraph', { html: '<p>Brief context sentence — why this step matters. Use code blocks for commands, inline code for filenames and values.</p>' }]] }],
+  ['buildStep', { stepNumber: 2, title: 'Build', time: '', children: [['paragraph', { html: '<p>Continue the pattern. Each build step = one phase of the build. Link to external repos for full code instead of pasting walls of code.</p>' }]] }],
+  ['buildStep', { stepNumber: 3, title: 'Verify', time: '', children: [['paragraph', { html: '<p>Add as many steps as needed. Each step should be a clear, actionable phase.</p>' }]] }],
   ['heading', { text: 'Testing & Verification', level: 2 }],
   ['paragraph', { html: '<p>Tell the reader how to confirm it works. Describe expected output or show what success looks like. Mention common pitfalls briefly if relevant.</p>' }],
   ['heading', { text: "What\'s Next?!", level: 2 }],