@commonpub/layer 0.21.2 → 0.21.4

package/components/blocks/BlockBuildStepView.vue

@@ -44,7 +44,13 @@ const hasChildren = computed(() => children.value.length > 0);
       <span v-if="time" class="cpub-step-time"><i class="fa-regular fa-clock"></i> {{ time }}</span>
     </div>
     <div v-if="hasChildren" class="cpub-step-body">
-      <BlockContentRenderer :blocks="children" />
+      <!-- Nuxt pathPrefix auto-imports components/blocks/BlockContentRenderer.vue
+           under the name BlocksBlockContentRenderer (the Blocks dir prefix only
+           de-dups when the filename starts with it). The bare tag would not
+           resolve and would silently blank nested step content. A static import
+           is not an option here: BlockContentRenderer and BlockBuildStepView are
+           mutually recursive (ESM cycle). Use the auto-import name. -->
+      <BlocksBlockContentRenderer :blocks="children" />
     </div>
   </div>
 </template>

package/components/homepage/HeroSection.vue

@@ -74,7 +74,7 @@ function dismissHero(): void {
 .cpub-hero-dismiss { position: absolute; top: 12px; right: 16px; background: transparent; border: none; color: var(--text-faint); font-size: 12px; cursor: pointer; padding: 4px; z-index: 2; }
 .cpub-hero-dismiss:hover { color: var(--text-dim); }
 .cpub-hero-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 36px 32px; width: 100%; display: flex; align-items: center; gap: 48px; }
-.cpub-hero-content { flex: 1; }
+.cpub-hero-content { flex: 1; min-width: 0; }
 .cpub-hero-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
 .cpub-hero-badge { font-size: 9px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; background: var(--yellow-bg); border: var(--border-width-default) solid var(--yellow); color: var(--yellow); }
 .cpub-hero-badge-live { background: var(--green-bg); border-color: var(--green); color: var(--green); display: flex; align-items: center; gap: 5px; }
@@ -83,5 +83,13 @@ function dismissHero(): void {
 .cpub-hero-title { font-size: 22px; font-weight: 700; line-height: 1.25; margin-bottom: 10px; }
 .cpub-hero-title span { color: var(--accent); }
 .cpub-hero-excerpt { font-size: 13px; color: var(--text-dim); line-height: 1.65; margin-bottom: 20px; max-width: 560px; }
-.cpub-hero-actions { display: flex; gap: 8px; }
+.cpub-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+
+@media (max-width: 640px) {
+  .cpub-hero-inner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px 16px; }
+  .cpub-hero-title { font-size: 19px; }
+  .cpub-hero-excerpt { font-size: 13px; }
+  .cpub-hero-actions { width: 100%; }
+  .cpub-hero-actions :deep(.cpub-btn) { flex: 1 1 140px; justify-content: center; }
+}
 </style>

package/components/homepage/HomepageSectionRenderer.vue

@@ -1,12 +1,22 @@
 <script setup lang="ts">
 import type { HomepageSection } from '@commonpub/server';
 
