@commonpub/layer 0.7.17 → 0.7.19

package/components/editors/ArticleEditor.vue

@@ -128,6 +128,26 @@ function removeCover(): void {
   updateMeta('coverImageUrl', '');
 }
 
+// --- Banner image ---
+const bannerUrl = computed(() => (props.metadata.bannerUrl as string) || '');
+
+function onBannerUpload(event: Event): void {
+  const input = event.target as HTMLInputElement;
+  if (!input.files?.length) return;
+  const file = input.files[0];
+  if (!file) return;
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('purpose', 'cover');
+  $fetch<{ url: string }>('/api/files/upload', { method: 'POST', body: formData })
+    .then((res) => { updateMeta('bannerUrl', res.url); })
+    .catch(() => {});
+}
+
+function removeBanner(): void {
+  updateMeta('bannerUrl', '');
+}
+
 // --- SEO preview ---
 const seoDomain = computed(() => {
   try { return new URL(useRequestURL().origin).hostname; } catch { return 'example.com'; }
@@ -136,7 +156,7 @@ const seoPreviewDesc = computed(() => (props.metadata.seoDescription as string)
 
 // --- Right panel ---
 const openSections = ref<Record<string, boolean>>({
-  content: true, seo: false, publishing: true, cover: false,
+  content: true, seo: false, publishing: true, cover: false, banner: false,
 });
 function toggleSection(key: string): void {
   openSections.value[key] = !openSections.value[key];
@@ -347,6 +367,27 @@ const canvasMaxWidth = computed(() => {
           </div>
         </EditorSection>
 
+        <!-- Banner Image -->
+        <EditorSection title="Banner Image" icon="fa-panorama" :open="openSections.banner" @toggle="toggleSection('banner')">
+          <p class="cpub-ep-hint" style="margin-bottom: 8px;">Hero background at the top of the page. Falls back to your profile banner if not set.</p>
+          <div v-if="bannerUrl" class="cpub-ae-banner-preview">
+            <img :src="bannerUrl" alt="Banner" class="cpub-ae-banner-img" />
+            <div class="cpub-ae-banner-actions">
+              <button class="cpub-ae-cover-btn" @click="removeBanner"><i class="fa-solid fa-trash"></i> Remove</button>
+              <label class="cpub-ae-cover-btn">
+                <i class="fa-solid fa-arrow-up-from-bracket"></i> Replace
+                <input type="file" accept="image/*" class="cpub-sr-only" @change="onBannerUpload">
+              </label>
+            </div>
+          </div>
+          <div v-else>
+            <label class="cpub-ae-cover-btn primary" style="display: inline-flex;">
+              <i class="fa-solid fa-arrow-up-from-bracket"></i> Upload Banner
+              <input type="file" accept="image/*" class="cpub-sr-only" @change="onBannerUpload">
+            </label>
+          </div>
+        </EditorSection>
+
         <!-- SEO -->
         <EditorSection title="SEO Preview" icon="fa-brands fa-google" :open="openSections.seo" @toggle="toggleSection('seo')">
           <div class="cpub-seo-card">
@@ -583,4 +624,9 @@ const canvasMaxWidth = computed(() => {
 }
 .cpub-seo-title { font-size: 14px; color: var(--accent); font-weight: 500; margin-bottom: 2px; }
 .cpub-seo-desc { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
+
+/* Banner preview */
+.cpub-ae-banner-preview { position: relative; margin-bottom: 8px; }
+.cpub-ae-banner-img { width: 100%; height: 80px; object-fit: cover; display: block; border: var(--border-width-default) solid var(--border); }
+.cpub-ae-banner-actions { display: flex; gap: 6px; margin-top: 6px; }
 </style>

package/components/editors/BlogEditor.vue

@@ -45,7 +45,7 @@ const blockTypes: BlockTypeGroup[] = [
 ];
 
 const openSections = ref<Record<string, boolean>>({
-  meta: true, excerpt: true, seo: true, publishing: true, author: true, social: false,
+  meta: true, excerpt: true, banner: false, seo: true, publishing: true, author: true, social: false,
 });
 function toggleSection(key: string): void {
   openSections.value[key] = !openSections.value[key];
@@ -80,6 +80,26 @@ function removeCover(): void {
   updateMeta('coverImageUrl', '');
 }
 
+// --- Banner image ---
+const bannerUrl = computed(() => (props.metadata.bannerUrl as string) || '');
+
+function onBannerUpload(event: Event): void {
+  const input = event.target as HTMLInputElement;
+  if (!input.files?.length) return;
+  const file = input.files[0];
+  if (!file) return;
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('purpose', 'cover');
+  $fetch<{ url: string }>('/api/files/upload', { method: 'POST', body: formData })
+    .then((res) => { updateMeta('bannerUrl', res.url); })
+    .catch(() => {});
+}
+
+function removeBanner(): void {
+  updateMeta('bannerUrl', '');
+}
+
 // --- Word count ---
 const wordCount = computed(() => {
   let count = 0;
@@ -289,6 +309,27 @@ const canvasMaxWidth = computed(() => {
           </div>
         </EditorSection>
 
+        <!-- Banner Image -->
+        <EditorSection title="Banner Image" icon="fa-panorama" :open="openSections.banner" @toggle="toggleSection('banner')">
+          <p class="cpub-ep-hint" style="margin-bottom: 8px;">Hero background at the top of the page. Falls back to your profile banner if not set.</p>
+          <div v-if="bannerUrl" class="cpub-be-banner-preview">
+            <img :src="bannerUrl" alt="Banner" class="cpub-be-banner-img" />
+            <div class="cpub-be-banner-actions">
+              <button class="cpub-be-cover-btn" @click="removeBanner"><i class="fa-solid fa-trash"></i> Remove</button>
+              <label class="cpub-be-cover-btn">
+                <i class="fa-solid fa-arrow-up-from-bracket"></i> Replace
+                <input type="file" accept="image/*" class="cpub-sr-only" @change="onBannerUpload">
+              </label>
+            </div>
+          </div>
+          <div v-else>
+            <label class="cpub-be-cover-btn primary" style="display: inline-flex;">
+              <i class="fa-solid fa-arrow-up-from-bracket"></i> Upload Banner
+              <input type="file" accept="image/*" class="cpub-sr-only" @change="onBannerUpload">
+            </label>
+          </div>
+        </EditorSection>
+
         <!-- SEO Preview -->
         <EditorSection title="SEO Preview" icon="fa-brands fa-google" :open="openSections.seo" @toggle="toggleSection('seo')">
           <div class="cpub-be-seo-card">
@@ -580,4 +621,9 @@ const canvasMaxWidth = computed(() => {
   .cpub-be-cover-actions { opacity: 1; }
   .cpub-be-og-overlay { opacity: 1; }
 }
+
+/* Banner preview */
+.cpub-be-banner-preview { position: relative; margin-bottom: 8px; }
+.cpub-be-banner-img { width: 100%; height: 80px; object-fit: cover; display: block; border: var(--border-width-default) solid var(--border); }
+.cpub-be-banner-actions { display: flex; gap: 6px; margin-top: 6px; }
 </style>

package/components/editors/ProjectEditor.vue

@@ -52,7 +52,7 @@ const seoDomain = computed(() => {
 const seoPreviewDesc = computed(() => (props.metadata.seoDescription as string) || (props.metadata.description as string) || '');
 
 const openSections = ref<Record<string, boolean>>({
-  meta: true, tags: true, visibility: true, cover: false, seo: false, checklist: true,
+  meta: true, tags: true, visibility: true, cover: false, banner: false, seo: false, checklist: true,
 });
 function toggleSection(key: string): void {
   openSections.value[key] = !openSections.value[key];
@@ -85,6 +85,26 @@ function removeCover(): void {
   updateMeta('coverImageUrl', '');
 }
 
+// --- Banner image ---
+const bannerUrl = computed(() => (props.metadata.bannerUrl as string) || '');
+
+function onBannerUpload(event: Event): void {
+  const input = event.target as HTMLInputElement;
+  if (!input.files?.length) return;
+  const file = input.files[0];
+  if (!file) return;
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('purpose', 'cover');
+  $fetch<{ url: string }>('/api/files/upload', { method: 'POST', body: formData })
+    .then((res) => { updateMeta('bannerUrl', res.url); })
+    .catch(() => {});
+}
+
+function removeBanner(): void {
+  updateMeta('bannerUrl', '');
+}
+
 const tags = computed(() => (props.metadata.tags as string[]) || []);
 function onTagsUpdate(newTags: string[]): void { updateMeta('tags', newTags); }
 const visibility = computed(() => (props.metadata.visibility as string) || 'public');
@@ -297,6 +317,27 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
           </div>
         </EditorSection>
 
+        <!-- Banner Image -->
+        <EditorSection title="Banner Image" icon="fa-panorama" :open="openSections.banner" @toggle="toggleSection('banner')">
+          <p class="cpub-pe-hint" style="margin-bottom: 8px;">Hero background at the top of the page. Falls back to your profile banner if not set.</p>
+          <div v-if="bannerUrl" class="cpub-pe-banner-preview">
+            <img :src="bannerUrl" alt="Banner" class="cpub-pe-banner-img" />
+            <div class="cpub-pe-banner-actions">
+              <button class="cpub-pe-cover-btn" @click="removeBanner"><i class="fa-solid fa-trash"></i> Remove</button>
+              <label class="cpub-pe-cover-btn">
+                <i class="fa-solid fa-arrow-up-from-bracket"></i> Replace
+                <input type="file" accept="image/*" class="cpub-sr-only" @change="onBannerUpload">
+              </label>
+            </div>
+          </div>
+          <div v-else>
+            <label class="cpub-pe-cover-btn primary" style="display: inline-flex;">
+              <i class="fa-solid fa-arrow-up-from-bracket"></i> Upload Banner
+              <input type="file" accept="image/*" class="cpub-sr-only" @change="onBannerUpload">
+            </label>
+          </div>
+        </EditorSection>
+
         <EditorSection title="SEO Preview" icon="fa-brands fa-google" :open="openSections.seo" @toggle="toggleSection('seo')">
           <div class="cpub-seo-card">
             <div class="cpub-seo-url">
@@ -497,4 +538,9 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
 }
 .cpub-seo-title { font-size: 14px; color: var(--accent); font-weight: 500; margin-bottom: 2px; }
 .cpub-seo-desc { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
+
+/* Banner preview */
+.cpub-pe-banner-preview { position: relative; margin-bottom: 8px; }
+.cpub-pe-banner-img { width: 100%; height: 80px; object-fit: cover; display: block; border: var(--border-width-default) solid var(--border); }
+.cpub-pe-banner-actions { display: flex; gap: 6px; margin-top: 6px; }
 </style>

package/components/views/ArticleView.vue

@@ -317,10 +317,14 @@ useJsonLd({
 }
 
 /* ── ARTICLE WRAP ── */
+.cpub-article-view {
+  overflow-x: clip;
+}
+
 .cpub-article-wrap {
   max-width: 720px;
   margin: 0 auto;
-  padding: 40px 24px 80px;
+  padding: 40px clamp(12px, 4vw, 24px) 80px;
 }
 
 /* ── TYPE BADGE ── */
@@ -771,6 +775,13 @@ useJsonLd({
   gap: 6px;
 }
 
+/* Global overflow protection for content */
+.cpub-article-wrap :deep(img),
+.cpub-article-wrap :deep(video),
+.cpub-article-wrap :deep(iframe) { max-width: 100%; height: auto; }
+.cpub-article-wrap :deep(pre) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+.cpub-article-wrap { overflow-wrap: break-word; word-break: break-word; }
+
 /* ── COVER PHOTO (in-body) ── */
 .cpub-cover-photo {
   margin-bottom: 24px;
@@ -784,7 +795,7 @@ useJsonLd({
 
 /* ── RESPONSIVE ── */
 @media (max-width: 768px) {
-  .cpub-article-wrap { padding: 24px 16px 48px; }
+  .cpub-article-wrap { padding-top: 24px; padding-bottom: 48px; }
   .cpub-article-title { font-size: 22px; }
   .cpub-article-lead { font-size: 14px; margin-bottom: 16px; }
   .cpub-related-grid { grid-template-columns: 1fr 1fr; }
@@ -795,7 +806,7 @@ useJsonLd({
 }
 
 @media (max-width: 480px) {
-  .cpub-article-wrap { padding: 16px 12px 40px; }
+  .cpub-article-wrap { padding-top: 16px; padding-bottom: 40px; }
   .cpub-article-title { font-size: 20px; }
   .cpub-article-lead { font-size: 13px; }
   .cpub-related-grid { grid-template-columns: 1fr; }

package/components/views/BlogView.vue

@@ -216,12 +216,24 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 }
 
 /* ── BLOG WRAP ── */
+.cpub-blog-view {
+  overflow-x: clip;
+}
+
 .cpub-blog-wrap {
   max-width: 720px;
   margin: 0 auto;
-  padding: 40px 24px 80px;
+  padding: 40px clamp(12px, 4vw, 24px) 80px;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
+/* Global overflow protection for content */
+.cpub-blog-wrap :deep(img),
+.cpub-blog-wrap :deep(video),
+.cpub-blog-wrap :deep(iframe) { max-width: 100%; height: auto; }
+.cpub-blog-wrap :deep(pre) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+
 /* ── TYPE BADGE ── */
 .cpub-content-type-badge {
   display: inline-flex;
@@ -702,7 +714,7 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 
 /* ── RESPONSIVE ── */
 @media (max-width: 768px) {
-  .cpub-blog-wrap { padding: 24px 16px 48px; }
+  .cpub-blog-wrap { padding-top: 24px; padding-bottom: 48px; }
   .cpub-blog-title { font-size: 22px; }
   .cpub-engagement-row { flex-wrap: wrap; gap: 6px; }
   .cpub-engage-btn { padding: 8px 12px; min-height: 36px; }
@@ -713,7 +725,7 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 }
 
 @media (max-width: 480px) {
-  .cpub-blog-wrap { padding: 16px 12px 40px; }
+  .cpub-blog-wrap { padding-top: 16px; padding-bottom: 40px; }
   .cpub-blog-title { font-size: 20px; }
   .cpub-blog-lead { font-size: 13px; }
   .cpub-author-card { flex-direction: column; gap: 12px; }

package/components/views/ProjectView.vue

@@ -591,8 +591,8 @@ async function handleBuild(): Promise<void> {
 <style scoped>
 /* ── HERO COVER ── */
 .cpub-project-view {
-  overflow-x: hidden;
-  width: 100%;
+  /* Prevent any child from creating horizontal scroll */
+  overflow-x: clip;
 }
 
 .cpub-hero-cover {
@@ -680,7 +680,7 @@ async function handleBuild(): Promise<void> {
 .cpub-page-outer {
   max-width: 1160px;
   margin: 0 auto;
-  padding: 0 32px;
+  padding: 0 clamp(12px, 3vw, 32px);
 }
 
 /* ── BREADCRUMB ── */
@@ -925,16 +925,19 @@ async function handleBuild(): Promise<void> {
 /* ── CONTENT GRID ── */
 .cpub-content-grid {
   display: grid;
-  grid-template-columns: 1fr 260px;
-  gap: 32px;
+  grid-template-columns: minmax(0, 1fr) 260px;
+  gap: clamp(16px, 3vw, 32px);
   align-items: start;
   padding-bottom: 64px;
 }
 .cpub-content-grid.cpub-has-toc {
-  grid-template-columns: 200px 1fr 260px;
+  grid-template-columns: 200px minmax(0, 1fr) 260px;
 }
 
-.cpub-content-col {
+/* Prevent grid children from overflowing */
+.cpub-content-col,
+.cpub-sidebar,
+.cpub-toc-col {
   min-width: 0;
   overflow-wrap: break-word;
 }
@@ -960,6 +963,20 @@ async function handleBuild(): Promise<void> {
   word-break: break-word;
 }
 
+/* Prevent images and media from overflowing prose */
+.cpub-prose :deep(img),
+.cpub-prose :deep(video),
+.cpub-prose :deep(iframe) {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Code blocks scroll horizontally instead of overflowing */
+.cpub-prose :deep(pre) {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 .cpub-prose :deep(h2),
 .cpub-prose :deep(.section-title) {
   font-size: 16px;
@@ -1525,48 +1542,53 @@ async function handleBuild(): Promise<void> {
 }
 
 /* ── RESPONSIVE ── */
+
+/* 1200px: Drop left TOC column, keep sidebar */
 @media (max-width: 1200px) {
   .cpub-content-grid.cpub-has-toc {
-    grid-template-columns: 1fr 260px;
+    grid-template-columns: minmax(0, 1fr) 260px;
   }
   .cpub-toc-col { display: none; }
 }
+
+/* 1024px: Single column — sidebar stacks below content */
 @media (max-width: 1024px) {
   .cpub-content-grid,
   .cpub-content-grid.cpub-has-toc {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
   .cpub-sidebar { position: static; }
   .cpub-toc-col { display: none; }
 }
 
+/* 768px: Tablet — reduce sizes, wrap engagement, scroll tabs */
 @media (max-width: 768px) {
-  .cpub-page-outer { padding: 0 16px; }
   .cpub-hero-cover { height: 200px; }
   .cpub-project-title { font-size: 18px; }
   .cpub-project-desc { font-size: 13px; }
-  .cpub-tabs-strip { padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
-  .cpub-tabs-inner { max-width: none; padding: 0; }
+  .cpub-tabs-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .cpub-tabs-inner { max-width: none; padding: 0 clamp(12px, 3vw, 32px); }
   .cpub-tab { padding: 10px 12px; font-size: 11px; white-space: nowrap; }
   .cpub-engagement-row { flex-wrap: wrap; gap: 6px; }
   .cpub-engage-btn { padding: 8px 12px; min-height: 36px; }
   .cpub-engage-sep { display: none; }
-  .cpub-content-area { padding: 0 16px; }
   .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; }
 }
 
+/* 480px: Phone — compact everything */
 @media (max-width: 480px) {
-  .cpub-page-outer { padding: 0 12px; }
   .cpub-hero-cover { height: 160px; }
   .cpub-project-title { font-size: 16px; }
   .cpub-project-desc { font-size: 12px; line-height: 1.5; }
-  .cpub-project-meta { padding: 16px 0 0; }
-  .cpub-breadcrumbs { font-size: 10px; padding: 10px 0 8px; }
+  .cpub-project-meta { padding: 12px 0 0; }
+  .cpub-breadcrumb { font-size: 10px; padding: 10px 0 8px; }
   .cpub-tab { padding: 8px 10px; font-size: 10px; }
   .cpub-engage-btn { font-size: 11px; padding: 8px 10px; }
-  .cpub-author-row { gap: 8px; }
   .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; }
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.7.17",
+  "version": "0.7.19",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,15 +50,15 @@
     "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/docs": "0.6.2",
-    "@commonpub/learning": "0.5.0",
     "@commonpub/explainer": "0.7.6",
-    "@commonpub/editor": "0.7.5",
-    "@commonpub/ui": "0.8.5",
+    "@commonpub/learning": "0.5.0",
     "@commonpub/server": "2.27.7",
     "@commonpub/protocol": "0.9.7",
+    "@commonpub/ui": "0.8.5",
     "@commonpub/schema": "0.9.5"
   },
   "devDependencies": {

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

@@ -41,6 +41,7 @@ const metadata = ref<Record<string, unknown>>({
   tags: [],
   visibility: 'public',
   coverImageUrl: '',
+  bannerUrl: '',
   ...(hubFromQuery ? { hubSlug: hubFromQuery } : {}),
 });
 const isDirty = ref(false);
@@ -147,6 +148,7 @@ if (!isNew.value) {
       tags: d.tags ? (d.tags as { name: string }[]).map((t) => t.name) : [],
       visibility: (d.visibility as string) || 'public',
       coverImageUrl: (d.coverImageUrl as string) || '',
+      bannerUrl: (d.bannerUrl as string) || '',
       seoDescription: (d.seoDescription as string) || '',
       difficulty: (d.difficulty as string) || '',
       buildTime: (d.buildTime as string) || '',