From 862436f8c9823bc7fe2addd962d14ad2b4553f09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <git@joshuakgoldberg.com>
Date: Mon, 23 Sep 2024 11:55:11 -0400
Subject: [PATCH] feat: added standalone `ad/sponsors` page (#125)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💖
---
 src/components/SponsorLogos.astro |  9 ++---
 src/data/sponsors.ts              |  7 ++++
 src/pages/ad/speakers.astro       |  6 +---
 src/pages/ad/sponsors.astro       | 55 +++++++++++++++++++++++++++++++
 4 files changed, 65 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/ad/sponsors.astro

diff --git a/src/components/SponsorLogos.astro b/src/components/SponsorLogos.astro
index 105dbae..8602666 100644
--- a/src/components/SponsorLogos.astro
+++ b/src/components/SponsorLogos.astro
@@ -2,12 +2,7 @@
 import _ from "lodash";
 import { Image } from "astro:assets";
 
-import { sponsorsBySlug } from "~/data/sponsors";
-
-const sponsorGroups = _.groupBy(
-	Object.values(sponsorsBySlug),
-	(sponsor) => sponsor.placement,
-);
+import { sponsorsByPlacement } from "~/data/sponsors";
 
 interface Props {
 	light?: boolean;
@@ -24,7 +19,7 @@ const { size = "normal", light } = Astro.props;
 	]}
 >
 	{
-		Object.values(sponsorGroups).map((sponsors) => (
+		Object.values(sponsorsByPlacement).map((sponsors) => (
 			<div class="sponsor-group">
 				{sponsors!.map((sponsor) => (
 					<a
diff --git a/src/data/sponsors.ts b/src/data/sponsors.ts
index 84bb093..86e6ee0 100644
--- a/src/data/sponsors.ts
+++ b/src/data/sponsors.ts
@@ -1,3 +1,5 @@
+import _ from "lodash";
+
 import bloombergBlack from "../assets/sponsors/bloomberg-black.svg";
 import bloombergWhite from "../assets/sponsors/bloomberg-white.svg";
 import datastaxBlack from "../assets/sponsors/datastax-black.svg";
@@ -78,3 +80,8 @@ export const sponsorsBySlug = {
 		title: "Prisma",
 	},
 };
+
+export const sponsorsByPlacement = _.groupBy(
+	Object.values(sponsorsBySlug),
+	(sponsor) => sponsor.placement,
+);
diff --git a/src/pages/ad/speakers.astro b/src/pages/ad/speakers.astro
index 26c8864..8d940eb 100644
--- a/src/pages/ad/speakers.astro
+++ b/src/pages/ad/speakers.astro
@@ -21,11 +21,7 @@ const excludedSpeakers = new Set([
 
 <AdLayout>
 	<AdContents>
-		<AdTitleAndSubtitle
-			title="SquiggleConf 2024"
-			subTitle="Speaker Lineup"
-			slot="top"
-		/>
+		<AdTitleAndSubtitle title="Speaker Lineup" slot="top" />
 		<ul class="speakers-ad-list" slot="body">
 			{
 				Object.values(peopleBySlug)
diff --git a/src/pages/ad/sponsors.astro b/src/pages/ad/sponsors.astro
new file mode 100644
index 0000000..1b3d1ba
--- /dev/null
+++ b/src/pages/ad/sponsors.astro
@@ -0,0 +1,55 @@
+---
+import "@fontsource-variable/josefin-sans";
+import "@fontsource/urbanist";
+import { Image } from "astro:assets";
+
+import AdContents from "~/components/AdContents.astro";
+import AdTitleAndSubtitle from "~/components/AdTitleAndSubtitle.astro";
+import { sponsorsByPlacement, sponsorsBySlug } from "~/data/sponsors";
+import AdLayout from "~/layouts/AdLayout.astro";
+
+import "~/layouts/base.css";
+import "~/layouts/normalize.css";
+---
+
+<AdLayout>
+	<AdContents>
+		<AdTitleAndSubtitle title="Sponsors" slot="top" />
+		<ul class="sponsors-ad" slot="body">
+			{
+				Object.values(sponsorsByPlacement).map((sponsors) => (
+					<div class="sponsors-ad-list">
+						{sponsors.map((sponsor) => (
+							<Image
+								alt=""
+								class="ad-sponsor"
+								src={sponsor.logos.dark}
+								height={sponsor.placement === "first" ? 96 : 72}
+							/>
+						))}
+					</div>
+				))
+			}
+		</ul>
+	</AdContents>
+</AdLayout>
+
+<style>
+	.sponsors-ad {
+		display: flex;
+		gap: 8rem;
+		flex-direction: column;
+	}
+	.sponsors-ad-list {
+		align-items: center;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6rem 16rem;
+		justify-content: center;
+		width: 50vw;
+	}
+
+	.ad-sponsor {
+		max-width: 20rem;
+	}
+</style>