@luciodale/docs-ui-kit 0.2.0 → 0.2.2

package/README.md

@@ -313,6 +313,46 @@ import Callout from "@luciodale/docs-ui-kit/components/Callout.astro";
 
 Renders a left-bordered aside with icon, title, and slot content. Supports links (`<a>`) and inline code (`<code>`) in the body.
 
+#### FeatureList
+
+Highlighted feature list with colored dots and keywords. Designed for landing pages and feature summaries.
+
+```astro
+---
+import FeatureList from "@luciodale/docs-ui-kit/components/FeatureList.astro";
+---
+
+<FeatureList features={[
+  { highlight: "Type-safe", description: "Full TypeScript support out of the box" },
+  { highlight: "Lightweight", description: "Zero runtime overhead", color: "green" },
+  { highlight: "Dark theme", description: "Built for modern documentation sites" },
+]} />
+
+<!-- Or set a global color for all items -->
+<FeatureList
+  color="cyan"
+  features={[
+    { highlight: "Fast", description: "Build-time syntax highlighting via Shiki" },
+    { highlight: "Searchable", description: "Full-text search powered by Pagefind" },
+  ]}
+/>
+```
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `features` | `Array<FeatureItem>` | Yes | List of feature items (see below). |
+| `color` | `FeatureColor` | No | Default: `"accent"`. Global color for all items. Overridden by per-item `color`. |
+
+**FeatureItem:**
+
+| Field | Type | Required | Description |
+|---|---|---|---|
+| `highlight` | `string` | Yes | Colored keyword/phrase. Rendered in bold with the active color. |
+| `description` | `string` | No | Text after the highlight, separated by an em dash. |
+| `color` | `FeatureColor` | No | Per-item color override. |
+
+**FeatureColor:** `"accent"` \| `"blue"` \| `"green"` \| `"purple"` \| `"yellow"` \| `"cyan"`
+
 #### PackageInfo
 
 Displays npm version, license, GitHub stars, and a bundlephobia link. Data is fetched at build time from the npm registry and GitHub API (3s timeout, graceful fallback).
@@ -506,6 +546,7 @@ const { title, description } = Astro.props;
 // src/pages/index.astro
 import PageLayout from "@luciodale/docs-ui-kit/components/PageLayout.astro";
 import HeroSection from "@luciodale/docs-ui-kit/components/HeroSection.astro";
+import FeatureList from "@luciodale/docs-ui-kit/components/FeatureList.astro";
 import { siteConfig } from "../config";
 import Base from "../layouts/Base.astro";
 
@@ -519,9 +560,11 @@ export const prerender = true;
       description={siteConfig.description}
       installCommand={siteConfig.installCommand}
     >
-      <a href="/docs/getting-started" class="rounded-lg bg-accent px-5 py-2.5 text-sm text-white">
-        Get Started
-      </a>
+      <FeatureList features={[
+        { highlight: "Type-safe", description: "Full TypeScript support" },
+        { highlight: "Lightweight", description: "Zero runtime dependencies", color: "green" },
+        { highlight: "Fast", description: "Build-time syntax highlighting", color: "cyan" },
+      ]} />
     </HeroSection>
   </PageLayout>
 </Base>
@@ -588,7 +631,7 @@ Defined in `theme.css` via Tailwind v4 `@theme` tokens:
 | `--color-border` | `#e5e7eb` | Light border. |
 | `--color-muted` | `#848d9f` | Muted text. |
 
