@commonpub/layer 0.7.19 → 0.7.21

package/components/views/ExplainerView.vue

@@ -603,10 +603,18 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
 .cpub-content-wrap {
   max-width: 720px;
   margin: 0 auto;
-  padding: 44px 36px 80px;
+  padding: 44px clamp(12px, 4vw, 36px) 80px;
   min-height: calc(100vh - 51px - 80px);
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
+/* Prevent content overflow */
+.cpub-content-wrap :deep(img),
+.cpub-content-wrap :deep(video),
+.cpub-content-wrap :deep(iframe) { max-width: 100%; height: auto; }
+.cpub-content-wrap :deep(pre) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+
 /* ── COVER IMAGE ── */
 .cpub-explainer-cover {
   width: 100%;
@@ -773,7 +781,7 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
 @media (max-width: 768px) {
   .cpub-explainer-sidebar { display: none; }
   .cpub-mobile-author { display: flex; }
-  .cpub-content-wrap { padding: 24px 16px 48px; }
+  .cpub-content-wrap { padding-top: 24px; padding-bottom: 48px; }
   .cpub-section-nav { flex-direction: column; gap: 16px; }
   .cpub-section-title { font-size: 22px; }
   .cpub-explainer-topbar { gap: 6px; padding: 0 10px; }
@@ -786,7 +794,7 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
 }
 
 @media (max-width: 480px) {
-  .cpub-content-wrap { padding: 16px 12px 40px; }
+  .cpub-content-wrap { padding-top: 16px; padding-bottom: 40px; }
   .cpub-section-title { font-size: 18px; }
   .cpub-section-body { font-size: 14px; }
   .cpub-section-num-badge { width: 28px; height: 28px; font-size: 11px; }

package/package.json

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

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

@@ -50,7 +50,25 @@ const mode = ref<'write' | 'preview' | 'code'>('write');
 const contentId = ref<string | null>(null);
 
 // --- Block editor (articles, blogs, projects) ---
-const blockEditor = useBlockEditor();
+// Pre-populate new projects with a structured template using build step blocks
+const projectTemplate: [string, Record<string, unknown>][] = [
+  ['heading', { text: 'Introduction', level: 2 }],
+  ['paragraph', { html: '<p>State what the reader will build or learn. Open with a relatable scenario or clear goal: "In this guide, we\'ll..."</p>' }],
+  ['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>' }],
+  ['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: '' }],
+  ['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 }],
+  ['paragraph', { html: '<p>Summarize what was accomplished in 2–3 sentences. Suggest ideas for extending or remixing the project. Keep the tone forward-looking and inspiring.</p>' }],
+  ['heading', { text: 'Community', level: 2 }],
+  ['paragraph', { html: '<p>Invite readers to share their results. Link to relevant community spaces. Close with genuine enthusiasm: "We\'d love to see what you build!"</p>' }],
+];
+
+const initialBlocks = isNew.value && contentType.value === 'project' ? projectTemplate : undefined;
+const blockEditor = useBlockEditor(initialBlocks as [string, Record<string, unknown>][] | undefined);
 
 // --- Explainer document (explainers only) ---
 const isExplainer = computed(() => contentType.value === 'explainer');