feat: added standalone ad/sponsors page (#125)

💖

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

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,
+);

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)

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>