Feat/test new design

astro.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
 import icon from "astro-icon";
+import tailwindcss from "@tailwindcss/vite";
 
 const oldCivcURL = "/blog/2019-06-22-introducing-civc-tech-to-san-franciscos-underserved-communities";
 
@@ -39,6 +40,9 @@ export default defineConfig({
 			modules: {
 				localsConvention: "camelCase",
 			}
-		}
+		},
+		plugins: [
+			tailwindcss()
+		]
 	}
 });

package.json

@@ -23,6 +23,7 @@
     "@stylistic/eslint-plugin": "^4.2.0",
     "@stylistic/stylelint-config": "^2.0.0",
     "@stylistic/stylelint-plugin": "^3.1.2",
+    "@tailwindcss/vite": "^4.1.3",
     "@types/react": "^19.1.1",
     "@types/react-dom": "^19.1.2",
     "@typescript-eslint/parser": "^8.29.1",
@@ -40,6 +41,7 @@
     "react-dom": "^19.1.0",
     "stylelint": "^16.18.0",
     "stylelint-config-html": "^1.1.0",
+    "tailwindcss": "^4.1.3",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.29.1"
   }

src/layouts/BaseLayout.astro

@@ -4,6 +4,7 @@ import Page from "@/layouts/Page.astro";
 import HeaderNav from "@/components/HeaderNav.astro";
 import FooterNav from "@/components/FooterNav.astro";
 import type { MetadataProp } from "@/components/Metadata.astro";
