@commonpub/layer 0.21.17 → 0.21.19

package/components/blocks/BlockImageView.vue

@@ -4,22 +4,53 @@ const props = defineProps<{ content: Record<string, unknown> }>();
 const src = computed(() => (props.content.src as string) || (props.content.url as string) || '');
 const alt = computed(() => (props.content.alt as string) || '');
 const caption = computed(() => (props.content.caption as string) || '');
+
+/**
+ * Rendered-width preset. New uploads (editor ≥ 0.7.11) carry `size` on
+ * the BlockTuple content; pre-picker content (no `size` field) falls
+ * back to `l` to preserve its pre-0.21.19 visual width — that's the
+ * 760px cap from layer 0.21.18.
+ */
+type ImageSize = 's' | 'm' | 'l' | 'full';
+const size = computed<ImageSize>(() => {
+  const v = props.content.size;
+  return v === 's' || v === 'm' || v === 'l' || v === 'full' ? v : 'l';
+});
 </script>
 
 <template>
-  <figure v-if="src" class="cpub-block-image">
+  <figure v-if="src" class="cpub-block-image" :class="`cpub-image-size-${size}`">
     <img :src="src" :alt="alt" class="cpub-image-img" loading="lazy" />
     <figcaption v-if="caption" class="cpub-image-caption">{{ caption }}</figcaption>
   </figure>
 </template>
 
 <style scoped>
+/**
+ * Width preset is applied via a class on the <figure> wrapper. The image
+ * itself is `width: 100%` of the wrapper, so capping the wrapper's
+ * max-width caps the image. `margin-inline: auto` centers when narrower
+ * than the available column. The caption sits underneath at the wrapper's
+ * width so it never extends past the image.
+ *
+ * Aspect ratio is preserved via the image's intrinsic ratio + `height:
+ * auto`. The .cpub-prose :deep(img) cap in ProjectView.vue still applies
+ * but at 760px — these per-block presets stay within that envelope (the
+ * 760-cap in ProjectView is the fallback when no per-block size is set).
+ */
 .cpub-block-image {
-  margin: 24px 0;
+  margin: 24px auto;
+  display: block;
 }
 
+.cpub-image-size-s { max-width: 320px; }
+.cpub-image-size-m { max-width: 540px; }
+.cpub-image-size-l { max-width: 760px; }
+.cpub-image-size-full { max-width: 100%; }
+
 .cpub-image-img {
   width: 100%;
+  height: auto;
   display: block;
   border: var(--border-width-default) solid var(--border);
 }

package/components/views/ProjectView.vue

@@ -713,7 +713,10 @@ async function handleBuild(): Promise<void> {
 .cpub-page-outer {
   max-width: 1160px;
   margin: 0 auto;
-  padding: 0 clamp(12px, 3vw, 32px);
+  /* A smidge more breathing room at all widths: min 20 (was 12),
+     max 40 (was 32). Keeps content from hugging the viewport edge
+     on mid-size screens. */
+  padding: 0 clamp(20px, 3.5vw, 40px);
 }
 
 /* ── BREADCRUMB ── */
@@ -989,9 +992,16 @@ async function handleBuild(): Promise<void> {
   overflow-wrap: break-word;
 }
 
-/* ── COVER PHOTO (in-body) ── */
+/* ── COVER PHOTO (in-body) ──
+ * The in-body featured image. Lives OUTSIDE .cpub-prose, so the
+ * `.cpub-prose img` cap doesn't reach it. Cap here at 880px (a touch
+ * wider than the 'l' preset for body images, since this is the hero
+ * featured image) and center. Pre-0.21.19 this was unbounded `width:
+ * 100%` and grew to whatever the content column was — too big on wide
+ * layouts. */
 .cpub-cover-photo {
-  margin-bottom: 24px;
+  margin: 0 auto 24px;
+  max-width: 880px;
 }
 
 .cpub-cover-photo-img {
@@ -1010,13 +1020,30 @@ async function handleBuild(): Promise<void> {
   word-break: break-word;
 }
 
-/* Prevent images and media from overflowing prose */
+/* Prevent images and media from overflowing prose, AND cap them at a
+   reading-friendly size in wide content columns. Without this cap, body
+   images blew up to 900px+ once the right sidebar was made optional in
+   0.21.16 (the content column got wider when no BOM/community). 760px
+   for images matches what photographers + technical-writing layouts
+   converge on; videos/iframes get a touch more (880px) for visibility.
+   Cover photo lives OUTSIDE .cpub-prose so it still goes full-width. */
 .cpub-prose :deep(img),
 .cpub-prose :deep(video),
 .cpub-prose :deep(iframe) {
   max-width: 100%;
   height: auto;
 }
+.cpub-prose :deep(img) {
+  max-width: min(100%, 760px);
+  margin-inline: auto;
+  display: block;
+}
+.cpub-prose :deep(video),
+.cpub-prose :deep(iframe) {
+  max-width: min(100%, 880px);
+  margin-inline: auto;
+  display: block;
+}
 
 /* Code blocks scroll horizontally instead of overflowing */
 .cpub-prose :deep(pre) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.21.17",
+  "version": "0.21.19",
   "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/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/editor": "0.7.10",
+    "@commonpub/editor": "0.7.11",
+    "@commonpub/protocol": "0.12.0",
     "@commonpub/schema": "0.16.0",
     "@commonpub/server": "2.55.0",
-    "@commonpub/protocol": "0.12.0",
-    "@commonpub/ui": "0.8.5"
+    "@commonpub/ui": "0.8.5",
+    "@commonpub/auth": "0.6.0",
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/explainer": "0.7.15"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",