@commonpub/layer 0.10.1 → 0.11.0

package/components/homepage/ContentGridSection.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { Serialized, ContentListItem, PaginatedResponse } from '@commonpub/server';
+import type { HomepageSectionConfig } from '@commonpub/server';
+
+const props = defineProps<{
+  config: HomepageSectionConfig;
+  title?: string;
+}>();
+
+const { user: authUser } = useAuth();
+const { enabledTypeMeta } = useContentTypes();
+const toast = useToast();
+
+const activeTab = ref(authUser.value ? 'foryou' : 'latest');
+const tabs = computed(() => [
+  { value: 'foryou', label: 'For You', icon: 'fa-solid fa-sparkles' },
+  { value: 'latest', label: 'Latest', icon: 'fa-solid fa-clock' },
+  { value: 'following', label: 'Following', icon: 'fa-solid fa-user-group' },
+  ...enabledTypeMeta.value.map(ct => ({ value: ct.type, label: ct.plural, icon: ct.icon })),
+]);
+
+const limit = computed(() => props.config.limit ?? 12);
+
+const contentQuery = computed(() => ({
+  status: 'published',
+  type: ['foryou', 'latest', 'following'].includes(activeTab.value)
+    ? (props.config.contentType || undefined)
+    : activeTab.value,
+  sort: activeTab.value === 'latest' ? 'recent' : activeTab.value === 'following' ? 'recent' : (props.config.sort ?? 'popular'),
+  ...(activeTab.value === 'following' && authUser.value?.id ? { followedBy: authUser.value.id } : {}),
+  ...(props.config.categorySlug ? { categorySlug: props.config.categorySlug } : {}),
+  limit: limit.value,
+}));
+
+const { data: feed, pending: feedPending } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+  query: contentQuery,
+  watch: [contentQuery],
+});
+
+const loadingMore = ref(false);
+const allLoaded = ref(false);
+
+watch(activeTab, () => { allLoaded.value = false; });
+
+async function loadMore(): Promise<void> {
+  loadingMore.value = true;
+  try {
+    const nextOffset = (feed.value?.items?.length ?? 0);
+    const more = await $fetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+      query: { ...contentQuery.value, offset: nextOffset },
+    });
+    if (more.items?.length && feed.value?.items) {
+      feed.value.items.push(...more.items);
+    }
+    if (!more.items?.length || more.items.length < limit.value) {
+      allLoaded.value = true;
+    }
+  } catch {
+    toast.error('Failed to load more');
+  } finally {
+    loadingMore.value = false;
+  }
+}
+
+const isAuthenticated = computed(() => !!authUser.value);
+const columns = computed(() => props.config.columns ?? 2);
+</script>
+
+<template>
+  <div>
+    <!-- Tabs -->
+    <div class="cpub-tabs-bar">
+      <div class="cpub-tabs-inner">
+        <button
+          v-for="tab in tabs"
+          :key="tab.value"
+          class="cpub-tab"
+          :class="{ active: activeTab === tab.value }"
+          @click="activeTab = tab.value"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Grid -->
+    <div v-if="feedPending" class="cpub-loading-state">
+      <i class="fa-solid fa-circle-notch fa-spin"></i> Loading content...
+    </div>
+    <div v-else-if="feed?.items?.length" class="cpub-content-grid" :style="{ '--grid-cols': columns }">
+      <ContentCard v-for="item in feed.items" :key="item.id" :item="item" />
+    </div>
+    <div v-else class="cpub-empty-state">
+      <div class="cpub-empty-state-icon"><i :class="activeTab === 'following' ? 'fa-solid fa-user-group' : 'fa-solid fa-inbox'"></i></div>
+      <template v-if="activeTab === 'following' && !isAuthenticated">
+        <p class="cpub-empty-state-title">Sign in to see your feed</p>
+        <p class="cpub-empty-state-desc">Follow creators to see their content here.</p>
+        <NuxtLink to="/auth/login" class="cpub-btn cpub-btn-primary" style="margin-top: 12px;">Sign In</NuxtLink>
+      </template>
+      <template v-else-if="activeTab === 'following'">
+        <p class="cpub-empty-state-title">No posts from people you follow</p>
+        <NuxtLink to="/explore" class="cpub-btn" style="margin-top: 12px;"><i class="fa-solid fa-compass"></i> Explore</NuxtLink>
+      </template>
+      <template v-else>
+        <p class="cpub-empty-state-title">No content yet</p>
+        <p class="cpub-empty-state-desc">Be the first to create something!</p>
+      </template>
+    </div>
+
+    <div v-if="!allLoaded && feed?.items?.length" class="cpub-load-more-row">
+      <button class="cpub-btn-load-more" :disabled="loadingMore" @click="loadMore">
+        <i :class="loadingMore ? 'fa-solid fa-circle-notch fa-spin' : 'fa-solid fa-rotate'"></i>
+        {{ loadingMore ? 'Loading...' : 'Load more' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-tabs-bar { border-bottom: var(--border-width-default) solid var(--border); margin-bottom: 0; }
+.cpub-tabs-inner { display: flex; max-width: var(--content-max-width, 1280px); margin: 0 auto; padding: 0 var(--space-4); overflow-x: auto; }
+.cpub-tab { padding: 10px 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; }
+.cpub-tab:hover { color: var(--text); }
+.cpub-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+
+.cpub-content-grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 2), 1fr); gap: 16px; }
+
+.cpub-load-more-row { text-align: center; padding: 24px 0; }
+.cpub-btn-load-more { font-family: var(--font-mono); font-size: 11px; padding: 8px 20px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
+.cpub-btn-load-more:hover { border-color: var(--accent); color: var(--accent); }
+
+@media (max-width: 768px) { .cpub-content-grid { grid-template-columns: 1fr; } }
+</style>

package/components/homepage/ContestsSection.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { HomepageSectionConfig } from '@commonpub/server';
+
+const props = defineProps<{ config: HomepageSectionConfig }>();
+
+const limit = computed(() => props.config.limit ?? 3);
+const { data: contests } = await useFetch('/api/contests', { query: { limit }, lazy: true });
+</script>
+
+<template>
+  <div v-if="contests?.items?.length" class="cpub-sb-card">
+    <div class="cpub-sb-head">Active Contests <NuxtLink to="/contests">View all</NuxtLink></div>
+    <div v-for="c in contests.items" :key="c.id" class="cpub-contest-item">
+      <NuxtLink :to="`/contests/${c.slug}`" class="cpub-contest-name">{{ c.title }}</NuxtLink>
+      <div class="cpub-contest-row">
+        <span class="cpub-contest-entries">{{ c.entryCount ?? 0 }} entries</span>
+        <span v-if="c.endDate" class="cpub-contest-deadline">
+          <i class="fa-regular fa-clock"></i> {{ Math.max(0, Math.ceil((new Date(c.endDate).getTime() - Date.now()) / 86400000)) }}d left
+        </span>
+      </div>
+      <NuxtLink :to="`/contests/${c.slug}`" class="cpub-btn-enter">Enter Contest</NuxtLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-sb-card { background: var(--surface); border: var(--border-width-default) solid var(--border); padding: 16px; margin-bottom: 16px; }
+.cpub-sb-head { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); padding-bottom: 10px; border-bottom: var(--border-width-default) solid var(--border2); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
+.cpub-sb-head a { color: var(--accent); text-decoration: none; font-size: 10px; }
+.cpub-contest-item { padding: 8px 0; border-bottom: var(--border-width-default) solid var(--border2); }
+.cpub-contest-item:last-child { border-bottom: none; }
+.cpub-contest-name { font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; display: block; margin-bottom: 4px; }
+.cpub-contest-name:hover { color: var(--accent); }
+.cpub-contest-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
+.cpub-contest-entries { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
+.cpub-contest-deadline { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); display: flex; align-items: center; gap: 4px; }
+.cpub-btn-enter { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border: var(--border-width-default) solid var(--accent); color: var(--accent); text-decoration: none; display: inline-block; }
+.cpub-btn-enter:hover { background: var(--accent-bg); }
+</style>

package/components/homepage/CustomHtmlSection.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HomepageSectionConfig } from '@commonpub/server';
+
+const props = defineProps<{
+  config: HomepageSectionConfig;
+  title?: string;
+}>();
+</script>
+
+<template>
+  <section v-if="config.html" class="cpub-custom-section">
+    <h2 v-if="title" class="cpub-custom-title">{{ title }}</h2>
+    <div class="cpub-custom-content" v-html="config.html" />
+  </section>
+</template>
+
+<style scoped>
+.cpub-custom-section { margin-bottom: 24px; }
+.cpub-custom-title { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; }
+</style>

