@commonpub/layer 0.23.3 → 0.24.0

package/components/sections/SectionContests.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+/**
+ * Built-in section: contests — active-contests list with countdown.
+ *
+ * Fetches `/api/contests?limit=N`, renders sidebar-style card. Each
+ * row: title (link), entry count, "Nd left" deadline, Enter CTA.
+ * Mirrors legacy `ContestsSection.vue`.
+ *
+ * Feature-gated upstream — when `features.contests` is off the API
+ * returns 404 and the section renders the empty branch.
+ *
+ * Non-await useFetch per session-158 pattern. `var(--*)` only.
+ */
+import { computed } from 'vue';
+import type { SectionRenderProps } from '@commonpub/ui';
+
+interface ContestItem {
+  id: string;
+  slug: string;
+  title: string;
+  entryCount?: number | null;
+  endDate?: string | Date | null;
+}
+
+interface ContestsResponse {
+  items?: ContestItem[];
+}
+
+interface ContestsConfig extends Record<string, unknown> {
+  heading: string;
+  limit: number;
+}
+
+const props = defineProps<SectionRenderProps<ContestsConfig>>();
+
+const apiQuery = computed(() => ({
+  limit: Math.min(Math.max(props.config.limit, 1), 10),
+}));
+
+const { data: contests, pending } = useFetch<ContestsResponse>(
+  '/api/contests',
+  {
+    query: apiQuery,
+    key: `section-contests:${JSON.stringify(apiQuery.value)}`,
+    // Sidebar widget — lazy so initial SSR doesn't block on the contests
+    // query (which is ~5x slower than /api/hubs in practice). Matches the
+    // legacy ContestsSection.vue pattern.
+    lazy: true,
+  },
+);
+
+const items = computed(() => contests.value?.items ?? []);
+const isEmpty = computed(() => !pending.value && items.value.length === 0);
+
+function daysLeft(endDate: string | Date | null | undefined): number | null {
+  if (!endDate) return null;
+  const ms = new Date(endDate).getTime() - Date.now();
+  if (Number.isNaN(ms)) return null;
+  return Math.max(0, Math.ceil(ms / 86_400_000));
+}
+</script>
+
+<template>
+  <section
+    class="cpub-section-contests"
+    :aria-labelledby="config.heading ? `section-contests-${meta.sectionId}` : undefined"
+  >
+    <header
+      v-if="config.heading"
+      class="cpub-section-contests-header"
+    >
+      <h2
+        :id="`section-contests-${meta.sectionId}`"
+        class="cpub-section-contests-heading"
+      >
+        {{ config.heading }}
+      </h2>
+      <NuxtLink to="/contests" class="cpub-section-contests-all">View all</NuxtLink>
+    </header>
+
+    <div v-if="pending" class="cpub-section-contests-loading">
+      <i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true" />
+    </div>
+
+    <ul v-else-if="!isEmpty" class="cpub-section-contests-list">
+      <li v-for="c in items" :key="c.id" class="cpub-section-contests-item">
+        <NuxtLink :to="`/contests/${c.slug}`" class="cpub-section-contests-name">
+          {{ c.title }}
+        </NuxtLink>
+        <div class="cpub-section-contests-meta">
+          <span class="cpub-section-contests-entries">
+            {{ c.entryCount ?? 0 }} entries
+          </span>
+          <span v-if="daysLeft(c.endDate) !== null" class="cpub-section-contests-deadline">
+            <i class="fa-regular fa-clock" aria-hidden="true" />
+            {{ daysLeft(c.endDate) }}d left
+          </span>
+        </div>
+        <NuxtLink :to="`/contests/${c.slug}`" class="cpub-section-contests-cta">
+          Enter Contest
+        </NuxtLink>
+      </li>
+    </ul>
+
+    <p v-else class="cpub-section-contests-empty">No active contests.</p>
+  </section>
+</template>
+
+<style scoped>
+.cpub-section-contests {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: var(--space-4);
+}
+.cpub-section-contests-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--space-2);
+  border-bottom: var(--border-width-default) solid var(--border-soft);
+  margin-bottom: var(--space-3);
+}
+.cpub-section-contests-heading {
+  font-family: var(--font-mono);
+  font-size: var(--text-xxs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-faint);
+  margin: 0;
+}
+.cpub-section-contests-all {
+  font-family: var(--font-mono);
+  font-size: var(--text-xxs);
+  color: var(--accent);
+  text-decoration: none;
+}
+.cpub-section-contests-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.cpub-section-contests-item {
+  padding: var(--space-2) 0;
+  border-bottom: var(--border-width-default) solid var(--border-soft);
+}
+.cpub-section-contests-item:last-child { border-bottom: none; }
+.cpub-section-contests-name {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text);
+  text-decoration: none;
+  display: block;
+  margin-bottom: var(--space-1);
+}
+.cpub-section-contests-name:hover { color: var(--accent); }
+.cpub-section-contests-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-bottom: var(--space-2);
+}
+.cpub-section-contests-entries,
+.cpub-section-contests-deadline {
+  font-family: var(--font-mono);
+  font-size: var(--text-xxs);
+  color: var(--text-faint);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+.cpub-section-contests-cta {
+  font-family: var(--font-mono);
+  font-size: var(--text-xxs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: var(--space-1) var(--space-2);
+  border: var(--border-width-default) solid var(--accent);
+  color: var(--accent);
+  text-decoration: none;
+  display: inline-block;
+}
+.cpub-section-contests-cta:hover { background: var(--accent-bg); }
+.cpub-section-contests-loading,
+.cpub-section-contests-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  color: var(--text-faint);
+  font-size: var(--text-sm);
+}
+</style>

package/components/sections/SectionCustomHtml.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+/**
+ * Built-in section: custom-html — admin-only raw HTML escape hatch.
+ *
+ * **SECURITY**: renders `config.html` via `v-html` with no runtime
+ * sanitization. Intentional Phase-1c posture — matches the legacy
+ * `CustomHtmlSection.vue` security baseline that already ships in
+ * production. Threat-model + Phase 6b sanitization plan live in the
+ * section definition file (`builtin/custom-html.ts`) and
+ * `docs/plans/layout-and-pages.md §6.5`.
+ *
+ * Only trusted admin users can write to this section via
+ * `/api/admin/layouts/*` (gated on `requireAdmin(event)`). A compromised
+ * admin account → stored XSS — that's the gap we're documenting +
+ * tracking, not the gap we're closing this session.
+ *
+ * `var(--*)` only.
+ */
+import type { SectionRenderProps } from '@commonpub/ui';
+
+interface CustomHtmlConfig extends Record<string, unknown> {
+  heading: string;
+  html: string;
+}
+
+const props = defineProps<SectionRenderProps<CustomHtmlConfig>>();
+void props;  // template uses config + meta directly via `<script setup>`
+</script>
+
+<template>
+  <section
+    v-if="config.html"
+    class="cpub-section-custom-html"
+    :aria-labelledby="config.heading ? `section-custom-${meta.sectionId}` : undefined"
+  >
+    <h2
+      v-if="config.heading"
+      :id="`section-custom-${meta.sectionId}`"
+      class="cpub-section-custom-html-heading"
+    >
+      {{ config.heading }}
+    </h2>
+    <!-- v-html: see security note in source. Trusted admin input only. -->
+    <div class="cpub-section-custom-html-body" v-html="config.html" />
+  </section>
+</template>
+
+<style scoped>
+.cpub-section-custom-html {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.cpub-section-custom-html-heading {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-faint);
+  margin: 0;
+  padding-bottom: var(--space-2);
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+.cpub-section-custom-html-body {
+  font-size: var(--text-base);
+  line-height: 1.7;
+  color: var(--text);
+}
+</style>

package/components/sections/SectionEditorial.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+/**
+ * Built-in section: editorial — a Staff-Picks grid backed by /api/content.
+ *
+ * Identical query pattern to content-feed but with `editorial=true` +
+ * `sort=editorial` baked in. Renders `<ContentCard>` so it matches the
+ * surrounding visual identity.
+ *
+ * Non-await `useFetch` per the session-158 pitfall (top-level await
+ * inside `<LayoutSlot>` requires Suspense, which neither prod render
+ * nor editor preview wraps). Pending / empty / loaded surfaced via the
+ * template.
+ *
+ * `var(--*)` only.
+ */
+import { computed } from 'vue';
+import type { PaginatedResponse, Serialized, ContentListItem } from '@commonpub/server';
+import type { SectionRenderProps } from '@commonpub/ui';
+
+interface EditorialConfig extends Record<string, unknown> {
+  heading: string;
+  limit: number;
+  columns: 1 | 2 | 3 | 4;
+}
+
+const props = defineProps<SectionRenderProps<EditorialConfig>>();
+
+const apiQuery = computed(() => ({
+  status: 'published' as const,
+  editorial: true,
+  sort: 'editorial' as const,
+  limit: Math.min(Math.max(props.config.limit, 1), 12),
+}));
+
+const fetchKey = computed(
+  () => `section-editorial:${JSON.stringify(apiQuery.value)}`,
+);
+
+const { data: editorialPicks, pending } = useFetch<PaginatedResponse<Serialized<ContentListItem>>>(
+  '/api/content',
+  {
+    query: apiQuery,
+    key: fetchKey.value,
+  },
+);
+
+const items = computed(() => editorialPicks.value?.items ?? []);
+const isEmpty = computed(() => !pending.value && items.value.length === 0);
+</script>
+
+<template>
+  <section
+    class="cpub-section-editorial"
+    :aria-labelledby="config.heading ? `section-editorial-${meta.sectionId}` : undefined"
+  >
+    <h2
+      v-if="config.heading"
+      :id="`section-editorial-${meta.sectionId}`"
+      class="cpub-section-editorial-heading"
+    >
+      <i class="fa-solid fa-pen-fancy" aria-hidden="true" />
+      {{ config.heading }}
+    </h2>
+
+    <div v-if="pending" class="cpub-section-editorial-loading">
+      <i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true" />
+      <span>Loading…</span>
+    </div>
+
+    <div
+      v-else-if="!isEmpty"
+      class="cpub-section-editorial-grid"
+      :data-columns="config.columns"
+    >
+      <ContentCard
+        v-for="item in items"
+        :key="item.id"
+        :item="item"
+      />
+    </div>
+
+    <p v-else class="cpub-section-editorial-empty">
+      No staff picks yet.
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.cpub-section-editorial {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.cpub-section-editorial-heading {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+  margin: 0;
+  padding-bottom: var(--space-2);
+  border-bottom: var(--border-width-default) solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.cpub-section-editorial-heading i {
+  font-size: 0.9em;
+}
+.cpub-section-editorial-grid {
+  display: grid;
+  gap: var(--space-3);
+}
+.cpub-section-editorial-grid[data-columns='1'] { grid-template-columns: 1fr; }
+.cpub-section-editorial-grid[data-columns='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.cpub-section-editorial-grid[data-columns='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.cpub-section-editorial-grid[data-columns='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+@media (max-width: 1024px) {
+  .cpub-section-editorial-grid[data-columns='3'],
+  .cpub-section-editorial-grid[data-columns='4'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 640px) {
+  .cpub-section-editorial-grid { grid-template-columns: 1fr; }
+}
+
+.cpub-section-editorial-loading,
+.cpub-section-editorial-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-6);
+  color: var(--text-faint);
+  font-size: var(--text-sm);
+}
+</style>

package/components/sections/SectionHubs.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+/**
+ * Built-in section: hubs — trending hubs list with join action.
+ *
+ * Fetches `/api/hubs?limit=N`, renders sidebar-style card. Mirrors
+ * legacy `HubsSection.vue`: icon, name, member count, Join CTA per row.
+ *
+ * Join flow:
+ *   - Anonymous visitor → navigate to /auth/login?redirect=/
+ *   - Authenticated → POST /api/hubs/:slug/join, flip local state to
+ *     "Joined" + show toast
+ *   - Failure → error toast, leave button as Join
+ *
+ * Non-await useFetch + reactive local `joinedHubs` set per session-158
+ * pattern. `var(--*)` only.
+ */
+import { computed, ref } from 'vue';
+import type { SectionRenderProps } from '@commonpub/ui';
+
+interface HubItem {
+  id: string;
+  slug: string;
+  name: string;
+  iconUrl?: string | null;
+  memberCount?: number | null;
+  source?: 'local' | 'federated';
+}
+
+interface HubsResponse {
+  items?: HubItem[];
+}
+
+interface HubsConfig extends Record<string, unknown> {
+  heading: string;
+  limit: number;
+}
+
+const props = defineProps<SectionRenderProps<HubsConfig>>();
+
+const apiQuery = computed(() => ({
+  limit: Math.min(Math.max(props.config.limit, 1), 20),
+}));
+
+const { data: hubs, pending } = useFetch<HubsResponse>(
+  '/api/hubs',
+  {
+    query: apiQuery,
+    key: `section-hubs:${JSON.stringify(apiQuery.value)}`,
+    // Sidebar widget — lazy so initial SSR doesn't block on the trending-
+    // hubs query. Pending state renders a spinner; hub list pops in
+    // client-side after first paint. Matches the legacy HubsSection.vue
+    // pattern that we're replacing.
+    lazy: true,
+  },
+);
+
+const items = computed(() => hubs.value?.items ?? []);
+const isEmpty = computed(() => !pending.value && items.value.length === 0);
+
+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');
+  }
+}
+
+function hubHref(hub: HubItem): string {
+  return hub.source === 'federated' ? `/federated-hubs/${hub.id}` : `/hubs/${hub.slug}`;
+}
+</script>
+
+<template>
+  <section
+    class="cpub-section-hubs"
+    :aria-labelledby="config.heading ? `section-hubs-${meta.sectionId}` : undefined"
+  >
+    <header
+      v-if="config.heading"
+      class="cpub-section-hubs-header"
+    >
+      <h2
+        :id="`section-hubs-${meta.sectionId}`"
+        class="cpub-section-hubs-heading"
+      >
+        {{ config.heading }}
+      </h2>
+      <NuxtLink to="/hubs" class="cpub-section-hubs-browse">Browse</NuxtLink>
+    </header>
+
+    <div v-if="pending" class="cpub-section-hubs-loading">
+      <i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true" />
+    </div>
+
+    <ul v-else-if="!isEmpty" class="cpub-section-hubs-list">
+      <li v-for="hub in items" :key="hub.id" class="cpub-section-hubs-item">
+        <div class="cpub-section-hubs-icon">
+          <img v-if="hub.iconUrl" :src="hub.iconUrl" :alt="hub.name" />
+          <i v-else class="fa-solid fa-users" aria-hidden="true" />
+        </div>
+        <div class="cpub-section-hubs-info">
+          <NuxtLink :to="hubHref(hub)" class="cpub-section-hubs-name">{{ hub.name }}</NuxtLink>
+          <div class="cpub-section-hubs-members">{{ hub.memberCount ?? 0 }} members</div>
+        </div>
+        <button
+          v-if="joinedHubs.has(hub.slug)"
+          type="button"
+          class="cpub-section-hubs-joined"
+          disabled
+          :aria-label="`Already joined ${hub.name}`"
+        >
+          <i class="fa-solid fa-check" aria-hidden="true" /> Joined
+        </button>
+        <button
+          v-else
+          type="button"
+          class="cpub-section-hubs-join"
+          :aria-label="`Join ${hub.name}`"
+          @click.prevent="handleHubJoin(hub.slug)"
+        >
+          Join
+        </button>
+      </li>
+    </ul>
+
+    <p v-else class="cpub-section-hubs-empty">No hubs yet.</p>
+  </section>
+</template>
+
+<style scoped>
+.cpub-section-hubs {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: var(--space-4);
+}
+.cpub-section-hubs-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--space-2);
+  border-bottom: var(--border-width-default) solid var(--border-soft);
+  margin-bottom: var(--space-3);
+}
+.cpub-section-hubs-heading {
+  font-family: var(--font-mono);
+  font-size: var(--text-xxs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-faint);
+  margin: 0;
+}
+.cpub-section-hubs-browse {
+  font-family: var(--font-mono);
+  font-size: var(--text-xxs);
+  color: var(--accent);
+  text-decoration: none;
+}
+.cpub-section-hubs-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.cpub-section-hubs-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) 0;
+  border-bottom: var(--border-width-default) solid var(--border-soft);
+}
+.cpub-section-hubs-item:last-child { border-bottom: none; }
+
+.cpub-section-hubs-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: var(--text-xs);
+  color: var(--accent);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.cpub-section-hubs-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.cpub-section-hubs-info { flex: 1; min-width: 0; }
+.cpub-section-hubs-name {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text);
+  text-decoration: none;
+  display: block;
+}
+.cpub-section-hubs-name:hover { color: var(--accent); }
+.cpub-section-hubs-members {
+  font-family: var(--font-mono);
+  font-size: var(--text-xxs);
+  color: var(--text-faint);
+}
+.cpub-section-hubs-join,
+.cpub-section-hubs-joined {
+  font-family: var(--font-mono);
+  font-size: var(--text-xxs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: var(--space-1) var(--space-2);
+  border: var(--border-width-default) solid var(--accent);
+  color: var(--accent);
+  background: none;
+  cursor: pointer;
+}
+.cpub-section-hubs-join:hover { background: var(--accent-bg); }
+.cpub-section-hubs-joined {
+  border-color: var(--green-border);
+  color: var(--green);
+  background: var(--green-bg);
+  cursor: default;
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+.cpub-section-hubs-loading,
+.cpub-section-hubs-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  color: var(--text-faint);
+  font-size: var(--text-sm);
+}
+</style>