-Body: `background: black`, `color: white`. All components use `white/` opacity variants for text hierarchy (`text-white/60`, `text-white/40`, `text-white/30`).
+Body: `background: black`, `color: white`. All components use `white/` opacity variants for text hierarchy (`text-white/70` body text, `text-white/60` secondary, `text-white/40` labels, `text-white/30` decorative).
 
 ## Responsive behavior
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@luciodale/docs-ui-kit",
-	"version": "0.2.0",
+	"version": "0.2.2",
 	"description": "Astro component library for documentation sites. Dark theme, orange accent.",
 	"type": "module",
 	"exports": {

package/src/components/Callout.astro

@@ -52,7 +52,7 @@ const heading = title ?? s.defaultTitle;
 		{type === "danger" && <DangerIcon />}
 		{heading}
 	</div>
-	<div class="text-sm text-white/60 leading-relaxed [&_a]:text-accent [&_a]:underline [&_code]:text-white/70 [&_code]:font-mono [&_code]:text-xs">
+	<div class="text-sm text-white/70 leading-relaxed [&_a]:text-accent [&_a]:underline [&_code]:text-white/80 [&_code]:font-mono [&_code]:text-xs">
 		<slot />
 	</div>
 </aside>

package/src/components/CodeBlock.astro

@@ -17,10 +17,10 @@ const html = await codeToHtml(trimmed, {
 
 <div class="rounded-lg border border-white/10 bg-[#161618] overflow-hidden my-4">
 	<div class="flex items-center justify-between px-4 py-2.5 border-b border-white/[0.06] bg-white/[0.02]">
-		<span class="text-xs text-white/30 font-mono">{filename ?? language}</span>
+		<span class="text-xs text-white/40 font-mono">{filename ?? language}</span>
 		<button
 			type="button"
-			class="copy-btn text-xs text-white/30 hover:text-white/60 transition-colors cursor-pointer"
+			class="copy-btn text-xs text-white/40 hover:text-white/70 transition-colors cursor-pointer"
 			data-code={trimmed}
 		>
 			<span class="copy-label">Copy</span>

package/src/components/FeatureList.astro

@@ -0,0 +1,42 @@
+---
+type FeatureColor = "accent" | "blue" | "green" | "purple" | "yellow" | "cyan";
+
+type FeatureItem = {
+	highlight: string;
+	description?: string;
+	color?: FeatureColor;
+};
+
+type Props = {
+	features: FeatureItem[];
+	color?: FeatureColor;
+};
+
+const { features, color = "accent" } = Astro.props;
+
+const colorMap: Record<FeatureColor, { text: string; dot: string }> = {
+	accent: { text: "text-accent", dot: "bg-accent" },
+	blue: { text: "text-blue-400", dot: "bg-blue-400" },
+	green: { text: "text-green-400", dot: "bg-green-400" },
+	purple: { text: "text-purple-400", dot: "bg-purple-400" },
+	yellow: { text: "text-yellow-400", dot: "bg-yellow-400" },
+	cyan: { text: "text-cyan-400", dot: "bg-cyan-400" },
+};
+---
+
+<ul class="flex flex-col gap-3 list-none m-0 p-0">
+	{features.map((feature) => {
+		const c = colorMap[feature.color ?? color];
+		return (
+			<li class="flex items-start gap-3">
+				<span class:list={["mt-[7px] w-1.5 h-1.5 rounded-full shrink-0", c.dot]} />
+				<span class="text-base leading-relaxed">
+					<span class:list={["font-semibold", c.text]}>{feature.highlight}</span>
+					{feature.description && (
+						<span class="text-white/70">{" "}&mdash; {feature.description}</span>
+					)}
+				</span>
+			</li>
+		);
+	})}
+</ul>

package/src/components/Footer.astro

@@ -1,5 +1,6 @@
 ---
 import type { SiteConfig } from "../types/config";
+import { withBase } from "../utils/base-path";
 import GithubIcon from "./GithubIcon.astro";
 import LinkedInIcon from "./LinkedInIcon.astro";
 
@@ -17,15 +18,15 @@ const copyright = config.copyright ?? config.title;
 		<div class="flex flex-col md:flex-row items-center gap-6 md:gap-4">
 			<div class="flex items-center gap-3 md:w-1/3">
 				{config.logoSrc && (
-					<a href="/">
+					<a href={withBase("/")}>
 						<img
-							src={config.logoSrc}
+							src={withBase(config.logoSrc)}
 							alt={config.logoAlt ?? config.title}
 							class="w-8 h-auto opacity-60 hover:opacity-100 transition-opacity"
 						/>
 					</a>
 				)}
-				<span class="text-white/40 text-sm">
+				<span class="text-white/50 text-sm">
 					&copy; {year} {copyright}
 				</span>
 			</div>
@@ -33,8 +34,8 @@ const copyright = config.copyright ?? config.title;
 			<div class="flex gap-6 md:w-1/3 justify-center">
 				{config.navLinks.map((link) => (
 					<a
-						href={link.href}
-						class="text-white/40 text-sm hover:text-white/70 transition-colors"
+						href={withBase(link.href)}
+						class="text-white/50 text-sm hover:text-white/80 transition-colors"
 					>
 						{link.label}
 					</a>
@@ -46,7 +47,7 @@ const copyright = config.copyright ?? config.title;
 					href={config.socialLinks.github}
 					target="_blank"
 					rel="noopener noreferrer"
-					class="text-white/30 hover:text-white/60 transition-colors"
+					class="text-white/40 hover:text-white/70 transition-colors"
 				>
 					<GithubIcon class="w-5" />
 				</a>
@@ -55,7 +56,7 @@ const copyright = config.copyright ?? config.title;
 						href={config.socialLinks.linkedin}
 						target="_blank"
 						rel="noopener noreferrer"
-						class="text-white/30 hover:text-white/60 transition-colors"
+						class="text-white/40 hover:text-white/70 transition-colors"
 					>
 						<LinkedInIcon class="w-5" />
 					</a>

package/src/components/HeroSection.astro

@@ -18,7 +18,7 @@ const hasExtra = Astro.slots.has("default");
 	<h1 class="text-4xl md:text-5xl font-bold tracking-tight text-white leading-[1.1] mb-4">
 		{title}
 	</h1>
-	<p class="text-lg text-white/50 leading-relaxed max-w-xl mb-10">{description}</p>
+	<p class="text-lg text-white/60 leading-relaxed max-w-xl mb-10">{description}</p>
 	<button
 		type="button"
 		class="copy-btn group rounded-lg border border-white/10 bg-white/5 hover:bg-white/[0.08] px-5 py-3 font-mono text-sm text-white/70 transition-colors cursor-pointer"
@@ -26,7 +26,7 @@ const hasExtra = Astro.slots.has("default");
 	>
 		<span class="text-accent">$</span>
 		<span class="ml-2">{installCommand}</span>
-		<span class="ml-3 text-white/30 group-hover:text-white/50 transition-colors text-xs copy-label">
+		<span class="ml-3 text-white/40 group-hover:text-white/60 transition-colors text-xs copy-label">
 			Copy
 		</span>
 	</button>

package/src/components/Navbar.astro

@@ -1,5 +1,6 @@
 ---
 import type { SiteConfig } from "../types/config";
+import { withBase } from "../utils/base-path";
 import GithubIcon from "./GithubIcon.astro";
 import SearchModal from "./SearchModal.astro";
 
@@ -13,9 +14,9 @@ const { config, currentPath } = Astro.props;
 
 <header class="sticky top-0 z-50 h-16 border-b border-white/10 bg-black/80 backdrop-blur-md">
 	<div class="max-w-7xl h-full mx-auto px-6 md:px-8 flex items-center justify-between">
-		<a href="/" class="flex items-center gap-3 text-white hover:opacity-80 transition-opacity">
+		<a href={withBase("/")} class="flex items-center gap-3 text-white hover:opacity-80 transition-opacity">
 			{config.logoSrc ? (
-				<img src={config.logoSrc} alt={config.logoAlt ?? config.title} class="h-7" />
+				<img src={withBase(config.logoSrc)} alt={config.logoAlt ?? config.title} class="h-7" />
 			) : (
 				<span class="text-base font-semibold tracking-tight">{config.title}</span>
 			)}
@@ -24,12 +25,12 @@ const { config, currentPath } = Astro.props;
 		<nav class="hidden md:flex items-center gap-6">
 			{config.navLinks.map((link) => (
 				<a
-					href={link.href}
+					href={withBase(link.href)}
 					class:list={[
 						"text-sm font-medium transition-colors duration-150",
 						currentPath.startsWith(link.href)
 							? "text-white"
-							: "text-white/50 hover:text-white/80",
+							: "text-white/60 hover:text-white/90",
 					]}
 				>
 					{link.label}
@@ -38,14 +39,14 @@ const { config, currentPath } = Astro.props;
 			<button
 				id="search-trigger"
 				type="button"
-				class="flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] px-3 py-1.5 text-white/40 hover:text-white/60 transition-colors cursor-pointer"
+				class="flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] px-3 py-1.5 text-white/50 hover:text-white/70 transition-colors cursor-pointer"
 			>
 				<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
 					<circle cx="11" cy="11" r="7" />
 					<line x1="16.5" y1="16.5" x2="21" y2="21" />
 				</svg>
 				<span class="text-xs">Search</span>
-				<kbd class="ml-2 rounded border border-white/10 bg-white/[0.04] px-1.5 py-0.5 text-[10px] font-mono text-white/30">
+				<kbd class="ml-2 rounded border border-white/10 bg-white/[0.04] px-1.5 py-0.5 text-[10px] font-mono text-white/40">
 					<span class="text-[10px]">&#8984;</span>K
 				</kbd>
 			</button>
@@ -53,7 +54,7 @@ const { config, currentPath } = Astro.props;
 				href={config.githubUrl}
 				target="_blank"
 				rel="noopener noreferrer"
-				class="text-white/40 hover:text-white/70 transition-colors duration-150"
+				class="text-white/50 hover:text-white/80 transition-colors duration-150"
 			>
 				<GithubIcon class="w-5" />
 			</a>
@@ -63,7 +64,7 @@ const { config, currentPath } = Astro.props;
 			<button
 				id="search-trigger-mobile"
 				type="button"
-				class="text-white/50 hover:text-white transition-colors cursor-pointer"
+				class="text-white/60 hover:text-white transition-colors cursor-pointer"
 				aria-label="Search"
 			>
 				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
@@ -74,7 +75,7 @@ const { config, currentPath } = Astro.props;
 			<button
 				id="mobile-nav-toggle"
 				type="button"
-				class="text-white/60 hover:text-white transition-colors cursor-pointer"
+				class="text-white/70 hover:text-white transition-colors cursor-pointer"
 				aria-label="Toggle menu"
 			>
 				<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -96,7 +97,7 @@ const { config, currentPath } = Astro.props;
 		<button
 			id="mobile-nav-close"
 			type="button"
-			class="text-white/60 hover:text-white transition-colors cursor-pointer"
+			class="text-white/70 hover:text-white transition-colors cursor-pointer"
 			aria-label="Close menu"
 		>
 			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -108,12 +109,12 @@ const { config, currentPath } = Astro.props;
 	<div class="px-6 py-4 flex flex-col gap-3 border-b border-white/10">
 		{config.navLinks.map((link) => (
 			<a
-				href={link.href}
+				href={withBase(link.href)}
 				class:list={[
 					"text-sm font-medium transition-colors",
 					currentPath.startsWith(link.href)
 						? "text-white"
-						: "text-white/50 hover:text-white/80",
+						: "text-white/60 hover:text-white/90",
 				]}
 			>
 				{link.label}
@@ -125,18 +126,18 @@ const { config, currentPath } = Astro.props;
 		<div class="px-6 py-4">
 			{config.sidebarSections.map((section) => (
 				<div class="mb-5">
-					<div class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-2">
+					<div class="text-xs font-semibold uppercase tracking-widest text-white/40 mb-2">
 						{section.title}
 					</div>
 					<div class="flex flex-col">
 						{section.links.map((link) => (
 							<a
-								href={link.href}
+								href={withBase(link.href)}
 								class:list={[
 									"block py-1.5 pl-3 text-sm border-l-2 transition-colors",
 									currentPath === link.href
 										? "border-accent text-white font-medium"
-										: "border-transparent text-white/50 hover:text-white/80 hover:border-white/20",
+										: "border-transparent text-white/60 hover:text-white/90 hover:border-white/20",
 								]}
 							>
 								{link.label}
@@ -153,7 +154,7 @@ const { config, currentPath } = Astro.props;
 			href={config.socialLinks.github}
 			target="_blank"
 			rel="noopener noreferrer"
-			class="text-white/30 hover:text-white/60 transition-colors"
+			class="text-white/40 hover:text-white/70 transition-colors"
 		>
 			<GithubIcon class="w-5" />
 		</a>

package/src/components/PackageInfo.astro

@@ -61,7 +61,7 @@ const [npm, github] = await Promise.all([fetchNpm(), fetchGithub()]);
 		</a>
 	)}
 	{npm?.license && (
-		<span class="inline-flex items-center rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/50">
+		<span class="inline-flex items-center rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/60">
 			{npm.license}
 		</span>
 	)}
@@ -70,7 +70,7 @@ const [npm, github] = await Promise.all([fetchNpm(), fetchGithub()]);
 			href={`https://github.com/${githubRepo}`}
 			target="_blank"
 			rel="noopener noreferrer"
-			class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/50 hover:bg-white/[0.06] transition-colors"
+			class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/60 hover:bg-white/[0.06] transition-colors"
 		>
 			<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
 				<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 19.771l-7.416 3.642 1.48-8.279L0 9.306l8.332-1.151z" />
@@ -82,7 +82,7 @@ const [npm, github] = await Promise.all([fetchNpm(), fetchGithub()]);
 		href={`https://bundlephobia.com/package/${packageName}${npm?.version ? `@${npm.version}` : ""}`}
 		target="_blank"
 		rel="noopener noreferrer"
-		class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/50 hover:bg-white/[0.06] transition-colors"
+		class="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-white/60 hover:bg-white/[0.06] transition-colors"
 	>
 		<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
 			<path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 002 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" />

package/src/components/PropsTable.astro

@@ -16,10 +16,10 @@ const { title, rows } = Astro.props;
 			<table class="w-full text-left text-sm">
 				<thead>
 					<tr class="border-b border-white/10 bg-white/[0.02]">
-						<th class="py-3 px-4 text-xs font-medium text-white/40 uppercase tracking-wider">Prop</th>
-						<th class="py-3 px-4 text-xs font-medium text-white/40 uppercase tracking-wider">Type</th>
-						<th class="py-3 px-4 text-xs font-medium text-white/40 uppercase tracking-wider">Default</th>
-						<th class="py-3 px-4 text-xs font-medium text-white/40 uppercase tracking-wider">Description</th>
+						<th class="py-3 px-4 text-xs font-medium text-white/50 uppercase tracking-wider">Prop</th>
+						<th class="py-3 px-4 text-xs font-medium text-white/50 uppercase tracking-wider">Type</th>
+						<th class="py-3 px-4 text-xs font-medium text-white/50 uppercase tracking-wider">Default</th>
+						<th class="py-3 px-4 text-xs font-medium text-white/50 uppercase tracking-wider">Description</th>
 					</tr>
 				</thead>
 				<tbody>
@@ -30,12 +30,12 @@ const { title, rows } = Astro.props;
 								{row.required && <span class="ml-1 text-red-400 text-xs">*</span>}
 							</td>
 							<td class="py-3 px-4">
-								<code class="text-white/50 font-mono text-xs">{row.type}</code>
+								<code class="text-white/60 font-mono text-xs">{row.type}</code>
 							</td>
-							<td class="py-3 px-4 text-white/35 text-xs font-mono">
+							<td class="py-3 px-4 text-white/45 text-xs font-mono">
 								{row.defaultValue ?? "\u2014"}
 							</td>
-							<td class="py-3 px-4 text-white/60 text-sm">{row.description}</td>
+							<td class="py-3 px-4 text-white/70 text-sm">{row.description}</td>
 						</tr>
 					))}
 				</tbody>

package/src/components/SearchModal.astro

@@ -75,7 +75,7 @@
 	.search-dialog-icon {
 		width: 0.875rem;
 		height: 0.875rem;
-		color: rgb(255 255 255 / 0.3);
+		color: rgb(255 255 255 / 0.4);
 		flex-shrink: 0;
 	}
 
@@ -88,7 +88,7 @@
 	}
 
 	.search-dialog-input::placeholder {
-		color: rgb(255 255 255 / 0.3);
+		color: rgb(255 255 255 / 0.4);
 	}
 
 	.search-dialog-kbd {
@@ -98,7 +98,7 @@
 		padding: 0.125rem 0.375rem;
 		font-size: 10px;
 		font-family: ui-monospace, monospace;
-		color: rgb(255 255 255 / 0.3);
+		color: rgb(255 255 255 / 0.4);
 	}
 
 	.search-dialog-results {
@@ -111,7 +111,7 @@
 		padding: 1.5rem 0.75rem;
 		text-align: center;
 		font-size: 0.875rem;
-		color: rgb(255 255 255 / 0.3);
+		color: rgb(255 255 255 / 0.4);
 	}
 
 	#search-results :global(mark) {
@@ -180,7 +180,7 @@
 		const container = document.getElementById("search-results");
 		if (!container) return;
 
-		const placeholderStyle = "padding: 1.5rem 0.75rem; text-align: center; font-size: 0.875rem; color: rgb(255 255 255 / 0.3);";
+		const placeholderStyle = "padding: 1.5rem 0.75rem; text-align: center; font-size: 0.875rem; color: rgb(255 255 255 / 0.4);";
 
 		if (!query.trim()) {
 			container.innerHTML = `<p style="${placeholderStyle}">Type to search...</p>`;
@@ -200,9 +200,9 @@
 			<a href="${r.url}" style="display: block; border-radius: 0.5rem; padding: 0.625rem 0.75rem; transition: background-color 150ms; text-decoration: none;" onmouseenter="this.style.background='rgb(255 255 255 / 0.04)'" onmouseleave="this.style.background='transparent'" data-search-result>
 				<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.125rem;">
 					<span style="font-size: 0.875rem; font-weight: 500; color: rgb(255 255 255 / 0.8);">${r.title}</span>
-					${r.section ? `<span style="font-size: 11px; color: rgb(255 255 255 / 0.25);">${r.section}</span>` : ""}
+					${r.section ? `<span style="font-size: 11px; color: rgb(255 255 255 / 0.35);">${r.section}</span>` : ""}
 				</div>
-				<div style="font-size: 0.75rem; color: rgb(255 255 255 / 0.4); line-height: 1.625; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">${r.excerpt}</div>
+				<div style="font-size: 0.75rem; color: rgb(255 255 255 / 0.5); line-height: 1.625; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">${r.excerpt}</div>
 			</a>`,
 			)
 			.join("");
@@ -215,7 +215,7 @@
 		if (!pf) {
 			const container = document.getElementById("search-results");
 			if (container) {
-				container.innerHTML = '<p style="padding: 1.5rem 0.75rem; text-align: center; font-size: 0.875rem; color: rgb(255 255 255 / 0.3);">Search not available. Run <code style="font-family: ui-monospace, monospace; color: rgb(255 255 255 / 0.5);">npx pagefind</code> after building.</p>';
+				container.innerHTML = '<p style="padding: 1.5rem 0.75rem; text-align: center; font-size: 0.875rem; color: rgb(255 255 255 / 0.4);">Search not available. Run <code style="font-family: ui-monospace, monospace; color: rgb(255 255 255 / 0.6);">npx pagefind</code> after building.</p>';
 			}
 			return;
 		}

package/src/components/SidebarSection.astro

@@ -1,5 +1,6 @@
 ---
 import type { SidebarSection } from "../types/config";
+import { withBase } from "../utils/base-path";
 
 type Props = {
 	section: SidebarSection;
@@ -10,7 +11,7 @@ const { section, currentPath } = Astro.props;
 ---
 
 <details class="mb-6 group" open>
-	<summary class="flex items-center justify-between w-full py-1.5 text-xs font-semibold uppercase tracking-widest text-white/30 hover:text-white/50 transition-colors cursor-pointer list-none [&::-webkit-details-marker]:hidden">
+	<summary class="flex items-center justify-between w-full py-1.5 text-xs font-semibold uppercase tracking-widest text-white/40 hover:text-white/60 transition-colors cursor-pointer list-none [&::-webkit-details-marker]:hidden">
 		{section.title}
 		<svg
 			class="w-3 h-3 transition-transform duration-150 group-open:rotate-180"
@@ -24,12 +25,12 @@ const { section, currentPath } = Astro.props;
 	<div class="flex flex-col mt-2">
 		{section.links.map((link) => (
 			<a
-				href={link.href}
+				href={withBase(link.href)}
 				class:list={[
 					"block py-1.5 pl-3 text-sm border-l-2 transition-colors",
 					currentPath === link.href
 						? "border-accent text-white font-medium"
-						: "border-transparent text-white/50 hover:text-white/80 hover:border-white/20",
+						: "border-transparent text-white/60 hover:text-white/90 hover:border-white/20",
 				]}
 			>
 				{link.label}

package/src/components/TableOfContents.astro

@@ -4,7 +4,7 @@
 ---
 
 <nav id="toc" class="w-44 shrink-0 hidden xl:block sticky top-16 h-[calc(100dvh-4rem)] pt-8 pr-4 overflow-y-auto">
-	<div class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-3">On this page</div>
+	<div class="text-xs font-semibold uppercase tracking-widest text-white/40 mb-3">On this page</div>
 	<ul id="toc-list" class="flex flex-col gap-0.5"></ul>
 </nav>
 
@@ -12,7 +12,7 @@
 	const ACTIVE_CLASS =
 		"block py-1 text-sm border-l-2 pl-3 transition-colors border-accent text-white font-medium";
 	const INACTIVE_CLASS =
-		"block py-1 text-sm border-l-2 pl-3 transition-colors border-transparent text-white/40 hover:text-white/60 hover:border-white/20";
+		"block py-1 text-sm border-l-2 pl-3 transition-colors border-transparent text-white/50 hover:text-white/70 hover:border-white/20";
 
 	function initToc() {
 		const tocList = document.getElementById("toc-list");

package/src/utils/base-path.ts

@@ -0,0 +1,10 @@
+/**
+ * Prepends the Astro base path to an internal href.
+ * External URLs (http/https) are returned as-is.
+ */
+export function withBase(href: string): string {
+	if (href.startsWith("http://") || href.startsWith("https://")) return href;
+	const base = (import.meta.env.BASE_URL ?? "/").replace(/\/$/, "");
+	if (!base || base === "/") return href;
+	return `${base}${href.startsWith("/") ? href : `/${href}`}`;
+}