feat:footer

astro.config.ts

@@ -8,8 +8,5 @@ export default defineConfig({
 	}),
 	integrations: [konamiEmojiBlast()],
 	output: "server",
-	redirects: {
-		"/talks": "/sessions",
-	},
-	site: "https://2024.squiggleconf.com",
+	site: "https://2025.squiggleconf.com",
 });

cspell.json

@@ -11,6 +11,7 @@
 	],
 	"words": [
 		"astrojs",
+		"Bluesky",
 		"Faneuil",
 		"Farrelly",
 		"fontsource",

src/components/Footer.astro

@@ -1,31 +1,58 @@
 ---
 import ContentArea from "./ContentArea.astro";
+import Logo from "./Logo.astro";
+import Socials from "./Socials.astro";
 ---
 
 <footer>
 	<ContentArea class="footer-content-area" width="wide">
-		<div>
-			<div>SquiggleConf</div>
+		<div class="left">
+			<Logo />
 			<div>September 18-19, 2025 · Boston New England Aquarium</div>
 		</div>
-		<div>
-			<div>
+		<div class="right">
+			<div class="footer-links">
 				<a href="https://shop.squiggle.tools">Shop</a>
 				<a href="/code-of-conduct">Code of Conduct</a>
 			</div>
-			<div>Social Links Here</div>
+			<Socials />
 		</div>
 	</ContentArea>
 </footer>
 
 <style>
 	footer {
-		padding: 2rem 0;
+		font-size: var(--fontSizeSmall);
+		font-weight: var(--fontWeightLight);
+		padding: 4rem 0 3rem;
 		width: 100%;
 	}
 
 	.footer-content-area {
 		display: flex;
 		justify-content: space-between;
 	}
+
+	.left {
+		color: var(--colorAccentLight);
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.right {
+		align-items: flex-end;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+
+	.footer-links {
+		display: flex;
+		gap: 2rem;
+	}
+
+	.footer-links a {
+		text-decoration: none;
+	}
 </style>

src/components/Logo.astro

@@ -1,4 +1,5 @@
 ---
+import EmphasizedText from "./EmphasizedText.astro";
 import TextSquiggly from "./TextSquiggly.astro";
 ---
 
@@ -7,10 +8,12 @@ import TextSquiggly from "./TextSquiggly.astro";
 		<Fragment slot="inside">Squiggle</Fragment>
 		<Fragment slot="after">Conf</Fragment>
 	</TextSquiggly>
+	<EmphasizedText>2025</EmphasizedText>
 </div>
 
 <style>
 	.logo {
+		color: var(--colorLight);
 		font-family: var(--fontFamilyLogo);
 		font-size: var(--fontSizeLogo);
 		font-weight: var(--fontWeightLogo);

src/components/SocialLink.astro

@@ -0,0 +1,34 @@
+---
+import { ImageMetadata } from "astro";
+import { Image } from "astro:assets";
+
+interface Props {
+	alt: string;
+	href: string;
+	inverted?: boolean;
+	src: ImageMetadata;
+}
+---
+
+<a
+	class:list={["social-link", Astro.props.inverted && "social-link-inverted"]}
+	href={Astro.props.href}
+	target="_blank"
+>
+	<Image alt={Astro.props.alt} class="social-image" src={Astro.props.src} />
+</a>
+
+<style>
+	.social-link {
+		align-items: center;
+		display: flex;
+		gap: 0.5rem;
+		flex-direction: row;
+		text-decoration: none;
+	}
+
+	.social-image {
+		height: 2rem;
+		width: 2rem;
+	}
+</style>

src/components/Socials.astro

@@ -0,0 +1,16 @@
+---
+import { socials } from "~/data/socials";
+
+import SocialLink from "./SocialLink.astro";
+---
+
+<div class="socials">
+	{socials.map((social) => <SocialLink {...social} />)}
+</div>
+
+<style>
+	.socials {
+		display: flex;
+		gap: 1rem;
+	}
+</style>

src/components/TextSquiggly.astro

@@ -27,8 +27,9 @@ const { renderAs: As = "em", width } = Astro.props;
 <style>
 	.text-squiggly {
 		display: inline-block;
-		position: relative;
 		font-style: inherit;
+		position: relative;
+		user-select: none;
 	}
 
 	.text {

src/data/socials.ts

@@ -0,0 +1,45 @@
+import bluesky from "../assets/logos/bluesky.svg";
+import discord from "../assets/logos/discord.svg";
+import github from "../assets/logos/github.svg";
+import linkedin from "../assets/logos/linkedin.svg";
+import mastodon from "../assets/logos/mastodon.svg";
+import twitter from "../assets/logos/twitter.svg";
+import youtube from "../assets/logos/YouTube.svg";
+
+export const socials = [
+	{
+		alt: "Bluesky",
+		href: "https://bsky.app/profile/squiggleconf.com",
+		src: bluesky,
+	},
+	{
+		alt: "LinkedIn",
+		href: "https://www.linkedin.com/company/squiggleconf",
+		src: linkedin,
+	},
+	{
+		alt: "Mastodon",
+		href: "https://fosstodon.org/@SquiggleConf",
+		src: mastodon,
+	},
+	{
+		alt: "Twitter",
+		href: "https://twitter.com/SquiggleConf",
+		src: twitter,
+	},
+	{
+		alt: "YouTube",
+		href: "https://www.youtube.com/@SquiggleConf",
+		src: youtube,
+	},
+	{
+		alt: "GitHub",
+		href: "https://www.github.com/SquiggleTools/SquiggleConf",
+		src: github,
+	},
+	{
+		alt: "Discord",
+		href: "https://discord.squiggleconf.com",
+		src: discord,
+	},
+].sort((a, b) => a.alt.localeCompare(b.alt));