package/components/homepage/EditorialSection.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Serialized, ContentListItem, PaginatedResponse } from '@commonpub/server';
+import type { HomepageSectionConfig } from '@commonpub/server';
+
+const props = defineProps<{ config: HomepageSectionConfig }>();
+
+const limit = computed(() => props.config.limit ?? 3);
+const { data: editorialPicks } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+  query: { status: 'published', editorial: true, sort: 'editorial', limit },
+});
+</script>
+
+<template>
+  <section v-if="editorialPicks?.items?.length" class="cpub-editorial-section">
+    <div class="cpub-editorial-header">
+      <h2 class="cpub-editorial-heading"><i class="fa-solid fa-pen-fancy"></i> Staff Picks</h2>
+    </div>
+    <div class="cpub-editorial-grid" :class="{ 'cpub-editorial-single': editorialPicks.items.length === 1 }">
+      <ContentCard v-for="item in editorialPicks.items" :key="item.id" :item="item" />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cpub-editorial-section { margin-bottom: 24px; }
+.cpub-editorial-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.cpub-editorial-heading { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 6px; }
+.cpub-editorial-heading i { font-size: 10px; }
+.cpub-editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+.cpub-editorial-single { grid-template-columns: 1fr; max-width: 400px; }
+@media (max-width: 768px) { .cpub-editorial-grid { grid-template-columns: 1fr; } }
+</style>