-defineProps<{
+const props = defineProps<{
   sections: HomepageSection[];
   /** Which zone to render: 'main' for feed column, 'sidebar' for sidebar */
   zone: 'main' | 'sidebar' | 'full-width';
+  /** If set, only render sections whose type is in this list (zone still applies). */
+  restrictTypes?: string[];
+  /** If set, skip sections whose type is in this list. */
+  excludeTypes?: string[];
 }>();
 
+function typeAllowed(type: string): boolean {
+  if (props.restrictTypes && !props.restrictTypes.includes(type)) return false;
+  if (props.excludeTypes && props.excludeTypes.includes(type)) return false;
+  return true;
+}
+
 const features = useFeatures();
 
 function isFeatureEnabled(featureGate?: string): boolean {
@@ -29,7 +39,7 @@ function sectionZone(section: HomepageSection): 'full-width' | 'main' | 'sidebar
 
 <template>
   <template v-for="section in sections" :key="section.id">
-    <template v-if="section.enabled && sectionZone(section) === zone && isFeatureEnabled(section.config.featureGate)">
+    <template v-if="section.enabled && sectionZone(section) === zone && typeAllowed(section.type) && isFeatureEnabled(section.config.featureGate)">
       <HomepageHeroSection
         v-if="section.type === 'hero'"
         :config="section.config"

package/components/views/ProjectView.vue

@@ -509,7 +509,10 @@ async function handleBuild(): Promise<void> {
                     <span v-if="step.time" class="cpub-build-step-time"><i class="fa-regular fa-clock"></i> {{ step.time }}</span>
                   </div>
                   <div v-if="step.children.length > 0" class="cpub-build-step-body">
-                    <BlockContentRenderer :blocks="step.children" />
+                    <!-- Auto-import name (same as the body renderer above); the
+                         bare BlockContentRenderer tag does not resolve under
+                         Nuxt pathPrefix and silently blanks nested content. -->
+                    <BlocksBlockContentRenderer :blocks="step.children" />
                   </div>
                 </div>
               </div>

package/layouts/default.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
 import type { NavItem } from '@commonpub/server';
+// Explicit import: Nuxt's pathPrefix auto-import names this component
+// `<NavMobileNavRenderer>` (the `nav/` dir prefix only de-duplicates when
+// the filename starts with `Nav`, which `MobileNavRenderer` does not).
+// Referencing `<MobileNavRenderer>` below would otherwise silently fail to
+// resolve, leaving the mobile hamburger menu empty.
+import MobileNavRenderer from '../components/nav/MobileNavRenderer.vue';
 
 const { user, isAuthenticated, isAdmin, signOut, refreshSession } = useAuth();
 const { count: unreadCount, connect: connectNotifications, disconnect: disconnectNotifications } = useNotifications();
@@ -104,18 +110,22 @@ const userUsername = computed(() => user.value?.username ?? '');
       <div class="cpub-topbar-spacer" />
 
       <div class="cpub-topbar-actions">
-        <NuxtLink to="/search" class="cpub-search-btn" aria-label="Search">
+        <!-- Search/messages/notifications are desktop-only in the top bar.
+             On mobile they live in the hamburger menu (search) and the
+             avatar dropdown (messages/notifications) so the bar can't
+             overflow and hide the hamburger toggle. -->
+        <NuxtLink to="/search" class="cpub-search-btn cpub-topbar-desktop-only" aria-label="Search">
           <i class="fa-solid fa-magnifying-glass"></i>
           <span class="cpub-search-text">Search...</span>
           <span class="cpub-kbd">&lceil;K</span>
         </NuxtLink>
 
         <template v-if="isAuthenticated">
-          <NuxtLink to="/messages" class="cpub-icon-btn" title="Messages" aria-label="Messages">
+          <NuxtLink to="/messages" class="cpub-icon-btn cpub-topbar-desktop-only" title="Messages" aria-label="Messages">
             <i class="fa-solid fa-envelope"></i>
             <span v-if="unreadMessages > 0" class="cpub-notif-badge" aria-label="unread messages">{{ unreadMessages > 99 ? '99+' : unreadMessages }}</span>
           </NuxtLink>
-          <NuxtLink to="/notifications" class="cpub-icon-btn" title="Notifications" aria-label="Notifications">
+          <NuxtLink to="/notifications" class="cpub-icon-btn cpub-topbar-desktop-only" title="Notifications" aria-label="Notifications">
             <i class="fa-solid fa-bell"></i>
             <span v-if="unreadCount > 0" class="cpub-notif-badge" aria-label="unread notifications">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
           </NuxtLink>
@@ -130,6 +140,17 @@ const userUsername = computed(() => user.value?.username ?? '');
               </span>
             </button>
             <div v-if="userMenuOpen" class="cpub-user-dropdown" role="menu">
+              <!-- Mobile-only: messages/notifications relocated here from
+                   the top bar (hidden on desktop, which keeps the icons). -->
+              <NuxtLink to="/messages" class="cpub-dropdown-item cpub-dropdown-item--mobile" role="menuitem" @click="userMenuOpen = false">
+                <i class="fa-solid fa-envelope"></i> Messages
+                <span v-if="unreadMessages > 0" class="cpub-dropdown-count">{{ unreadMessages > 99 ? '99+' : unreadMessages }}</span>
+              </NuxtLink>
+              <NuxtLink to="/notifications" class="cpub-dropdown-item cpub-dropdown-item--mobile" role="menuitem" @click="userMenuOpen = false">
+                <i class="fa-solid fa-bell"></i> Notifications
+                <span v-if="unreadCount > 0" class="cpub-dropdown-count">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
+              </NuxtLink>
+              <div class="cpub-dropdown-divider cpub-dropdown-item--mobile" />
               <NuxtLink :to="`/u/${userUsername}`" class="cpub-dropdown-item" role="menuitem" @click="userMenuOpen = false"><i class="fa-solid fa-user"></i> Profile</NuxtLink>
               <NuxtLink to="/dashboard" class="cpub-dropdown-item" role="menuitem" @click="userMenuOpen = false"><i class="fa-solid fa-gauge"></i> Dashboard</NuxtLink>
               <NuxtLink to="/settings" class="cpub-dropdown-item" role="menuitem" @click="userMenuOpen = false"><i class="fa-solid fa-gear"></i> Settings</NuxtLink>
@@ -162,8 +183,7 @@ const userUsername = computed(() => user.value?.username ?? '');
           <div class="cpub-mobile-divider" />
           <NuxtLink to="/create" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-plus"></i> Create</NuxtLink>
           <NuxtLink to="/dashboard" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-gauge"></i> Dashboard</NuxtLink>
-          <NuxtLink to="/messages" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-envelope"></i> Messages</NuxtLink>
-          <NuxtLink to="/notifications" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-bell"></i> Notifications</NuxtLink>
+          <!-- Messages/Notifications live in the avatar dropdown on mobile. -->
         </template>
       </div>
     </div>
@@ -317,6 +337,10 @@ const userUsername = computed(() => user.value?.username ?? '');
 .cpub-dropdown-item:hover { background: var(--surface2); color: var(--text); }
 .cpub-dropdown-item i { width: 14px; text-align: center; font-size: 11px; }
 .cpub-dropdown-divider { height: 2px; background: var(--border2); margin: 4px 12px; }
+.cpub-dropdown-count { margin-left: auto; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--accent); color: var(--color-text-inverse); font-size: 9px; font-weight: 700; font-family: var(--font-mono); line-height: 16px; text-align: center; }
+/* Messages/Notifications in the avatar dropdown are mobile-only —
+   desktop keeps the dedicated top-bar icons. */
+.cpub-dropdown-item--mobile { display: none; }
 
 .cpub-mobile-toggle { display: none; width: 32px; height: 32px; background: none; border: var(--border-width-default) solid transparent; color: var(--text-dim); font-size: 16px; cursor: pointer; align-items: center; justify-content: center; }
 .cpub-mobile-menu { display: none; position: fixed; inset: 0; top: 48px; z-index: 99; background: var(--color-surface-overlay-light); }
@@ -346,7 +370,10 @@ const userUsername = computed(() => user.value?.username ?? '');
 
 @media (max-width: 768px) {
   :deep(.cpub-topbar-nav) { display: none; }
-  .cpub-search-btn { min-width: auto; padding: 6px 8px; }
+  /* Search / messages / notifications move off the top bar on mobile so
+     the row can't overflow and clip the hamburger + avatar. */
+  .cpub-topbar-desktop-only { display: none !important; }
+  .cpub-dropdown-item--mobile { display: flex; }
   .cpub-search-text, .cpub-kbd, .cpub-new-text { display: none; }
   .cpub-mobile-toggle { display: flex; }
   .cpub-mobile-menu { display: block; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.21.2",
+  "version": "0.21.4",
   "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/config": "0.12.0",
     "@commonpub/editor": "0.7.9",
+    "@commonpub/protocol": "0.9.10",
+    "@commonpub/schema": "0.16.0",
+    "@commonpub/docs": "0.6.3",
+    "@commonpub/auth": "0.6.0",
     "@commonpub/explainer": "0.7.12",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/server": "2.51.0",
-    "@commonpub/auth": "0.6.0",
     "@commonpub/ui": "0.8.5",
-    "@commonpub/protocol": "0.9.9",
-    "@commonpub/schema": "0.16.0",
-    "@commonpub/docs": "0.6.2"
+    "@commonpub/config": "0.12.0",
+    "@commonpub/server": "2.53.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/index.vue

@@ -148,13 +148,28 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
       <!-- Full-width sections (hero) -->
       <HomepageSectionRenderer :sections="sortedSections" zone="full-width" />
 
+      <!-- Mobile only: hoist the contests section above the feed (contests
+           are time-sensitive). Desktop keeps contests in the sidebar; hubs
+           and stats stay after the feed on mobile. -->
+      <div class="cpub-mobile-contest-hoist">
+        <HomepageSectionRenderer :sections="sortedSections" zone="sidebar" :restrict-types="['contests']" />
+      </div>
+
       <!-- 2-column layout: main + sidebar -->
       <div class="cpub-main-layout">
         <main class="cpub-feed-col">
           <HomepageSectionRenderer :sections="sortedSections" zone="main" />
         </main>
         <aside class="cpub-sidebar">
-          <HomepageSectionRenderer :sections="sortedSections" zone="sidebar" />
+          <!-- display:contents wrappers — layout-transparent, so the
+               sidebar's flex gap is unaffected. Desktop shows the full
+               sidebar; mobile shows it minus contests (hoisted above). -->
+          <div class="cpub-sidebar-desktop">
+            <HomepageSectionRenderer :sections="sortedSections" zone="sidebar" />
+          </div>
+          <div class="cpub-sidebar-mobile">
+            <HomepageSectionRenderer :sections="sortedSections" zone="sidebar" :exclude-types="['contests']" />
+          </div>
           <!-- Powered badge -->
           <div class="cpub-powered-badge">
             <span class="cpub-powered-text">Powered by</span>
@@ -494,7 +509,7 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
   gap: 48px;
 }
 
-.cpub-hero-content { flex: 1; }
+.cpub-hero-content { flex: 1; min-width: 0; }
 
 .cpub-hero-eyebrow {
   display: flex;
@@ -553,7 +568,7 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
   max-width: 560px;
 }
 
-.cpub-hero-actions { display: flex; gap: 8px; }
+.cpub-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
 
 .cpub-hero-meta {
   display: flex;
@@ -898,6 +913,17 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
   gap: 18px;
 }
 
+/* Contests hoisted above the feed on mobile only. display:contents keeps
+   the sidebar's flex gap intact on desktop (wrapper boxes vanish). */
+.cpub-mobile-contest-hoist { display: none; }
+.cpub-sidebar-desktop { display: contents; }
+.cpub-sidebar-mobile { display: none; }
+@media (max-width: 768px) {
+  .cpub-mobile-contest-hoist { display: block; max-width: 1280px; margin: 0 auto; padding: 16px 16px 0; }
+  .cpub-sidebar-desktop { display: none; }
+  .cpub-sidebar-mobile { display: contents; }
+}
+
 .cpub-sb-head {
   font-size: 10px;
   font-family: var(--font-mono);
@@ -1167,6 +1193,8 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
   .cpub-hero-inner {
     padding: 24px 16px;
   }
+  .cpub-hero-actions { width: 100%; }
+  .cpub-hero-actions .cpub-btn { flex: 1 1 140px; justify-content: center; }
   .cpub-main-layout {
     padding: 16px;
   }

package/server/api/files/upload-from-url.post.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { createStorageFromEnv, generateStorageKey, validateUpload, ALLOWED_IMAGE_TYPES } from '@commonpub/server';
+import { createStorageFromEnv, generateStorageKey, ALLOWED_IMAGE_TYPES, safeFetchBinary } from '@commonpub/server';
 
 const schema = z.object({
   url: z.string().url(),
@@ -7,62 +7,36 @@ const schema = z.object({
 });
 
 export default defineEventHandler(async (event) => {
-  const user = requireAuth(event);
+  requireAuth(event);
   const { url, purpose } = await parseBody(event, schema);
 
-  // SSRF protection — block private/internal IPs
-  const parsed = new URL(url);
-  const hostname = parsed.hostname.toLowerCase();
-  const h = hostname.replace(/^\[|\]$/g, '');
-  if (
-    h === 'localhost' ||
-    h === 'localhost.localdomain' ||
-    h === 'metadata.google.internal' ||
-    h.endsWith('.local') ||
-    /^127\./.test(h) ||
-    /^10\./.test(h) ||
-    /^172\.(1[6-9]|2\d|3[01])\./.test(h) ||
-    /^192\.168\./.test(h) ||
-    /^169\.254\./.test(h) ||
-    /^0\./.test(h) ||
-    h === '::1' ||
-    /^f[cd]/i.test(h) ||
-    /^fe80/i.test(h)
-  ) {
-    throw createError({ statusCode: 400, statusMessage: 'Cannot fetch from private/local addresses' });
-  }
-
-  // Download the remote image
-  const controller = new AbortController();
-  const timeout = setTimeout(() => controller.abort(), 10_000); // 10s timeout
-
-  let response: Response;
+  // SSRF-safe fetch: blocks private/reserved/numeric hosts and non-HTTP(S)
+  // schemes, re-validates every redirect hop, and enforces a 10 MB streaming
+  // cap + deadline. Replaces a hand-rolled denylist that missed redirect
+  // re-validation, IPv4-mapped IPv6, and numeric-IP encodings.
+  let buffer: Buffer;
+  let contentType: string;
   try {
-    response = await fetch(url, {
-      signal: controller.signal,
-      headers: { 'User-Agent': 'devEco.io Image Fetcher' },
-    });
+    ({ buffer, contentType } = await safeFetchBinary(url, {
+      accept: 'image/*',
+      userAgent: 'CommonPub/1.0 (image-upload)',
+      timeoutMs: 10_000,
+    }));
   } catch (err) {
+    const msg = err instanceof Error ? err.message : '';
+    if (msg.includes('private or reserved')) {
+      throw createError({ statusCode: 400, statusMessage: 'Cannot fetch from private/local addresses' });
+    }
+    if (msg === 'Response too large') {
+      throw createError({ statusCode: 400, statusMessage: 'Image too large (max 10MB)' });
+    }
     throw createError({ statusCode: 400, statusMessage: 'Failed to fetch remote image' });
-  } finally {
-    clearTimeout(timeout);
   }
 
-  if (!response.ok) {
-    throw createError({ statusCode: 400, statusMessage: `Remote server returned ${response.status}` });
-  }
-
-  const contentType = response.headers.get('content-type') || '';
   if (![...ALLOWED_IMAGE_TYPES].some((t: string) => contentType.startsWith(t))) {
     throw createError({ statusCode: 400, statusMessage: `Unsupported image type: ${contentType}` });
   }
 
-  const buffer = Buffer.from(await response.arrayBuffer());
-  const maxSize = 10 * 1024 * 1024; // 10MB
-  if (buffer.length > maxSize) {
-    throw createError({ statusCode: 400, statusMessage: 'Image too large (max 10MB)' });
-  }
-
   // Upload to storage
   const storage = createStorageFromEnv();
   const ext = contentType.split('/')[1] || 'jpg';

package/server/middleware/auth.ts

@@ -113,6 +113,7 @@ export default defineEventHandler(async (event) => {
   // Handle auth API routes — skip custom routes that Nitro handles directly
   const isCustomAuthRoute = pathname.startsWith('/api/auth/federated/')
     || pathname.startsWith('/api/auth/oauth2/')
+    || pathname.startsWith('/api/auth/mastodon/')
     || pathname === '/api/auth/sign-in-username'
     || pathname === '/api/auth/delete-user'
     || pathname === '/api/auth/export-data';