@commonpub/layer 0.46.0 → 0.48.0

package/components/ContentCard.vue

@@ -303,6 +303,12 @@ function formatCount(n: number | undefined): string {
 .cpub-cc-av {
   width: 18px;
   height: 18px;
+  /* Hard-lock square so a portrait/non-square photo can't render as an oval
+     (intrinsic-ratio fallback if a dimension is dropped). See ArticleView.vue. */
+  min-width: 18px;
+  max-width: 18px;
+  min-height: 18px;
+  max-height: 18px;
   background: var(--accent-bg);
   border: var(--border-width-default) solid var(--accent-border);
   color: var(--accent);

package/components/views/ArticleView.vue

@@ -435,8 +435,18 @@ useJsonLd({
  * Fix: scope display:flex centering to the div variant only.
  */
 .cpub-av {
-  width: 28px;
-  height: 28px;
+  --cpub-av-size: 28px;
+  width: var(--cpub-av-size);
+  height: var(--cpub-av-size);
+  /* Hard-lock to a square. Without min/max clamps, a global img reset or a
+     dropped dimension lets the <img> fall back to its intrinsic aspect ratio,
+     so a portrait photo renders as a tall oval (the deveco blog-avatar bug —
+     visible even on wide viewports, so it's not flex compression). min/max on
+     BOTH axes clamp the used size regardless of what sets width/height. */
+  min-width: var(--cpub-av-size);
+  max-width: var(--cpub-av-size);
+  min-height: var(--cpub-av-size);
+  max-height: var(--cpub-av-size);
   border-radius: 50%;
   background: var(--surface3);
   border: var(--border-width-default) solid var(--border);
@@ -459,8 +469,8 @@ img.cpub-av {
   object-fit: cover;
 }
 
-.cpub-av-lg { width: 44px; height: 44px; font-size: 14px; }
-.cpub-av-xl { width: 64px; height: 64px; font-size: 18px; }
+.cpub-av-lg { --cpub-av-size: 44px; font-size: 14px; }
+.cpub-av-xl { --cpub-av-size: 64px; font-size: 18px; }
 
 /* ── AUTHOR ROW ── */
 .cpub-author-row {

package/components/views/ProjectView.vue

@@ -767,8 +767,16 @@ async function handleBuild(): Promise<void> {
  * to the div-variant only — stops img-variant from squishing portrait
  * avatars (object-fit:cover gets dropped on flex-set replaced elements). */
 .cpub-av {
-  width: 28px;
-  height: 28px;
+  --cpub-av-size: 28px;
+  width: var(--cpub-av-size);
+  height: var(--cpub-av-size);
+  /* Hard-lock to a square (min/max on both axes) so a portrait photo can't
+     render as an oval if a global reset or dropped dimension lets the <img>
+     take its intrinsic aspect ratio. See ArticleView.vue. */
+  min-width: var(--cpub-av-size);
+  max-width: var(--cpub-av-size);
+  min-height: var(--cpub-av-size);
+  max-height: var(--cpub-av-size);
   border-radius: 50%;
   background: var(--surface3);
   border: var(--border-width-default) solid var(--border);
@@ -789,7 +797,7 @@ img.cpub-av {
   object-fit: cover;
 }
 
-.cpub-av-lg { width: 36px; height: 36px; font-size: 12px; }
+.cpub-av-lg { --cpub-av-size: 36px; font-size: 12px; }
 
 .cpub-author-name {
   font-size: 13px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -54,12 +54,12 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
-    "@commonpub/docs": "0.6.3",
     "@commonpub/config": "0.18.0",
-    "@commonpub/editor": "0.7.11",
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/docs": "0.6.3",
     "@commonpub/explainer": "0.7.15",
+    "@commonpub/editor": "0.7.11",
     "@commonpub/protocol": "0.13.0",
-    "@commonpub/learning": "0.5.2",
     "@commonpub/schema": "0.26.0",
     "@commonpub/server": "2.73.0",
     "@commonpub/ui": "0.9.2"

package/pages/contests/index.vue

@@ -13,6 +13,20 @@ function cardBlurb(c: { subheading?: string | null; description?: string | null
 }
 
 const config = useRuntimeConfig();
+
+// Contest banner thumbnail — proxy cross-origin images through our server
+// (same pattern as ContentCard) for caching + faster loads.
+function coverFor(url: string | null | undefined): string | null {
+  if (!url) return null;
+  const siteDomain = (config.public?.domain as string) || '';
+  try {
+    if (siteDomain && !url.includes(siteDomain)) {
+      return `/api/image-proxy?url=${encodeURIComponent(url)}&w=600`;
+    }
+  } catch { /* invalid URL — use as-is */ }
+  return url;
+}
+
 const contestCreation = config.public.contestCreation as string || 'admin';
 const canCreateContest = computed(() => {
   if (!isAuthenticated.value) return false;
@@ -31,30 +45,45 @@ const canCreateContest = computed(() => {
       </NuxtLink>
     </div>
     <div v-if="contests?.items?.length" class="cpub-grid-3">
-      <div v-for="contest in contests.items" :key="contest.id" class="cpub-card">
-        <div class="cpub-card-body">
-          <span class="cpub-badge" :class="{
+      <NuxtLink
+        v-for="contest in contests.items"
+        :key="contest.id"
+        :to="`/contests/${contest.slug}`"
+        class="cpub-card cpub-contest-card"
+      >
+        <!-- Banner thumbnail (contest.bannerUrl) with trophy fallback + status badge overlay -->
+        <div class="cpub-contest-thumb">
+          <img
+            v-if="coverFor(contest.bannerUrl)"
+            :src="coverFor(contest.bannerUrl)!"
+            :alt="contest.title"
+            class="cpub-contest-cover"
+            loading="lazy"
+          />
+          <template v-else>
+            <div class="cpub-contest-thumb-grid" />
+            <i class="fa-solid fa-trophy cpub-contest-thumb-icon" />
+          </template>
+          <span class="cpub-badge cpub-contest-thumb-badge" :class="{
             'cpub-badge-green': contest.status === 'active',
             'cpub-badge-yellow': contest.status === 'upcoming',
             'cpub-badge-accent': contest.status === 'judging',
             'cpub-badge-red': contest.status === 'completed' || contest.status === 'cancelled',
           }">{{ contest.status }}</span>
-          <h3 style="font-size: 15px; font-weight: 600; margin: 8px 0">
-            <NuxtLink :to="`/contests/${contest.slug}`" style="color: var(--text); text-decoration: none">
-              {{ contest.title }}
-            </NuxtLink>
-          </h3>
-          <p v-if="cardBlurb(contest)" class="cpub-contest-card-blurb" style="font-size: 12px; color: var(--text-dim); margin-bottom: 12px">
+        </div>
+        <div class="cpub-card-body">
+          <h3 class="cpub-contest-card-title">{{ contest.title }}</h3>
+          <p v-if="cardBlurb(contest)" class="cpub-contest-card-blurb">
             {{ cardBlurb(contest) }}
           </p>
           <div v-if="contest.endDate" style="margin-top: 8px">
             <CountdownTimer :target-date="contest.endDate" />
           </div>
-          <div style="display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; color: var(--text-faint); font-family: var(--font-mono)">
+          <div class="cpub-contest-card-meta">
             <span><i class="fa-solid fa-users"></i> {{ contest.entryCount }} entries</span>
           </div>
         </div>
-      </div>
+      </NuxtLink>
     </div>
     <div v-else class="cpub-empty-state">
       <div class="cpub-empty-state-icon"><i class="fa-solid fa-trophy"></i></div>
@@ -71,7 +100,42 @@ const canCreateContest = computed(() => {
 .cpub-card:hover { box-shadow: var(--shadow-lg); transform: translate(-1px, -1px); }
 .cpub-card-body { padding: 16px; }
 
+/* Whole card is a link */
+.cpub-contest-card { display: block; text-decoration: none; color: inherit; }
+
+/* Banner thumbnail — wide (banner-shaped), cover-cropped, with a grid+trophy
+   fallback when a contest has no bannerUrl. */
+.cpub-contest-thumb {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  background: var(--surface2);
+  border-bottom: var(--border-width-default) solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.cpub-contest-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
+.cpub-contest-thumb-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(var(--border2) 1px, transparent 1px),
+    linear-gradient(90deg, var(--border2) 1px, transparent 1px);
+  background-size: 20px 20px;
+  opacity: 0.25;
+}
+.cpub-contest-thumb-icon { position: relative; z-index: 1; font-size: 36px; color: var(--accent); opacity: 0.45; }
+.cpub-contest-thumb-badge { position: absolute; top: 10px; left: 10px; z-index: 2; box-shadow: var(--shadow-sm); }
+.cpub-contest-card:hover .cpub-contest-cover { opacity: 0.92; }
+
+.cpub-contest-card-title { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--text); }
+.cpub-contest-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
+
 .cpub-contest-card-blurb {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-bottom: 12px;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   line-clamp: 3;