@commonpub/layer 0.23.3 → 0.25.0

package/components/homepage/ContentGridSection.vue

@@ -123,7 +123,29 @@ const columns = computed(() => props.config.columns ?? 2);
 .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; }
+/*
+ * Session 164 polish: cap the grid's max width so cards don't stretch
+ * into a "giant cards in mobile layout" pattern at desktop widths.
+ *
+ * Was: `grid-template-columns: repeat(2, 1fr)` with NO width cap → at
+ * 1440px window, 2 columns of ~700px each. Cards stretched far past
+ * their natural design width and read as "single column of bigs".
+ *
+ * Now: same column behavior but bounded by --content-max-width (default
+ * 1280px) — matches the tabs-inner cap above (same theme token). At
+ * 1280px and below, behaves identically to before. Above, the grid
+ * stays at 1280 centered and cards stay at their design proportions.
+ *
+ * `var(--grid-cols)` config still drives column count. Mobile drops to
+ * 1-column at <=768px (unchanged).
+ */
+.cpub-content-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-cols, 2), 1fr);
+  gap: 16px;
+  max-width: var(--content-max-width, 1280px);
+  margin-inline: auto;
+}
 
 .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; }

package/components/homepage/HeroSection.vue

@@ -1,7 +1,15 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { HomepageSectionConfig } from '@commonpub/server';
 
-defineProps<{ config: HomepageSectionConfig }>();
+interface HeroCta {
+  label: string;
+  href: string;
+  variant?: 'primary' | 'secondary';
+  icon?: string;  // Font Awesome class (e.g. 'fa-plus'); optional
+}
+
+const props = defineProps<{ config: HomepageSectionConfig }>();
 
 const { contests: contestsEnabled } = useFeatures();
 const { data: contests } = await useFetch('/api/contests', { query: { limit: 3 }, lazy: true });
@@ -11,6 +19,49 @@ const activeContest = computed(() => {
   return items?.find((c) => c.status === 'active') ?? null;
 });
 
+// Config-driven overrides (Stage E session 159 — finally wired). The
+// legacy admin form (/admin/homepage) has accepted `customTitle` +
+// `customSubtitle` for a long time, but the renderer ignored them —
+// admin would type a custom title and see no change. Now respected.
+//
+// Hardcoded fallbacks preserve the existing "Build. Document. Share."
+// + Open Source eyebrow + Start Building/Explore CTAs when admin
+// hasn't customised anything.
+//
+// Contest-aware swap still wins when there's an active contest +
+// `features.contests` is on — the contest hero is intentionally not
+// overridable because it pulls live data; admins who want fully-static
+// copy can either disable the contests flag or set customTitle which
+// applies in the non-contest branch.
+const heroTitle = computed(() => {
+  const cfg = props.config as { customTitle?: string };
+  return cfg.customTitle?.trim() || 'Build. Document. Share.';
+});
+const heroTitleIsCustom = computed(() => {
+  const cfg = props.config as { customTitle?: string };
+  return !!cfg.customTitle?.trim();
+});
+const heroSubtitle = computed(() => {
+  const cfg = props.config as { customSubtitle?: string };
+  return cfg.customSubtitle?.trim() ||
+    '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.';
+});
+const heroEyebrow = computed(() => {
+  const cfg = props.config as { eyebrow?: string };
+  return cfg.eyebrow?.trim() || 'Open Source';
+});
+const heroCtas = computed<HeroCta[]>(() => {
+  const cfg = props.config as { ctas?: HeroCta[] };
+  if (Array.isArray(cfg.ctas) && cfg.ctas.length > 0) return cfg.ctas;
+  // Hardcoded fallbacks keep the legacy hero's exact look: icons +
+  // canonical labels. Admin-set ctas (no icon field in the legacy
+  // admin form) render without icons by design.
+  return [
+    { label: 'Start Building', href: '/create', variant: 'primary', icon: 'fa-plus' },
+    { label: 'Explore', href: '/explore', variant: 'secondary', icon: 'fa-compass' },
+  ];
+});
+
 // Shared via useState so the dismiss sticks across component remounts.
 // HomepageSectionRenderer's v-if wrappers can remount HeroSection when the
 // `sections` useFetch revalidates on hydration or when feature flags flip
