@commonpub/layer 0.34.0 → 0.36.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.34.0",
+  "version": "0.36.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -56,13 +56,13 @@
     "@commonpub/auth": "0.7.0",
     "@commonpub/config": "0.16.0",
     "@commonpub/editor": "0.7.11",
-    "@commonpub/protocol": "0.12.0",
-    "@commonpub/schema": "0.24.0",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/server": "2.66.0",
-    "@commonpub/ui": "0.9.1",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/explainer": "0.7.15"
+    "@commonpub/schema": "0.24.0",
+    "@commonpub/protocol": "0.12.0",
+    "@commonpub/server": "2.66.0",
+    "@commonpub/ui": "0.9.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -117,20 +117,33 @@ const submitDialogRef = ref<HTMLElement | null>(null);
 useFocusTrap(submitDialogRef, () => showSubmitDialog.value, () => { showSubmitDialog.value = false; });
 const submitContentId = ref('');
 const submitting = ref(false);
+// MY own published content only — was fetching everyone's public content (the
+// picker listed other people's projects, which submitContestEntry then rejects
+// since you can only enter your own). authorId === me ⇒ the endpoint scopes to mine.
 const { data: userContent } = useFetch('/api/content', {
-  query: { status: 'published', limit: 50 },
-  immediate: isAuthenticated.value,
+  query: computed(() => ({ status: 'published', authorId: user.value?.id, limit: 50 })),
+  immediate: !!user.value?.id,
+  watch: [() => user.value?.id],
 });
 const enteredContentIds = computed(() => new Set(entries.value.map((e) => e.contentId)));
 
 // 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);
@@ -186,22 +199,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">
@@ -334,14 +363,29 @@ 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 */

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 ---