seo improvements
Build and Publish Docker Image / build (push) Successful in 52s
Build and Publish Docker Image / deploy (push) Successful in 2s

This commit is contained in:
2026-09-27 01:31:46 -04:00
parent bbbafe89c7
commit 7c37a72a5e
42 changed files with 1412 additions and 315 deletions
+21 -43
View File
@@ -2,58 +2,36 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- icons -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#000000" />
<!-- self-hosted font, declared in src/assets/main.css. preloading the
latin regular face keeps it off the discovery critical path -->
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet"
rel="preload"
href="/fonts/open-sans-latin-normal.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<!-- opengraph tags -->
<meta
property="og:image"
content="https://storage.alexav.gg/content/picturev2.jpg"
/>
<meta property="og:title" content="alex" />
<meta
property="og:description"
content="hi, i'm alex! i'm obsessed with the last of us and i do a lot of code things. about it tbh"
/>
<meta property="og:url" content="https://alexav.gg" />
<meta property="og:site_name" content="alex" />
<!-- images and live data come from these origins -->
<link rel="preconnect" href="https://storage.alexav.gg" crossorigin />
<link rel="dns-prefetch" href="https://api.alexav.gg" />
<!-- twitter tags -->
<meta name="twitter:title" content="alex" />
<meta
name="twitter:description"
content="hi, i'm alex! i'm obsessed with the last of us and i do a lot of code things. about it tbh"
/>
<meta name="twitter:url" content="https://alexav.gg" />
<meta
name="twitter:image"
content="https://storage.alexav.gg/content/picturev2.jpg"
/>
<meta name="twitter:card" content="summary" />
<!-- metadata -->
<meta name="title" content="alex" />
<meta
name="description"
content="hi, i'm alex! i'm obsessed with the last of us and i do a lot of code things. about it tbh"
/>
<meta
name="keywords"
content="alex frantz, frantz, alex, qa, javascript, html, react, python, java, alexavier frantz, alexavier, alexav, alexfrantz"
/>
<title>alex</title>
<script
defer
data-domain="alexav.gg"
src="https://metrics.alexav.gg/js/script.js"
src="https://metrics.alexav.gg/js/script.hash.outbound-links.js"
></script>
<!-- title, description, canonical, og/twitter and JSON-LD are injected
per route by src/utils/seo.ts. do not add page-level tags here, or
they will be duplicated on every url. -->
<!--app-head-->
</head>
<body>
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="A">
<rect width="32" height="32" rx="7" fill="#000000"/>
<path d="M8 25 L16 8 L24 25" fill="none" stroke="#bef264" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.6 19.4 H20.4" fill="none" stroke="#bef264" stroke-width="3.2" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 379 B

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+3 -1
View File
@@ -1,4 +1,6 @@
# allow all crawlers idc
User-Agent: *
Disallow:
Disallow:
Sitemap: https://alexav.gg/sitemap.xml
+17
View File
@@ -0,0 +1,17 @@
{
"name": "Alex Frantz",
"short_name": "Alex",
"description": "Senior QA engineer at Medal.tv, based in Western New York.",
"start_url": "/",
"display": "minimal-ui",
"background_color": "#000000",
"theme_color": "#000000",
"icons": [
{
"src": "/favicon.svg",
"sizes": "any",
"type": "image/svg+xml",
"purpose": "any"
}
]
}
+71 -6
View File
@@ -30,7 +30,24 @@ if (!isProduction) {
const compression = (await import("compression")).default;
const sirv = (await import("sirv")).default;
app.use(compression());
app.use(base, sirv(clientDir, { extensions: [] }));
app.use(
base,
sirv(clientDir, {
extensions: [],
setHeaders(res, pathname) {
if (pathname.startsWith("/assets/")) {
// vite hashes these filenames, so the content can never change
// under a given url
res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
} else if (pathname.startsWith("/fonts/")) {
// stable but unhashed, so cache for a while rather than forever
res.setHeader("Cache-Control", "public, max-age=2592000");
} else {
res.setHeader("Cache-Control", "public, max-age=3600");
}
},
}),
);
// a hashed asset that sirv did not find is genuinely gone, usually a stale
// cached document asking for a previous build. 404 it here, otherwise it
// falls through to the catch-all and answers a .js request with html
@@ -43,26 +60,74 @@ if (!isProduction) {
});
}
/** load the SSR bundle, from source in dev and from the build in production */
async function loadServerEntry() {
if (!isProduction) {
return await vite.ssrLoadModule("/src/entry-server.tsx");
}
return await import("./dist/server/entry-server.js");
}
/**
* Strip the deploy base from a request url, always leaving a rooted path.
* The previous `originalUrl.replace(base, "")` dropped the leading slash when
* base was "/", which would hand the router a relative location.
*/
function stripBase(originalUrl) {
if (!originalUrl) return "/";
if (base === "/") return originalUrl;
if (originalUrl.startsWith(base)) {
const rest = originalUrl.slice(base.length);
return rest.startsWith("/") ? rest : `/${rest}`;
}
return originalUrl;
}
// generated from the route table rather than checked in, so it cannot go stale
app.get(`${base.replace(/\/$/, "")}/sitemap.xml`, async (req, res) => {
try {
const { renderSitemap } = await loadServerEntry();
res
.status(200)
.set({
"Content-Type": "application/xml; charset=utf-8",
"Cache-Control": "public, max-age=3600",
})
.send(renderSitemap());
} catch (e) {
vite?.ssrFixStacktrace(e);
console.error(e.stack);
res.status(500).end();
}
});
app.use("*all", async (req, res) => {
try {
const url = req.originalUrl.replace(base, "");
const url = stripBase(req.originalUrl);
let template;
let render;
if (!isProduction) {
template = await fs.readFile(path.resolve(root, "index.html"), "utf-8");
template = await vite.transformIndexHtml(url, template);
render = (await vite.ssrLoadModule("/src/entry-server.tsx")).render;
} else {
template = templateHtml;
render = (await import("./dist/server/entry-server.js")).render;
}
const { render } = await loadServerEntry();
const rendered = await render(url);
const html = template
?.replace("<!--app-head-->", rendered.head ?? "")
.replace("<!--app-html-->", rendered.html ?? "");
res.status(200).set({ "Content-Type": "text/html" }).send(html);
res
.status(rendered.statusCode ?? 200)
.set({
"Content-Type": "text/html",
// short shared cache window; the page embeds live-ish data
"Cache-Control":
"public, max-age=0, s-maxage=60, stale-while-revalidate=300",
})
.send(html);
} catch (e) {
vite?.ssrFixStacktrace(e);
console.log(e.stack);
+59 -1
View File
@@ -1,7 +1,65 @@
@import "tailwindcss";
/* Open Sans, self-hosted. previously a render-blocking stylesheet request to
fonts.googleapis.com plus a second hop to fonts.gstatic.com for the files.
latin + latin-ext only; regenerate from Google Fonts if more subsets are
ever needed. */
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 300 800;
font-display: swap;
src: url("/fonts/open-sans-latin-ext-italic.woff2") format("woff2");
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 300 800;
font-display: swap;
src: url("/fonts/open-sans-latin-italic.woff2") format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url("/fonts/open-sans-latin-ext-normal.woff2") format("woff2");
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url("/fonts/open-sans-latin-normal.woff2") format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
body {
font-family: "Open Sans", sans-serif;
font-family:
"Open Sans",
ui-sans-serif,
system-ui,
-apple-system,
"Segoe UI",
sans-serif;
background-color: black;
::-webkit-scrollbar {
+17 -10
View File
@@ -1,18 +1,23 @@
import ErrorState from "./ErrorState";
import { useState, useEffect } from "react";
import type { BlogPost } from "../utils/types";
import { useInitialData } from "../utils/initialData";
import { PROFILES } from "../utils/site";
export default function BlogRow() {
const [post, setPost] = useState<BlogPost | null>(null);
// seeded from the SSR payload so the post is in the served HTML, then
// refreshed on the client to pick up anything published since
const { posts } = useInitialData();
const [post, setPost] = useState<BlogPost | null>(posts?.[0] ?? null);
useEffect(() => {
fetch("https://blog.alexav.gg/api/posts", {
fetch(`${PROFILES.blog}/api/posts`, {
method: "GET",
}).then(async (res) => {
if (res.ok) {
try {
const data = await res.json();
setPost(data[0]);
if (Array.isArray(data) && data[0]) setPost(data[0]);
} catch (e) {
console.error("An error occurred fetching blog posts!", e);
}
@@ -22,18 +27,20 @@ export default function BlogRow() {
if (post) {
return (
<div>
<article>
<a
className="space-y-1 hover:underline"
href={`https://blog.alexav.gg/post/${post.slug}`}
className="block space-y-1 hover:underline"
href={`${PROFILES.blog}/post/${post.slug}`}
>
<h1 className="font-semibold">{post?.title}</h1>
<p className="text-sm">{post?.description}</p>
<h3 className="font-semibold">{post.title}</h3>
<p className="text-sm">{post.description}</p>
<p className="text-xs opacity-50">
Posted {new Date(post.createdAt).toLocaleDateString()}
<time dateTime={post.createdAt}>
Posted {new Date(post.createdAt).toLocaleDateString()}
</time>
</p>
</a>
</div>
</article>
);
} else return <ErrorState label="nothing posted yet :(" />;
}
+32
View File
@@ -0,0 +1,32 @@
import { useState } from "react";
import { AUTHOR_EMAIL } from "../utils/site";
/**
* A real `mailto:` anchor. The old `href="#"` + onClick version was a crawl
* dead-end and unusable by keyboard, so the address is the href now and the
* copy-to-clipboard is layered on top as an enhancement.
*/
export default function EmailLink({ className = "" }: { className?: string }) {
const [copied, setCopied] = useState(false);
return (
<a
href={`mailto:${AUTHOR_EMAIL}`}
className={className}
title="Click to copy"
onClick={(e) => {
if (!navigator.clipboard) return;
e.preventDefault();
navigator.clipboard.writeText(AUTHOR_EMAIL).then(
() => {
setCopied(true);
setTimeout(() => setCopied(false), 1500);
},
() => {},
);
}}
>
{copied ? "copied!" : AUTHOR_EMAIL}
</a>
);
}
+5 -9
View File
@@ -1,14 +1,10 @@
import EmailLink from "./EmailLink";
export default function Footer() {
return (
<div className="w-full flex justify-between">
<a
href="#"
onClick={() => navigator.clipboard.writeText("alex@alexav.gg")}
className="text-xs opacity-85 hover:underline"
>
alex@alexav.gg
</a>
<footer className="w-full flex justify-between">
<EmailLink className="text-xs opacity-85 hover:underline" />
<p className="text-xs opacity-85">&copy; 2026 Alex Frantz</p>
</div>
</footer>
);
}
+27 -20
View File
@@ -1,32 +1,39 @@
import { Link } from "react-router-dom";
import EmailLink from "./EmailLink";
import { PROFILES } from "../utils/site";
export default function Header() {
return (
<div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-4">
<h1 className="font-bold">
Alex <span className="font-normal text-blue-500">/</span> dev + QA
</h1>
<div className="flex gap-3 text-sm sm:text-base">
<header className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-4">
{/* site chrome, not the page topic — this was an <h1> on every page */}
<p className="font-bold">
<Link to="/">
Alex <span className="font-normal text-blue-500">/</span> dev + QA
</Link>
</p>
<nav
aria-label="Site"
className="flex flex-wrap gap-3 text-sm sm:text-base"
>
<Link to="/projects" className="hover:underline">
Projects
</Link>
<Link to="/sports" className="hover:underline">
Sports
</Link>
<a
href="https://github.com/azpha"
href={PROFILES.github}
target="_blank"
rel="me noopener noreferrer"
className="hover:underline"
>
GitHub
</a>
<a
href="https://blog.alexav.gg/"
target="_blank"
className="hover:underline"
>
<a href={PROFILES.blog} rel="me" className="hover:underline">
Blog
</a>
<a
href="#"
className="hover:underline"
onClick={() => navigator.clipboard.writeText("alex@alexav.gg")}
>
alex@alexav.gg
</a>
</div>
</div>
<EmailLink className="hover:underline" />
</nav>
</header>
);
}
+16
View File
@@ -0,0 +1,16 @@
import type { ReactNode } from "react";
import { InitialDataContext, type InitialData } from "../utils/initialData";
export default function InitialDataProvider({
value,
children,
}: {
value: InitialData;
children: ReactNode;
}) {
return (
<InitialDataContext.Provider value={value}>
{children}
</InitialDataContext.Provider>
);
}
+1 -1
View File
@@ -3,7 +3,7 @@ import Header from "./Header";
export default function Layout({ children }: { children: ReactNode }) {
return (
<div className="bg-black text-white min-h-screen w-full max-w-[42rem] 2xl:max-w-[48rem] mx-auto select-none px-5">
<div className="bg-black text-white min-h-screen w-full max-w-[42rem] 2xl:max-w-[48rem] mx-auto px-5">
<Header />
<div className="relative">{children}</div>
</div>
+21 -29
View File
@@ -1,44 +1,36 @@
interface ProjectCardProps {
title: string;
description: string;
link: string;
pills: string[];
}
interface PillProps {
name: string;
import { Link } from "react-router-dom";
import type { Project } from "../data/projects";
function Pill({ name }: { name: string }) {
return (
<div className="bg-zinc-500 rounded-lg text-xs p-1 font-semibold">
{name}
</div>
);
}
export default function ProjectCard({
title,
description,
link,
pills,
}: ProjectCardProps) {
const Pill = ({ name }: PillProps) => {
return (
<div className="bg-zinc-500 rounded-lg text-xs p-1 font-semibold">
{name}
</div>
);
};
export default function ProjectCard({ project }: { project: Project }) {
return (
<div className="bg-neutral-800 rounded-lg p-2 border border-white">
<div className="flex items-start justify-between gap-3">
<h1 className="text-base font-bold">{title}</h1>
<a href={link} target="_blank" className="shrink-0">
<h3 className="text-base font-bold">
<Link to={`/projects/${project.slug}`} className="hover:underline">
{project.title}
</Link>
</h3>
<Link to={`/projects/${project.slug}`} className="shrink-0">
<button className="bg-gray-500 border border-zinc-500 rounded-lg px-2 py-1 text-sm whitespace-nowrap">
View &gt;
</button>
</a>
</Link>
</div>
<div className="space-y-2">
<p className="text-sm">{description}</p>
<p className="text-sm">{project.description}</p>
<div className="flex flex-wrap gap-2">
{pills.map((v, k) => {
return <Pill key={k} name={v} />;
})}
{project.pills.map((v) => (
<Pill key={v} name={v} />
))}
</div>
</div>
</div>
+4 -1
View File
@@ -16,7 +16,10 @@ export default function PlayerCell({ player }: { player: NFLPlayer | null }) {
return (
<div className="flex items-center gap-2">
<div>
<h1 className="font-semibold text-base">{player.full_name}</h1>
{/* a player name is data, not a document section — this was an <h1>,
and with a full roster per team it produced most of the page's
heading elements */}
<p className="font-semibold text-base">{player.full_name}</p>
<p>
{player?.position} · {player?.team} {injuryStatus && "·"}{" "}
{player?.injury_status && (
+10 -4
View File
@@ -8,20 +8,26 @@ export function TeamRow({
roster: NFLMatchupState;
isWinning?: boolean;
}) {
const teamName = roster?.owner.metadata.team_name;
return (
<div>
<div className="flex flex-wrap mb-2">
<img
width="30"
className="rounded-lg"
height="30"
loading="lazy"
decoding="async"
alt={teamName ? `${teamName} avatar` : ""}
className="rounded-lg h-[30px] object-cover"
src={roster?.owner.metadata.avatar}
/>
<h1 className="flex justify-center items-center mx-2 font-semibold">
{roster?.owner.metadata.team_name} |
<h4 className="flex justify-center items-center mx-2 font-semibold">
{teamName} |
<span className={`${isWinning && "text-green-500"} pl-1`}>
{roster?.points}pt
</span>
</h1>
</h4>
</div>
<div className="space-x-2 whitespace-nowrap overflow-x-auto pb-2">
+7 -3
View File
@@ -1,6 +1,5 @@
import { useState, useEffect } from "react";
import ErrorState from "../ErrorState";
import { Gamepad } from "lucide-react";
import { PROFILES } from "../../utils/site";
type GameObject = {
currentlyPlaying: CurrentlyPlaying;
@@ -35,7 +34,12 @@ export default function GameComponent() {
}, []);
return (
<a href="https://medal.tv/u/alexav" target="_blank">
<a
href={PROFILES.medal}
target="_blank"
rel="me noopener noreferrer"
aria-label="My Medal.tv profile"
>
<div className="bg-white p-2 rounded-lg w-full min-h-full flex justify-center text-black">
<div className="flex justify-center items-center">
<div className="px-2">
+20 -8
View File
@@ -24,16 +24,28 @@ export default function MusicComponent() {
}, []);
return (
<a href="https://koito.fntz.net" target="_blank">
<a
href="https://koito.fntz.net"
target="_blank"
rel="noopener noreferrer"
aria-label="My listening history"
>
<div className="bg-white p-2 rounded-lg w-full min-h-full text-black">
<div className="flex justify-center items-center">
<img
src={
music?.images.filter((v) => v.size === "medium")[0]["url"] ||
music?.images[0].url
}
className="border-green-500 border-2"
/>
{music && (
<img
src={
music.images.filter((v) => v.size === "medium")[0]["url"] ||
music.images[0].url
}
alt={`${music.title} by ${music.artist} album artwork`}
width={64}
height={64}
loading="lazy"
decoding="async"
className="border-green-500 border-2 h-16 w-16 object-cover"
/>
)}
<div className="px-2">
<p className="text-sm font-semibold">{music?.title}</p>
<p className="text-xs">{music?.artist}</p>
+68 -22
View File
@@ -1,31 +1,77 @@
const images = [
"https://storage.alexav.gg/content/1b81a43e-7b6b-4969-944a-f2f334405477.jpg",
"https://storage.alexav.gg/content/91bce3da-36c3-497f-aaa9-b782d60c9cd7.jpg",
"https://storage.alexav.gg/content/8ce1c14f-864e-4915-bff4-4cbf73247023.jpg",
"https://storage.alexav.gg/content/6687d643-fb69-42f6-8480-51869cdb7efb.jpg",
"https://storage.alexav.gg/content/f8252684-eb5a-4344-baa1-46f4eab46916.jpg",
"https://storage.alexav.gg/content/363308c8-ecb6-4b2f-8dba-1c7f7f26f087.jpg",
"https://storage.alexav.gg/content/1aca5645-0d3d-43bf-a7b7-bd34bcc374b4.png",
"https://storage.alexav.gg/content/1f822215-0768-424d-893a-13bcd10aa98b.jpg",
"https://storage.alexav.gg/content/de890eaf-fc73-42a4-9fbe-a62313394a4c.jpg",
"https://storage.alexav.gg/content/d057af80-3d03-45ca-88b2-680c1e7c63c1.jpg",
"https://storage.alexav.gg/content/1d717aab-3058-405a-b04d-324d7ab3e658.jpg",
"https://storage.alexav.gg/content/2f36c1dd-eaf8-4fd3-a3cd-1d25fe8f5a07.jpg",
// alt text lives next to each src so descriptions cannot drift from the image.
// the alt values below are placeholders — replace them with what is actually
// in each photo, since that is what makes them findable in image search
const images: { src: string; alt: string }[] = [
{
src: "https://storage.alexav.gg/content/1b81a43e-7b6b-4969-944a-f2f334405477.jpg",
alt: "A photo from Alex's camera roll",
},
{
src: "https://storage.alexav.gg/content/91bce3da-36c3-497f-aaa9-b782d60c9cd7.jpg",
alt: "A photo from Alex's camera roll",
},
{
src: "https://storage.alexav.gg/content/8ce1c14f-864e-4915-bff4-4cbf73247023.jpg",
alt: "A photo from Alex's camera roll",
},
{
src: "https://storage.alexav.gg/content/6687d643-fb69-42f6-8480-51869cdb7efb.jpg",
alt: "A photo from Alex's camera roll",
},
{
src: "https://storage.alexav.gg/content/f8252684-eb5a-4344-baa1-46f4eab46916.jpg",
alt: "A photo from Alex's camera roll",
},
{
src: "https://storage.alexav.gg/content/363308c8-ecb6-4b2f-8dba-1c7f7f26f087.jpg",
alt: "A photo from Alex's camera roll",
},
{
src: "https://storage.alexav.gg/content/1aca5645-0d3d-43bf-a7b7-bd34bcc374b4.png",
alt: "A photo from Alex's camera roll",
},
{
src: "https://storage.alexav.gg/content/1f822215-0768-424d-893a-13bcd10aa98b.jpg",
alt: "A photo from Alex's camera roll",
},
{
src: "https://storage.alexav.gg/content/de890eaf-fc73-42a4-9fbe-a62313394a4c.jpg",
alt: "A photo from Alex's camera roll",
},
{
src: "https://storage.alexav.gg/content/d057af80-3d03-45ca-88b2-680c1e7c63c1.jpg",
alt: "A photo from Alex's camera roll",
},
{
src: "https://storage.alexav.gg/content/1d717aab-3058-405a-b04d-324d7ab3e658.jpg",
alt: "A photo from Alex's camera roll",
},
{
src: "https://storage.alexav.gg/content/2f36c1dd-eaf8-4fd3-a3cd-1d25fe8f5a07.jpg",
alt: "A photo from Alex's camera roll",
},
];
export default function PictureCarousel() {
return (
<div className="my-2 grid grid-cols-2 sm:grid-cols-3 gap-2">
{images.map((v, k) => {
<ul className="my-2 grid grid-cols-2 sm:grid-cols-3 gap-2 list-none">
{images.map((image, k) => {
return (
<img
key={k}
loading="lazy"
src={v}
className="w-full h-24 object-cover rounded-md"
/>
<li key={image.src}>
<img
// the first row is above the fold on most viewports, so lazy
// loading it would only delay the LCP candidate
loading={k < 3 ? "eager" : "lazy"}
decoding="async"
src={image.src}
alt={image.alt}
width={320}
height={96}
className="w-full h-24 object-cover rounded-md"
/>
</li>
);
})}
</div>
</ul>
);
}
+13 -19
View File
@@ -30,7 +30,15 @@ function TeamRow({
return (
<div className="flex flex-row justify-between">
<div className="flex flex-row py-2 space-x-2">
<img width={width} className="object-cover h-20" src={homeTeam.logo} />
<img
width={width}
height={80}
loading="lazy"
decoding="async"
alt={`${homeTeam.name} logo`}
className="object-cover h-20"
src={homeTeam.logo}
/>
<img
onClick={() => {
if (
@@ -42,6 +50,10 @@ function TeamRow({
}
}}
width={width}
height={80}
loading="lazy"
decoding="async"
alt={`${awayTeam.name} logo`}
className="object-cover h-20"
src={awayTeam.logo}
/>
@@ -84,17 +96,7 @@ export default function ScoreModule() {
console.error("Failed to fetch Sabres score; " + res.statusText);
}
}
async function fetchYankeesScore() {
const res = await fetch("https://api.alexav.gg/v4/sports/scores/yankees");
if (res.ok) {
const data = await res.json();
setYankeesScore(data);
} else {
console.error("Failed to fetch Yankees score; " + res.statusText);
}
}
fetchYankeesScore();
fetchBillsScore();
fetchSabresScore();
}, []);
@@ -119,14 +121,6 @@ export default function ScoreModule() {
venue={billsScore.venue}
/>
)}
{yankeesScore?.homeTeam && yankeesScore.awayTeam && (
<TeamRow
homeTeam={yankeesScore.homeTeam}
awayTeam={yankeesScore.awayTeam}
venue={yankeesScore.venue}
date={yankeesScore.date}
/>
)}
{warpath && (
<audio
+10 -1
View File
@@ -40,7 +40,11 @@ export default function StatModule() {
if (!failedFetch) {
if (data) {
return (
<a href={`https://tracker.alexav.gg/info/${data?.id}`} target="_blank">
<a
href={`https://tracker.alexav.gg/info/${data?.id}`}
target="_blank"
rel="noopener noreferrer"
>
<div className="flex flex-col bg-black border border-black">
<div className="flex">
<div className="pl-2 pr-1">
@@ -61,6 +65,11 @@ export default function StatModule() {
<img
className="w-[50px] h-[50px] object-cover"
src={data?.image}
alt={data?.title ? `${data.title} cover art` : ""}
width={50}
height={50}
loading="lazy"
decoding="async"
/>
</div>
</div>
+70
View File
@@ -0,0 +1,70 @@
export type Project = {
slug: string;
title: string;
/** one-line summary, used on cards and as the meta description */
description: string;
/** where the source lives */
link: string;
pills: string[];
/** paragraphs of prose for the detail page */
body: string[];
};
export const PROJECTS: Project[] = [
{
slug: "led-matrix-scoreboard",
title: "LED Matrix Scoreboard",
description:
"A physical scoreboard driven by an LED matrix, pulls live sports data and renders pixel by pixel.",
link: "https://git.alexav.gg/alex/scoreboard",
pills: ["Python", "Raspberry Pi", "Hardware"],
body: [
"I wanted live scores on a wall instead of on a phone, so I built a physical scoreboard: a Raspberry Pi driving an RGB LED matrix, polling live sports data and drawing the result pixel by pixel.",
"The interesting constraint is the display itself. An LED matrix has no text rendering, no layout engine, and very few pixels to spend, so every score, team abbreviation, and clock has to be composed by hand and kept legible from across a room. The Python service handles fetching and caching the game state, then hands a frame to the matrix driver.",
"Written in Python and running on a Raspberry Pi. The source is on my Gitea instance if you want to build one.",
],
},
{
slug: "subber",
title: "Subber",
description:
"Keeps track of your subscriptions and generates clear metrics for you to manage.",
link: "https://github.com/azpha/subber",
pills: ["TypeScript", "Tailwind", "Prisma"],
body: [
"Subber tracks recurring subscriptions and turns them into metrics you can actually act on — what you are paying monthly versus annually, and where the money is going.",
"The problem with most subscription trackers is that they are a list. A list tells you what you signed up for; it does not tell you what it costs you over a year, or which renewals are about to land in the same week. Subber is built around the aggregate view first and the list second.",
"TypeScript throughout, Prisma for the data layer, and Tailwind for the interface.",
],
},
{
slug: "snapchat-memory-extractor",
title: "Snapchat Memory Extractor",
description:
"Extracts your Snapchat memories from your data export in a cleaner format than their horrible index.html.",
link: "https://github.com/azpha/snapchat-memory-extractor",
pills: ["Python", "Automation"],
body: [
"When you request your data from Snapchat, your memories arrive as an enormous index.html full of links rather than as files you can actually keep. This tool takes that export and pulls the memories out into a sane folder of real media files.",
"It is the kind of small, unglamorous automation that saves an afternoon of clicking. Point it at the export, let it walk the index, and it resolves and downloads each memory for you.",
"Written in Python with no heavy dependencies, so it runs anywhere you can get a Python interpreter.",
],
},
{
slug: "homelab",
title: "Homelab",
description:
"My tinkering sandbox. Full CI/CD pipeline for people to learn & take inspiration from.",
link: "https://git.alexav.gg/alex/homelab",
pills: ["Docker", "Ansible", "Python", "Automation"],
body: [
"My homelab is where everything else on this site actually runs — this website, my Gitea instance, my analytics, my personal API. The whole thing is defined as code and deployed through its own CI/CD pipeline.",
"I keep the repository public because homelab writeups tend to stop at the hardware photos, and the useful part is the boring middle: how services get configured, how deploys happen, how it recovers when something breaks. Docker for the services, Ansible for the configuration, Python for the glue.",
"Take whatever is useful. It is a sandbox, so expect it to change.",
],
},
];
export function findProject(slug: string | undefined) {
return PROJECTS.find((p) => p.slug === slug);
}
+10 -1
View File
@@ -2,10 +2,19 @@ import { hydrateRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./assets/main.css";
import App from "./pages/App.tsx";
import InitialDataProvider from "./components/InitialDataProvider";
import { INITIAL_DATA_GLOBAL, type InitialData } from "./utils/initialData";
const initialData: InitialData =
(window as unknown as Record<string, InitialData | undefined>)[
INITIAL_DATA_GLOBAL
] ?? {};
hydrateRoot(
document.getElementById("root")!,
<BrowserRouter>
<App />
<InitialDataProvider value={initialData}>
<App />
</InitialDataProvider>
</BrowserRouter>,
);
+45 -9
View File
@@ -1,17 +1,53 @@
import { renderToString } from "react-dom/server";
import * as RouterExports from "react-router-dom";
import App from "./pages/App";
import { StaticRouter } from "react-router-dom";
import { resolveMeta, normalizePath } from "./utils/resolveMeta";
import { renderHead } from "./utils/seo";
import { fetchPosts } from "./utils/blogFeed";
import { sitemapPaths } from "./routes";
import { absoluteUrl } from "./utils/site";
import InitialDataProvider from "./components/InitialDataProvider";
import { serializeInitialData, type InitialData } from "./utils/initialData";
// Vite's SSR runner resolves react-router-dom to its CommonJS build, so the
// named exports land on `.default`; fall back to the namespace when not.
const { StaticRouter } =
(RouterExports as { default?: typeof RouterExports }).default ?? RouterExports;
export async function render(url: string) {
const location = normalizePath(url);
const { meta, status } = resolveMeta(location);
// fetched here rather than in a useEffect so the content is in the served
// html. memoized in blogFeed, and it never throws.
const posts = await fetchPosts();
const data: InitialData = { posts: posts.slice(0, 3) };
export function render(url: string) {
const html = renderToString(
<StaticRouter location={url}>
<App />
<StaticRouter location={location}>
<InitialDataProvider value={data}>
<App />
</InitialDataProvider>
</StaticRouter>,
);
return { html };
return {
html,
// the data script goes in the head so it runs before the deferred client
// module reads it, and so it cannot cause a hydration mismatch inside #root
head: `${renderHead(meta)}\n ${serializeInitialData(data)}`,
statusCode: status,
};
}
/**
* sitemap.xml, generated from the same route table the router uses, so it can
* never list a url that does not exist or miss one that does. No lastmod:
* fabricated dates are worse than none, and Google ignores unreliable ones.
*/
export function renderSitemap() {
const urls = sitemapPaths()
.map((path) => ` <url><loc>${absoluteUrl(path)}</loc></url>`)
.join("\n");
return `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${urls}
</urlset>
`;
}
+32 -114
View File
@@ -1,122 +1,40 @@
import { useEffect } from "react";
import { Routes, Route, useLocation } from "react-router-dom";
import Layout from "../components/Layout";
import ProjectCard from "../components/ProjectCard";
import FantasyStatus from "../components/FantasyStatus";
import PictureCarousel from "../components/modules/PictureCarousel";
import Footer from "../components/Footer";
import BlogRow from "../components/BlogRow";
import GameComponent from "../components/info/GameComponent";
import MusicComponent from "../components/info/MusicComponent";
import { routes } from "../routes";
import { resolveMeta } from "../utils/resolveMeta";
/**
* SSR sets the title in the document head; this keeps it correct after a
* client-side navigation, which never re-runs that head injection.
*/
function TitleSync() {
const { pathname } = useLocation();
useEffect(() => {
const { meta } = resolveMeta(pathname);
document.title = meta.title;
const canonical = document.querySelector<HTMLLinkElement>(
'link[rel="canonical"]',
);
if (canonical) {
canonical.href = new URL(meta.path, window.location.origin).href;
}
}, [pathname]);
return null;
}
export default function App() {
return (
<Layout>
<main className="my-12 sm:my-20">
<div className="py-2">
<p className="opacity-85 text-sm text-left">HI, I'M ALEX</p>
<h1 className="text-3xl sm:text-4xl text-balance py-2">
I write software sometimes, then I spend twice as long breaking it
</h1>
</div>
<div className="py-2 space-y-6">
<p>
My day job is Senior QA at{" "}
<a
className="text-lime-300 hover:underline"
href="https://medal.tv/u/alexav"
target="_blank"
>
Medal.tv
</a>{" "}
(
<a
href="https://medal.tv/careers"
target="_blank"
className="underline"
>
we're hiring!
</a>
), then by night I play with my homelab rack or write some mediocre
JavaScript.
</p>
<p>
Based in Western New York (go bills, go sabres). Working on learning
Java, C#. Pointless software for funzies is my passion.
</p>
</div>
<hr className="my-4 border-zinc-800" />
<p className="opacity-85 text-sm text-left pb-2 underline">
<a href="https://blog.alexav.gg" target="_blank">
LATEST BLOG POST
</a>
</p>
<BlogRow />
<hr className="my-4 border-zinc-800" />
<p className="opacity-85 text-sm text-left pb-2">THINGS I'VE BUILT</p>
<div className="my-2 space-y-2">
<ProjectCard
title={"LED Matrix Scoreboard"}
description={
"A physical scoreboard driven by an LED matrix, pulls live sports data and renders pixel by pixel."
}
link="https://git.alexav.gg/alex/scoreboard"
pills={["Python", "Raspberry Pi", "Hardware"]}
/>
<ProjectCard
title={"Subber"}
description={
"Keeps track on your subscriptions and generates clear metrics for you to manage."
}
link="https://github.com/azpha/subber"
pills={["TypeScript", "Tailwind", "Prisma"]}
/>
<ProjectCard
title={"Snapchat Memory Extractor"}
description={
"Extracts your Snapchat memories from your data export in a cleaner format than their horrible index.html."
}
link="https://github.com/azpha/snapchat-memory-extractor"
pills={["Python", "Automation"]}
/>
<ProjectCard
title={"Homelab"}
description={
"My tinkering sandbox. Full CI/CD pipeline for people to learn & take inspiration from."
}
link="https://git.alexav.gg/alex/homelab"
pills={["Docker", "Ansible", "Python", "Automation"]}
/>
</div>
<hr className="my-4 border-zinc-800" />
<p className="opacity-85 text-sm text-left pb-2">MY ACTIVITIES</p>
<div className="grid sm:grid-cols-2 grid-cols-1 gap-2">
<GameComponent />
<MusicComponent />
</div>
<div className="my-2 space-y-6">
<div>
<h1 className="text-sm opacity-85 font-semibold">Fantasy</h1>
<FantasyStatus />
</div>
<div>
<h1 className="text-sm opacity-85 font-semibold">
My Life, Pictured
</h1>
<PictureCarousel />
</div>
</div>
<hr className="my-4 border-zinc-800" />
<Footer />
</main>
<TitleSync />
<Routes>
{routes.map((route) => (
<Route key={route.path} path={route.path} element={route.element} />
))}
</Routes>
</Layout>
);
}
+116
View File
@@ -0,0 +1,116 @@
import { Link } from "react-router-dom";
import ProjectCard from "../components/ProjectCard";
import FantasyStatus from "../components/FantasyStatus";
import PictureCarousel from "../components/modules/PictureCarousel";
import Footer from "../components/Footer";
import BlogRow from "../components/BlogRow";
import GameComponent from "../components/info/GameComponent";
import MusicComponent from "../components/info/MusicComponent";
import EmailLink from "../components/EmailLink";
import { PROJECTS } from "../data/projects";
import { PROFILES } from "../utils/site";
export default function Home() {
return (
<main className="my-12 sm:my-20">
<div className="py-2">
<p className="opacity-85 text-sm text-left">HI, I'M ALEX</p>
<h1 className="text-3xl sm:text-4xl text-balance py-2">
I write software sometimes, then I spend twice as long breaking it
</h1>
</div>
<div className="py-2 space-y-6">
<p>
My day job is Senior QA at{" "}
<a
className="text-lime-300 hover:underline"
href={PROFILES.medal}
target="_blank"
rel="me noopener noreferrer"
>
Medal.tv
</a>{" "}
(
<a
href="https://medal.tv/careers"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
we're hiring!
</a>
), then by night I play with my{" "}
<Link to="/projects/homelab" className="underline">
homelab rack
</Link>{" "}
or write some mediocre JavaScript.
</p>
<p>
Based in Western New York (go bills, go sabres). Working on learning
Java, C#. Pointless software for funzies is my passion. You can see{" "}
<Link to="/sports" className="underline">
what my teams are doing
</Link>{" "}
or reach me at <EmailLink className="underline" />.
</p>
</div>
<hr className="my-4 border-zinc-800" />
<section aria-labelledby="latest-post">
<h2
id="latest-post"
className="opacity-85 text-sm text-left pb-2 underline"
>
<a href={PROFILES.blog} rel="me">
LATEST BLOG POST
</a>
</h2>
<BlogRow />
</section>
<hr className="my-4 border-zinc-800" />
<section aria-labelledby="things-ive-built">
<h2 id="things-ive-built" className="opacity-85 text-sm text-left pb-2">
THINGS I'VE BUILT
</h2>
<div className="my-2 space-y-2">
{PROJECTS.map((project) => (
<ProjectCard key={project.slug} project={project} />
))}
</div>
</section>
<hr className="my-4 border-zinc-800" />
<section aria-labelledby="my-activities">
<h2 id="my-activities" className="opacity-85 text-sm text-left pb-2">
MY ACTIVITIES
</h2>
<div className="grid sm:grid-cols-2 grid-cols-1 gap-2">
<GameComponent />
<MusicComponent />
</div>
<div className="my-2 space-y-6">
<div>
<h3 className="text-sm opacity-85 font-semibold">Fantasy</h3>
<FantasyStatus />
</div>
<div>
<h3 className="text-sm opacity-85 font-semibold">
My Life, Pictured
</h3>
<PictureCarousel />
</div>
</div>
</section>
<hr className="my-4 border-zinc-800" />
<Footer />
</main>
);
}
+41
View File
@@ -0,0 +1,41 @@
import { Link } from "react-router-dom";
import Footer from "../components/Footer";
export default function NotFound() {
return (
<main className="my-12 sm:my-20">
<div className="py-2">
<p className="opacity-85 text-sm text-left">404</p>
<h1 className="text-3xl sm:text-4xl text-balance py-2">
There's nothing here
</h1>
<p className="py-2">
That page doesn't exist — it may have moved, or it may never have
existed in the first place.
</p>
</div>
<ul className="py-2 space-y-1 list-disc list-inside">
<li>
<Link to="/" className="underline">
Home
</Link>
</li>
<li>
<Link to="/projects" className="underline">
Projects
</Link>
</li>
<li>
<Link to="/sports" className="underline">
Sports
</Link>
</li>
</ul>
<hr className="my-4 border-zinc-800" />
<Footer />
</main>
);
}
+29 -5
View File
@@ -1,10 +1,34 @@
import { Link } from "react-router-dom";
import PictureCarousel from "../components/modules/PictureCarousel";
export default function PicturesPage() {
import Footer from "../components/Footer";
export default function Pictures() {
return (
<div className="p-2 flex flex-col justify-center">
<div className="h-96 w-full overflow-y-auto">
<PictureCarousel />
<main className="my-12 sm:my-20">
<div className="py-2">
<p className="opacity-85 text-sm text-left">MY LIFE, PICTURED</p>
<h1 className="text-3xl sm:text-4xl text-balance py-2">Pictures</h1>
<p className="py-2">
A rolling selection of photos from my camera roll — Western New York,
the homelab, and whatever else I pointed a camera at.
</p>
</div>
</div>
<hr className="my-4 border-zinc-800" />
<PictureCarousel />
<hr className="my-4 border-zinc-800" />
<p className="text-sm">
<Link to="/" className="underline">
&lt; Back home
</Link>
</p>
<hr className="my-4 border-zinc-800" />
<Footer />
</main>
);
}
+68
View File
@@ -0,0 +1,68 @@
import { Link, useParams } from "react-router-dom";
import Footer from "../components/Footer";
import NotFound from "./NotFound";
import { findProject } from "../data/projects";
export default function ProjectDetail() {
const { slug } = useParams();
const project = findProject(slug);
if (!project) return <NotFound />;
return (
<main className="my-12 sm:my-20">
<nav aria-label="Breadcrumb" className="py-2">
<p className="opacity-85 text-sm text-left">
<Link to="/projects" className="hover:underline">
PROJECTS
</Link>
</p>
</nav>
<div className="py-2">
<h1 className="text-3xl sm:text-4xl text-balance py-2">
{project.title}
</h1>
<div className="flex flex-wrap gap-2 py-2">
{project.pills.map((pill) => (
<div
key={pill}
className="bg-zinc-500 rounded-lg text-xs p-1 font-semibold"
>
{pill}
</div>
))}
</div>
</div>
<div className="py-2 space-y-6">
{project.body.map((paragraph, i) => (
<p key={i}>{paragraph}</p>
))}
</div>
<div className="py-4">
<a
href={project.link}
target="_blank"
rel="noopener noreferrer"
className="text-lime-300 hover:underline"
>
View the source &gt;
</a>
</div>
<hr className="my-4 border-zinc-800" />
<p className="text-sm">
<Link to="/projects" className="underline">
&lt; All projects
</Link>
</p>
<hr className="my-4 border-zinc-800" />
<Footer />
</main>
);
}
+45
View File
@@ -0,0 +1,45 @@
import { Link } from "react-router-dom";
import ProjectCard from "../components/ProjectCard";
import Footer from "../components/Footer";
import { PROJECTS } from "../data/projects";
export default function Projects() {
return (
<main className="my-12 sm:my-20">
<div className="py-2">
<p className="opacity-85 text-sm text-left">THINGS I'VE BUILT</p>
<h1 className="text-3xl sm:text-4xl text-balance py-2">Projects</h1>
<p className="py-2">
Mostly pointless software, built for the fun of building it — a
physical scoreboard, a subscription tracker, a data-export scraper,
and the homelab that runs all of this.
</p>
</div>
<hr className="my-4 border-zinc-800" />
<section aria-labelledby="all-projects">
<h2 id="all-projects" className="opacity-85 text-sm text-left pb-2">
ALL PROJECTS
</h2>
<div className="my-2 space-y-2">
{PROJECTS.map((project) => (
<ProjectCard key={project.slug} project={project} />
))}
</div>
</section>
<hr className="my-4 border-zinc-800" />
<p className="text-sm">
<Link to="/" className="underline">
&lt; Back home
</Link>
</p>
<hr className="my-4 border-zinc-800" />
<Footer />
</main>
);
}
+38 -8
View File
@@ -1,19 +1,49 @@
import { Link } from "react-router-dom";
import FantasyStatus from "../components/FantasyStatus";
import ScoreModule from "../components/modules/ScoreModule";
import Footer from "../components/Footer";
export default function Sports() {
return (
<div>
<div className="p-2">
<main className="my-12 sm:my-20">
<div className="py-2">
<p className="opacity-85 text-sm text-left">GO BILLS, GO SABRES</p>
<h1 className="text-3xl sm:text-4xl text-balance py-2">Sports</h1>
<p className="py-2">
Live scores for the Buffalo Bills, Buffalo Sabres and New York
Yankees, plus however badly my fantasy team is doing this week.
</p>
</div>
<hr className="my-4 border-zinc-800" />
<section aria-labelledby="scores">
<h2 id="scores" className="opacity-85 text-sm text-left pb-2">
LATEST SCORES
</h2>
<ScoreModule />
</div>
</section>
<hr className="border-black border-1" />
<hr className="my-4 border-zinc-800" />
<div className="p-2">
<h1 className="text-2xl font-semibold">fantasy</h1>
<section aria-labelledby="fantasy">
<h2 id="fantasy" className="opacity-85 text-sm text-left pb-2">
FANTASY
</h2>
<FantasyStatus />
</div>
</div>
</section>
<hr className="my-4 border-zinc-800" />
<p className="text-sm">
<Link to="/" className="underline">
&lt; Back home
</Link>
</p>
<hr className="my-4 border-zinc-800" />
<Footer />
</main>
);
}
+115
View File
@@ -0,0 +1,115 @@
import type { ReactElement } from "react";
import Home from "./pages/Home";
import Projects from "./pages/Projects";
import ProjectDetail from "./pages/ProjectDetail";
import Sports from "./pages/Sports";
import Pictures from "./pages/Pictures";
import NotFound from "./pages/NotFound";
import { PROJECTS, findProject } from "./data/projects";
import type { PageMeta } from "./utils/seo";
import {
profilePageGraph,
projectListGraph,
projectGraph,
} from "./utils/structuredData";
type Params = Record<string, string | undefined>;
export type AppRoute = {
path: string;
element: ReactElement;
/**
* Head metadata for the route. Returns null when the path matched but the
* resource does not exist (an unknown project slug), which the server turns
* into a real 404 rather than a soft one.
*/
meta: (params: Params) => PageMeta | null;
/** concrete urls to list in the sitemap; omit to exclude the route */
sitemapPaths?: () => string[];
};
export const NOT_FOUND_META: PageMeta = {
title: "Page not found — Alex Frantz",
description: "That page doesn't exist.",
path: "/404",
noindex: true,
};
export const routes: AppRoute[] = [
{
path: "/",
element: <Home />,
sitemapPaths: () => ["/"],
meta: () => ({
title: "Alex Frantz — Senior QA Engineer & Developer",
description:
"Senior QA engineer at Medal.tv, based in Western New York. I write software, then spend twice as long breaking it — homelab, JavaScript and Python projects.",
path: "/",
type: "profile",
jsonLd: profilePageGraph(),
}),
},
{
path: "/projects",
element: <Projects />,
sitemapPaths: () => ["/projects"],
meta: () => ({
title: "Projects — Alex Frantz",
description:
"The things I've built: an LED matrix scoreboard, a subscription tracker, a Snapchat export extractor, and the homelab that runs all of it.",
path: "/projects",
jsonLd: projectListGraph(PROJECTS),
}),
},
{
path: "/projects/:slug",
element: <ProjectDetail />,
sitemapPaths: () => PROJECTS.map((p) => `/projects/${p.slug}`),
meta: (params) => {
const project = findProject(params.slug);
if (!project) return null;
return {
title: `${project.title} — Alex Frantz`,
description: project.description,
path: `/projects/${project.slug}`,
type: "article",
jsonLd: projectGraph(project),
};
},
},
{
path: "/sports",
element: <Sports />,
sitemapPaths: () => ["/sports"],
meta: () => ({
title: "Bills, Sabres & Yankees Scores — Alex Frantz",
description:
"Live Buffalo Bills, Buffalo Sabres and New York Yankees scores, plus how my fantasy football matchup is going this week.",
path: "/sports",
}),
},
{
path: "/pictures",
element: <Pictures />,
sitemapPaths: () => ["/pictures"],
meta: () => ({
title: "Pictures — Alex Frantz",
description:
"Photos from my camera roll: Western New York, the homelab rack, and whatever else I pointed a camera at.",
path: "/pictures",
}),
},
{
// the in-app catch-all. the server independently answers 404 for anything
// that lands here, so this never becomes a soft 404
path: "*",
element: <NotFound />,
meta: () => NOT_FOUND_META,
},
];
/** every indexable url, for sitemap.xml */
export function sitemapPaths(): string[] {
return routes.flatMap((route) => route.sitemapPaths?.() ?? []);
}
+42
View File
@@ -0,0 +1,42 @@
import type { BlogPost } from "./types";
const FEED_URL = "https://blog.alexav.gg/api/posts";
const TTL_MS = 5 * 60 * 1000;
let cache: { at: number; posts: BlogPost[] } | null = null;
/**
* Server-side fetch of the blog index, memoized for a few minutes so a crawl
* does not hammer blog.alexav.gg. Never throws — a dead feed should degrade to
* an empty section, not a 500.
*/
export async function fetchPosts(): Promise<BlogPost[]> {
if (cache && Date.now() - cache.at < TTL_MS) return cache.posts;
try {
const res = await fetch(FEED_URL, {
signal: AbortSignal.timeout(3000),
});
if (!res.ok) throw new Error(`feed responded ${res.status}`);
const data = (await res.json()) as BlogPost[];
// project down to the fields the ui uses. the api also returns the full
// post body and internal ids, and all of that would otherwise be inlined
// into every html response
const posts = (Array.isArray(data) ? data : []).map(
({ id, title, description, slug, createdAt }) => ({
id,
title,
description,
slug,
createdAt,
}),
);
cache = { at: Date.now(), posts };
return posts;
} catch (e) {
console.error("Failed to fetch blog posts during SSR:", e);
// serve the stale copy rather than nothing if we ever had one
return cache?.posts ?? [];
}
}
+28
View File
@@ -0,0 +1,28 @@
import { createContext, useContext } from "react";
import type { BlogPost } from "./types";
export type InitialData = {
posts?: BlogPost[];
};
/**
* Data fetched during SSR and handed to the client, so content that used to
* appear only after a `useEffect` is present in the served HTML. Passed
* through context rather than a module global, because a module global on the
* server would be shared between concurrent requests.
*/
export const InitialDataContext = createContext<InitialData>({});
export function useInitialData() {
return useContext(InitialDataContext);
}
export const INITIAL_DATA_GLOBAL = "__INITIAL_DATA__";
/** the <script> that carries SSR data across to hydration */
export function serializeInitialData(data: InitialData) {
// </script> inside a json string would close the tag early; escaping the
// slash keeps the json valid while making the sequence un-parseable
const json = JSON.stringify(data).replace(/</g, "\u003c");
return `<script>window.${INITIAL_DATA_GLOBAL}=${json}</script>`;
}
+38
View File
@@ -0,0 +1,38 @@
import { matchRoutes } from "react-router-dom";
import { routes, NOT_FOUND_META, type AppRoute } from "../routes";
import type { PageMeta } from "./seo";
export type Resolved = { meta: PageMeta; status: 200 | 404 };
/**
* Map a request url to its head metadata and http status. Shared by the server
* (which needs the status) and the client (which needs the title on
* navigation), so the two can never disagree about what a url is.
*/
export function resolveMeta(url: string): Resolved {
const pathname = normalizePath(url);
const matches = matchRoutes(
routes.map((route) => ({ path: route.path, meta: route.meta })),
pathname,
);
const match = matches?.[matches.length - 1];
if (!match) return { meta: NOT_FOUND_META, status: 404 };
const route = match.route as unknown as AppRoute;
// the in-app catch-all resolves, but it is still a miss
if (route.path === "*") return { meta: NOT_FOUND_META, status: 404 };
// meta() returns null when the path shape matched but the resource does not
// exist, e.g. /projects/not-a-real-slug
const meta = route.meta(match.params);
if (!meta) return { meta: NOT_FOUND_META, status: 404 };
return { meta, status: 200 };
}
export function normalizePath(url: string) {
const pathname = url.split("?")[0].split("#")[0];
if (!pathname) return "/";
return pathname.startsWith("/") ? pathname : `/${pathname}`;
}
+105
View File
@@ -0,0 +1,105 @@
import {
SITE_NAME,
SITE_LOCALE,
DEFAULT_OG_IMAGE,
DEFAULT_OG_IMAGE_ALT,
absoluteUrl,
} from "./site";
export type PageMeta = {
/** full <title> text, already including any " — Alex Frantz" suffix */
title: string;
description: string;
/** site-relative path, used for the canonical and og:url */
path: string;
image?: string;
imageAlt?: string;
imageWidth?: number;
imageHeight?: number;
/** og:type, defaults to "website" */
type?: string;
noindex?: boolean;
/** one or more JSON-LD objects to emit as ld+json */
jsonLd?: object[];
};
/** escape a value for interpolation into a double-quoted html attribute */
function attr(value: string) {
return value
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;");
}
/** escape for text content, e.g. inside <title> */
function text(value: string) {
return value
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
}
// </script> inside a json string would close the tag early. escaping the
// slash keeps the json valid while making the sequence un-parseable as a tag
function jsonLdPayload(data: object) {
return JSON.stringify(data).replace(/</g, "\u003c");
}
/**
* Build the per-route <head> fragment injected at the `<!--app-head-->`
* placeholder in index.html. Plain string building rather than a helmet-style
* library, because SSR already owns the document head.
*/
export function renderHead(meta: PageMeta): string {
const canonical = absoluteUrl(meta.path);
const image = meta.image ?? DEFAULT_OG_IMAGE;
const imageAlt = meta.imageAlt ?? DEFAULT_OG_IMAGE_ALT;
const type = meta.type ?? "website";
// a noindex page should not claim a canonical url of its own
const canonicalTags = meta.noindex
? []
: [
`<link rel="canonical" href="${attr(canonical)}" />`,
`<meta property="og:url" content="${attr(canonical)}" />`,
];
const tags: string[] = [
`<title>${text(meta.title)}</title>`,
`<meta name="description" content="${attr(meta.description)}" />`,
...canonicalTags,
meta.noindex
? `<meta name="robots" content="noindex, follow" />`
: `<meta name="robots" content="index, follow, max-image-preview:large" />`,
`<meta property="og:type" content="${attr(type)}" />`,
`<meta property="og:site_name" content="${attr(SITE_NAME)}" />`,
`<meta property="og:locale" content="${attr(SITE_LOCALE)}" />`,
`<meta property="og:title" content="${attr(meta.title)}" />`,
`<meta property="og:description" content="${attr(meta.description)}" />`,
`<meta property="og:image" content="${attr(image)}" />`,
`<meta property="og:image:alt" content="${attr(imageAlt)}" />`,
`<meta name="twitter:card" content="summary_large_image" />`,
`<meta name="twitter:title" content="${attr(meta.title)}" />`,
`<meta name="twitter:description" content="${attr(meta.description)}" />`,
`<meta name="twitter:image" content="${attr(image)}" />`,
`<meta name="twitter:image:alt" content="${attr(imageAlt)}" />`,
];
if (meta.imageWidth && meta.imageHeight) {
tags.push(
`<meta property="og:image:width" content="${meta.imageWidth}" />`,
`<meta property="og:image:height" content="${meta.imageHeight}" />`,
);
}
for (const block of meta.jsonLd ?? []) {
tags.push(
`<script type="application/ld+json">${jsonLdPayload(block)}</script>`,
);
}
return tags.join("\n ");
}
+27
View File
@@ -0,0 +1,27 @@
// the public origin, in one place. previously hardcoded in four separate
// places in index.html, which is why nothing could build a canonical url
export const SITE_ORIGIN = "https://alexav.gg";
export const SITE_NAME = "Alex Frantz";
export const SITE_LOCALE = "en_US";
export const AUTHOR_EMAIL = "alex@alexav.gg";
export const DEFAULT_OG_IMAGE =
"https://storage.alexav.gg/content/picturev2.jpg";
export const DEFAULT_OG_IMAGE_ALT = "Alex Frantz";
// external properties, kept together so the JSON-LD `sameAs` graph and the
// rendered links cannot drift apart
export const PROFILES = {
github: "https://github.com/azpha",
blog: "https://blog.alexav.gg",
medal: "https://medal.tv/u/alexav",
gitea: "https://git.alexav.gg/alex",
} as const;
/** absolute url for a site-relative path, with no trailing slash */
export function absoluteUrl(path: string) {
if (path === "/" || path === "") return SITE_ORIGIN;
const withSlash = path.startsWith("/") ? path : `/${path}`;
return SITE_ORIGIN + withSlash.replace(/\/+$/, "");
}
+121
View File
@@ -0,0 +1,121 @@
import {
SITE_ORIGIN,
SITE_NAME,
AUTHOR_EMAIL,
PROFILES,
absoluteUrl,
} from "./site";
import type { Project } from "../data/projects";
const PERSON_ID = `${SITE_ORIGIN}/#alex`;
/** the Person + WebSite graph, the main signal for a name-query result */
export function personGraph(): object[] {
return [
{
"@context": "https://schema.org",
"@type": "Person",
"@id": PERSON_ID,
name: "Alex Frantz",
alternateName: ["alexav", "Alexavier Frantz"],
url: SITE_ORIGIN,
email: `mailto:${AUTHOR_EMAIL}`,
jobTitle: "Senior QA Engineer",
worksFor: {
"@type": "Organization",
name: "Medal.tv",
url: "https://medal.tv",
},
address: {
"@type": "PostalAddress",
addressRegion: "NY",
addressCountry: "US",
addressLocality: "Western New York",
},
knowsAbout: [
"Quality Assurance",
"Test Automation",
"JavaScript",
"TypeScript",
"React",
"Python",
"Java",
"C#",
"Docker",
"Homelab infrastructure",
],
sameAs: [PROFILES.github, PROFILES.blog, PROFILES.medal, PROFILES.gitea],
},
{
"@context": "https://schema.org",
"@type": "WebSite",
"@id": `${SITE_ORIGIN}/#website`,
url: SITE_ORIGIN,
name: SITE_NAME,
publisher: { "@id": PERSON_ID },
inLanguage: "en-US",
},
];
}
/** ProfilePage wrapper for the homepage, which is primarily about a person */
export function profilePageGraph(): object[] {
return [
...personGraph(),
{
"@context": "https://schema.org",
"@type": "ProfilePage",
url: SITE_ORIGIN,
mainEntity: { "@id": PERSON_ID },
},
];
}
export function projectListGraph(projects: Project[]): object[] {
return [
{
"@context": "https://schema.org",
"@type": "CollectionPage",
url: absoluteUrl("/projects"),
name: "Projects",
about: { "@id": PERSON_ID },
mainEntity: {
"@type": "ItemList",
itemListElement: projects.map((project, index) => ({
"@type": "ListItem",
position: index + 1,
url: absoluteUrl(`/projects/${project.slug}`),
name: project.title,
})),
},
},
];
}
export function projectGraph(project: Project): object[] {
return [
{
"@context": "https://schema.org",
"@type": "SoftwareSourceCode",
name: project.title,
description: project.description,
url: absoluteUrl(`/projects/${project.slug}`),
codeRepository: project.link,
programmingLanguage: project.pills,
author: { "@id": PERSON_ID },
},
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
itemListElement: [
{
"@type": "ListItem",
position: 1,
name: "Projects",
item: absoluteUrl("/projects"),
},
{ "@type": "ListItem", position: 2, name: project.title },
],
},
];
}
+15
View File
@@ -5,4 +5,19 @@ import tailwindcss from "@tailwindcss/vite";
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
ssr: {
// react-router-dom's "node" export condition points at its CommonJS build,
// so SSR would otherwise get a module whose named exports all hang off
// `.default` — every `import { Routes } from "react-router-dom"` throws at
// request time in dev. "module-sync" selects the ESM entry instead.
resolve: {
conditions: [
"module-sync",
"module",
"browser",
"development|production",
],
externalConditions: ["module-sync", "node", "import"],
},
},
});