@@ -51,15 +102,25 @@ function dismissHero(): void {
         </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>
+            <span class="cpub-hero-badge cpub-hero-badge-live"><span class="cpub-live-dot" /> {{ heroEyebrow }}</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>
+          <!-- When admin supplied a customTitle, show as plain text. The
+               hardcoded fallback uses inline <br> + accent span for the
+               canonical "Build. Document. Share." typography. -->
+          <h1 v-if="heroTitleIsCustom" class="cpub-hero-title">{{ heroTitle }}</h1>
+          <h1 v-else class="cpub-hero-title">Build. Document.<br><span>Share.</span></h1>
+          <p class="cpub-hero-excerpt">{{ heroSubtitle }}</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>
+            <NuxtLink
+              v-for="(cta, i) in heroCtas"
+              :key="i"
+              :to="cta.href"
+              class="cpub-btn"
+              :class="cta.variant === 'primary' ? 'cpub-btn-primary' : ''"
+            >
+              <i v-if="cta.icon" :class="['fa-solid', cta.icon]" aria-hidden="true" />
+              {{ cta.label }}
+            </NuxtLink>
           </div>
         </template>
       </div>

package/components/sections/SectionCta.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+/**
+ * Built-in section: cta — call-to-action panel.
+ *
+ * Heading + body + up to 3 buttons. Three variants:
+ *   default  → boxed panel with subtle border
+ *   contrast → accent-background inverse
+ *   minimal  → no panel, just text + buttons
+ *
+ * URL safety: href values are validated at WRITE time by the section's
+ * Zod schema (SAFE_LINK_URL regex). Renderer doesn't re-validate
+ * because Vue's :href binding doesn't sanitise — the regex IS the guard.
+ *
+ * `var(--*)` only.
+ */
+import type { SectionRenderProps } from '@commonpub/ui';
+
+interface CtaButton {
+  label: string;
+  href: string;
+  variant: 'primary' | 'secondary' | 'ghost';
+}
+
+interface CtaConfig extends Record<string, unknown> {
+  variant: 'default' | 'contrast' | 'minimal';
+  heading: string;
+  body: string;
+  buttons: CtaButton[];
+  align: 'left' | 'center';
+}
+
+const props = defineProps<SectionRenderProps<CtaConfig>>();
+void props;
+</script>
+
+<template>
+  <section
+    class="cpub-section-cta"
+    :data-variant="config.variant"
+    :data-align="config.align"
+    :aria-labelledby="`section-cta-${meta.sectionId}`"
+  >
+    <h2
+      :id="`section-cta-${meta.sectionId}`"
+      class="cpub-section-cta-heading"
+    >
+      {{ config.heading }}
+    </h2>
+
+    <p v-if="config.body" class="cpub-section-cta-body">
+      {{ config.body }}
+    </p>
+
+    <div v-if="config.buttons.length > 0" class="cpub-section-cta-actions">
+      <a
+        v-for="(btn, idx) in config.buttons"
+        :key="idx"
+        :href="btn.href"
+        :class="`cpub-section-cta-btn cpub-section-cta-btn-${btn.variant}`"
+      >
+        {{ btn.label }}
+      </a>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cpub-section-cta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-5);
+}
+
+/* default — boxed */
+.cpub-section-cta[data-variant='default'] {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+}
+
+/* contrast — accent inverse */
+.cpub-section-cta[data-variant='contrast'] {
+  background: var(--accent);
+  color: var(--surface);
+  border: var(--border-width-default) solid var(--accent);
+}
+.cpub-section-cta[data-variant='contrast'] .cpub-section-cta-heading,
+.cpub-section-cta[data-variant='contrast'] .cpub-section-cta-body {
+  color: inherit;
+}
+
+/* minimal — no panel */
+.cpub-section-cta[data-variant='minimal'] {
+  background: transparent;
+  border: none;
+  padding: var(--space-3) 0;
+}
+
+/* align */
+.cpub-section-cta[data-align='center'] {
+  text-align: center;
+  align-items: center;
+}
+.cpub-section-cta[data-align='center'] .cpub-section-cta-actions {
+  justify-content: center;
+}
+
+.cpub-section-cta-heading {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text);
+  margin: 0;
+}
+.cpub-section-cta-body {
+  font-size: var(--text-base);
+  line-height: 1.7;
+  color: var(--text-soft);
+  margin: 0;
+  max-width: 60ch;
+}
+.cpub-section-cta-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+}
+
+/* buttons — three variants */
+.cpub-section-cta-btn {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: var(--space-2) var(--space-4);
+  border: var(--border-width-default) solid var(--accent);
+  text-decoration: none;
+  display: inline-block;
+}
+.cpub-section-cta-btn-primary {
+  background: var(--accent);
+  color: var(--surface);
+}
+.cpub-section-cta-btn-primary:hover {
+  background: var(--accent-strong, var(--accent));
+}
+.cpub-section-cta-btn-secondary {
+  background: transparent;
+  color: var(--accent);
+}
+.cpub-section-cta-btn-secondary:hover {
+  background: var(--accent-bg);
+}
+.cpub-section-cta-btn-ghost {
+  border-color: transparent;
+  background: transparent;
+  color: var(--text);
+}
+.cpub-section-cta-btn-ghost:hover {
+  color: var(--accent);
+}
+/* Contrast variant — invert button colours so they read on accent bg */
+.cpub-section-cta[data-variant='contrast'] .cpub-section-cta-btn-primary {
+  background: var(--surface);
+  color: var(--accent);
+  border-color: var(--surface);
+}
+.cpub-section-cta[data-variant='contrast'] .cpub-section-cta-btn-secondary {
+  border-color: var(--surface);
+  color: var(--surface);
+}
+.cpub-section-cta[data-variant='contrast'] .cpub-section-cta-btn-ghost {
+  color: var(--surface);
+}
+</style>

