@commonpub/layer 0.7.12 → 0.7.13

package/components/editors/ArticleEditor.vue

@@ -128,6 +128,12 @@ function removeCover(): void {
   updateMeta('coverImageUrl', '');
 }
 
+// --- SEO preview ---
+const seoDomain = computed(() => {
+  try { return new URL(useRequestURL().origin).hostname; } catch { return 'example.com'; }
+});
+const seoPreviewDesc = computed(() => (props.metadata.seoDescription as string) || (props.metadata.description as string) || '');
+
 // --- Right panel ---
 const openSections = ref<Record<string, boolean>>({
   content: true, seo: false, publishing: true, cover: false,
@@ -333,11 +339,19 @@ const canvasMaxWidth = computed(() => {
         </EditorSection>
 
         <!-- SEO -->
-        <EditorSection title="SEO" icon="fa-magnifying-glass" :open="openSections.seo" @toggle="toggleSection('seo')">
-          <div class="cpub-ep-field">
-            <label class="cpub-ep-flabel">Meta Description</label>
+        <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">
+              <span class="cpub-seo-favicon">C</span>
+              {{ seoDomain }} &rsaquo; article
+            </div>
+            <div class="cpub-seo-title">{{ (metadata.title as string) || 'Article title' }}</div>
+            <div class="cpub-seo-desc">{{ seoPreviewDesc || 'Post description will appear here...' }}</div>
+          </div>
+          <div class="cpub-ep-field" style="margin-top: 10px;">
+            <label class="cpub-ep-flabel">SEO Description</label>
             <textarea class="cpub-ep-textarea" rows="3" :value="metadata.seoDescription as string" placeholder="Search engine description..." @input="updateMeta('seoDescription', ($event.target as HTMLTextAreaElement).value)" />
-            <span class="cpub-ep-hint">{{ ((metadata.seoDescription as string) || '').length }}/160</span>
+            <span class="cpub-ep-hint cpub-ep-hint-right">{{ ((metadata.seoDescription as string) || '').length }}/160</span>
           </div>
         </EditorSection>
 
@@ -541,4 +555,23 @@ const canvasMaxWidth = computed(() => {
   .cpub-ae-cover-overlay,
   .cpub-ae-cover-actions { opacity: 1; }
 }
+
+/* SEO preview card */
+.cpub-seo-card {
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+  padding: 14px;
+}
+.cpub-seo-url {
+  font-size: 11px; color: var(--text-faint); margin-bottom: 4px;
+  display: flex; align-items: center; gap: 6px;
+}
+.cpub-seo-favicon {
+  width: 16px; height: 16px; border-radius: 50%;
+  background: var(--accent-bg); color: var(--accent);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 9px; font-weight: 700;
+}
+.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; }
 </style>

package/components/editors/BlogEditor.vue

@@ -107,6 +107,9 @@ const authorInitials = computed(() => {
 const authorUsername = computed(() => user.value?.username || '');
 
 // --- SEO preview ---
+const siteDomain = computed(() => {
+  try { return new URL(useRequestURL().origin).hostname; } catch { return 'example.com'; }
+});
 const seoDesc = computed(() => (props.metadata.seoDescription as string) || (props.metadata.description as string) || '');
 
 // --- Schedule ---
@@ -283,7 +286,7 @@ const canvasMaxWidth = computed(() => {
           <div class="cpub-be-seo-card">
             <div class="cpub-be-seo-url">
               <span class="cpub-be-seo-favicon">C</span>
-              commonpub.io &rsaquo; {{ authorUsername ? `@${authorUsername}` : 'blog' }}
+              {{ siteDomain }} &rsaquo; {{ authorUsername ? `@${authorUsername}` : 'blog' }}
             </div>
             <div class="cpub-be-seo-title">{{ (metadata.title as string) || 'Post title' }}</div>
             <div class="cpub-be-seo-desc">{{ seoDesc || 'Post description will appear here...' }}</div>

package/components/editors/ProjectEditor.vue

@@ -45,6 +45,12 @@ const blockTypes: BlockTypeGroup[] = [
   },
 ];
 
+// --- SEO preview ---
+const seoDomain = computed(() => {
+  try { return new URL(useRequestURL().origin).hostname; } catch { return 'example.com'; }
+});
+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,
 });
@@ -283,11 +289,19 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
           </div>
         </EditorSection>
 
-        <EditorSection title="SEO" icon="fa-magnifying-glass" :open="openSections.seo" @toggle="toggleSection('seo')">
-          <div class="cpub-pe-field">
-            <label class="cpub-pe-flabel">Meta Description</label>
+        <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">
+              <span class="cpub-seo-favicon">C</span>
+              {{ seoDomain }} &rsaquo; project
+            </div>
+            <div class="cpub-seo-title">{{ (metadata.title as string) || 'Project title' }}</div>
+            <div class="cpub-seo-desc">{{ seoPreviewDesc || 'Post description will appear here...' }}</div>
+          </div>
+          <div class="cpub-pe-field" style="margin-top: 10px;">
+            <label class="cpub-pe-flabel">SEO Description</label>
             <textarea class="cpub-pe-textarea" rows="3" :value="metadata.seoDescription as string" placeholder="Search engine description (recommended 50-160 chars)" @input="updateMeta('seoDescription', ($event.target as HTMLTextAreaElement).value)" />
-            <span class="cpub-pe-hint">{{ ((metadata.seoDescription as string) || '').length }}/160</span>
+            <span class="cpub-pe-hint cpub-pe-hint-right">{{ ((metadata.seoDescription as string) || '').length }}/160</span>
           </div>
         </EditorSection>
 
@@ -450,4 +464,23 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
   .cpub-pe-cover-overlay,
   .cpub-pe-cover-actions { opacity: 1; }
 }
+
+/* SEO preview card */
+.cpub-seo-card {
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+  padding: 14px;
+}
+.cpub-seo-url {
+  font-size: 11px; color: var(--text-faint); margin-bottom: 4px;
+  display: flex; align-items: center; gap: 6px;
+}
+.cpub-seo-favicon {
+  width: 16px; height: 16px; border-radius: 50%;
+  background: var(--accent-bg); color: var(--accent);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 9px; font-weight: 700;
+}
+.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; }
 </style>

package/components/views/ArticleView.vue

@@ -81,9 +81,10 @@ useJsonLd({
 
 <template>
   <div class="cpub-article-view">
-    <!-- COVER IMAGE -->
+    <!-- HERO BANNER (per-content bannerUrl → author bannerUrl → pattern fallback) -->
     <div class="cpub-cover">
-      <img v-if="content.coverImageUrl" :src="content.coverImageUrl" :alt="content.title" class="cpub-cover-img" />
+      <img v-if="content.bannerUrl" :src="content.bannerUrl" :alt="content.title" class="cpub-cover-img" />
+      <img v-else-if="content.author?.bannerUrl" :src="content.author.bannerUrl" alt="" class="cpub-cover-img" />
       <template v-else>
         <div class="cpub-cover-label">
           <i class="fa-solid fa-microchip"></i>
@@ -151,6 +152,11 @@ useJsonLd({
         </aside>
       </div>
 
+      <!-- COVER PHOTO (in-body) -->
+      <div v-if="content.coverImageUrl" class="cpub-cover-photo">
+        <img :src="content.coverImageUrl" :alt="content.title" class="cpub-cover-photo-img" />
+      </div>
+
       <!-- ARTICLE BODY (PROSE) -->
       <div class="cpub-prose">
         <template v-if="content.content && Array.isArray(content.content) && (content.content as unknown[]).length > 0">
@@ -765,6 +771,19 @@ useJsonLd({
   gap: 6px;
 }
 
+/* ── COVER PHOTO (in-body) ── */
+.cpub-cover-photo {
+  margin-bottom: 24px;
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+}
+.cpub-cover-photo-img {
+  width: 100%;
+  display: block;
+  max-height: 420px;
+  object-fit: cover;
+}
+
 /* ── RESPONSIVE ── */
 @media (max-width: 768px) {
   .cpub-article-wrap { padding: 24px 16px 48px; }

package/components/views/BlogView.vue

@@ -44,9 +44,9 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 <template>
   <div class="cpub-blog-view">
 
-    <!-- COVER IMAGE -->
-    <div v-if="content.coverImageUrl" class="cpub-cover">
-      <img :src="content.coverImageUrl" :alt="content.title" class="cpub-cover-img" />
+    <!-- HERO BANNER -->
+    <div v-if="content.bannerUrl || content.author?.bannerUrl" class="cpub-cover">
+      <img :src="(content.bannerUrl || content.author?.bannerUrl)!" :alt="content.title" class="cpub-cover-img" />
     </div>
 
     <div class="cpub-blog-wrap">
@@ -96,6 +96,11 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
         <button class="cpub-eng-btn" aria-label="More options"><i class="fa-solid fa-ellipsis"></i></button>
       </div>
 
+      <!-- COVER PHOTO (in-body) -->
+      <div v-if="content.coverImageUrl" class="cpub-cover-photo">
+        <img :src="content.coverImageUrl" :alt="content.title" class="cpub-cover-photo-img" />
+      </div>
+
       <!-- BLOG BODY (PROSE) -->
       <div class="cpub-prose">
         <template v-if="content.content && Array.isArray(content.content) && (content.content as unknown[]).length > 0">
@@ -326,6 +331,19 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
   background: var(--teal-bg);
 }
 
+/* ── COVER PHOTO (in-body) ── */
+.cpub-cover-photo {
+  margin-bottom: 24px;
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+}
+.cpub-cover-photo-img {
+  width: 100%;
+  display: block;
+  max-height: 420px;
+  object-fit: cover;
+}
+
 /* ── ENGAGEMENT ROW ── */
 .cpub-engagement-row {
   display: flex;

package/components/views/ProjectView.vue

@@ -300,9 +300,10 @@ async function handleBuild(): Promise<void> {
 
 <template>
   <div class="cpub-project-view">
-    <!-- HERO COVER -->
-    <div class="cpub-hero-cover" :class="{ 'cpub-hero-cover-has-image': content.coverImageUrl }">
-      <img v-if="content.coverImageUrl" :src="content.coverImageUrl" :alt="content.title" class="cpub-hero-cover-img" />
+    <!-- HERO BANNER (per-content bannerUrl → author bannerUrl → pattern fallback) -->
+    <div class="cpub-hero-cover" :class="{ 'cpub-hero-cover-has-image': content.bannerUrl || content.author?.bannerUrl }">
+      <img v-if="content.bannerUrl" :src="content.bannerUrl" :alt="content.title" class="cpub-hero-cover-img" />
+      <img v-else-if="content.author?.bannerUrl" :src="content.author.bannerUrl" alt="" class="cpub-hero-cover-img" />
       <template v-else>
         <div class="cpub-hero-cover-grid"></div>
         <div class="cpub-hero-circuit">
@@ -424,6 +425,11 @@ async function handleBuild(): Promise<void> {
         <div class="cpub-content-col">
           <!-- OVERVIEW TAB -->
           <template v-if="activeTab === 'overview'">
+            <!-- Cover photo (in-body featured image) -->
+            <div v-if="content.coverImageUrl" class="cpub-cover-photo">
+              <img :src="content.coverImageUrl" :alt="content.title" class="cpub-cover-photo-img" />
+            </div>
+
             <div class="cpub-prose">
               <template v-if="content.content && Array.isArray(content.content) && (content.content as unknown[]).length > 0">
                 <BlocksBlockContentRenderer :blocks="(content.content as [string, Record<string, unknown>][])" />
@@ -923,6 +929,20 @@ async function handleBuild(): Promise<void> {
   grid-template-columns: 200px 1fr 260px;
 }
 
+/* ── COVER PHOTO (in-body) ── */
+.cpub-cover-photo {
+  margin-bottom: 24px;
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+}
+
+.cpub-cover-photo-img {
+  width: 100%;
+  display: block;
+  max-height: 420px;
+  object-fit: cover;
+}
+
 /* ── PROSE ── */
 .cpub-prose {
   font-size: 13px;

package/composables/useEngagement.ts

@@ -11,6 +11,7 @@ export interface ContentViewData {
   description: string | null;
   content: unknown;
   coverImageUrl: string | null;
+  bannerUrl?: string | null;
   category: string | null;
   difficulty: string | null;
   buildTime: string | null;
@@ -59,6 +60,7 @@ export interface ContentViewData {
     profileUrl?: string | null;
     bio?: string | null;
     headline?: string | null;
+    bannerUrl?: string | null;
     verified?: boolean;
     org?: string;
     articleCount?: number;

package/layouts/default.vue

@@ -2,7 +2,7 @@
 const { user, isAuthenticated, isAdmin, signOut, refreshSession } = useAuth();
 const { count: unreadCount, connect: connectNotifications, disconnect: disconnectNotifications } = useNotifications();
 const { count: unreadMessages, connect: connectMessages, disconnect: disconnectMessages } = useMessages();
-const { hubs, learning, video, docs, contests, admin, federation } = useFeatures();
+const { hubs, learning, video, docs, contests, admin, federation, explainers } = useFeatures();
 const { isDark, setDarkMode } = useTheme();
 const { enabledTypeMeta } = useContentTypes();
 const runtimeConfig = useRuntimeConfig();
@@ -16,6 +16,15 @@ useHead({
 
 const userMenuOpen = ref(false);
 const mobileMenuOpen = ref(false);
+const openDropdown = ref<string | null>(null);
+
+function toggleDropdown(name: string): void {
+  openDropdown.value = openDropdown.value === name ? null : name;
+}
+
+function closeDropdowns(): void {
+  openDropdown.value = null;
+}
 
 // Cmd+K / Ctrl+K → search
 function handleGlobalKeydown(e: KeyboardEvent): void {
@@ -29,6 +38,7 @@ function handleGlobalKeydown(e: KeyboardEvent): void {
 function handleClickOutside(e: MouseEvent): void {
   const target = e.target as HTMLElement;
   if (!target.closest('.cpub-user-menu-wrapper')) userMenuOpen.value = false;
+  if (!target.closest('.cpub-nav-dropdown')) openDropdown.value = null;
 }
 
 onMounted(async () => {
@@ -72,11 +82,54 @@ const userUsername = computed(() => user.value?.username ?? '');
 
       <nav class="cpub-topbar-nav" aria-label="Main navigation">
         <NuxtLink to="/" class="cpub-nav-link"><i class="fa-solid fa-house"></i> Home</NuxtLink>
+
+        <!-- Learn dropdown -->
+        <div v-if="learning || docs" class="cpub-nav-dropdown">
+          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'learn' }" @click.stop="toggleDropdown('learn')">
+            <i class="fa-solid fa-graduation-cap"></i> Learn <i class="fa-solid fa-chevron-down cpub-nav-caret" />
+          </button>
+          <div v-if="openDropdown === 'learn'" class="cpub-nav-panel">
+            <NuxtLink v-if="learning" to="/learn" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-route"></i> Learning Paths</NuxtLink>
+            <NuxtLink v-if="explainers" to="/explainer" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-lightbulb"></i> Explainers</NuxtLink>
+            <NuxtLink v-if="docs" to="/docs" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-book"></i> Docs</NuxtLink>
+          </div>
+        </div>
+
+        <!-- Build dropdown -->
+        <div class="cpub-nav-dropdown">
+          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'build' }" @click.stop="toggleDropdown('build')">
+            <i class="fa-solid fa-hammer"></i> Build <i class="fa-solid fa-chevron-down cpub-nav-caret" />
+          </button>
+          <div v-if="openDropdown === 'build'" class="cpub-nav-panel">
+            <NuxtLink to="/project" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-cube"></i> Projects</NuxtLink>
+            <NuxtLink v-if="contests" to="/contests" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-trophy"></i> Contests</NuxtLink>
+          </div>
+        </div>
+
+        <!-- Read dropdown -->
+        <div class="cpub-nav-dropdown">
+          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'read' }" @click.stop="toggleDropdown('read')">
+            <i class="fa-solid fa-newspaper"></i> Read <i class="fa-solid fa-chevron-down cpub-nav-caret" />
+          </button>
+          <div v-if="openDropdown === 'read'" class="cpub-nav-panel">
+            <NuxtLink to="/article" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-file-lines"></i> Articles</NuxtLink>
+            <NuxtLink to="/blog" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-pen-nib"></i> Blog</NuxtLink>
+          </div>
+        </div>
+
+        <!-- Watch dropdown -->
+        <div v-if="video" class="cpub-nav-dropdown">
+          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'watch' }" @click.stop="toggleDropdown('watch')">
+            <i class="fa-solid fa-play"></i> Watch <i class="fa-solid fa-chevron-down cpub-nav-caret" />
+          </button>
+          <div v-if="openDropdown === 'watch'" class="cpub-nav-panel">
+            <NuxtLink to="/videos" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-video"></i> Videos</NuxtLink>
+            <span class="cpub-nav-panel-item cpub-nav-panel-item--disabled"><i class="fa-solid fa-tower-broadcast"></i> Live Streams</span>
+            <span class="cpub-nav-panel-item cpub-nav-panel-item--disabled"><i class="fa-solid fa-podcast"></i> Podcasts</span>
+          </div>
+        </div>
+
         <NuxtLink v-if="hubs" to="/hubs" class="cpub-nav-link"><i class="fa-solid fa-users"></i> Hubs</NuxtLink>
-        <NuxtLink v-if="learning" to="/learn" class="cpub-nav-link"><i class="fa-solid fa-graduation-cap"></i> Learn</NuxtLink>
-        <NuxtLink v-if="video" to="/videos" class="cpub-nav-link"><i class="fa-solid fa-video"></i> Videos</NuxtLink>
-        <NuxtLink v-if="docs" to="/docs" class="cpub-nav-link"><i class="fa-solid fa-book"></i> Docs</NuxtLink>
-        <NuxtLink v-if="contests" to="/contests" class="cpub-nav-link"><i class="fa-solid fa-trophy"></i> Contests</NuxtLink>
         <NuxtLink v-if="federation" to="/federation" class="cpub-nav-link"><i class="fa-solid fa-globe"></i> Fediverse</NuxtLink>
         <NuxtLink v-if="isAdmin && admin" to="/admin" class="cpub-nav-link"><i class="fa-solid fa-shield-halved"></i> Admin</NuxtLink>
       </nav>
@@ -133,11 +186,35 @@ const userUsername = computed(() => user.value?.username ?? '');
     <div v-if="mobileMenuOpen" class="cpub-mobile-menu" @click.self="mobileMenuOpen = false">
       <nav class="cpub-mobile-nav" aria-label="Mobile navigation">
         <NuxtLink to="/" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-house"></i> Home</NuxtLink>
+
+        <!-- Learn -->
+        <template v-if="learning || docs">
+          <div class="cpub-mobile-section-label">Learn</div>
+          <NuxtLink v-if="learning" to="/learn" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-route"></i> Learning Paths</NuxtLink>
+          <NuxtLink v-if="explainers" to="/explainer" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-lightbulb"></i> Explainers</NuxtLink>
+          <NuxtLink v-if="docs" to="/docs" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-book"></i> Docs</NuxtLink>
+        </template>
+
+        <!-- Build -->
+        <div class="cpub-mobile-section-label">Build</div>
+        <NuxtLink to="/project" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-cube"></i> Projects</NuxtLink>
+        <NuxtLink v-if="contests" to="/contests" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-trophy"></i> Contests</NuxtLink>
+
+        <!-- Read -->
+        <div class="cpub-mobile-section-label">Read</div>
+        <NuxtLink to="/article" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-file-lines"></i> Articles</NuxtLink>
+        <NuxtLink to="/blog" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-pen-nib"></i> Blog</NuxtLink>
+
+        <!-- Watch -->
+        <template v-if="video">
+          <div class="cpub-mobile-section-label">Watch</div>
+          <NuxtLink to="/videos" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-video"></i> Videos</NuxtLink>
+          <span class="cpub-mobile-link cpub-mobile-link--indent cpub-mobile-link--disabled"><i class="fa-solid fa-tower-broadcast"></i> Live Streams</span>
+          <span class="cpub-mobile-link cpub-mobile-link--indent cpub-mobile-link--disabled"><i class="fa-solid fa-podcast"></i> Podcasts</span>
+        </template>
+
+        <div class="cpub-mobile-divider" />
         <NuxtLink v-if="hubs" to="/hubs" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-users"></i> Hubs</NuxtLink>
-        <NuxtLink v-if="learning" to="/learn" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-graduation-cap"></i> Learn</NuxtLink>
-        <NuxtLink v-if="video" to="/videos" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-video"></i> Videos</NuxtLink>
-        <NuxtLink v-if="docs" to="/docs" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-book"></i> Docs</NuxtLink>
-        <NuxtLink v-if="contests" to="/contests" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-trophy"></i> Contests</NuxtLink>
         <NuxtLink v-if="federation" to="/federation" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-globe"></i> Fediverse</NuxtLink>
         <NuxtLink v-if="isAdmin && admin" to="/admin" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-shield-halved"></i> Admin</NuxtLink>
         <NuxtLink to="/search" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-magnifying-glass"></i> Search</NuxtLink>
@@ -220,6 +297,37 @@ const userUsername = computed(() => user.value?.username ?? '');
 .cpub-nav-link:hover { color: var(--text); background: var(--surface2); }
 .cpub-nav-link.router-link-active { color: var(--text); background: var(--surface2); border-color: var(--border); }
 
+/* Nav dropdowns */
+.cpub-nav-dropdown { position: relative; }
+.cpub-nav-trigger { cursor: pointer; }
+.cpub-nav-caret { font-size: 7px !important; margin-left: 2px; transition: transform 0.15s; }
+.cpub-nav-trigger--open .cpub-nav-caret { transform: rotate(180deg); }
+.cpub-nav-panel {
+  position: absolute; top: 100%; left: 0; min-width: 180px;
+  background: var(--surface); border: var(--border-width-default) solid var(--border);
+  box-shadow: var(--shadow-md); z-index: 200; display: flex; flex-direction: column; padding: 4px 0;
+  margin-top: 4px;
+}
+.cpub-nav-panel-item {
+  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
+  font-size: 12px; color: var(--text-dim); text-decoration: none;
+  transition: background 0.1s, color 0.1s; cursor: pointer;
+}
+.cpub-nav-panel-item:hover { background: var(--surface2); color: var(--text); }
+.cpub-nav-panel-item i { width: 14px; text-align: center; font-size: 11px; }
+.cpub-nav-panel-item--disabled {
+  opacity: 0.35; cursor: not-allowed; pointer-events: none;
+}
+
+/* Mobile nav sections */
+.cpub-mobile-section-label {
+  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint);
+  padding: 10px 20px 2px; margin-top: 4px;
+}
+.cpub-mobile-link--indent { padding-left: 36px; }
+.cpub-mobile-link--disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
+
 .cpub-topbar-spacer { flex: 1; }
 .cpub-topbar-actions { display: flex; align-items: center; gap: 6px; }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.7.12",
+  "version": "0.7.13",
   "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.9.0",
     "@commonpub/auth": "0.5.0",
-    "@commonpub/editor": "0.7.4",
     "@commonpub/docs": "0.6.2",
+    "@commonpub/config": "0.9.0",
     "@commonpub/explainer": "0.7.6",
-    "@commonpub/learning": "0.5.0",
-    "@commonpub/schema": "0.9.4",
+    "@commonpub/editor": "0.7.4",
+    "@commonpub/schema": "0.9.5",
+    "@commonpub/server": "2.27.7",
     "@commonpub/protocol": "0.9.7",
-    "@commonpub/ui": "0.8.5",
-    "@commonpub/server": "2.27.6"
+    "@commonpub/learning": "0.5.0",
+    "@commonpub/ui": "0.8.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",