feat: add /cfp CFP Guidance page (#4)

## Overview Adds a `/cfp` page that explains more details around the CFP.
SquiggleTools · Mar 3, 2025 · 421dd2d · 421dd2d
1 parent 83c4f09
commit 421dd2d
Show file tree

Hide file tree

Showing 8 changed files with 326 additions and 15 deletions.
diff --git a/cspell.json b/cspell.json
@@ -32,6 +32,8 @@
 		"squiggleconf",
 		"tseslint",
 		"vercel",
+		"WASI",
+		"WCAG",
 		"wght-italic"
 	]
 }
diff --git a/src/components/BodyList.astro b/src/components/BodyList.astro
@@ -0,0 +1,15 @@
+---
+const { as: As, class: className, ...rest } = Astro.props;
+---
+
+<As class:list={[className, "body-list"]} {...rest}>
+	<slot />
+</As>
+
+<style>
+	.body-list {
+		margin: 0 1rem;
+		font-size: var(--fontSizeSmall);
+		font-weight: var(--fontWeightMedium);
+	}
+</style>
diff --git a/src/components/CommonContent.astro b/src/components/CommonContent.astro
@@ -5,13 +5,14 @@ import Heading from "./Heading.astro";
 interface Props {
 	class?: string;
 	heading: string;
+	level?: "h2" | "h3";
 }
 
-const { class: className, ...rest } = Astro.props;
+const { class: className, level = "h2", ...rest } = Astro.props;
 ---
 
 <ContentArea class:list={["common-content", className]} width="thin" {...rest}>
-	<Heading level="h2">{Astro.props.heading}</Heading>
+	<Heading level={level}>{Astro.props.heading}</Heading>
 	<slot />
 </ContentArea>
 
@@ -28,11 +29,19 @@ const { class: className, ...rest } = Astro.props;
 		padding-top: 0;
 	}
 
-	h2 {
+	h2,
+	h3 {
 		color: var(--colorForegroundEmphasized);
-		font-size: var(--fontSizeLarge);
 		font-family: var(--fontFamilyLogo);
 		padding-bottom: 2rem;
 		text-align: center;
 	}
+
+	h2 {
+		font-size: var(--fontSizeLarge);
+	}
+
+	h3 {
+		font-size: var(--fontSizeMedium);
+	}
 </style>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -8,6 +8,7 @@ function hrefProps(pathname: string) {
 	return {
 		class: Astro.url.pathname === pathname ? "" : "header-link-inactive",
 		href: pathname,
+		target: pathname.startsWith("https") ? "_blank" : undefined,
 	};
 }
 ---
@@ -20,6 +21,7 @@ function hrefProps(pathname: string) {
 			<summary aria-label="Toggle header">≡</summary>
 			<div class="header-contents-mobile">
 				<a {...hrefProps("/")}>Home</a>
+				<a {...hrefProps("/cfp")}>CFP</a>
 				<a {...hrefProps(links.shop)}>Shop</a>
 				<a {...hrefProps("/travel")}>Travel</a>
 				<Button
@@ -37,6 +39,7 @@ function hrefProps(pathname: string) {
 		<a class="logo" href="/"><Logo year /></a>
 		<div class="header-links">
 			<a {...hrefProps("/")}>Home</a>
+			<a {...hrefProps("/cfp")}>CFP</a>
 			<a {...hrefProps(links.shop)}>Shop</a>
 			<a {...hrefProps("/travel")}>Travel</a>
 			<Button
@@ -76,9 +79,10 @@ function hrefProps(pathname: string) {
 	}
 
 	.header-content-area-mobile {
+		align-items: center;
 		display: flex;
 		justify-content: space-between;
-		align-items: center;
+		position: relative;
 	}
 
 	details {
@@ -95,8 +99,11 @@ function hrefProps(pathname: string) {
 		cursor: pointer;
 		font-size: 4rem;
 		list-style: none;
-		padding: 0 1rem;
-		position: relative;
+		line-height: 0;
+		padding: 1rem;
+		position: absolute;
+		right: 0;
+		top: 0;
 		z-index: 2;
 	}
 
@@ -116,7 +123,7 @@ function hrefProps(pathname: string) {
 		font-weight: bold;
 		gap: 0.5rem;
 		line-height: 1.5;
-		margin-top: calc(var(--offsetTop) * -1);
+		margin-top: 0;
 		min-width: 20rem;
 		padding: var(--offsetTop) 1rem 1.5rem;
 		position: absolute;
@@ -151,7 +158,7 @@ function hrefProps(pathname: string) {
 		margin-left: 0.35rem;
 	}
 
-	@media (width >= 819px) {
+	@media (width >= 1017px) {
 		.header-content-area-mobile {
 			display: none;
 		}

diff --git a/src/components/explainers/ExplainersList.astro b/src/components/explainers/ExplainersList.astro
@@ -21,10 +21,10 @@ import ExplainerArea from "./ExplainerArea.astro";
 
 const explainers = [
 	{
-		// action: {
-		// 	href: "https://cfp.squiggleconf.com",
-		// 	text: "Apply to be a speaker! CFP now open!",
-		// },
+		action: {
+			href: "https://cfp.squiggleconf.com",
+			text: "Apply to be a speaker! CFP now open!",
+		},
 		body: "Enjoy a dozen talks by tooling aficionados, dev experts, and new voices in the space. You’ll emerge with the best techniques to supercharge your projects.",
 		decoration: DolphinDecoration,
 		direction: "up",

diff --git a/src/components/hero/HeroContentsStandard.astro b/src/components/hero/HeroContentsStandard.astro
@@ -4,11 +4,16 @@ import TextSquiggly from "~/components/TextSquiggly.astro";
 
 interface Props {
 	heading: string;
+	squiggly?: "medium" | "wide";
 }
+
+const { heading, squiggly = "medium" }: Props = Astro.props;
 ---
 
-<div class="hero-contents-standard">
-	<TextSquiggly width="medium">
+<div
+	class:list={["hero-contents-standard", `hero-contents-standard-${squiggly}`]}
+>
+	<TextSquiggly width={squiggly}>
 		<Heading level="h1" slot="inside">{Astro.props.heading}</Heading>
 	</TextSquiggly>
 
@@ -33,6 +38,10 @@ interface Props {
 		font-weight: var(--fontWeightMedium);
 	}
 
+	.hero-contents-standard-wide h1 {
+		padding-bottom: 0.25rem;
+	}
+
 	.hero-contents-standard-body {
 		font-size: var(--fontSizeMedium);
 		font-weight: var(--fontWeightLight);

diff --git a/src/data/links.ts b/src/data/links.ts
@@ -1,4 +1,8 @@
 export const links = {
+	cfp: "https://cfp.squiggleconf.com",
+	cfpQuestionsDiscord:
+		"https://discord.com/channels/1181983343387099207/1244808425762848938",
+	cfpQuestionsEmail: "mailto:cfp@squiggleconf.com",
 	shop: "https://shop.squiggle.tools",
 	tickets: "https://buytickets.at/squiggleconf/1488622",
 };