feat: add /faqs page

.astro/types.d.ts

@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />

cspell.json

@@ -12,6 +12,7 @@
 		"pnpm-lock.yaml"
 	],
 	"words": [
+		"astropub",
 		"astrojs",
 		"Bluesky",
 		"Devries",

package.json

@@ -32,6 +32,7 @@
 	"dependencies": {
 		"@astrojs/check": "0.9.4",
 		"@astrojs/vercel": "^8.0.7",
+		"@astropub/md": "^1.0.0",
 		"@fontsource-variable/inter": "^5.1.1",
 		"@fontsource-variable/josefin-sans": "^5.1.1",
 		"@fontsource-variable/urbanist": "^5.1.1",

src/components/Header.astro

@@ -23,6 +23,7 @@ function hrefProps(pathname: string) {
 				<a {...hrefProps("/about")}>About</a>
 				<a {...hrefProps("/articles")}>Articles</a>
 				<a {...hrefProps("/cfp")}>CFP</a>
+				<a {...hrefProps("/faqs")}>FAQs</a>
 				<a {...hrefProps(links.shop)}>Shop</a>
 				<a {...hrefProps("/travel")}>Travel</a>
 				<Button
@@ -42,6 +43,7 @@ function hrefProps(pathname: string) {
 			<a {...hrefProps("/about")}>About</a>
 			<a {...hrefProps("/articles")}>Articles</a>
 			<a {...hrefProps("/cfp")}>CFP</a>
+			<a {...hrefProps("/faqs")}>FAQs</a>
 			<a {...hrefProps(links.shop)}>Shop</a>
 			<a {...hrefProps("/travel")}>Travel</a>
 			<Button
@@ -148,7 +150,7 @@ function hrefProps(pathname: string) {
 		display: flex;
 		align-items: center;
 		font-weight: var(--fontWeightLight);
-		gap: clamp(1rem, 1.5vw, 2rem);
+		gap: clamp(0.75rem, 1.5vw, 2rem);
 	}
 
 	.header-link-inactive {

src/components/Newsletter.astro

@@ -8,7 +8,7 @@ import ContentArea from "./ContentArea.astro";
 import Heading from "./Heading.astro";
 ---
 
-<div class="newsletter">
+<div class="newsletter" id="newsletter">
 	<svg
 		class="light-beam"
 		fill="none"

src/layouts/base.css

@@ -56,6 +56,8 @@
 	--sizeContentAreaNormal: 70.5rem;
 	--sizeContentAreaWide: 75rem;
 
+	--transitionMedium: 280ms;
+
 	color-scheme: light;
 }
 

src/pages/articles/how-to-attend-squiggleconf-for-free.astro

@@ -12,17 +12,13 @@ import PageLayout from "~/layouts/PageLayout.astro";
 
 const description =
 	"13 different ways you can get a free ticket to SquiggleConf 2025. Free!";
+
+const title = "How to Attend SquiggleConf for Free";
 ---
 
-<PageLayout
-	description={description}
-	title="How to Attend SquiggleConf for Free"
->
+<PageLayout description={description} title={title}>
 	<Hero>
-		<HeroContentsStandard
-			heading="How to Attend SquiggleConf for Free"
-			squiggly="none"
-		>
+		<HeroContentsStandard heading={title} squiggly="none">
 			{description}
 		</HeroContentsStandard>
 	</Hero>

src/pages/cfp.astro

@@ -243,6 +243,10 @@ const topicAreas = [
 			Apply to the CFP here!
 			<Arrow />
 		</Button>
+
+		<BodyText class="faq-link">
+			See <a href="/faqs#cfp">FAQs &gt; CFP</a> for answers to common questions.
+		</BodyText>
 	</CommonContent>
 </PageLayout>
 
@@ -259,4 +263,8 @@ const topicAreas = [
 	.apply-button-bottom {
 		margin: 3.5rem auto 0;
 	}
+
+	.faq-link {
+		margin-top: 3.5rem;
+	}
 </style>