@commonpub/layer 0.10.1 → 0.13.0

package/components/EventCard.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { EventListItem } from '@commonpub/server';
+
+const props = defineProps<{
+  event: EventListItem;
+}>();
+
+const statusClass = computed(() => {
+  const map: Record<string, string> = {
+    published: 'cpub-badge-accent',
+    active: 'cpub-badge-green',
+    completed: 'cpub-badge-dim',
+    cancelled: 'cpub-badge-red',
+    draft: 'cpub-badge-yellow',
+  };
+  return map[props.event.status] ?? 'cpub-badge-dim';
+});
+
+const typeIcon = computed(() => {
+  const map: Record<string, string> = {
+    'in-person': 'fa-solid fa-location-dot',
+    'online': 'fa-solid fa-video',
+    'hybrid': 'fa-solid fa-arrows-split-up-and-left',
+  };
+  return map[props.event.eventType] ?? 'fa-solid fa-calendar';
+});
+
+function formatDate(date: string | Date): string {
+  return new Date(date).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+function formatTime(date: string | Date): string {
+  return new Date(date).toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}
+</script>
+
+<template>
+  <NuxtLink :to="`/events/${event.slug}`" class="cpub-event-card">
+    <div v-if="event.coverImage" class="cpub-event-cover">
+      <img :src="event.coverImage" :alt="event.title" />
+    </div>
+    <div class="cpub-event-body">
+      <div class="cpub-event-header">
+        <span class="cpub-badge" :class="statusClass">{{ event.status }}</span>
+        <span v-if="event.isFeatured" class="cpub-badge cpub-badge-accent"><i class="fa-solid fa-star"></i> Featured</span>
+      </div>
+      <div class="cpub-event-date">
+        <i class="fa-solid fa-calendar"></i>
+        {{ formatDate(event.startDate) }} at {{ formatTime(event.startDate) }}
+      </div>
+      <h3 class="cpub-event-title">{{ event.title }}</h3>
+      <p v-if="event.description" class="cpub-event-desc">{{ event.description }}</p>
+      <div class="cpub-event-meta">
+        <span><i :class="typeIcon"></i> {{ event.eventType }}</span>
+        <span v-if="event.location"><i class="fa-solid fa-map-pin"></i> {{ event.location }}</span>
+        <span><i class="fa-solid fa-users"></i> {{ event.attendeeCount }}{{ event.capacity ? ` / ${event.capacity}` : '' }}</span>
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<style scoped>
+.cpub-event-card {
+  display: flex;
+  flex-direction: column;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  text-decoration: none;
+  color: var(--text);
+  transition: box-shadow 0.15s, transform 0.15s;
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+.cpub-event-card:hover { box-shadow: var(--shadow-lg); transform: translate(-1px, -1px); }
+
+.cpub-event-cover { height: 140px; overflow: hidden; }
+.cpub-event-cover img { width: 100%; height: 100%; object-fit: cover; }
+
+.cpub-event-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
+
+.cpub-event-header { display: flex; gap: 6px; flex-wrap: wrap; }
+
+.cpub-event-date {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.cpub-event-date i { font-size: 10px; }
+
+.cpub-event-title { font-size: 15px; font-weight: 600; margin: 0; }
+
+.cpub-event-desc {
+  font-size: 12px;
+  color: var(--text-dim);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.cpub-event-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 11px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  margin-top: 4px;
+}
+.cpub-event-meta i { font-size: 10px; margin-right: 3px; }
+</style>

package/components/PollDisplay.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { PollOptionResult } from '@commonpub/server';
+
+const props = defineProps<{
+  hubSlug: string;
+  postId: string;
+}>();
+
+const { isAuthenticated } = useAuth();
+const toast = useToast();
+const loading = ref(false);
+
+const { data, refresh } = await useFetch<{ options: PollOptionResult[]; userVote: string | null }>(
+  `/api/hubs/${props.hubSlug}/posts/${props.postId}/poll-options`,
+);
+
+const totalVotes = computed(() => {
+  if (!data.value) return 0;
+  return data.value.options.reduce((sum, opt) => sum + opt.voteCount, 0);
+});
+
+const hasVoted = computed(() => !!data.value?.userVote);
+
+function percentage(count: number): number {
+  if (totalVotes.value === 0) return 0;
+  return Math.round((count / totalVotes.value) * 100);
+}
+
+async function vote(optionId: string): Promise<void> {
+  if (!isAuthenticated.value || loading.value || hasVoted.value) return;
+  loading.value = true;
+  try {
+    await $fetch(`/api/hubs/${props.hubSlug}/posts/${props.postId}/poll-vote`, {
+      method: 'POST',
+      body: { optionId },
+    });
+    await refresh();
+  } catch {
+    toast.error('Failed to submit vote');
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div v-if="data?.options?.length" class="cpub-poll" role="group" aria-label="Poll">
+    <button
+      v-for="option in data.options"
+      :key="option.id"
+      type="button"
+      class="cpub-poll-option"
+      :class="{ voted: data.userVote === option.id, clickable: !hasVoted && isAuthenticated }"
+      :disabled="hasVoted || !isAuthenticated"
+      :aria-pressed="data.userVote === option.id"
+      :aria-label="`${option.label}${hasVoted ? ` — ${percentage(option.voteCount)}%` : ''}`"
+      @click="vote(option.id)"
+    >
+      <div class="cpub-poll-bar" :style="{ width: hasVoted || !isAuthenticated ? `${percentage(option.voteCount)}%` : '0%' }" />
+      <span class="cpub-poll-label">{{ option.label }}</span>
+      <span v-if="hasVoted || !isAuthenticated" class="cpub-poll-pct">{{ percentage(option.voteCount) }}%</span>
+    </button>
+    <div class="cpub-poll-meta">
+      {{ totalVotes }} vote{{ totalVotes !== 1 ? 's' : '' }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-poll { display: flex; flex-direction: column; gap: 6px; }
+
+.cpub-poll-option {
+  position: relative;
+  padding: 8px 12px;
+  border: var(--border-width-default) solid var(--border);
+  background: transparent;
+  font-size: 13px;
+  font-family: inherit;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  transition: border-color 0.12s;
+  text-align: left;
+  width: 100%;
+}
+.cpub-poll-option.clickable { cursor: pointer; }
+.cpub-poll-option.clickable:hover { border-color: var(--accent); }
+.cpub-poll-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.cpub-poll-option.voted { border-color: var(--accent); font-weight: 600; }
+.cpub-poll-option:disabled:not(.voted) { opacity: 0.7; cursor: default; }
+
+.cpub-poll-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: var(--accent-bg);
+  transition: width 0.3s ease;
+  z-index: 0;
+}
+
+.cpub-poll-label { position: relative; z-index: 1; flex: 1; }
+.cpub-poll-pct { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
+
+.cpub-poll-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 2px; }
+</style>

package/components/PostVoteButtons.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { VoteDirection } from '@commonpub/server';
+
+const props = defineProps<{
+  hubSlug: string;
+  postId: string;
+  voteScore: number;
+  userVote?: VoteDirection | null;
+}>();
+
+const emit = defineEmits<{
+  voted: [result: { voteScore: number; direction: VoteDirection | null }];
+}>();
+
+const { isAuthenticated } = useAuth();
+const toast = useToast();
+const loading = ref(false);
+const currentScore = ref(props.voteScore);
+const currentVote = ref<VoteDirection | null>(props.userVote ?? null);
+
+watch(() => props.voteScore, (v) => { currentScore.value = v; });
+watch(() => props.userVote, (v) => { currentVote.value = v ?? null; });
+
+async function vote(direction: VoteDirection): Promise<void> {
+  if (!isAuthenticated.value || loading.value) return;
+  loading.value = true;
+  try {
+    const result = await $fetch<{ voted: boolean; direction: VoteDirection | null; voteScore: number }>(
+      `/api/hubs/${props.hubSlug}/posts/${props.postId}/vote`,
+      { method: 'POST', body: { direction } },
+    );
+    currentScore.value = result.voteScore;
+    currentVote.value = result.direction;
+    emit('voted', { voteScore: result.voteScore, direction: result.direction });
+  } catch {
+    toast.error('Vote failed');
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-vote-buttons">
+    <button
+      class="cpub-vote-btn cpub-vote-up"
+      :class="{ active: currentVote === 'up' }"
+      :disabled="!isAuthenticated || loading"
+      :aria-pressed="currentVote === 'up'"
+      aria-label="Upvote"
+      @click="vote('up')"
+    >
+      <i class="fa-solid fa-chevron-up"></i>
+    </button>
+    <span class="cpub-vote-score" :class="{ positive: currentScore > 0, negative: currentScore < 0 }">
+      {{ currentScore }}
+    </span>
+    <button
+      class="cpub-vote-btn cpub-vote-down"
+      :class="{ active: currentVote === 'down' }"
+      :disabled="!isAuthenticated || loading"
+      :aria-pressed="currentVote === 'down'"
+      aria-label="Downvote"
+      @click="vote('down')"
+    >
+      <i class="fa-solid fa-chevron-down"></i>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.cpub-vote-buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.cpub-vote-btn {
+  width: 28px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: var(--border-width-default) solid transparent;
+  color: var(--text-faint);
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.12s;
+}
+.cpub-vote-btn:hover:not(:disabled) { color: var(--text); background: var(--surface2); }
+.cpub-vote-btn:disabled { opacity: 0.3; cursor: default; }
+.cpub-vote-btn.active { color: var(--accent); }
+.cpub-vote-up.active { color: var(--green, var(--accent)); }
+.cpub-vote-down.active { color: var(--red, var(--accent)); }
+
+.cpub-vote-score {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-dim);
+  min-width: 20px;
+  text-align: center;
+}
+.cpub-vote-score.positive { color: var(--green, var(--accent)); }
+.cpub-vote-score.negative { color: var(--red); }
+</style>

package/components/contest/ContestJudgeManager.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { ContestJudgeItem } from '@commonpub/server';
+
+const props = defineProps<{
+  contestSlug: string;
+  isOwner: boolean;
+}>();
+
+const toast = useToast();
+const { data: judges, refresh } = await useFetch<ContestJudgeItem[]>(
+  `/api/contests/${props.contestSlug}/judges`,
+);
+
+const newJudgeId = ref('');
+const newJudgeRole = ref<'lead' | 'judge' | 'guest'>('judge');
+const adding = ref(false);
+
+async function addJudge(): Promise<void> {
+  if (!newJudgeId.value) return;
+  adding.value = true;
+  try {
+    await $fetch(`/api/contests/${props.contestSlug}/judges`, {
+      method: 'POST',
+      body: { userId: newJudgeId.value, role: newJudgeRole.value },
+    });
+    toast.success('Judge added');
+    newJudgeId.value = '';
+    await refresh();
+  } catch {
+    toast.error('Failed to add judge');
+  } finally {
+    adding.value = false;
+  }
+}
+
+async function removeJudge(userId: string): Promise<void> {
+  if (!confirm('Remove this judge?')) return;
+  try {
+    await $fetch(`/api/contests/${props.contestSlug}/judges/${userId}`, { method: 'DELETE' });
+    toast.success('Judge removed');
+    await refresh();
+  } catch {
+    toast.error('Failed to remove judge');
+  }
+}
+
+const roleLabels: Record<string, string> = {
+  lead: 'Lead Judge',
+  judge: 'Judge',
+  guest: 'Guest Judge',
+};
+</script>
+
+<template>
+  <div class="cpub-contest-judges">
+    <h3 class="cpub-judges-title">Judges</h3>
+
+    <div v-if="judges?.length" class="cpub-judges-list">
+      <div v-for="judge in judges" :key="judge.id" class="cpub-judge-row">
+        <NuxtLink :to="`/u/${judge.userUsername}`" class="cpub-judge-link">
+          <span class="cpub-judge-avatar">
+            <img v-if="judge.userAvatar" :src="judge.userAvatar" :alt="judge.userName" />
+            <span v-else>{{ judge.userName.charAt(0) }}</span>
+          </span>
+          <span class="cpub-judge-name">{{ judge.userName }}</span>
+        </NuxtLink>
+        <span class="cpub-judge-role">{{ roleLabels[judge.role] || judge.role }}</span>
+        <span v-if="!judge.acceptedAt" class="cpub-judge-pending">Pending</span>
+        <button v-if="isOwner" class="cpub-judge-remove" :aria-label="`Remove ${judge.userName} from judges`" @click="removeJudge(judge.userId)">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </div>
+    </div>
+    <p v-else class="cpub-judges-empty">No judges assigned yet.</p>
+
+    <div v-if="isOwner" class="cpub-judges-add">
+      <input v-model="newJudgeId" class="cpub-judges-input" placeholder="User ID" />
+      <select v-model="newJudgeRole" class="cpub-judges-input cpub-judges-select">
+        <option value="lead">Lead</option>
+        <option value="judge">Judge</option>
+        <option value="guest">Guest</option>
+      </select>
+      <button class="cpub-btn cpub-btn-sm" :disabled="adding || !newJudgeId" @click="addJudge">
+        <i class="fa-solid fa-plus"></i> Add
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-judges-title { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); margin: 0 0 12px; }
+
+.cpub-judges-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
+.cpub-judge-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
+.cpub-judge-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); flex: 1; min-width: 0; }
+.cpub-judge-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--surface2); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; overflow: hidden; flex-shrink: 0; }
+.cpub-judge-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.cpub-judge-name { font-size: 12px; font-weight: 600; }
+.cpub-judge-role { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; color: var(--text-faint); }
+.cpub-judge-pending { font-family: var(--font-mono); font-size: 9px; color: var(--yellow, var(--text-faint)); }
+.cpub-judge-remove { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 10px; padding: 4px; }
+.cpub-judge-remove:hover { color: var(--red); }
+
+.cpub-judges-empty { font-size: 12px; color: var(--text-faint); font-style: italic; margin-bottom: 12px; }
+
+.cpub-judges-add { display: flex; gap: 6px; align-items: center; }
+.cpub-judges-input { font-size: 12px; padding: 4px 8px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; }
+.cpub-judges-input:focus { border-color: var(--accent); }
+.cpub-judges-select { max-width: 100px; }
+</style>

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>