feat: add qr code page

.astro/types.d.ts

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

cspell.json

@@ -34,6 +34,7 @@
 		"Logomark",
 		"mariah",
 		"MBTA",
+		"Merch",
 		"mitropoulos",
 		"mulroy",
 		"Murg",

package.json

@@ -41,7 +41,9 @@
 		"konami-emoji-blast": "^0.5.9",
 		"lodash": "^4.17.21",
 		"sharp": "^0.34.1",
-		"temporal-polyfill": "^0.3.0"
+		"temporal-polyfill": "^0.3.0",
+		"uqr": "^0.1.2",
+		"wifi-share-link": "^0.1.1"
 	},
 	"devDependencies": {
 		"@eslint-community/eslint-plugin-eslint-comments": "^4.5.0",

src/components/Footer.astro

@@ -38,7 +38,7 @@ const yearPairs =
 					))
 				}
 			</div>
-			<Socials />
+			<Socials class="footer-socials" />
 		</div>
 	</ContentArea>
 </footer>
@@ -82,6 +82,18 @@ const yearPairs =
 		text-decoration: none;
 	}
 
+	.footer-socials {
+		margin-top: 2rem;
+		max-width: 15rem;
+	}
+
+	@media (width >= 490px) {
+		.footer-socials {
+			margin-top: 0;
+			max-width: none;
+		}
+	}
+
 	@media (width >= 819px) {
 		.footer-content-area {
 			flex-direction: row;

src/components/Logo.astro

@@ -1,5 +1,4 @@
 ---
-import { ClassificationTypeNames } from "typescript";
 import TextSquiggly from "./TextSquiggly.astro";
 
 interface Props {
@@ -38,6 +37,7 @@ const { class: className, invert, year, ...props } = Astro.props;
 	.logo.regular {
 		--colorLogoText: var(--colorWhiteIsh);
 		--colorLogoYear: var(--colorBlue2);
+		text-shadow: 0px 1.5px 1.5px rgba(0, 0, 0, 0.25);
 	}
 
 	.year {

src/components/LogoBold.astro

@@ -0,0 +1,35 @@
+---
+import TextSquiggly from "./TextSquiggly.astro";
+
+interface Props {
+	class?: string;
+	year: number;
+}
+
+const { class: className, ...props } = Astro.props;
+---
+
+<div class:list={["logo-bold", className]} {...props}>
+	<TextSquiggly width="medium">
+		<Fragment slot="inside">Squiggle</Fragment>
+		<Fragment slot="after">Conf</Fragment>
+	</TextSquiggly>
+	{Astro.props.year && <span class="year">{Astro.props.year}</span>}
+</div>
+
+<style>
+	.logo-bold {
+		color: var(--colorWhiteIsh);
+		font-family: var(--fontFamilyLogo);
+		font-weight: var(--fontWeightLogo);
+		font-size: var(--fontSizeLogoLarge);
+		font-style: initial;
+		text-shadow: 0px 1.5px 1.5px rgba(0, 0, 0, 0.25);
+	}
+
+	.year {
+		color: var(--colorAccentMedium);
+		font-family: var(--fontFamilyHeading);
+		font-weight: var(--fontWeightBold);
+	}
+</style>

src/components/SocialLink.astro

@@ -2,23 +2,33 @@
 import { ImageMetadata } from "astro";
 import { Image } from "astro:assets";
 
+export type SocialLinkSize = "small" | "normal" | "large";
+
 interface Props {
 	alt: string;
 	class?: string;
 	href: string;
 	inverted?: boolean;
+	size?: SocialLinkSize;
 	src: ImageMetadata;
 }
 
-const { alt, class: className, inverted, href, src } = Astro.props;
+const {
+	alt,
+	class: className,
+	inverted,
+	href,
+	size = "normal",
+	src,
+} = Astro.props;
 ---
 
 <a
-	class:list={["social-link", inverted && "social-link-inverted"]}
+	class:list={["social-link", className, inverted && "social-link-inverted"]}
 	href={href}
 	target="_blank"
 >
-	<Image alt={alt} class="social-image" src={src} />
+	<Image alt={alt} class:list={["social-image", size]} src={src} />
 </a>
 
 <style>
@@ -30,8 +40,24 @@ const { alt, class: className, inverted, href, src } = Astro.props;
 		text-decoration: none;
 	}
 
+	.social-image.small {
+		--sizeSocialImage: 1.5rem;
+	}
+
+	.social-image.normal {
+		--sizeSocialImage: 2rem;
+	}
+
+	.social-image.large {
+		--sizeSocialImage: 4rem;
+	}
+
 	.social-image {
-		height: 2rem;
-		width: 2rem;
+		height: var(--sizeSocialImage);
+		width: var(--sizeSocialImage);
+	}
+
+	html:not(.dark) .social-link-inverted {
+		filter: hue-rotate(180deg) invert();
 	}
 </style>

src/components/Socials.astro

@@ -1,27 +1,63 @@
 ---
 import { socials } from "~/data/socials";
 
-import SocialLink from "./SocialLink.astro";
+import SocialLink, { SocialLinkSize } from "./SocialLink.astro";
+
+export type SocialsPadding = "dense" | "normal";
+
+interface Props {
+	class?: string;
+	inverted?: boolean;
+	padding?: SocialsPadding;
+	size?: SocialLinkSize;
+}
+
+const {
+	class: className,
+	inverted,
+	padding = "normal",
+	size,
+	...props
+} = Astro.props;
 ---
 
-<div class="socials">
-	{socials.map((social) => <SocialLink class="social-link" {...social} />)}
+<div
+	class:list={[
+		"socials",
+		className,
+		padding === "dense" ? "socials-dense" : "socials-normal",
+	]}
+	{...props}
+>
+	{
+		socials.map((social) => (
+			<SocialLink
+				class="social-link"
+				inverted={inverted}
+				{...social}
+				size={size}
+			/>
+		))
+	}
 </div>
 
 <style>
 	.socials {
 		display: flex;
 		flex-wrap: wrap;
+	}
+
+	.socials-dense {
+		gap: 0.5rem;
+	}
+
+	.socials-normal {
 		gap: 2rem;
-		margin-top: 2rem;
-		max-width: 15rem;
 	}
 
 	@media (width >= 490px) {
 		.socials {
 			gap: 1rem;
-			margin-top: 0;
-			max-width: none;
 		}
 	}
 </style>

src/components/TextSquiggly.astro

@@ -4,6 +4,7 @@ import squigglyMedium from "~/assets/design/squiggly-medium.svg";
 import squigglyWide from "~/assets/design/squiggly-wide.svg";
 
 interface Props {
+	class?: string;
 	renderAs?: string;
 	width: "medium" | "wide";
 }
@@ -13,10 +14,13 @@ const images = {
 	wide: squigglyWide,
 };
 
-const { renderAs: As = "em", width } = Astro.props;
+const { class: className, renderAs: As = "em", width, ...props } = Astro.props;
 ---
 
-<As class:list={["text-squiggly", `text-squiggly-${width}`]}>
+<As
+	class:list={["text-squiggly", `text-squiggly-${width}`, className]}
+	{...props}
+>
 	<span class="text"><slot name="inside" /></span><Image
 		alt=""
 		class="squiggly"

src/data/links.ts

@@ -1,15 +1,23 @@
 export const links = {
+	bluesky: "https://bsky.app/profile/squiggleconf.com",
 	bostonTSClub: "https://bostonts.club",
 	cfp: "https://cfp.squiggleconf.com",
 	cfpQuestionsDiscord:
 		"https://discord.com/channels/1181983343387099207/1244808425762848938",
 	cfpQuestionsEmail: "mailto:cfp@squiggleconf.com",
 	discord: "https://discord.squiggleconf.com",
 	donate: "https://www.paypal.com/US/fundraiser/charity/5334863",
+	feedback: "http://feedback.squiggleconf.com",
+	github: "https://www.github.com/SquiggleTools/SquiggleConf.com",
+	instagram: "https://www.instagram.com/squiggleconf",
+	linkedin: "https://www.linkedin.com/company/squiggleconf",
+	mastodon: "https://fosstodon.org/@SquiggleConf",
 	michiganTypeScript: "https://youtube.com/@MichiganTypeScript",
 	partner: "https://partner.squiggleconf.com",
 	shop: "https://shop.squiggle.tools",
 	sponsor: "https://sponsor.squiggleconf.com",
 	tickets: "https://buytickets.at/squiggleconf/1488622",
 	volunteer: "https://volunteer.squiggleconf.com",
+	x: "https://x.com/SquiggleConf",
+	youtube: "https://www.youtube.com/@SquiggleConf",
 };

src/data/socials.ts

@@ -15,7 +15,7 @@ export const socials = [
 		src: bluesky,
 	},
 	{
-		alt: "Instgram",
+		alt: "Instagram",
 		href: "https://www.instagram.com/squiggleconf",
 		src: instagram,
 	},

src/layouts/base.css

@@ -46,6 +46,7 @@
 	--fontSizeLarger: clamp(2rem, 4.5vw, 3rem);
 	--fontSizeHero: clamp(2rem, 5vw, 3rem);
 	--fontSizeLogo: clamp(1.75rem, 4.375vw, 2.25rem);
+	--fontSizeLogoLarge: clamp(2.5rem, 5.25vw, 3rem);
 
 	--fontWeightLight: 200;
 	--fontWeightMedium: 300;