package/components/homepage/HeroSection.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { HomepageSectionConfig } from '@commonpub/server';
+
+defineProps<{ config: HomepageSectionConfig }>();
+
+const { contests: contestsEnabled } = useFeatures();
+const { data: contests } = await useFetch('/api/contests', { query: { limit: 3 }, lazy: true });
+
+const activeContest = computed(() => {
+  const items = (contests.value as { items?: Array<Record<string, unknown>> })?.items;
+  return items?.find((c) => c.status === 'active') ?? null;
+});
+
+const heroDismissed = ref(false);
+</script>
+
+<template>
+  <section v-if="!heroDismissed" class="cpub-hero-banner">
+    <div class="cpub-hero-grid-bg" />
+    <div class="cpub-hero-gradient" />
+    <button class="cpub-hero-dismiss" title="Dismiss" @click="heroDismissed = true">
+      <i class="fa-solid fa-xmark"></i>
+    </button>
+    <div class="cpub-hero-inner">
+      <div class="cpub-hero-content">
+        <template v-if="contestsEnabled && activeContest">
+          <div class="cpub-hero-eyebrow">
+            <span class="cpub-hero-badge cpub-hero-badge-live"><span class="cpub-live-dot" /> Live Contest</span>
+            <span class="cpub-hero-badge">{{ activeContest.entryCount ?? 0 }} entries</span>
+          </div>
+          <h1 class="cpub-hero-title">{{ activeContest.title }}</h1>
+          <p v-if="activeContest.description" class="cpub-hero-excerpt">{{ activeContest.description }}</p>
+          <div class="cpub-hero-actions">
+            <NuxtLink :to="`/contests/${activeContest.slug}`" class="cpub-btn cpub-btn-primary"><i class="fa-solid fa-trophy"></i> Enter Contest</NuxtLink>
+            <NuxtLink :to="`/contests/${activeContest.slug}`" class="cpub-btn"><i class="fa-solid fa-circle-info"></i> View Details</NuxtLink>
+          </div>
+        </template>
+        <template v-else>
+          <div class="cpub-hero-eyebrow">
+            <span class="cpub-hero-badge cpub-hero-badge-live"><span class="cpub-live-dot" /> Open Source</span>
+          </div>
+          <h1 class="cpub-hero-title">Build. Document.<br><span>Share.</span></h1>
+          <p class="cpub-hero-excerpt">
+            CommonPub is an open platform for maker communities. Document your builds with rich editors, join hubs, learn with structured paths, and share with the world.
+          </p>
+          <div class="cpub-hero-actions">
+            <NuxtLink to="/create" class="cpub-btn cpub-btn-primary"><i class="fa-solid fa-plus"></i> Start Building</NuxtLink>
+            <NuxtLink to="/explore" class="cpub-btn"><i class="fa-solid fa-compass"></i> Explore</NuxtLink>
+          </div>
+        </template>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cpub-hero-banner { position: relative; background: var(--surface); border-bottom: var(--border-width-default) solid var(--border); overflow: hidden; min-height: 200px; display: flex; align-items: stretch; }
+.cpub-hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--border2) 1px, transparent 1px), linear-gradient(90deg, var(--border2) 1px, transparent 1px); background-size: 32px 32px; opacity: 0.25; }
+.cpub-hero-gradient { position: absolute; inset: 0; background: var(--surface2); opacity: 0.5; }
+.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-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; }
+.cpub-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: cpub-pulse 2s ease-in-out infinite; }
+@keyframes cpub-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+.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; }
+</style>

