@luciodale/docs-ui-kit 0.2.0 → 0.2.1

package/package.json

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

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,7 +18,7 @@ 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}
 							alt={config.logoAlt ?? config.title}
@@ -33,7 +34,7 @@ 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}
+						href={withBase(link.href)}
 						class="text-white/40 text-sm hover:text-white/70 transition-colors"
 					>
 						{link.label}

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,7 +14,7 @@ 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" />
 			) : (
@@ -24,7 +25,7 @@ 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)
@@ -108,7 +109,7 @@ 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)
@@ -131,7 +132,7 @@ const { config, currentPath } = Astro.props;
 					<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

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;
@@ -24,7 +25,7 @@ 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

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}`}`;
+}