@@ -71,6 +95,7 @@ const descriptionPreview =
src={urlFor(project.mainImage).width(600).url()}
alt={project.title}
loading="lazy"
+ decoding="async"
/>
)}
@@ -117,6 +142,13 @@ const descriptionPreview =
overflow: hidden;
}
+ .project-card--winner {
+ border-color: var(--color-winner-glow);
+ box-shadow:
+ var(--shadow-glass),
+ 0 0 0 1px rgb(245 158 11 / 12%);
+ }
+
.image-wrapper img {
width: 100%;
aspect-ratio: 16/9;
@@ -124,7 +156,7 @@ const descriptionPreview =
}
.content {
- padding: 1.5rem;
+ padding: var(--space-md);
}
.title-link {
@@ -136,9 +168,9 @@ const descriptionPreview =
color: var(--color-primary);
}
- h2 {
+ .project-card h2 {
font-size: 1.5rem;
- margin-bottom: 0.75rem;
+ margin-bottom: var(--space-xs);
transition: color var(--duration-fast) ease;
}
@@ -146,7 +178,7 @@ const descriptionPreview =
color: var(--color-text-dim);
font-size: 0.95rem;
line-height: 1.6;
- margin-bottom: 1.5rem;
+ margin-bottom: var(--space-md);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
@@ -154,12 +186,12 @@ const descriptionPreview =
}
.tag-list {
- margin-bottom: 1.5rem;
+ margin-bottom: var(--space-md);
}
.links {
display: flex;
- gap: 1rem;
+ gap: var(--space-sm);
}
.links a {
@@ -190,7 +222,7 @@ const descriptionPreview =
}
.compact-info {
- padding: 1rem;
+ padding: var(--space-sm);
}
.compact-info h3 {
diff --git a/src/components/cms/ProjectCard.test.ts b/src/components/cms/ProjectCard.test.ts
index f1f79a1..b0b1fb4 100644
--- a/src/components/cms/ProjectCard.test.ts
+++ b/src/components/cms/ProjectCard.test.ts
@@ -82,6 +82,21 @@ describe("ProjectCard", () => {
});
});
+ it("renders challenge winner ribbon at top of full card", async () => {
+ const container = await AstroContainer.create();
+ const html = await container.renderToString(ProjectCard, {
+ props: {
+ project: { ...baseProject, awardingSponsor: "dte" as const },
+ },
+ });
+ const $ = cheerio.load(html);
+
+ expect($("article.project-card--winner").length).toBe(1);
+ expect($(".winner-ribbon").first().text()).toContain("DTE AI Challenge");
+ expect($("article .winner-ribbon").length).toBe(1);
+ expect($(".card-link").prev(".winner-ribbon").length).toBe(1);
+ });
+
it("renders compact variant as a single clickable card", async () => {
const container = await AstroContainer.create();
const html = await container.renderToString(ProjectCard, {
@@ -93,4 +108,37 @@ describe("ProjectCard", () => {
expect($("article.project-card").length).toBe(0);
expect($(".compact-info h3").text()).toBe("MittenHarvest AI");
});
+
+ it("renders winner ribbon in compact variant when awardingSponsor is set", async () => {
+ const container = await AstroContainer.create();
+ const html = await container.renderToString(ProjectCard, {
+ props: {
+ project: { ...baseProject, awardingSponsor: "dte" as const },
+ variant: "compact",
+ },
+ });
+ const $ = cheerio.load(html);
+
+ expect($(".winner-ribbon").length).toBe(1);
+ expect($(".winner-ribbon").text()).toContain("DTE AI Challenge");
+ });
+
+ it("renders main image with lazy loading in full card", async () => {
+ const container = await AstroContainer.create();
+ const html = await container.renderToString(ProjectCard, {
+ props: {
+ project: {
+ ...baseProject,
+ mainImage: {
+ _type: "image",
+ asset: { _ref: "image-abc-200x200-png" },
+ },
+ },
+ },
+ });
+ const $ = cheerio.load(html);
+
+ expect($("img").length).toBeGreaterThanOrEqual(1);
+ expect($("img").attr("loading")).toBe("lazy");
+ });
});
diff --git a/src/components/cms/WinnerCard.astro b/src/components/cms/WinnerCard.astro
new file mode 100644
index 0000000..acfa369
--- /dev/null
+++ b/src/components/cms/WinnerCard.astro
@@ -0,0 +1,362 @@
+---
+/**
+ * WinnerCard — individual challenge winner card for the winners grid.
+ *
+ * Extracted from `SponsorWinnersSection` (SRP) so the section component
+ * is a thin orchestrator and each card is independently testable.
+ *
+ * Supports three `logoStyle` modes:
+ * - `"project-hero"` (default) — project screenshot + small sponsor chip
+ * - `"banner"` — large centered sponsor logo block
+ * - `"inline"` — small sponsor mark inline with challenge label
+ */
+import { urlFor } from "../../lib/sanity";
+import {
+ isSponsorLogoLight,
+ type ChallengeSponsor,
+} from "../../lib/sanity/challengeSponsors";
+import type { HackathonProjectPreview } from "../../lib/sanity/schemas";
+import { publicAssetUrl } from "../../data/siteLogos";
+import MaybeLink from "../primitives/MaybeLink.astro";
+
+export type WinnerLogoStyle = "banner" | "inline" | "project-hero";
+
+interface Props {
+ sponsor: ChallengeSponsor;
+ project?: HackathonProjectPreview;
+ projectHref: string;
+ projectTitle: string;
+ teamName?: string;
+ logoStyle?: WinnerLogoStyle;
+ index: number;
+}
+
+const {
+ sponsor,
+ project,
+ projectHref,
+ projectTitle,
+ teamName,
+ logoStyle = "project-hero",
+ index,
+} = Astro.props;
+
+const base = import.meta.env.BASE_URL;
+const logoSrc = publicAssetUrl(base, sponsor.logoSrc);
+const isLight = isSponsorLogoLight(sponsor);
+const hasMedia = logoStyle === "project-hero" && !!project?.mainImage;
+---
+
+
+
+ 
+
+
+ )
+ }
+
+ {
+ logoStyle === "banner" && (
+ {sponsor.challengeLabel}
+{sponsor.challengeLabel}
+ ) + } + ++ {projectTitle} +
+ + {teamName &&{teamName}
} + + + View project + + ++ {label} winner +
+ + diff --git a/src/data/challengeWinnerFallbacks.ts b/src/data/challengeWinnerFallbacks.ts new file mode 100644 index 0000000..97acf28 --- /dev/null +++ b/src/data/challengeWinnerFallbacks.ts @@ -0,0 +1,28 @@ +import type { ChallengeSponsorKey } from "../lib/sanity/challengeSponsors"; + +/** + * Published winner slugs/titles until every project is tagged in Sanity. + * Remove entries as `awardingSponsor` is set on live documents. + */ +export const CHALLENGE_WINNER_FALLBACKS: Record< + ChallengeSponsorKey, + { projectSlug: string; projectTitle: string; teamName?: string } +> = { + dte: { + projectSlug: "poleproof", + projectTitle: "PoleProof: Predicting Wind Turbine Pole Integrity", + }, + startMidwest: { + projectSlug: "trestle", + projectTitle: "Trestle — Midwest Founder Resource Discover Engine", + }, + aiCollectiveDetroit: { + projectSlug: "verify-ai-agents", + projectTitle: "Verify AI Agents", + }, + compassDetroit: { + projectSlug: "shorewatch", + projectTitle: "ShoreWatch: A Detroit Waterway Monitoring System", + teamName: "Team Dunamis", + }, +}; diff --git a/src/lib/sanity/challengeSponsorSync.test.ts b/src/lib/sanity/challengeSponsorSync.test.ts new file mode 100644 index 0000000..396768f --- /dev/null +++ b/src/lib/sanity/challengeSponsorSync.test.ts @@ -0,0 +1,24 @@ +import { describe, expect, it } from "vitest"; +import { readFileSync } from "node:fs"; +import { resolve } from "node:path"; +import { CHALLENGE_SPONSOR_OPTIONS } from "./challengeSponsors"; + +describe("challenge sponsor sync: studio ↔ frontend", () => { + const studioSrc = readFileSync( + resolve("studio-hack-michigan-/schemaTypes/challengeSponsors.ts"), + "utf8", + ); + + it("every frontend sponsor value exists in the studio schema", () => { + for (const { value } of CHALLENGE_SPONSOR_OPTIONS) { + expect(studioSrc).toContain(`value: '${value}'`); + } + }); + + it("studio and frontend have the same number of sponsor entries", () => { + const studioValues = [...studioSrc.matchAll(/value:\s*'(\w+)'/g)].map( + (m) => m[1], + ); + expect(studioValues.length).toBe(CHALLENGE_SPONSOR_OPTIONS.length); + }); +}); diff --git a/src/lib/sanity/challengeSponsors.test.ts b/src/lib/sanity/challengeSponsors.test.ts new file mode 100644 index 0000000..b191642 --- /dev/null +++ b/src/lib/sanity/challengeSponsors.test.ts @@ -0,0 +1,95 @@ +import { describe, expect, it } from "vitest"; +import { + buildWinnerBySponsorMap, + CHALLENGE_SPONSOR_OPTIONS, + challengeSponsorByKey, + isSponsorLogoLight, + normalizeChallengeSponsorKey, +} from "./challengeSponsors"; +import type { HackathonProjectPreview } from "./schemas"; + +describe("challengeSponsors", () => { + it("maps legacy hackMichigan to Compass Detroit", () => { + expect(normalizeChallengeSponsorKey("hackMichigan")).toBe("compassDetroit"); + expect(challengeSponsorByKey("hackMichigan").title).toBe("Compass Detroit"); + expect(challengeSponsorByKey("hackMichigan").challengeLabel).toBe( + "Hack Michigan AI Challenge", + ); + }); + + it("buildWinnerBySponsorMap indexes projects by normalized sponsor key", () => { + const shorewatch = { + _id: "p1", + title: "ShoreWatch", + slug: { current: "shorewatch" }, + awardingSponsor: "hackMichigan", + } as HackathonProjectPreview; + + const map = buildWinnerBySponsorMap([shorewatch]); + expect(map.get("compassDetroit")).toEqual(shorewatch); + }); + + it("resolves compassDetroit as the Hack Michigan AI Challenge sponsor", () => { + expect(challengeSponsorByKey("compassDetroit").challengeLabel).toBe( + "Hack Michigan AI Challenge", + ); + }); + + it("normalizeChallengeSponsorKey returns undefined for undefined input", () => { + expect(normalizeChallengeSponsorKey(undefined)).toBeUndefined(); + }); + + it("normalizeChallengeSponsorKey returns undefined for unknown key", () => { + expect(normalizeChallengeSponsorKey("nonExistentSponsor")).toBeUndefined(); + }); + + it("normalizeChallengeSponsorKey returns valid key unchanged", () => { + expect(normalizeChallengeSponsorKey("dte")).toBe("dte"); + }); + + it("challengeSponsorByKey throws for unknown key", () => { + expect(() => challengeSponsorByKey("bogus" as never)).toThrow( + "Unknown challenge sponsor: bogus", + ); + }); + + it("buildWinnerBySponsorMap returns empty map for empty array", () => { + const map = buildWinnerBySponsorMap([]); + expect(map.size).toBe(0); + }); + + it("buildWinnerBySponsorMap with duplicate sponsor keys keeps last entry", () => { + const first = { + _id: "p1", + title: "First", + slug: { current: "first" }, + awardingSponsor: "dte", + } as HackathonProjectPreview; + + const second = { + _id: "p2", + title: "Second", + slug: { current: "second" }, + awardingSponsor: "dte", + } as HackathonProjectPreview; + + const map = buildWinnerBySponsorMap([first, second]); + expect(map.get("dte")).toEqual(second); + }); + + it("isSponsorLogoLight returns true for light surface, false for others", () => { + const light = CHALLENGE_SPONSOR_OPTIONS.find((s) => isSponsorLogoLight(s))!; + expect(isSponsorLogoLight(light)).toBe(true); + + const dark = CHALLENGE_SPONSOR_OPTIONS.find((s) => !isSponsorLogoLight(s))!; + expect(isSponsorLogoLight(dark)).toBe(false); + }); + + it.each(CHALLENGE_SPONSOR_OPTIONS)( + "challengeSponsorByKey resolves $value", + (option) => { + const result = challengeSponsorByKey(option.value); + expect(result).toBe(option); + }, + ); +}); diff --git a/src/lib/sanity/challengeSponsors.ts b/src/lib/sanity/challengeSponsors.ts new file mode 100644 index 0000000..15918a3 --- /dev/null +++ b/src/lib/sanity/challengeSponsors.ts @@ -0,0 +1,108 @@ +/** + * Sponsor AI challenge tracks — one winning project per sponsor. + * Keep in sync with `studio-hack-michigan-/schemaTypes/challengeSponsors.ts`. + */ + +/** Shape of a single challenge sponsor entry. */ +export interface ChallengeSponsor { + readonly value: string; + readonly title: string; + readonly challengeLabel: string; + readonly logoSrc: string; + readonly logoHref: string; + /** Surface the logo sits on — affects chip/wrap background. Defaults to `"dark"`. */ + readonly logoSurface?: "light" | "dark"; +} + +export const CHALLENGE_SPONSOR_OPTIONS = [ + { + value: "dte", + title: "DTE Energy", + challengeLabel: "DTE AI Challenge", + logoSrc: "/images/sponsors/gold-dte-300x.webp", + logoHref: "https://www.dteenergy.com", + }, + { + value: "startMidwest", + title: "StartMidwest", + challengeLabel: "StartMidwest AI Challenge", + logoSrc: "/images/sponsors/media-startMidwest.webp", + logoHref: "https://www.start-midwest.com/", + }, + { + value: "aiCollectiveDetroit", + title: "The AI Collective Detroit", + challengeLabel: "The AI Collective Detroit Challenge", + logoSrc: "/images/sponsors/com_AI_Collective_Detroit.png", + logoHref: "https://www.aicollective.com/chapters/detroit", + logoSurface: "light", + }, + { + value: "compassDetroit", + title: "Compass Detroit", + challengeLabel: "Hack Michigan AI Challenge", + logoSrc: "/images/site/compass-logo.svg", + logoHref: "https://compassdetroit.com", + }, +] as const satisfies readonly ChallengeSponsor[]; + +export type ChallengeSponsorKey = + (typeof CHALLENGE_SPONSOR_OPTIONS)[number]["value"]; + +/** Pre-built index for O(1) sponsor lookup by key. */ +const SPONSOR_BY_KEY = new Map< + string, + (typeof CHALLENGE_SPONSOR_OPTIONS)[number] +>(CHALLENGE_SPONSOR_OPTIONS.map((s) => [s.value, s])); + +/** @deprecated Studio value before Compass was named explicitly — maps to `compassDetroit`. */ +export const CHALLENGE_SPONSOR_LEGACY_KEYS = { + hackMichigan: "compassDetroit", +} as const satisfies Record
-
-
- Sponsor an AI challenge
-- Put a real business problem in front of builders. -
-- Hack Michigan sponsors can design an AI challenge around a workforce, - operations, civic, or customer problem they need solved. Teams spend - the hackathon building toward that use case, giving sponsors a direct - path from support to working prototypes, fresh talent, and clearer - next steps. -
-
-
- What sponsorship can look like
--
-
- Bring a practical AI use case from your organization. -
- Help shape judging criteria and success outcomes. -
- Meet teams solving problems tied to your work. -
- Support workforce development with measurable builder output. -
{
@@ -81,117 +58,34 @@ try {
.page-header {
text-align: center;
- margin-bottom: 4rem;
+ margin-bottom: var(--space-2xl);
}
.page-title {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 8vw, 4rem);
font-weight: 700;
- margin-bottom: 0.75rem;
+ margin-bottom: var(--space-xs);
color: var(--color-text);
}
.page-subtitle {
- font-size: 1.1rem;
+ font-size: var(--font-size-body);
color: var(--color-text-dim);
max-width: 600px;
margin: 0 auto;
}
- .sponsor-challenge {
- display: grid;
- grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
- gap: var(--space-lg);
- align-items: stretch;
- margin-bottom: var(--space-2xl);
- padding: clamp(1.5rem, 4vw, 2.5rem);
- border: 1px solid var(--color-border);
- border-radius: var(--radius-xl);
- background:
- radial-gradient(
- circle at 15% 20%,
- rgb(139 92 246 / 24%),
- transparent 35%
- ),
- var(--surface-glass-raised-bg);
- box-shadow: var(--shadow-glass);
- }
-
- .sponsor-copy {
- align-self: center;
- }
-
- .section-eyebrow {
- margin: 0 0 var(--space-xs);
- color: var(--color-accent-orange);
- font-size: 0.82rem;
- font-weight: 800;
- letter-spacing: 0.14em;
- text-transform: uppercase;
- }
-
- .sponsor-copy h2,
- .sponsor-panel h3 {
- color: var(--color-text);
- line-height: 1.1;
- }
-
- .sponsor-copy h2 {
- max-width: 12ch;
- margin-bottom: var(--space-sm);
- font-size: clamp(2rem, 6vw, 3.5rem);
- }
-
- .sponsor-copy p {
- max-width: 690px;
- color: var(--color-text-dim);
- font-size: 1.08rem;
- line-height: 1.7;
- }
-
- .sponsor-panel {
- display: flex;
- flex-direction: column;
- gap: var(--space-sm);
- padding: var(--space-md);
- border: 1px solid rgb(130 177 254 / 30%);
- border-radius: var(--radius-lg);
- background: rgb(2 6 23 / 48%);
- }
-
- .sponsor-panel h3 {
- font-size: 1.35rem;
- }
-
- .sponsor-panel ul {
- display: grid;
- gap: var(--space-xs);
- margin: 0;
- padding-left: 1.1rem;
- color: var(--color-text-dim);
- line-height: 1.55;
- }
-
- .sponsor-panel li::marker {
- color: var(--color-accent-orange);
- }
-
- .sponsor-panel :global(.btn) {
- align-self: flex-start;
- margin-top: auto;
- }
-
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
- gap: 2rem;
+ gap: var(--space-lg);
}
.empty-state {
grid-column: 1 / -1;
text-align: center;
- padding: 3rem 1rem;
+ padding: var(--space-xl) var(--space-sm);
color: var(--color-text-dim);
font-size: 1.05rem;
border: 1px dashed var(--color-border);
@@ -200,19 +94,6 @@ try {
}
@media (max-width: 48rem) {
- .sponsor-challenge {
- grid-template-columns: 1fr;
- margin-bottom: var(--space-xl);
- }
-
- .sponsor-copy h2 {
- max-width: 100%;
- }
-
- .sponsor-panel :global(.btn) {
- align-self: stretch;
- }
-
.project-grid {
grid-template-columns: 1fr;
}
diff --git a/src/pages/projects/project/[slug].astro b/src/pages/projects/project/[slug].astro
index bde43e1..c81fdf6 100644
--- a/src/pages/projects/project/[slug].astro
+++ b/src/pages/projects/project/[slug].astro
@@ -1,5 +1,6 @@
---
import {
+ challengeSponsorByKey,
getProject,
getProjectSlugs,
urlFor,
@@ -16,18 +17,21 @@ export async function getStaticPaths() {
return slugs.map((slug) => ({ params: { slug } }));
}
+const base = import.meta.env.BASE_URL;
const slug = Astro.params.slug;
-if (!slug) return Astro.redirect("/404");
+if (!slug) return Astro.redirect(withBase(base, "/404"));
const project: HackathonProject | null = await getProject(slug);
-if (!project) return Astro.redirect("/404");
-const base = import.meta.env.BASE_URL;
+if (!project) return Astro.redirect(withBase(base, "/404"));
const descriptionBlocks = project.description ?? [];
const hasDescription = descriptionBlocks.length > 0;
const metaDescription =
truncatePlainText(portableTextToPlainText(descriptionBlocks), 160) ||
project.title;
+const challengeLabel = project.awardingSponsor
+ ? challengeSponsorByKey(project.awardingSponsor).challengeLabel
+ : undefined;
---
)
}
+ {
+ challengeLabel && (
+ • {challengeLabel} winner
+ )
+ }
{project.track && • {project.track}}