feat: add /faqs page (#14)

JoshuaKGoldberg · web-flow · commit 7718d51d4f3f · 2025-04-17T14:39:17.000-04:00
## Overview Adds an `/faqs` page very similar to https://2024.squiggleconf.com/faqs. 💖
diff --git a/.astro/types.d.ts b/.astro/types.d.ts
@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />
diff --git a/cspell.json b/cspell.json
@@ -12,6 +12,7 @@
 		"pnpm-lock.yaml"
 	],
 	"words": [
+		"astropub",
 		"astrojs",
 		"Bluesky",
 		"Devries",
diff --git a/package.json b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/assets/glyphs/dropdown.svg b/src/assets/glyphs/dropdown.svg
@@ -0,0 +1,13 @@
+<svg
+	width="30"
+	height="17"
+	viewBox="0 0 30 17"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M1 1.22876L15 15.2288L29 1.22876"
+		stroke="#a7735b"
+		stroke-width="2"
+	/>
+</svg>
diff --git a/src/components/Header.astro b/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 {
diff --git a/src/components/Newsletter.astro b/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"
diff --git a/src/layouts/base.css b/src/layouts/base.css
@@ -56,6 +56,8 @@
 	--sizeContentAreaNormal: 70.5rem;
 	--sizeContentAreaWide: 75rem;
 
+	--transitionMedium: 280ms;
+
 	color-scheme: light;
 }
 
diff --git a/src/pages/articles/how-to-attend-squiggleconf-for-free.astro b/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>
diff --git a/src/pages/cfp.astro b/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>
diff --git a/src/pages/faqs.astro b/src/pages/faqs.astro

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`	`1`	`/// <reference types="astro/client" />`
`2`		`-/// <reference path="content.d.ts" />`
Original file line number	Diff line number	Diff line change
`@@ -56,6 +56,8 @@`
`56`	`56`	`--sizeContentAreaNormal: 70.5rem;`
`57`	`57`	`--sizeContentAreaWide: 75rem;`
`58`	`58`
	`59`	`+ --transitionMedium: 280ms;`
	`60`	`+`
`59`	`61`	`color-scheme: light;`
`60`	`62`	`}`
`61`	`63`