package/components/homepage/HomepageSectionRenderer.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { HomepageSection } from '@commonpub/server';
+
+defineProps<{
+  sections: HomepageSection[];
+  /** Which zone to render: 'main' for feed column, 'sidebar' for sidebar */
+  zone: 'main' | 'sidebar' | 'full-width';
+}>();
+
+const features = useFeatures();
+
+function isFeatureEnabled(featureGate?: string): boolean {
+  if (!featureGate) return true;
+  return (features.features as unknown as Record<string, boolean>)?.[featureGate] ?? true;
+}
+
+/** Section types that render in the full-width zone (above the 2-column layout) */
+const FULL_WIDTH_TYPES = new Set(['hero']);
+
+/** Section types that render in the sidebar */
+const SIDEBAR_TYPES = new Set(['stats', 'contests', 'hubs']);
+
+function sectionZone(section: HomepageSection): 'full-width' | 'main' | 'sidebar' {
+  if (FULL_WIDTH_TYPES.has(section.type)) return 'full-width';
+  if (SIDEBAR_TYPES.has(section.type)) return 'sidebar';
+  return 'main';
+}
+</script>
+
+<template>
+  <template v-for="section in sections" :key="section.id">
+    <template v-if="section.enabled && sectionZone(section) === zone && isFeatureEnabled(section.config.featureGate)">
+      <HomepageHeroSection
+        v-if="section.type === 'hero'"
+        :config="section.config"
+      />
+      <HomepageEditorialSection
+        v-else-if="section.type === 'editorial'"
+        :config="section.config"
+      />
+      <HomepageContentGridSection
+        v-else-if="section.type === 'content-grid'"
+        :config="section.config"
+        :title="section.title"
+      />
+      <HomepageContestsSection
+        v-else-if="section.type === 'contests'"
+        :config="section.config"
+      />
+      <HomepageHubsSection
+        v-else-if="section.type === 'hubs'"
+        :config="section.config"
+      />
+      <HomepageStatsSection
+        v-else-if="section.type === 'stats'"
+      />
+      <HomepageCustomHtmlSection
+        v-else-if="section.type === 'custom-html'"
+        :config="section.config"
+        :title="section.title"
+      />
+    </template>
+  </template>
+</template>

