app/bun.lock

@@ -7,6 +7,7 @@
         "@fastify/static": "^8.1.1",
         "@universal-middleware/core": "^0.4.7",
         "@universal-middleware/fastify": "^0.5.16",
+        "clsx": "^2.1.1",
         "fastify": "^5.3.0",
         "solid-js": "^1.9.5",
         "telefunc": "^0.2.3",
@@ -369,6 +370,8 @@
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
     "code-block-writer": ["code-block-writer@12.0.0", "", {}, "sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w=="],
 
     "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],

app/components/Image.tsx

@@ -0,0 +1,18 @@
+import type { JSX } from "solid-js";
+
+type ImageProps = JSX.IntrinsicElements["img"] & { src: string; alt: string };
+
+export function Image(props: ImageProps) {
+	const isDecorationImage = props.alt === "";
+
+	return (
+		<img
+			{...props}
+			src={props.src}
+			role={isDecorationImage ? "presentation" : "img"}
+			aria-hidden={isDecorationImage ? "true" : undefined}
+			alt={isDecorationImage ? undefined : props.alt}
+			loading="lazy"
+		/>
+	);
+}

app/components/Link.tsx

@@ -1,13 +1,34 @@
-import { createMemo } from "solid-js";
+import type { JSX } from "solid-js";
+
 import { usePageContext } from "vike-solid/usePageContext";
 
-export function Link(props: { href: string; children: string }) {
-  const pageContext = usePageContext();
-  const isActive = createMemo(() =>
-    props.href === "/" ? pageContext.urlPathname === props.href : pageContext.urlPathname.startsWith(props.href),
+type LinkProps = JSX.IntrinsicElements["a"] & { href: string };
+
+export function Link(props: LinkProps) {
+	const { urlPathname } = usePageContext();
+
+	const isActive =
+		props.href === "/"
+			? urlPathname === props.href
+			: urlPathname.startsWith(props.href);
+
+	const isSameDomain = !(
+		props.href.startsWith("http") || props.href.startsWith("mailto")
 	);
+
+	const downloadExtensions = [".pdf", ".zip"];
+
+	const isDownload = downloadExtensions.some(props.href.endsWith);
+
 	return (
-    <a href={props.href} class={isActive() ? "is-active" : undefined}>
+		<a
+			{...props}
+			{...(isActive && { ariaCurrent: "page" })}
+			{...(isDownload && { download: true })}
+			{...(!isSameDomain || isDownload
+				? { target: "_blank", rel: "noopener noreferrer" }
+				: { target: "_self" })}
+		>
 			{props.children}
 		</a>
 	);

app/package.json

@@ -8,15 +8,16 @@
 		"format": "biome format --write ."
 	},
 	"dependencies": {
-		"vike": "^0.4.228",
 		"@fastify/middie": "^9.0.3",
 		"@fastify/static": "^8.1.1",
-		"@universal-middleware/fastify": "^0.5.16",
-		"fastify": "^5.3.0",
 		"@universal-middleware/core": "^0.4.7",
+		"@universal-middleware/fastify": "^0.5.16",
+		"clsx": "^2.1.1",
+		"fastify": "^5.3.0",
 		"solid-js": "^1.9.5",
-		"vike-solid": "^0.7.9",
-		"telefunc": "^0.2.3"
+		"telefunc": "^0.2.3",
+		"vike": "^0.4.228",
+		"vike-solid": "^0.7.9"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",

app/tsconfig.json

@@ -10,19 +10,14 @@
 		"noEmit": true,
 		"moduleResolution": "Bundler",
 		"target": "ES2022",
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
-    "types": [
-      "vite/client",
-      "vike-solid/client"
-    ],
+		"lib": ["DOM", "DOM.Iterable", "ESNext"],
+		"types": ["vite/client", "vike-solid/client"],
 		"jsx": "react-jsx",
-    "jsxImportSource": "solid-js"
-  },
-  "exclude": [
-    "dist"
-  ]
+		"jsxImportSource": "solid-js",
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./*"]
+		}
+	},
+	"exclude": ["dist"]
 }

app/vite.config.ts

@@ -1,12 +1,20 @@
-import { telefunc } from "telefunc/vite";
 import tailwindcss from "@tailwindcss/vite";
+import { telefunc } from "telefunc/vite";
 import vikeSolid from "vike-solid/vite";
 import { defineConfig } from "vite";
 import vike from "vike/plugin";
+import path from "node:path";
+
+const __dirname = path.resolve();
 
 export default defineConfig({
 	plugins: [vike(), vikeSolid(), tailwindcss(), telefunc()],
 	build: {
 		target: "es2022",
 	},
+	resolve: {
+		alias: {
+			"@": __dirname,
+		},
+	},
 });