@commonpub/layer 0.30.0 → 0.32.0

package/components/contest/ContestHero.vue

@@ -84,6 +84,10 @@ const tagline = computed<string>(() => {
     </div>
 
     <div class="cpub-hero-inner">
+      <!-- Banner image: a clean band at the top of the hero. Title/tagline sit
+           BELOW it (never overlaid) so text stays legible regardless of image. -->
+      <img v-if="c?.bannerUrl" :src="c.bannerUrl" :alt="`${c?.title || 'Contest'} banner`" class="cpub-hero-banner" />
+
       <div v-if="c?.status === 'cancelled'" class="cpub-cancelled-banner">
         <i class="fa-solid fa-ban"></i> This contest has been cancelled.
       </div>
@@ -175,6 +179,7 @@ const tagline = computed<string>(() => {
 .cpub-hero-dots { position: absolute; inset: 0; background-image: radial-gradient(var(--accent-border) 1.5px, transparent 1.5px); background-size: 28px 28px; opacity: .3; }
 .cpub-hero-lines { position: absolute; inset: 0; background-image: linear-gradient(var(--accent-bg) 1px, transparent 1px), linear-gradient(90deg, var(--accent-bg) 1px, transparent 1px); background-size: 56px 56px; }
 .cpub-hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
+.cpub-hero-banner { display: block; width: 100%; max-height: 260px; object-fit: cover; margin-bottom: 28px; border: var(--border-width-default) solid var(--hero-border); border-radius: var(--radius); }
 .cpub-hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
 .cpub-contest-badge { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-mono); color: var(--accent); background: var(--accent-bg); border: var(--border-width-default) solid var(--accent); padding: 3px 10px; border-radius: var(--radius); display: inline-flex; align-items: center; gap: 5px; }
 .cpub-contest-badge i { font-size: 8px; }

package/components/contest/ContestPrizes.vue

@@ -2,6 +2,8 @@
 interface Prize { place?: number; category?: string; title?: string; description?: string; value?: string }
 defineProps<{
   prizes: Prize[];
+  /** Optional Markdown intro shown above the prize cards (section-level, not per-prize). */
+  description?: string | null;
 }>();
 
 function prizeLabel(prize: Prize): string {
@@ -35,7 +37,8 @@ function prizeIcon(prize: Prize): string {
     <div class="cpub-sec-head">
       <h2><i class="fa fa-trophy" style="color: var(--yellow);"></i> Prizes</h2>
     </div>
-    <div class="cpub-prize-grid">
+    <CpubMarkdown v-if="description" :source="description" class="cpub-prizes-intro" />
+    <div v-if="prizes.length" class="cpub-prize-grid">
       <div
         v-for="(prize, i) in prizes"
         :key="i"
@@ -58,6 +61,7 @@ function prizeIcon(prize: Prize): string {
 .cpub-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
 .cpub-sec-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
 
+.cpub-prizes-intro { margin-bottom: 16px; }
 .cpub-prize-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
 .cpub-prize-card { border-radius: var(--radius); padding: 20px; text-align: center; background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); }
 .cpub-prize-gold { box-shadow: var(--shadow-accent); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -57,12 +57,12 @@
     "@commonpub/docs": "0.6.3",
     "@commonpub/config": "0.16.0",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/explainer": "0.7.15",
     "@commonpub/editor": "0.7.11",
-    "@commonpub/schema": "0.23.0",
+    "@commonpub/explainer": "0.7.15",
+    "@commonpub/schema": "0.24.0",
+    "@commonpub/server": "2.66.0",
     "@commonpub/ui": "0.9.1",
-    "@commonpub/protocol": "0.12.0",
-    "@commonpub/server": "2.64.0"
+    "@commonpub/protocol": "0.12.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/contests/[slug]/edit.vue

@@ -41,6 +41,7 @@ function toggleRole(r: string): void {
   else visibleToRoles.value.push(r);
 }
 
+const prizesDescription = ref('');
 interface Prize { place: number | null; category: string; title: string; description: string; value: string }
 const prizes = ref<Prize[]>([]);
 
@@ -64,6 +65,7 @@ watch(contest, (c) => {
   maxEntriesPerUser.value = c.maxEntriesPerUser ?? null;
   visibility.value = (c.visibility as typeof visibility.value) ?? 'public';
   visibleToRoles.value = [...(c.visibleToRoles ?? [])];
+  prizesDescription.value = c.prizesDescription ?? '';
   prizes.value = (c.prizes ?? []).map((p: { place?: number; category?: string; title?: string; description?: string; value?: string }) => ({
     place: p.place ?? null,
     category: p.category ?? '',
@@ -151,6 +153,7 @@ async function handleSave(): Promise<void> {
         maxEntriesPerUser: maxEntriesPerUser.value && maxEntriesPerUser.value > 0 ? maxEntriesPerUser.value : undefined,
         visibility: visibility.value,
         visibleToRoles: visibility.value === 'private' ? visibleToRoles.value : [],
+        prizesDescription: prizesDescription.value || undefined,
         prizes: prizeData,
         judgingCriteria: criteriaData,
       },
@@ -272,6 +275,11 @@ async function transitionStatus(newStatus: string): Promise<void> {
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Prizes</h2>
         <p class="cpub-form-hint">Every field is optional. Use <strong>place</strong> for ranked prizes, a <strong>category</strong> for themed awards, or just a <strong>description</strong> — whatever fits. Cash value is optional.</p>
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">Prizes overview (optional)</label>
+          <textarea v-model="prizesDescription" class="cpub-form-textarea" rows="3" placeholder="Intro shown above the prize cards. Supports Markdown." />
+          <p class="cpub-form-hint">Markdown intro displayed on the Prizes tab, above the individual prizes.</p>
+        </div>
         <div v-for="(prize, i) in prizes" :key="i" class="cpub-prize-row">
           <div class="cpub-prize-header">
             <span class="cpub-prize-label">{{ prizeLabel(prize) }}</span>

package/pages/contests/[slug]/index.vue

@@ -51,7 +51,7 @@ interface Tab { key: string; label: string; icon: string; count?: number }
 const tabs = computed<Tab[]>(() => {
   const t: Tab[] = [{ key: 'overview', label: 'Overview', icon: 'fa-circle-info' }];
   if (c.value?.rules) t.push({ key: 'rules', label: 'Rules', icon: 'fa-file-lines' });
-  if (c.value?.prizes?.length) t.push({ key: 'prizes', label: 'Prizes', icon: 'fa-trophy' });
+  if (c.value?.prizes?.length || c.value?.prizesDescription) t.push({ key: 'prizes', label: 'Prizes', icon: 'fa-trophy' });
   t.push({ key: 'entries', label: 'Entries', icon: 'fa-box-open', count: c.value?.entryCount ?? entries.value.length });
   if (participants.value.length) t.push({ key: 'participants', label: 'Participants', icon: 'fa-users', count: participants.value.length });
   if (judges.value.length || isOwner.value) t.push({ key: 'judges', label: 'Judges', icon: 'fa-gavel', count: judges.value.length || undefined });
@@ -273,7 +273,7 @@ async function withdrawEntry(entryId: string): Promise<void> {
 
           <!-- PRIZES -->
           <div v-show="activeTab === 'prizes'" id="cpub-panel-prizes" role="tabpanel" aria-labelledby="cpub-tab-prizes" tabindex="0">
-            <ContestPrizes v-if="c?.prizes?.length" :prizes="c.prizes" />
+            <ContestPrizes v-if="c?.prizes?.length || c?.prizesDescription" :prizes="c?.prizes ?? []" :description="c?.prizesDescription" />
           </div>
 
           <!-- ENTRIES -->

package/pages/contests/create.vue

@@ -47,6 +47,7 @@ interface Prize {
   value: string;
 }
 
+const prizesDescription = ref('');
 const prizes = ref<Prize[]>([
   { place: 1, category: '', title: '1st Place', description: '', value: '' },
   { place: 2, category: '', title: '2nd Place', description: '', value: '' },
@@ -104,6 +105,7 @@ async function handleCreate(): Promise<void> {
         visibleToRoles: visibility.value === 'private' && visibleToRoles.value.length ? visibleToRoles.value : undefined,
         eligibleContentTypes: eligibleContentTypes.value.length ? eligibleContentTypes.value : undefined,
         maxEntriesPerUser: maxEntriesPerUser.value && maxEntriesPerUser.value > 0 ? maxEntriesPerUser.value : undefined,
+        prizesDescription: prizesDescription.value || undefined,
         prizes: prizes.value
           .filter(p => p.title.trim() || p.description.trim() || p.category.trim() || (typeof p.place === 'number' && p.place > 0))
           .map(p => ({
@@ -286,6 +288,11 @@ function prizeLabel(prize: Prize): string {
         </div>
 
         <p class="cpub-form-hint">Every field is optional. Use <strong>place</strong> for ranked prizes (1st/2nd/3rd), a <strong>category</strong> for themed awards (e.g. "Best in Show"), or just a <strong>description</strong>. Cash value is optional.</p>
+        <div class="cpub-form-field">
+          <label for="prizes-desc" class="cpub-form-label">Prizes overview (optional)</label>
+          <textarea id="prizes-desc" v-model="prizesDescription" class="cpub-form-textarea" rows="3" placeholder="Intro shown above the prize cards. Supports Markdown." />
+          <p class="cpub-form-hint">Markdown intro displayed on the Prizes tab, above the individual prizes.</p>
+        </div>
         <div v-for="(prize, idx) in prizes" :key="idx" class="cpub-prize-card">
           <div class="cpub-prize-header">
             <span class="cpub-prize-place">

package/pages/contests/index.vue

@@ -4,6 +4,25 @@ useSeoMeta({ title: `Contests — ${useSiteName()}` });
 const { data: contests } = await useFetch('/api/contests');
 const { isAuthenticated, isAdmin, user } = useAuth();
 
+// Card blurb: prefer the short subheading; otherwise a plain-text, markdown-
+// stripped excerpt of the (possibly long Markdown) description — so listing
+// cards never dump a raw `## ...` wall.
+function cardBlurb(c: { subheading?: string | null; description?: string | null }): string {
+  if (c.subheading?.trim()) return c.subheading.trim();
+  const d = (c.description ?? '').trim();
+  if (!d) return '';
+  return d
+    .replace(/```[\s\S]*?```/g, ' ')
+    .replace(/`([^`]*)`/g, '$1')
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, ' ')
+    .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+    .replace(/^#{1,6}\s+/gm, '')
+    .replace(/^\s*[-*+>]\s+/gm, '')
+    .replace(/(\*\*|__|~~|\*|_)/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
 const config = useRuntimeConfig();
 const contestCreation = config.public.contestCreation as string || 'admin';
 const canCreateContest = computed(() => {
@@ -36,8 +55,8 @@ const canCreateContest = computed(() => {
               {{ contest.title }}
             </NuxtLink>
           </h3>
-          <p v-if="contest.description" style="font-size: 12px; color: var(--text-dim); margin-bottom: 12px">
-            {{ contest.description }}
+          <p v-if="cardBlurb(contest)" class="cpub-contest-card-blurb" style="font-size: 12px; color: var(--text-dim); margin-bottom: 12px">
+            {{ cardBlurb(contest) }}
           </p>
           <div v-if="contest.endDate" style="margin-top: 8px">
             <CountdownTimer :target-date="contest.endDate" />
@@ -63,6 +82,15 @@ const canCreateContest = computed(() => {
 .cpub-card:hover { box-shadow: var(--shadow-lg); transform: translate(-1px, -1px); }
 .cpub-card-body { padding: 16px; }
 
+.cpub-contest-card-blurb {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.5;
+}
+
 @media (max-width: 768px) {
   .cpub-contests-page { padding: 16px; }
   .cpub-grid-3 { grid-template-columns: 1fr; gap: 14px; }