Add beta version of GitHubEvents component that uses Tailwind

Tweak vertical spacing.

Author: fwextensions

src/pages/beta/components/CodeSummary.astro

@@ -0,0 +1,24 @@
+---
+import GitHubEvents from "../components/GitHubEvents/GitHubEvents";
+import TagOrnament from "./TagOrnament.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">
+	<h2 class="text-primary font-condensed font-semibold uppercase text-7xl mb-8 text-center">In the Code</h2>
+	<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

@@ -51,7 +51,7 @@ const columns = [
 			<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="pb-1 flex items-center gap-1">
+					<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" />
 						}

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,
+			};
+		}
+	},
+];

src/pages/beta/components/GitHubEvents/GitHubEventCard.tsx

@@ -0,0 +1,75 @@
+import { intlFormatDistance } from "date-fns/intlFormatDistance";
+import type { GitHubEvent } from "./getRecentEvents"; // Updated import path
+
+const MaxTooltipLength = 350;
+
+interface GitHubEventProps {
+	event: GitHubEvent;
+	now?: Date;
+}
+
+export default function GitHubEventCard({
+	event,
+	now = new Date() }: GitHubEventProps)
+{
+	const { repo, link, avatar, username, message, tooltip = message, timestamp } = event;
+	const messageTooltip = tooltip.length > MaxTooltipLength
+		? tooltip.slice(0, MaxTooltipLength) + "..."
+		: tooltip;
+
+	// Tailwind classes replacing GitHubEventCard.module.css
+	// Note: Colors like text-muted, bg-form-element, border-card-border, bg-dropdown-hover need to be defined in your tailwind.config.js
+	// Assuming default Tailwind colors for now, adjust as needed.
+	// The width calculation is complex and relies on CSS vars and container queries in the original.
+	// A fixed width or responsive grid approach might be better in Tailwind.
+	// Using min-width and aspect ratio from original for now.
+	return (
+		<a
+			href={link}
+			key={link}
+			target="_blank"
+			rel="noopener noreferrer"
+			className="
+				w-[calc((100cqw-2*theme(spacing.10)-1px)/3)]
+				block aspect-square p-4
+				text-center no-underline text-gray-600 dark:text-gray-400
+				flex flex-col items-center justify-between flex-shrink-0
+				bg-gray-100 dark:bg-gray-800
+				border border-gray-300 dark:border-gray-700
+				transition-colors duration-300 ease-in-out
+				hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-600 dark:hover:text-gray-400
+				snap-start
+				overflow-hidden break-words
+			"
+		>
+			<header className="flex flex-col items-center">
+				{/* Adjusted image classes */}
+				<img
+					src={avatar}
+					alt={`${username}'s avatar`}
+					className="w-14 h-14 aspect-square rounded-full mb-1"
+				/>
+				<h3 className="m-0 mb-1 text-base font-semibold">{username}</h3>
+			</header>
+			{/* Paragraph with line clamping */}
+			<p
+				title={messageTooltip}
+				className="text-sm leading-[1.2] m-0 overflow-hidden text-ellipsis break-words line-clamp-2 lg:line-clamp-3"
+				// break-words doesn't actually add word-break: break-word, which is needed to handle the long lines
+				style={{ wordBreak: "break-word" }}
+			>
+				{/* Apply opacity to strong tag if needed, e.g., <strong className="opacity-75"> */}
+				{message}
+			</p>
+			<footer className="text-xs  opacity-75">
+				<h4 className="mt-1 mb-0 font-bold">{repo}</h4>
+				<time
+					dateTime={timestamp}
+					title={new Date(timestamp).toLocaleString()}
+				>
+					{intlFormatDistance(timestamp, now)}
+				</time>
+			</footer>
+		</a>
+	);
+}

src/pages/beta/components/GitHubEvents/GitHubEvents.tsx

@@ -0,0 +1,49 @@
+import { Suspense, useState } from "react";
+import GitHubEventsList from "./GitHubEventsList"; // Updated import path
+import ErrorBoundary from "./ErrorBoundary"; // Updated import path
+import { GitHubIcon } from "./icons"; // Updated import path
+import { getRecentEvents } from "./getRecentEvents"; // Updated import path
+
+// Tailwind classes replacing GitHubEvents.module.css .loader
+const Loader = () => (
+	<div className="w-full aspect-[3/1] flex justify-center items-center text-gray-200 dark:text-gray-700">
+		{/* Pulse animation using Tailwind */}
+		<div className="h-[40%] animate-pulse">
+			<GitHubIcon />
+		</div>
+	</div>
+);
+
+interface GitHubEventsProps {
+	org: string;
+	sectionID?: string;
+}
+
+export default function GitHubEvents({
+	org,
+	sectionID = "" }: GitHubEventsProps)
+{
+	// NOTE: getRecentEvents must be adapted if it uses browser-specific APIs not available during SSR
+	// For Astro, consider fetching data within an Astro component and passing it as props,
+	// or using techniques like useEffect for client-side fetching if SSR isn't strictly needed for this data.
+	// Assuming getRecentEvents works or is adapted.
+	const [eventsPromise] = useState(() => getRecentEvents(org));
+
+	const handleError = () => {
+		// This relies on DOM manipulation, which might be less ideal in Astro/React.
+		// Consider passing a callback prop or using state management to hide the section.
+		const section = sectionID ? document.getElementById(sectionID) : null;
+
+		if (section) {
+			section.style.display = "none";
+		}
+	};
+
+	return (
+		<ErrorBoundary onError={handleError}>
+			<Suspense fallback={<Loader />}>
+				<GitHubEventsList eventsPromise={eventsPromise} />
+			</Suspense>
+		</ErrorBoundary>
+	);
+}