package/components/sections/SectionLearning.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+/**
+ * Built-in section: learning — grid of learning paths.
+ *
+ * Fetches `/api/learn?limit=N`, renders responsive card grid (title +
+ * description + difficulty + duration + enrollment). Feature-gated
+ * upstream on `features.learning`.
+ *
+ * Same shape as editorial / content-feed (paginated /api/* endpoint →
+ * responsive grid) but a distinct entity type with its own metadata.
+ *
+ * `var(--*)` only.
+ */
+import { computed } from 'vue';
+import type { SectionRenderProps } from '@commonpub/ui';
+
+// Loose shape — full LearningPathListItem lives in @commonpub/server
+// types but the section only touches a subset. Keeping local avoids a
+// transient type import that test stubs would need to satisfy.
+interface LearningPathItem {
+  id: string;
+  slug: string;
+  title: string;
+  description: string | null;
+  coverImageUrl: string | null;
+  difficulty: string | null;
+  estimatedHours: string | null;
+  enrollmentCount: number;
+  moduleCount: number;
+}
+
+interface LearningResponse {
+  items?: LearningPathItem[];
+}
+
+interface LearningConfig extends Record<string, unknown> {
+  heading: string;
+  limit: number;
+  columns: 1 | 2 | 3 | 4;
+}
+
+const props = defineProps<SectionRenderProps<LearningConfig>>();
+
+const apiQuery = computed(() => ({
+  limit: Math.min(Math.max(props.config.limit, 1), 12),
+}));
+
+const { data: paths, pending } = useFetch<LearningResponse>(
+  '/api/learn',
+  {
+    query: apiQuery,
+    key: `section-learning:${JSON.stringify(apiQuery.value)}`,
+  },
+);
+
+const items = computed(() => paths.value?.items ?? []);
+const isEmpty = computed(() => !pending.value && items.value.length === 0);
+</script>
+
+<template>
+  <section
+    class="cpub-section-learning"
+    :aria-labelledby="config.heading ? `section-learning-${meta.sectionId}` : undefined"
+  >
+    <h2
+      v-if="config.heading"
+      :id="`section-learning-${meta.sectionId}`"
+      class="cpub-section-learning-heading"
+    >
+      {{ config.heading }}
+    </h2>
+
+    <div v-if="pending" class="cpub-section-learning-loading">
+      <i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true" />
+      <span>Loading…</span>
+    </div>
+
+    <ul
+      v-else-if="!isEmpty"
+      class="cpub-section-learning-grid"
+      :data-columns="config.columns"
+    >
+      <li v-for="path in items" :key="path.id" class="cpub-section-learning-card">
+        <NuxtLink :to="`/learn/${path.slug}`" class="cpub-section-learning-link">
+          <!--
+            Using <img> rather than background-image: (a) Vue auto-escapes
+            attribute bindings so a path.coverImageUrl containing `");
+            evil(` can't escape the url(...) context (modern browsers
+            ignore JS in CSS URLs but still — defence in depth), and (b)
+            the cover IS semantically information when present, so giving
+            it an `alt` of the path title is better a11y than `role=
+            presentation`. Empty alt would also be fine here; the title
+            text directly follows.
+          -->
+          <img
+            v-if="path.coverImageUrl"
+            :src="path.coverImageUrl"
+            :alt="''"
+            loading="lazy"
+            class="cpub-section-learning-cover"
+          />
+          <div class="cpub-section-learning-body">
+            <h3 class="cpub-section-learning-title">{{ path.title }}</h3>
+            <p v-if="path.description" class="cpub-section-learning-desc">
+              {{ path.description }}
+            </p>
+            <div class="cpub-section-learning-meta">
+              <span v-if="path.difficulty" class="cpub-section-learning-chip">
+                {{ path.difficulty }}
+              </span>
+              <span v-if="path.estimatedHours" class="cpub-section-learning-chip">
+                <i class="fa-regular fa-clock" aria-hidden="true" />
+                {{ path.estimatedHours }}h
+              </span>
+              <span class="cpub-section-learning-chip">
+                {{ path.enrollmentCount }} enrolled
+              </span>
+            </div>
+          </div>
+        </NuxtLink>
+      </li>
+    </ul>
+
+    <p v-else class="cpub-section-learning-empty">No learning paths yet.</p>
+  </section>
+</template>
+
+<style scoped>
+.cpub-section-learning {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.cpub-section-learning-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-learning-grid {
+  display: grid;
+  gap: var(--space-3);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.cpub-section-learning-grid[data-columns='1'] { grid-template-columns: 1fr; }
+.cpub-section-learning-grid[data-columns='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.cpub-section-learning-grid[data-columns='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.cpub-section-learning-grid[data-columns='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+@media (max-width: 1024px) {
+  .cpub-section-learning-grid[data-columns='3'],
+  .cpub-section-learning-grid[data-columns='4'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 640px) {
+  .cpub-section-learning-grid { grid-template-columns: 1fr; }
+}
+
+.cpub-section-learning-card {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+}
+.cpub-section-learning-link {
+  display: flex;
+  flex-direction: column;
+  color: inherit;
+  text-decoration: none;
+}
+.cpub-section-learning-cover {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  background-color: var(--surface-2);
+}
+.cpub-section-learning-body {
+  padding: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.cpub-section-learning-title {
+  font-size: var(--text-base);
+  font-weight: 700;
+  color: var(--text);
+  margin: 0;
+}
+.cpub-section-learning-link:hover .cpub-section-learning-title { color: var(--accent); }
+.cpub-section-learning-desc {
+  font-size: var(--text-sm);
+  color: var(--text-soft);
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.cpub-section-learning-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+.cpub-section-learning-chip {
+  font-family: var(--font-mono);
+  font-size: var(--text-xxs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-faint);
+  padding: var(--space-1) var(--space-2);
+  border: var(--border-width-default) solid var(--border-soft);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+.cpub-section-learning-loading,
+.cpub-section-learning-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>