@commonpub/layer 0.24.0 → 0.25.0

package/components/sections/SectionEditorial.vue

@@ -1,138 +0,0 @@
-<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/SectionHeading.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-/**
- * Built-in section: heading — a single configurable heading (h1–h4)
- * with optional eyebrow + subline.
- *
- * Phase 1c starter. Semantic level is admin-chosen — the auto-form
- * inspector (Phase 3e) will warn on multiple h1s per layout.
- *
- * `var(--*)` only.
- */
-import { computed } from 'vue';
-import type { SectionRenderProps } from '@commonpub/ui';
-
-interface HeadingConfig extends Record<string, unknown> {
-  text: string;
-  level: 1 | 2 | 3 | 4;
-  align: 'left' | 'center';
-  eyebrow: string;
-  subline: string;
-}
-
-const props = defineProps<SectionRenderProps<HeadingConfig>>();
-
-// Vue's <component :is> with a tag string handles the level swap without
-// needing a v-if chain. Defensive clamp: an out-of-range level (shouldn't
-// happen — Zod gates it on write) falls back to h2.
-const headingTag = computed(() => {
-  const n = props.config.level;
-  return n >= 1 && n <= 4 ? `h${n}` : 'h2';
-});
-</script>
-
-<template>
-  <section
-    class="cpub-section-heading"
-    :data-align="config.align"
-    :aria-labelledby="`section-heading-${meta.sectionId}`"
-  >
-    <p v-if="config.eyebrow" class="cpub-section-heading-eyebrow">{{ config.eyebrow }}</p>
-    <component
-      :is="headingTag"
-      :id="`section-heading-${meta.sectionId}`"
-      class="cpub-section-heading-text"
-    >
-      {{ config.text }}
-    </component>
-    <p v-if="config.subline" class="cpub-section-heading-subline">{{ config.subline }}</p>
-  </section>
-</template>
-
-<style scoped>
-.cpub-section-heading {
-  margin-block: var(--space-4);
-}
-.cpub-section-heading[data-align='center'] {
-  text-align: center;
-}
-.cpub-section-heading-eyebrow {
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--text-faint);
-  margin: 0 0 var(--space-2);
-}
-.cpub-section-heading-text {
-  margin: 0;
-  font-weight: 700;
-  line-height: 1.25;
-  color: var(--text);
-}
-.cpub-section-heading-subline {
-  margin: var(--space-2) 0 0;
-  color: var(--text-dim);
-  font-size: var(--text-md);
-  line-height: 1.6;
-}
-</style>

package/components/sections/SectionHero.vue

@@ -1,164 +0,0 @@
-<script setup lang="ts">
-/**
- * Built-in section: hero — banner with title, optional eyebrow + subtitle,
- * up to two CTAs.
- *
- * Phase 1c starter. Variants: `default` (left-aligned, grid backdrop),
- * `compact` (smaller padding, no backdrop), `centered` (centered text
- * + CTAs, grid backdrop).
- *
- * Intentionally does NOT replicate the existing `HomepageHeroSection`'s
- * contest-dispatch logic — that becomes its own data-aware section in
- * Phase 6b (`contest-feature` or similar). This hero is pure
- * config-driven so the editor preview is deterministic.
- *
- * `var(--*)` only.
- */
-import type { SectionRenderProps } from '@commonpub/ui';
-
-interface HeroCta {
-  label: string;
-  href: string;
-  variant: 'primary' | 'secondary';
-}
-
-interface HeroConfig extends Record<string, unknown> {
-  variant: 'default' | 'compact' | 'centered';
-  eyebrow: string;
-  title: string;
-  subtitle: string;
-  ctas: HeroCta[];
-}
-
-defineProps<SectionRenderProps<HeroConfig>>();
-</script>
-
-<template>
-  <section
-    class="cpub-section-hero"
-    :data-variant="config.variant"
-    :aria-labelledby="`section-hero-${meta.sectionId}`"
-  >
-    <div v-if="config.variant !== 'compact'" class="cpub-section-hero-grid-bg" aria-hidden="true" />
-    <div class="cpub-section-hero-inner">
-      <div class="cpub-section-hero-content">
-        <p v-if="config.eyebrow" class="cpub-section-hero-eyebrow">{{ config.eyebrow }}</p>
-        <h1
-          :id="`section-hero-${meta.sectionId}`"
-          class="cpub-section-hero-title"
-        >
-          {{ config.title }}
-        </h1>
-        <p v-if="config.subtitle" class="cpub-section-hero-subtitle">{{ config.subtitle }}</p>
-        <div v-if="config.ctas.length > 0" class="cpub-section-hero-actions">
-          <NuxtLink
-            v-for="(cta, i) in config.ctas"
-            :key="i"
-            :to="cta.href"
-            class="cpub-btn"
-            :class="cta.variant === 'primary' ? 'cpub-btn-primary' : ''"
-          >
-            {{ cta.label }}
-          </NuxtLink>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.cpub-section-hero {
-  position: relative;
-  background: var(--surface);
-  border-bottom: var(--border-width-default) solid var(--border);
-  overflow: hidden;
-  min-height: 180px;
-  display: flex;
-  align-items: stretch;
-}
-.cpub-section-hero[data-variant='compact'] {
-  min-height: 120px;
-  border-bottom: none;
-}
-
-.cpub-section-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;
-  pointer-events: none;
-}
-
-.cpub-section-hero-inner {
-  position: relative;
-  z-index: 1;
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: var(--space-6) var(--space-6);
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-.cpub-section-hero[data-variant='compact'] .cpub-section-hero-inner {
-  padding: var(--space-4) var(--space-6);
-}
-
-.cpub-section-hero-content { flex: 1; min-width: 0; }
-
-.cpub-section-hero[data-variant='centered'] .cpub-section-hero-inner {
-  justify-content: center;
-}
-.cpub-section-hero[data-variant='centered'] .cpub-section-hero-content {
-  text-align: center;
-  max-width: 720px;
-}
-
-.cpub-section-hero-eyebrow {
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--text-faint);
-  margin: 0 0 var(--space-2);
-}
-
-.cpub-section-hero-title {
-  font-size: var(--text-3xl);
-  font-weight: 700;
-  line-height: 1.2;
-  margin: 0 0 var(--space-2);
-  color: var(--text);
-}
-.cpub-section-hero[data-variant='compact'] .cpub-section-hero-title {
-  font-size: var(--text-2xl);
-}
-
-.cpub-section-hero-subtitle {
-  font-size: var(--text-md);
-  color: var(--text-dim);
-  line-height: 1.6;
-  margin: 0 0 var(--space-4);
-  max-width: 560px;
-}
-.cpub-section-hero[data-variant='centered'] .cpub-section-hero-subtitle {
-  margin-inline: auto;
-}
-
-.cpub-section-hero-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-}
-.cpub-section-hero[data-variant='centered'] .cpub-section-hero-actions {
-  justify-content: center;
-}
-
-@media (max-width: 640px) {
-  .cpub-section-hero-inner { padding: var(--space-4); }
-  .cpub-section-hero-title { font-size: var(--text-2xl); }
-  .cpub-section-hero-actions { width: 100%; }
-}
-</style>

package/components/sections/SectionHubs.vue

@@ -1,247 +0,0 @@
-<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>