package/components/homepage/HubsSection.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { HomepageSectionConfig } from '@commonpub/server';
+
+const props = defineProps<{ config: HomepageSectionConfig }>();
+
+const limit = computed(() => props.config.limit ?? 4);
+const { data: communities, pending } = await useFetch('/api/hubs', { query: { limit }, lazy: true });
+
+const { user } = useAuth();
+const isAuthenticated = computed(() => !!user.value);
+const joinedHubs = ref(new Set<string>());
+const toast = useToast();
+
+async function handleHubJoin(hubSlug: string): Promise<void> {
+  if (!isAuthenticated.value) {
+    await navigateTo('/auth/login?redirect=/');
+    return;
+  }
+  try {
+    await $fetch(`/api/hubs/${hubSlug}/join`, { method: 'POST' });
+    joinedHubs.value.add(hubSlug);
+    toast.success('Joined hub!');
+  } catch {
+    toast.error('Failed to join hub');
+  }
+}
+</script>
+
+<template>
+  <div v-if="pending" class="cpub-sb-card">
+    <div class="cpub-sb-head">Trending Hubs</div>
+    <div class="cpub-loading-state"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
+  </div>
+  <div v-else-if="communities?.items?.length" class="cpub-sb-card">
+    <div class="cpub-sb-head">Trending Hubs <NuxtLink to="/hubs">Browse</NuxtLink></div>
+    <div v-for="hub in communities.items" :key="hub.id" class="cpub-hub-item">
+      <div class="cpub-hub-icon">
+        <img v-if="hub.iconUrl" :src="hub.iconUrl" :alt="hub.name" class="cpub-hub-icon-img" />
+        <i v-else class="fa-solid fa-users"></i>
+      </div>
+      <div class="cpub-hub-info">
+        <NuxtLink :to="(hub as Record<string, unknown>).source === 'federated' ? `/federated-hubs/${hub.id}` : `/hubs/${hub.slug}`" class="cpub-hub-name">{{ hub.name }}</NuxtLink>
+        <div class="cpub-hub-members">{{ hub.memberCount ?? 0 }} members</div>
+      </div>
+      <button v-if="joinedHubs.has(hub.slug)" class="cpub-btn-joined" disabled><i class="fa-solid fa-check"></i> Joined</button>
+      <button v-else class="cpub-btn-join" @click.prevent="handleHubJoin(hub.slug)">Join</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-sb-card { background: var(--surface); border: var(--border-width-default) solid var(--border); padding: 16px; margin-bottom: 16px; }
+.cpub-sb-head { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); padding-bottom: 10px; border-bottom: var(--border-width-default) solid var(--border2); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
+.cpub-sb-head a { color: var(--accent); text-decoration: none; font-size: 10px; }
+.cpub-hub-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: var(--border-width-default) solid var(--border2); }
+.cpub-hub-item:last-child { border-bottom: none; }
+.cpub-hub-icon { width: 32px; height: 32px; background: var(--accent-bg); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--accent); flex-shrink: 0; overflow: hidden; }
+.cpub-hub-icon-img { width: 100%; height: 100%; object-fit: cover; }
+.cpub-hub-info { flex: 1; min-width: 0; }
+.cpub-hub-name { font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none; display: block; }
+.cpub-hub-name:hover { color: var(--accent); }
+.cpub-hub-members { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
+.cpub-btn-join { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border: var(--border-width-default) solid var(--accent); color: var(--accent); background: none; cursor: pointer; }
+.cpub-btn-join:hover { background: var(--accent-bg); }
+.cpub-btn-joined { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border: var(--border-width-default) solid var(--green-border); color: var(--green); background: var(--green-bg); cursor: default; display: flex; align-items: center; gap: 3px; }
+</style>

package/components/homepage/StatsSection.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const { hubs: hubsEnabled } = useFeatures();
+const { data: stats, pending } = await useFetch('/api/stats', { lazy: true });
+</script>
+
+<template>
+  <div class="cpub-sb-card">
+    <div class="cpub-sb-head">Platform Stats</div>
+    <div v-if="pending" class="cpub-loading-state"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
+    <div v-else class="cpub-stats-grid">
+      <div class="cpub-stat-block">
+        <span class="cpub-stat-num">{{ stats?.content?.byType?.project ?? 0 }}</span>
+        <span class="cpub-stat-lbl">Projects</span>
+      </div>
+      <div class="cpub-stat-block">
+        <span class="cpub-stat-num">{{ (stats?.content?.byType?.blog ?? 0) + (stats?.content?.byType?.article ?? 0) }}</span>
+        <span class="cpub-stat-lbl">Posts</span>
+      </div>
+      <div class="cpub-stat-block">
+        <span class="cpub-stat-num">{{ stats?.users?.total ?? 0 }}</span>
+        <span class="cpub-stat-lbl">Members</span>
+      </div>
+      <div v-if="hubsEnabled" class="cpub-stat-block">
+        <span class="cpub-stat-num">{{ stats?.hubs?.total ?? 0 }}</span>
+        <span class="cpub-stat-lbl">Hubs</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-sb-card { background: var(--surface); border: var(--border-width-default) solid var(--border); padding: 16px; margin-bottom: 16px; }
+.cpub-sb-head { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); padding-bottom: 10px; border-bottom: var(--border-width-default) solid var(--border2); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
+.cpub-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.cpub-stat-block { text-align: center; padding: 8px 0; }
+.cpub-stat-num { display: block; font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text); }
+.cpub-stat-lbl { display: block; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
+</style>

package/layouts/admin.vue

@@ -33,6 +33,8 @@ const sidebarOpen = ref(false);
           <NuxtLink to="/admin/reports" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-flag"></i> Reports</NuxtLink>
           <NuxtLink to="/admin/audit" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-clipboard-list"></i> Audit Log</NuxtLink>
           <NuxtLink to="/admin/theme" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-palette"></i> Theme</NuxtLink>
+          <NuxtLink to="/admin/homepage" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-house"></i> Homepage</NuxtLink>
+          <NuxtLink to="/admin/features" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-toggle-on"></i> Features</NuxtLink>
           <NuxtLink to="/admin/federation" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-globe"></i> Federation</NuxtLink>
           <NuxtLink to="/admin/settings" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-gear"></i> Settings</NuxtLink>
         </nav>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -30,7 +30,7 @@
     "@aws-sdk/client-s3": "^3.1010.0",
     "@commonpub/explainer": "^0.7.11",
     "@commonpub/schema": "^0.10.0",
-    "@commonpub/server": "^2.32.1",
+    "@commonpub/server": "^2.33.0",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bold": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.0",
@@ -54,12 +54,12 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/config": "0.9.2",
-    "@commonpub/docs": "0.6.2",
     "@commonpub/auth": "0.5.1",
+    "@commonpub/docs": "0.6.2",
     "@commonpub/editor": "0.7.9",
-    "@commonpub/ui": "0.8.5",
+    "@commonpub/protocol": "0.9.9",
     "@commonpub/learning": "0.5.0",
-    "@commonpub/protocol": "0.9.9"
+    "@commonpub/ui": "0.8.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",