+import "@/styles/global.css";
 
 interface Props {
 	title: string;

src/pages/beta/_components/BigText.astro

@@ -0,0 +1,99 @@
+---
+import TagOrnament from "./TagOrnament.astro";
+
+interface Props {
+	id?: string;
+	anchor?: "left" | "right";
+	size?: "lg" | "md" | "sm";
+	showOrnament?: boolean;
+}
+
+const Sizes = {
+	lg: {
+		Heading: "h2",
+		headingFontSize: "text-9xl",
+		bodyFontSize: "text-2xl leading-[1.2]",
+	},
+	md: {
+		Heading: "h3",
+		headingFontSize: "text-5xl leading-[0.9]",
+		bodyFontSize: "text-lg leading-[1.2]",
+	},
+	sm: {
+		Heading: "h4",
+		headingFontSize: "text-2xl",
+		bodyFontSize: "text-base",
+	},
+};
+
+const {
+	id,
+	anchor = "left",
+	size = "lg",
+	showOrnament = true,
+} = Astro.props;
+const { Heading, headingFontSize, bodyFontSize } = Sizes[size];
+---
+
+<section id={id} class="py-4">
+	<div
+		class:list={[
+			"flex",
+			"items-center",
+			"justify-between",
+			"gap-10",
+			{ "flex-row-reverse": anchor === "right" },
+		]}
+	>
+		<Heading
+			class:list={[
+				"flex-1",
+				"font-condensed",
+				"font-semibold",
+				"uppercase",
+				headingFontSize,
+				"leading-[0.8]",
+				"mb-0",
+				anchor === "left" && "text-right",
+			]}
+		>
+			<slot name="title" />
+		</Heading>
+		<div
+			class:list={[
+				"body",
+				"flex-1",
+				"text-stone-800",
+				bodyFontSize,
+				anchor === "right" && "text-right",
+			]}
+		>
+			<slot name="body" />
+		</div>
+	</div>
+	{showOrnament && (
+		<div class="flex justify-center mt-8">
+			<TagOrnament />
+		</div>
+	)}
+</section>
+
+<style>
+	h2, h3, h4 {
+		:global(b) {
+			color: var(--color-sf-red);
+			font-weight: inherit;
+		}
+	}
+
+	div.body {
+		:global(p:last-of-type) {
+			margin-bottom: 0;
+		}
+
+		:global(i) {
+      color: var(--color-stone-600);
+      font-weight: 600;
+		}
+	}
+</style>

src/pages/beta/_components/Card.astro

@@ -0,0 +1,40 @@
+---
+interface Props {
+	color: string;
+	title: string;
+	body: string;
+	label: string;
+	href: string;
+}
+
+const { color, title, body, label, href } = Astro.props;
+---
+
+<div class="flex flex-col items-center text-center p-8 rounded-lg" style={`background: ${color}`}>
+	<div class="w-3/5 mb-4">
+		<slot />
+	</div>
+	<div class="flex flex-col h-full gap-2">
+		<h3 class="text-white font-[var(--font-barlow-condensed)] uppercase text-2xl font-bold min-h-[3rem]">{title}</h3>
+		<p class="text-white text-sm h-full mb-4">
+			{body}
+		</p>
+		<a href={href} target="_blank" class="text-white font-bold text-lg hover:underline decoration-white/90">
+			{label}
+		</a>
+	</div>
+</div>
+
+<style>
+	@media only screen and (max-width: 768px) {
+		div {
+			@apply flex-row justify-between;
+		}
+		div > div:first-child {
+			@apply w-1/3;
+		}
+		div > div:last-child {
+			@apply w-3/5;
+		}
+	}
+</style>

src/pages/beta/_components/CodeSummary.astro

@@ -0,0 +1,30 @@
+---
+import GitHubEvents from "./GitHubEvents/GitHubEvents";
+import TagOrnament from "./TagOrnament.astro";
+import BigText from "./BigText.astro";
+
+// we'll pass the ID of the section to the GitHubEvents component so that it can
+// hide the whole section in case there's an error, rather than leave a broken
+// component on the page
+const id = "in-the-code";
+const showOrnament = false;
+---
+
+<section id={id} class="mb-8">
+	<BigText size="md" showOrnament={false}>
+		<Fragment slot="title">
+			<b>In the Code</b>
+		</Fragment>
+	</BigText>
+	<div class="mt-5" />
+	<GitHubEvents
+		org="sfbrigade"
+		sectionID={id}
+		client:only="react"
+	/>
+	{showOrnament && (
+		<div class="flex justify-center mt-16">
+			<TagOrnament />
+		</div>
+	)}
+</section>

src/pages/beta/_components/FooterNav.astro

@@ -0,0 +1,66 @@
+---
+import { Icon } from "astro-icon/components";
+import NavLink from "./NavLink.astro";
+import {
+	facebookURL,
+	githubURL,
+	linkedinURL,
+	meetupURL,
+	pitchProjectURL,
+	proposeTalkURL,
+	slackURL,
+	blueskyURL,
+	twitterURL
+} from "@/utils/urls";
+
+const columns = [
+	[
+		"Resources",
+		[
+			[proposeTalkURL, "propose a talk"],
+			[pitchProjectURL, "pitch a project"],
+		],
+	],
+	[
+		"About",
+		[
+			["/about", "about"],
+			["/about#core-team", "meet the core team"],
+			["/about#code-of-conduct", "code of conduct"],
+			["mailto:hello@sfcivictech.org", "contact"],
+		],
+	],
+	[
+		"Elsewhere",
+		[
+			[githubURL, "github", "fa:github"],
+			[slackURL, "slack", "fa:slack"],
+			[meetupURL, "meetup", "fa:meetup"],
+			[blueskyURL, "bluesky", "fa6-brands:bluesky"],
+			[facebookURL, "facebook", "fa:facebook"],
+			[linkedinURL, "linkedin", "fa:linkedin"],
+			[twitterURL, "twitter", "fa6-brands:twitter"],
+		],
+	],
+] as const;
+---
+
+<footer class="mx-auto px-0 py-14 text-sm flex flex-row justify-between">
+	{columns.map(([cat, links]) => (
+		<nav aria-label="Footer" class="flex flex-col justify-start">
+			<h3 class="text-primary text-lg font-condensed font-bold uppercase mb-2">{cat}</h3>
+			<ul class="block list-none p-0 m-0">
+				{links.map(([page, label, iconName]) => (
+					<li class="hover:text-primary pb-1 flex items-center gap-1">
+						{iconName &&
+							<Icon name={iconName} class="inline-block min-w-6 text-center align-baseline" />
+						}
+						<NavLink href={page}>
+							{label}
+						</NavLink>
+					</li>
+				))}
+			</ul>
+		</nav>
+	))}
+</footer>

src/pages/beta/_components/GitHubEvents/ErrorBoundary.tsx

@@ -0,0 +1,38 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+
+interface ErrorBoundaryProps {
+	onError?: (error: Error, info: ErrorInfo) => void;
+	fallback?: ReactNode;
+  children?: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+export default class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+	state: ErrorBoundaryState = {
+		hasError: false
+	}
+
+	static getDerivedStateFromError(_: Error)
+	{
+		return { hasError: true };
+	}
+
+	componentDidCatch(
+		error: Error,
+		errorInfo: React.ErrorInfo)
+	{
+		this.props.onError?.(error, errorInfo);
+	}
+
+	render()
+	{
+		if (this.state.hasError) {
+			return this.props.fallback;
+		}
+
+		return this.props.children;
+	}
+}

src/pages/beta/_components/GitHubEvents/EventProcessors.tsx

@@ -0,0 +1,71 @@
+export const EventProcessors = [
+	{
+		type: "PushEvent",
+		process(
+			event: any,
+			repo: string)
+		{
+			const { actor, payload, created_at } = event;
+
+			return payload.commits.map((commit: any) => ({
+				id: commit.sha,
+				repo,
+				username: actor.display_login,
+				avatar: actor.avatar_url,
+				message: commit.message,
+				// you can get to the html_url value if you call another API, but to
+				// make things easier, just create that URL manually
+				link: commit.url
+					.replace("api.", "")
+					.replace("/repos", "")
+					.replace("/commits/", "/commit/"),
+				timestamp: created_at,
+			}));
+		}
+	},
+	{
+		type: "PullRequestEvent",
+		process(
+			event: any,
+			repo: string)
+		{
+			const {
+				id,
+				actor,
+				payload: { action, pull_request },
+				created_at
+			} = event;
+
+			return {
+				id,
+				repo,
+				username: actor.login,
+				avatar: actor.avatar_url,
+				message: <><strong>PR {action}:</strong> {pull_request.title}</>,
+				tooltip: `PR ${action}: ${pull_request.title}`,
+				link: pull_request.html_url,
+				timestamp: created_at,
+			};
+		}
+	},
+	{
+		type: "IssuesEvent",
+		process(
+			event: any,
+			repo: string)
+		{
+			const { id, actor, payload: { action, issue }, created_at } = event;
+
+			return {
+				id,
+				repo,
+				username: actor.login,
+				avatar: actor.avatar_url,
+				message: <><strong>Issue {action}:</strong> {issue.title}</>,
+				tooltip: `Issue ${action}: ${issue.title}`,
+				link: issue.html_url,
+				timestamp: created_at,
+			};
+		}
+	},
+];