@commonpub/layer 0.33.0 → 0.35.0

package/components/homepage/HeroSection.vue

@@ -62,6 +62,14 @@ const heroCtas = computed<HeroCta[]>(() => {
   ];
 });
 
+// Optional hero logo/image (config-driven, per-site). When set, renders in a
+// side column next to the hero copy — e.g. deveco's hexagon logo — without
+// affecting sites that don't configure one. Additive: no logo unless set.
+const heroLogo = computed(() => {
+  const cfg = props.config as { logoImageUrl?: string; logoAlt?: string };
+  return cfg.logoImageUrl?.trim() ? { src: cfg.logoImageUrl.trim(), alt: cfg.logoAlt?.trim() || '' } : null;
+});
+
 // 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
@@ -124,6 +132,9 @@ function dismissHero(): void {
           </div>
         </template>
       </div>
+      <div v-if="heroLogo" class="cpub-hero-visual">
+        <img :src="heroLogo.src" :alt="heroLogo.alt" class="cpub-hero-logo-img" />
+      </div>
     </div>
   </section>
 </template>
@@ -145,7 +156,12 @@ function dismissHero(): void {
 .cpub-hero-title span { color: var(--accent); }
 .cpub-hero-excerpt { font-size: 13px; color: var(--text-dim); line-height: 1.65; margin-bottom: 20px; max-width: 560px; }
 .cpub-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.cpub-hero-visual { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+.cpub-hero-logo-img { max-height: 240px; max-width: 320px; width: 100%; object-fit: contain; }
 
+@media (max-width: 900px) {
+  .cpub-hero-visual { display: none; }
+}
 @media (max-width: 640px) {
   .cpub-hero-inner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px 16px; }
   .cpub-hero-title { font-size: 19px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -54,15 +54,15 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.7.0",
-    "@commonpub/config": "0.16.0",
-    "@commonpub/editor": "0.7.11",
-    "@commonpub/learning": "0.5.2",
     "@commonpub/docs": "0.6.3",
+    "@commonpub/editor": "0.7.11",
+    "@commonpub/config": "0.16.0",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/protocol": "0.12.0",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/schema": "0.24.0",
-    "@commonpub/ui": "0.9.1",
     "@commonpub/server": "2.66.0",
-    "@commonpub/explainer": "0.7.15"
+    "@commonpub/ui": "0.9.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/[type]/index.vue

@@ -56,8 +56,13 @@ const { data, pending } = await useFetch<PaginatedResponse<Serialized<ContentLis
 </template>
 
 <style scoped>
+/* Centered, padded content container (was left-aligned with no padding — content
+   hugged the left edge + cards stretched on wide screens). ~1200px reads like
+   deveco's gold-standard listing width. */
 .cpub-listing {
-  max-width: var(--content-max-width);
+  max-width: 1200px;
+  margin-inline: auto;
+  padding: 0 var(--space-6, 24px);
 }
 
 .cpub-listing-header {

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

@@ -4,6 +4,7 @@ import type { Serialized, ContestEntryItem, ContestJudgeItem } from '@commonpub/
 const route = useRoute();
 const slug = route.params.slug as string;
 const toast = useToast();
+const { extract: extractError } = useApiError();
 const { isAuthenticated, isAdmin, user } = useAuth();
 
 const { data: contest } = useLazyFetch(`/api/contests/${slug}`);
@@ -125,11 +126,20 @@ const enteredContentIds = computed(() => new Set(entries.value.map((e) => e.cont
 // Restrict the submit picker to the contest's eligible content types (if set).
 const eligibleTypes = computed<string[]>(() => (c.value?.eligibleContentTypes as string[] | undefined) ?? []);
 const submittableContent = computed(() => {
-  const items = (userContent.value?.items ?? []) as Array<{ id: string; title: string; type: string }>;
+  const items = (userContent.value?.items ?? []) as Array<{ id: string; title: string; type: string; coverImageUrl?: string | null }>;
   if (eligibleTypes.value.length === 0) return items;
   return items.filter((i) => eligibleTypes.value.includes(i.type));
 });
 
+// "Create a new project for this contest" — lands in the editor with the contest
+// association in the URL; on publish it auto-enters (server pending-entry hook).
+const newProjectType = computed(() => (eligibleTypes.value[0] ?? 'project'));
+const createForContestLink = computed(() =>
+  user.value?.username
+    ? `/u/${user.value.username}/${newProjectType.value}/new/edit?contest=${slug}`
+    : `/auth/login?redirect=/contests/${slug}`,
+);
+
 function copyLink(): void {
   if (typeof window !== 'undefined' && window.navigator?.clipboard) {
     window.navigator.clipboard.writeText(window.location.href);
@@ -146,8 +156,8 @@ async function submitEntry(): Promise<void> {
     submitContentId.value = '';
     toast.success('Entry submitted!');
     refreshNuxtData();
-  } catch {
-    toast.error('Failed to submit entry');
+  } catch (err: unknown) {
+    toast.error(extractError(err));
   } finally {
     submitting.value = false;
   }
@@ -185,22 +195,38 @@ async function withdrawEntry(entryId: string): Promise<void> {
         </div>
         <div class="cpub-submit-body">
           <p class="cpub-submit-hint">
-            Select one of your published projects to submit as an entry.
+            Pick one of your published projects to enter — or start a new one.
             <template v-if="eligibleTypes.length"> This contest accepts: {{ eligibleTypes.join(', ') }}.</template>
           </p>
-          <select v-model="submitContentId" class="cpub-submit-select" aria-label="Select a project to submit">
-            <option value="">Select a project...</option>
-            <option
+          <div class="cpub-submit-gallery" role="radiogroup" aria-label="Select a project to submit">
+            <NuxtLink :to="createForContestLink" class="cpub-submit-new" @click="showSubmitDialog = false">
+              <div class="cpub-submit-new-icon"><i class="fa-solid fa-plus"></i></div>
+              <span>Create a new {{ newProjectType }}</span>
+              <small>Enters automatically when you publish it</small>
+            </NuxtLink>
+            <button
               v-for="item in submittableContent"
               :key="item.id"
-              :value="item.id"
+              type="button"
+              role="radio"
+              :aria-checked="submitContentId === item.id"
+              class="cpub-submit-tile"
+              :class="{ selected: submitContentId === item.id, entered: enteredContentIds.has(item.id) }"
               :disabled="enteredContentIds.has(item.id)"
+              @click="submitContentId = item.id"
             >
-              {{ item.title }} ({{ item.type }}){{ enteredContentIds.has(item.id) ? ' — already entered' : '' }}
-            </option>
-          </select>
+              <span class="cpub-submit-tile-thumb">
+                <img v-if="item.coverImageUrl" :src="item.coverImageUrl" :alt="item.title" />
+                <i v-else class="fa-solid fa-cube"></i>
+                <span v-if="enteredContentIds.has(item.id)" class="cpub-submit-tile-badge">Entered</span>
+                <span v-else-if="submitContentId === item.id" class="cpub-submit-tile-check"><i class="fa-solid fa-check"></i></span>
+              </span>
+              <span class="cpub-submit-tile-title">{{ item.title }}</span>
+              <span class="cpub-submit-tile-type">{{ item.type }}</span>
+            </button>
+          </div>
           <p v-if="submittableContent.length === 0" class="cpub-submit-hint" style="margin-top: 10px; margin-bottom: 0;">
-            No eligible published content found.
+            No eligible published content yet — use “Create a new {{ newProjectType }}” above to start one.
           </p>
         </div>
         <div class="cpub-submit-footer">
@@ -278,6 +304,18 @@ async function withdrawEntry(entryId: string): Promise<void> {
 
           <!-- ENTRIES -->
           <div v-show="activeTab === 'entries'" id="cpub-panel-entries" role="tabpanel" aria-labelledby="cpub-tab-entries" tabindex="0">
+            <div v-if="c?.status === 'active'" class="cpub-entries-cta">
+              <div class="cpub-entries-cta-text">
+                <p class="cpub-entries-cta-title"><i class="fa-solid fa-trophy"></i> Enter this contest</p>
+                <p class="cpub-entries-cta-sub">Submit one of your published projects — or start a new one.</p>
+              </div>
+              <button v-if="isAuthenticated" class="cpub-btn cpub-btn-primary cpub-btn-lg" @click="showSubmitDialog = true">
+                <i class="fa-solid fa-upload"></i> Submit Entry
+              </button>
+              <NuxtLink v-else :to="`/auth/login?redirect=/contests/${slug}`" class="cpub-btn cpub-btn-primary cpub-btn-lg">
+                <i class="fa-solid fa-right-to-bracket"></i> Log in to enter
+              </NuxtLink>
+            </div>
             <ContestEntries
               :entries="entries"
               :contest-status="c?.status"
@@ -321,18 +359,38 @@ async function withdrawEntry(entryId: string): Promise<void> {
 <style scoped>
 /* SUBMIT DIALOG */
 .cpub-submit-overlay { position: fixed; inset: 0; z-index: 200; background: var(--color-surface-overlay-light); display: flex; align-items: center; justify-content: center; }
-.cpub-submit-dialog { background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-xl); width: 420px; max-width: 90vw; }
+.cpub-submit-dialog { background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-xl); width: 560px; max-width: 92vw; }
 .cpub-submit-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: var(--border-width-default) solid var(--border); }
 .cpub-submit-header h2 { font-size: 14px; font-weight: 700; }
 .cpub-submit-close { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 14px; }
 .cpub-submit-body { padding: 16px; }
 .cpub-submit-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
-.cpub-submit-select { width: 100%; padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; }
-.cpub-submit-select:focus { border-color: var(--accent); outline: none; }
+/* Gallery picker (replaces the old <select>): scrollable grid of content tiles. */
+.cpub-submit-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 50vh; overflow-y: auto; padding: 2px; }
+.cpub-submit-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; min-height: 150px; border: var(--border-width-default) dashed var(--accent-border); background: var(--accent-bg); color: var(--accent); text-decoration: none; padding: 10px; }
+.cpub-submit-new:hover { border-color: var(--accent); }
+.cpub-submit-new-icon { font-size: 20px; }
+.cpub-submit-new span { font-size: 12px; font-weight: 600; }
+.cpub-submit-new small { font-size: 10px; color: var(--text-dim); line-height: 1.3; }
+.cpub-submit-tile { display: flex; flex-direction: column; text-align: left; padding: 0; border: var(--border-width-default) solid var(--border); background: var(--surface); cursor: pointer; overflow: hidden; }
+.cpub-submit-tile:hover:not(:disabled) { border-color: var(--accent); }
+.cpub-submit-tile.selected { border-color: var(--accent); box-shadow: var(--shadow-accent); }
+.cpub-submit-tile.entered { opacity: 0.5; cursor: not-allowed; }
+.cpub-submit-tile-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--surface2); display: flex; align-items: center; justify-content: center; color: var(--text-faint); overflow: hidden; }
+.cpub-submit-tile-thumb img { width: 100%; height: 100%; object-fit: cover; }
+.cpub-submit-tile-badge { position: absolute; top: 4px; right: 4px; font-size: 9px; font-family: var(--font-mono); text-transform: uppercase; background: var(--surface); border: var(--border-width-default) solid var(--border); padding: 1px 5px; color: var(--text-dim); }
+.cpub-submit-tile-check { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--color-text-inverse); font-size: 10px; }
+.cpub-submit-tile-title { font-size: 12px; font-weight: 600; padding: 6px 8px 2px; line-height: 1.3; }
+.cpub-submit-tile-type { font-size: 9px; font-family: var(--font-mono); text-transform: uppercase; color: var(--text-faint); padding: 0 8px 8px; }
 .cpub-submit-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: var(--border-width-default) solid var(--border); }
 
 /* LAYOUT */
 .cpub-contest-main { max-width: 1100px; margin: 0 auto; padding: 32px; }
+
+.cpub-entries-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 18px; background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); }
+.cpub-entries-cta-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
+.cpub-entries-cta-title i { color: var(--accent); }
+.cpub-entries-cta-sub { font-size: 12px; color: var(--text-dim); margin: 2px 0 0; }
 .cpub-contest-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
 .cpub-contest-body { min-width: 0; }
 

package/pages/u/[username]/[type]/[slug]/edit.vue

@@ -35,6 +35,11 @@ useSeoMeta({
 
 const title = ref('');
 const hubFromQuery = (route.query.hub as string) || '';
+// Captured at setup because handleStarterSubmit's history.replaceState drops the
+// query. If set (?contest=slug from a contest's "create new project" button),
+// the project auto-enters that contest on publish.
+const contestFromQuery = (route.query.contest as string) || '';
+const submitToast = useToast();
 const metadata = ref<Record<string, unknown>>({
   description: '',
   slug: '',
@@ -278,6 +283,15 @@ async function handleStarterSubmit(): Promise<void> {
 // --- Publish with validation ---
 async function handlePublish(): Promise<void> {
   await doPublish(validate);
+  // Auto-enter into the contest this project was created for (if any). The
+  // submit endpoint re-validates published status, so a premature call (publish
+  // blocked by validation) just fails harmlessly and is swallowed.
+  if (contestFromQuery && contentId.value && !isNew.value) {
+    try {
+      await $fetch(`/api/contests/${contestFromQuery}/entries`, { method: 'POST', body: { contentId: contentId.value } });
+      submitToast.success('Entered into the contest!');
+    } catch { /* non-blocking — user can submit manually from the contest page */ }
+  }
 }
 
 // --- Preview mode ---

package/server/api/contests/[slug]/entries.post.ts

@@ -1,5 +1,7 @@
 import { submitContestEntry, getContestBySlug, canViewContest } from '@commonpub/server';
 import type { ContestEntryItem } from '@commonpub/server';
+import { contentItems } from '@commonpub/schema';
+import { eq } from 'drizzle-orm';
 import { z } from 'zod';
 
 const submitEntrySchema = z.object({
@@ -19,9 +21,34 @@ export default defineEventHandler(async (event): Promise<ContestEntryItem> => {
   }
   const input = await parseBody(event, submitEntrySchema);
 
+  // Produce a SPECIFIC reason on failure (the old single catch-all 400 hid why
+  // submission failed — most commonly the contest isn't active yet).
+  if (contest.status !== 'active') {
+    const detail = contest.status === 'upcoming'
+      ? 'Entries open once the contest is active.'
+      : contest.status === 'judging'
+        ? 'Submissions are closed — the contest is being judged.'
+        : `The contest is ${contest.status}.`;
+    throw createError({ statusCode: 400, statusMessage: `This contest isn't accepting entries right now. ${detail}` });
+  }
+  const [content] = await db
+    .select({ authorId: contentItems.authorId, status: contentItems.status, type: contentItems.type })
+    .from(contentItems)
+    .where(eq(contentItems.id, input.contentId))
+    .limit(1);
+  if (!content) throw createError({ statusCode: 400, statusMessage: 'That content no longer exists.' });
+  if (content.authorId !== user.id) throw createError({ statusCode: 403, statusMessage: 'You can only submit your own content.' });
+  if (content.status !== 'published') throw createError({ statusCode: 400, statusMessage: 'That project isn’t published yet — publish it first, then submit.' });
+  const eligible = contest.eligibleContentTypes ?? null;
+  if (eligible && eligible.length > 0 && !eligible.includes(content.type)) {
+    throw createError({ statusCode: 400, statusMessage: `This contest only accepts: ${eligible.join(', ')}.` });
+  }
+
+  // submitContestEntry re-validates (defense in depth) + enforces the per-user
+  // cap + dedupes; a null here means already-entered or over the entry limit.
   const entry = await submitContestEntry(db, contest.id, input.contentId, user.id);
   if (!entry) {
-    throw createError({ statusCode: 400, statusMessage: 'Cannot submit entry. Contest may not be active, or content is not published or not owned by you.' });
+    throw createError({ statusCode: 400, statusMessage: 'Couldn’t submit — you may have already entered this project, or reached the contest’s entry limit.' });
   }
   return entry;
 });