feat: ticket links and more link things

SquiggleTools · Nov 30, 2024 · 3c0efdc · 3c0efdc
1 parent 711c11f
commit 3c0efdc
Show file tree

Hide file tree

Showing 13 changed files with 111 additions and 39 deletions.
diff --git a/.astro/settings.json b/.astro/settings.json
diff --git a/src/components/AdNewsletterRich.astro b/src/components/AdNewsletterRich.astro
@@ -17,7 +17,7 @@ import Heading from "./Heading.astro";
 			Email Address
 			<input type="email" placeholder="cool.dev@awesome.com" />
 		</label>
-		<Button variant="light">Subscribe</Button>
+		<Button as="button" type="submit" variant="light">Subscribe</Button>
 	</form>
 
 	<Image

diff --git a/src/components/AdNewsletterThin.astro b/src/components/AdNewsletterThin.astro
@@ -23,7 +23,7 @@ import TextSquiggly from "./TextSquiggly.astro";
 				type="email"
 				placeholder="cool.dev@awesome.com"
 			/>
-			<Button variant="light">Subscribe</Button>
+			<Button as="button" type="submit" variant="light">Subscribe</Button>
 		</form>
 	</ContentArea>
 </div>

diff --git a/src/components/AdRegistration.astro b/src/components/AdRegistration.astro
@@ -1,10 +1,13 @@
 ---
+import { links } from "~/data/links";
 import Button from "./Button.astro";
 import ContentArea from "./ContentArea.astro";
 import Heading from "./Heading.astro";
 ---
 
 <ContentArea as="section">
 	<Heading level="h2">Registration is open!</Heading>
-	<Button>Get extra early bird tickets now!</Button>
+	<Button as="a" href={links.tickets} target="_blank" variant="accent"
+		>Get extra early bird tickets now!</Button
+	>
 </ContentArea>
diff --git a/src/components/AdTicketsThin.astro b/src/components/AdTicketsThin.astro
@@ -3,6 +3,7 @@ import tripleSquiggly from "~/assets/design/triple-squiggly.svg";
 
 import Button from "./Button.astro";
 import ContentArea from "./ContentArea.astro";
+import { links } from "~/data/links";
 ---
 
 <section class="ad-tickets-thin">
@@ -12,8 +13,12 @@ import ContentArea from "./ContentArea.astro";
 	>
 	</div>
 	<ContentArea class="ad-tickets-content">
-		<Button size="large" variant="accent"
-			>Get extra early bird tickets now!</Button
+		<Button
+			as="a"
+			size="large"
+			variant="accent"
+			href={links.tickets}
+			target="_blank">Get extra early bird tickets now!</Button
 		>
 	</ContentArea>
 </section>

diff --git a/src/components/Button.astro b/src/components/Button.astro
@@ -1,14 +1,23 @@
 ---
-interface Props {
+import { HTMLTag, Polymorphic } from "astro/types";
+
+type Props<Tag extends HTMLTag> = Polymorphic<{
+	as: Tag;
 	class?: string;
 	size?: "normal" | "large";
 	variant: "accent" | "light";
-}
+}>;
 
-const { class: className, size = "normal", variant, ...rest } = Astro.props;
+const {
+	as: As,
+	class: className,
+	size = "normal",
+	variant,
+	...rest
+} = Astro.props;
 ---
 
