feat: Bloomberg sponsor, with adaptable [slug]

SquiggleTools · Aug 15, 2024 · 0a784ce · 0a784ce
1 parent 08cadb1
commit 0a784ce
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 51 deletions.
diff --git a/src/assets/sponsors/bloomberg-black.svg b/src/assets/sponsors/bloomberg-black.svg
diff --git a/src/assets/sponsors/bloomberg-white.svg b/src/assets/sponsors/bloomberg-white.svg
diff --git a/src/components/Sponsors.astro b/src/components/Sponsors.astro
@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets";
 
-import { sponsors } from "~/data/index";
+import { sponsorsBySlug } from "~/data/index";
 
 import BodyText from "./BodyText.astro";
 import FullSection from "./FullSection.astro";
@@ -10,14 +10,14 @@ import HeadingFlanked from "./HeadingFlanked.astro";
 
 <FullSection>
 	<HeadingFlanked id="sponsors">Sponsors</HeadingFlanked>
-	<BodyText size="large" width="lean">
+	<BodyText class="sponsors-blurb" size="large" width="lean">
 		The support of our generous sponsors help make SquiggleConf possible. They
 		have our sincere appreciation and thanks.
 	</BodyText>
 
 	<div class="sponsors">
 		{
-			sponsors.map((sponsor) => (
+			Object.values(sponsorsBySlug).map((sponsor) => (
 				<a href={sponsor.href} rel="noreferrer" target="_blank">
 					<Image
 						alt=""
@@ -38,6 +38,10 @@ import HeadingFlanked from "./HeadingFlanked.astro";
 </FullSection>
 
 <style>
+	.sponsors-blurb {
+		margin: auto;
+	}
+
 	.sponsors {
 		align-items: center;
 		display: flex;

diff --git a/src/data/index.ts b/src/data/index.ts
@@ -8,6 +8,8 @@ import twitter from "../assets/logos/twitter.svg";
 import jsParty from "../assets/partners/js-party.png";
 import thisWeekInReactDarkMode from "../assets/partners/this-week-in-react-dark-mode.png";
 import thisWeekInReactLightMode from "../assets/partners/this-week-in-react-light-mode.png";
+import bloombergBlack from "../assets/sponsors/bloomberg-black.svg";
+import bloombergWhite from "../assets/sponsors/bloomberg-white.svg";
 import inngest from "../assets/sponsors/inngest.svg";
 import inngestBlack from "../assets/sponsors/inngest-black.svg";
 import openjsFoundationColor from "../assets/sponsors/openjs-foundation-color.svg";
@@ -41,24 +43,32 @@ export const links = {
 	volunteer: "https://volunteer.squiggleconf.com",
 };
 
-export const sponsors = [
-	{
+export const sponsorsBySlug = {
+	bloomberg: {
+		href: "https://bloomberg.com?utm_source=squiggleconf",
+		logos: {
+			dark: bloombergWhite,
+			light: bloombergBlack,
+		},
+		title: "Bloomberg",
+	},
+	inngest: {
 		href: "https://inngest.com?utm_source=squiggleconf",
 		logos: {
 			dark: inngest,
 			light: inngestBlack,
 		},
 		title: "Inngest",
 	},
-	{
+	"openjs-foundation": {
 		href: "https://openjsf.org?utm_source=squiggleconf",
 		logos: {
 			dark: openjsFoundationLight,
 			light: openjsFoundationColor,
 		},
 		title: "OpenJS Foundation",
 	},
-];
+};
 
 export const locations = [
 	{

diff --git a/src/pages/ad/openjs-foundation.astro b/src/pages/ad/openjs-foundation.astro
diff --git a/src/pages/ad/speaker/[slug].astro b/src/pages/ad/speaker/[slug].astro
@@ -35,10 +35,10 @@ const talks = Object.values(talksBySlug).filter((talk) =>
 					{talks.map((talk) => <p class="talk-title">{talk.title}</p>)}
 					<div class="speaker-details">
 						<div>
-							<SafeMarkdown of={speaker.qualification} />
+							<SafeMarkdown of={speaker.qualification!} />
 						</div>
 						<div>
-							<SafeMarkdown of={speaker.role} />
+							<SafeMarkdown of={speaker.role!} />
 						</div>
 					</div>
 				</div>

diff --git a/src/pages/ad/inngest.astro → src/pages/ad/sponsor/[slug].astro b/src/pages/ad/inngest.astro → src/pages/ad/sponsor/[slug].astro
@@ -2,15 +2,23 @@
 import "@fontsource-variable/josefin-sans";
 import "@fontsource/urbanist";
 
-import inngest from "~/assets/sponsors/inngest.svg";
+import "~/layouts/base.css";
+import "~/layouts/normalize.css";
+
 import AdContents from "~/components/AdContents.astro";
 import AdImage from "~/components/AdImage.astro";
 import AdTitleAndSubtitle from "~/components/AdTitleAndSubtitle.astro";
 import DeepBlueSea from "~/components/DeepBlueSea.astro";
 import Head from "~/components/Head.astro";
+import { sponsorsBySlug } from "~/data";
 
-import "~/layouts/base.css";
-import "~/layouts/normalize.css";
+export function getStaticPaths() {
+	return Object.keys(sponsorsBySlug).map((slug) => ({
+		params: { slug: slug as keyof typeof sponsorsBySlug },
+	}));
+}
+
+const sponsor = sponsorsBySlug[Astro.params.slug];
 ---
 
 <html lang="en">
@@ -21,10 +29,10 @@ import "~/layouts/normalize.css";
 				<AdContents>
 					<AdTitleAndSubtitle
 						slot="top"
-						subTitle="Inngest"
+						subTitle={sponsor.title}
 						title="Thank you to our sponsor"
 					/>
-					<AdImage slot="body" src={inngest} />
+					<AdImage slot="body" src={sponsor.logos.dark} />
 				</AdContents>
 			</DeepBlueSea>
 		</main>