-<button
+<As
 	class:list={[
 		"button",
 		`button-size-${size}`,
@@ -18,13 +27,14 @@ const { class: className, size = "normal", variant, ...rest } = Astro.props;
 	{...rest}
 >
 	<slot />
-</button>
+</As>
 
 <style>
 	.button {
 		border: 0;
-		font-family: inherit;
 		cursor: pointer;
+		font-family: inherit;
+		text-decoration: none;
 	}
 
 	.button-size-normal {

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -16,7 +16,7 @@ import Socials from "./Socials.astro";
 		</div>
 		<div class="right">
 			<div class="footer-links">
-				<a href="https://shop.squiggle.tools">Shop</a>
+				<a href="https://shop.squiggle.tools" target="_blank">Shop</a>
 				<a href="/code-of-conduct">Code of Conduct</a>
 			</div>
 			<Socials />

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,7 +1,15 @@
 ---
+import { links } from "~/data/links";
 import Button from "./Button.astro";
 import ContentArea from "./ContentArea.astro";
 import Logo from "./Logo.astro";
+
+function hrefProps(pathname: string) {
+	return {
+		class: Astro.url.pathname === pathname ? "" : "header-link-inactive",
+		href: pathname,
+	};
+}
 ---
 
 <header>
@@ -11,21 +19,31 @@ import Logo from "./Logo.astro";
 		<details id="details">
 			<summary aria-label="Toggle header">≡</summary>
 			<div class="header-contents-mobile">
-				<a href="/">Home</a>
-				<a href="https://2024.squiggleconf.com">2024 Conf</a>
-				<Button class="header-button" variant="accent">Register</Button>
+				<a {...hrefProps("/")}>Home</a>
+				<a {...hrefProps("https://2024.squiggleconf.com")}>2024 Conf</a>
+				<Button
+					as="a"
+					class="header-button"
+					href={links.tickets}
+					target="_blank"
+					variant="accent">Register</Button
+				>
 			</div>
 		</details>
 	</ContentArea>
 
 	<ContentArea class="header-content-area-wide" width="wide">
 		<a class="logo" href="/"><Logo /></a>
 		<div class="header-links">
-			<a href="/">Home</a>
-			<a class="header-link-inactive" href="https://2024.squiggleconf.com"
-				>2024 Conf</a
+			<a {...hrefProps("/")}>Home</a>
+			<a {...hrefProps("https://2024.squiggleconf.com")}>2024 Conf</a>
+			<Button
+				as="a"
+				class="header-button"
+				href={links.tickets}
+				target="_blank"
+				variant="accent">Register</Button
 			>
-			<Button class="header-button" variant="accent">Register</Button>
 		</div>
 	</ContentArea>
 </header>
@@ -59,10 +77,6 @@ import Logo from "./Logo.astro";
 		align-items: center;
 	}
 
-	a {
-		text-decoration: none;
-	}
-
 	details {
 		position: absolute;
 		top: 0;

diff --git a/src/data/links.ts b/src/data/links.ts
@@ -0,0 +1,3 @@
+export const links = {
+	tickets: "https://buytickets.at/squiggleconf/1488622",
+};
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -0,0 +1,16 @@
+---
+import "@fontsource-variable/josefin-sans";
+import "@fontsource-variable/urbanist";
+
+import Head, { Props as HeadProps } from "~/components/Head.astro";
+
+import "./base.css";
+import "./normalize.css";
+
+type Props = HeadProps;
+---
+
+<html lang="en">
+	<Head {...Astro.props} />
+	<slot />
+</html>
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
@@ -1,23 +1,17 @@
 ---
-import "@fontsource-variable/josefin-sans";
-import "@fontsource-variable/urbanist";
-
-import Head, { Props as HeadProps } from "~/components/Head.astro";
+import { Props as HeadProps } from "~/components/Head.astro";
 import Header from "~/components/Header.astro";
 import BodyArea from "~/components/BodyArea.astro";
 import Footer from "~/components/Footer.astro";
-
-import "./base.css";
-import "./normalize.css";
+import BaseLayout from "./BaseLayout.astro";
 
 type Props = HeadProps;
 ---
 
-<html lang="en">
-	<Head {...Astro.props} />
+<BaseLayout {...Astro.props}>
 	<Header />
 	<BodyArea>
 		<slot />
 	</BodyArea>
 	<Footer />
-</html>
+</BaseLayout>
diff --git a/src/pages/ad.astro b/src/pages/ad.astro
@@ -0,0 +1,32 @@
+---
+import InlineBlock from "~/components/InlineBlock.astro";
+import Logo from "~/components/Logo.astro";
+import BaseLayout from "~/layouts/BaseLayout.astro";
+---
+
+<BaseLayout
+	description="A Boston conference for excellent web dev tooling."
+	title="Ad"
+>
+	<div class="ad">
+		<Logo />
+		<div>
+			<InlineBlock>September 18-19, 2025 · </InlineBlock>
+			<InlineBlock>Boston New England Aquarium</InlineBlock>
+		</div>
+	</div>
+</BaseLayout>
+
+<style>
+	.ad {
+		align-items: center;
+		color: var(--colorAccentLight);
+		display: flex;
+		flex-direction: column;
+		font-size: 0.5rem;
+		gap: 1rem;
+		height: 100vh;
+		justify-content: center;
+		width: 100%;
+	}
+</style>
diff --git a/src/pages/code-of-conduct.astro b/src/pages/code-of-conduct.astro
@@ -55,8 +55,8 @@ import PageLayout from "~/layouts/PageLayout.astro";
 			This Code of Conduct adapted from
 			<a
 				href="https://plone.org/foundation/materials/foundation-resolutions/code-of-conduct"
-				target="_blank"
 				rel="noreferrer"
+				target="_blank"
 			>
 				plone.org/foundation/materials/foundation-resolutions/code-of-conduct</a
 			>.