feat: implement createLink utility for consistent URL handling across components

DevRohit06 · DevRohit06 · commit 5451f15eb7b4 · 2025-12-29T12:39:53.000+05:30
diff --git a/src/template/src/components/Breadcrumbs.astro b/src/template/src/components/Breadcrumbs.astro
@@ -1,5 +1,6 @@
 ---
 import { getConfigFile } from '../utils/config';
+import { createLink } from '../utils/url';
 
 const { pathname } = Astro.url;
 const config = await getConfigFile();
@@ -63,7 +64,7 @@ if (!found && currentSlug) {
             {item.label}
           </span>
         ) : item.href ? (
-          <a href={item.href} class="hover:text-foreground transition-colors duration-200">
+          <a href={createLink(item.href)} class="hover:text-foreground transition-colors duration-200">
             {item.label}
           </a>
         ) : (
diff --git a/src/template/src/components/Footer.astro b/src/template/src/components/Footer.astro
@@ -1,5 +1,6 @@
 ---
 import { getConfigFile } from '../utils/config';
+import { createLink } from '../utils/url';
 
 const config = await getConfigFile();
 const { footer } = config;
@@ -16,7 +17,7 @@ const { footer } = config;
               {section.items.map((item) => (
                 <li>
                   <a 
-                    href={item.href}
+                    href={createLink(item.href)}
                     class="text-sm text-muted-foreground hover:text-foreground transition-colors"
                   >
                     {item.label}
diff --git a/src/template/src/components/Header.astro b/src/template/src/components/Header.astro
@@ -1,5 +1,6 @@
 ---
 import { getConfigFile } from '../utils/config';
+import { createLink } from '../utils/url';
 import ThemeToggle from './ThemeToggle.astro';
 
 const config = await getConfigFile();
@@ -23,7 +24,7 @@ const { navbar } = config.navigation;
 
     <!-- Logo -->
     <div class="flex items-center gap-4">
-      <a href={config.branding.logo.href} class="flex items-center gap-3 hover:opacity-80 transition-opacity">
+      <a href={createLink(config.branding.logo.href)} class="flex items-center gap-3 hover:opacity-80 transition-opacity">
         <span class="text-2xl">📚</span>
         <h1 class="text-lg font-bold text-foreground m-0 tracking-tight hidden sm:block">
           {config.metadata.name}
@@ -35,7 +36,7 @@ const { navbar } = config.navigation;
     <nav class="hidden md:flex items-center gap-6">
       {navbar.links?.map((link) => (
         <a 
-          href={link.href} 
+          href={createLink(link.href)} 
           class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
           target={link.href.startsWith('http') ? '_blank' : undefined}
           rel={link.href.startsWith('http') ? 'noopener noreferrer' : undefined}
@@ -64,7 +65,7 @@ const { navbar } = config.navigation;
       <ThemeToggle />
       
       {navbar.cta && (
-        <a href={navbar.cta.href} class="cta-button hidden sm:inline-flex">
+        <a href={createLink(navbar.cta.href)} class="cta-button hidden sm:inline-flex">
           {navbar.cta.label}
         </a>
       )}
diff --git a/src/template/src/components/MobileNav.astro b/src/template/src/components/MobileNav.astro
@@ -4,6 +4,7 @@
  * Triggered by hamburger menu in Header
  */
 import { getConfigFile } from '../utils/config';
+import { createLink } from '../utils/url';
 
 const config = await getConfigFile();
 const { sidebar } = config.navigation;
@@ -29,7 +30,7 @@ const { sidebar } = config.navigation;
           <ul class="mobile-nav-list">
             {group.items?.map((item) => (
               <li>
-                <a href={`/${item.slug}`} class="mobile-nav-link">
+                <a href={createLink(item.href || `/${item.slug}`)} class="mobile-nav-link">
                   {item.label}
                 </a>
               </li>
diff --git a/src/template/src/components/PrevNextNav.astro b/src/template/src/components/PrevNextNav.astro
@@ -1,5 +1,6 @@
 ---
 import { getConfigFile } from '../utils/config';
+import { createLink } from '../utils/url';
 
 const { pathname } = Astro.url;
 const config = await getConfigFile();
@@ -37,7 +38,7 @@ const nextPage = currentIndex < allPages.length - 1 ? allPages[currentIndex + 1]
   <nav class="prev-next-nav" aria-label="Page navigation">
     <div class="prev-next-container">
       {prevPage ? (
-        <a href={prevPage.href} class="prev-next-link prev">
+        <a href={createLink(prevPage.href)} class="prev-next-link prev">
           <span class="prev-next-direction">
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="m15 18-6-6 6-6"/>
@@ -51,7 +52,7 @@ const nextPage = currentIndex < allPages.length - 1 ? allPages[currentIndex + 1]
       )}
       
       {nextPage ? (
-        <a href={nextPage.href} class="prev-next-link next">
+        <a href={createLink(nextPage.href)} class="prev-next-link next">
           <span class="prev-next-direction">
             Next
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
diff --git a/src/template/src/components/SearchModal.astro b/src/template/src/components/SearchModal.astro
@@ -3,6 +3,7 @@
  * SearchModal - ⌘K / Ctrl+K Search Modal
  * Uses Pagefind for static search (must build first to index content)
  */
+const base = import.meta.env.BASE_URL.replace(/\/$/, '');
 ---
 
 <div id="search-modal" class="search-modal" role="dialog" aria-modal="true" aria-labelledby="search-title">
@@ -119,7 +120,7 @@
   }
 </style>
 
-<script>
+<script define:vars={{ base }}>
   let pagefind: any = null;
   let selectedIndex = 0;
   let results: any[] = [];
@@ -164,12 +165,17 @@
         return;
       }
       
-      resultsContainer.innerHTML = searchResults.map((result, i) => `
-        <a href="${result.url}" class="search-result-item ${i === selectedIndex ? 'selected' : ''}" data-index="${i}">
+      resultsContainer.innerHTML = searchResults.map((result, i) => {
+        let url = result.url;
+        if (base && !url.startsWith(base) && !url.startsWith('http')) {
+             url = base + url;
+        }
+        return `
+        <a href="${url}" class="search-result-item ${i === selectedIndex ? 'selected' : ''}" data-index="${i}">
           <div class="search-result-title">${result.meta?.title || result.url}</div>
           <div class="search-result-excerpt">${result.excerpt || ''}</div>
         </a>
-      `).join('');
+      `}).join('');
       
       // Add click handlers
       resultsContainer.querySelectorAll('.search-result-item').forEach((item) => {
diff --git a/src/template/src/components/SidebarGroup.astro b/src/template/src/components/SidebarGroup.astro
@@ -1,5 +1,6 @@
 ---
 import type { SidebarGroup } from '../types/config';
+import { createLink, isLinkActive } from '../utils/url';
 
 interface Props {
   group: SidebarGroup;
@@ -13,9 +14,8 @@ const groupId = group.label.toLowerCase().replace(/\s+/g, '-');
 
 const isActive = (item: any) => {
   const itemPath = item.href || `/${item.slug}`;
-  const normalizedPath = currentPath.replace(/\/$/, '');
-  const normalizedItemPath = itemPath.replace(/\/$/, '');
-  return normalizedPath === normalizedItemPath || normalizedPath === `${normalizedItemPath}.html`;
+  const fullItemPath = createLink(itemPath);
+  return isLinkActive(fullItemPath, currentPath);
 };
 
 // Check if any item in this group is active (for auto-expand)
@@ -33,11 +33,12 @@ const hasActiveItem = group.items?.some((item) => isActive(item)) ?? false;
   <ul class="sidebar-group-items list-none m-0 p-0 space-y-1 overflow-hidden transition-all duration-200">
     {group.items?.map((item) => {
         const itemHref = item.href || `/${item.slug}`;
+        const fullHref = createLink(itemHref);
         const active = isActive(item);
         return (
         <li>
             <a 
-            href={itemHref}
+            href={fullHref}
             class={active ? 'sidebar-link sidebar-link-active' : 'sidebar-link'}
             aria-current={active ? 'page' : undefined}
             >
diff --git a/src/template/src/components/landing/DocsHero.astro b/src/template/src/components/landing/DocsHero.astro
@@ -1,4 +1,6 @@
 ---
+import { createLink } from '../../utils/url';
+
 interface Props {
   title: string;
   subtitle?: string;
@@ -33,13 +35,13 @@ const { title, subtitle, image, primaryCTA, secondaryCTA, version } = Astro.prop
     
     <div class="flex flex-col sm:flex-row gap-6 justify-center items-center w-full sm:w-auto">
       {primaryCTA && (
-        <a href={primaryCTA.link} class="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-medium text-white transition-all duration-200 bg-primary rounded-full hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-0.5">
+        <a href={createLink(primaryCTA.link)} class="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-medium text-white transition-all duration-200 bg-primary rounded-full hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-0.5">
             {primaryCTA.text}
             <svg class="w-5 h-5 ml-2 -mr-1 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
         </a>
       )}
       {secondaryCTA && (
-        <a href={secondaryCTA.link} class="inline-flex items-center justify-center px-8 py-4 text-lg font-medium text-foreground transition-all duration-200 bg-card border border-border rounded-full hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-border shadow-sm hover:shadow-md">
+        <a href={createLink(secondaryCTA.link)} class="inline-flex items-center justify-center px-8 py-4 text-lg font-medium text-foreground transition-all duration-200 bg-card border border-border rounded-full hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-border shadow-sm hover:shadow-md">
             {secondaryCTA.text}
         </a>
       )}
diff --git a/src/template/src/components/mdx/Card.astro b/src/template/src/components/mdx/Card.astro
@@ -1,4 +1,6 @@
 ---
+import { createLink } from '../../utils/url';
+
 interface Props {
   title?: string;
   href?: string;
@@ -8,10 +10,11 @@ interface Props {
 const { title, href, icon } = Astro.props;
 
 const Tag = href ? 'a' : 'div';
+const link = href ? createLink(href) : undefined;
 ---
 
 <Tag 
-  href={href}
+  href={link}
   class={`
     block not-prose p-6 rounded border border-border bg-card 
     transition-all duration-300 hover:border-ring hover:shadow-lg
diff --git a/src/template/src/layouts/Layout.astro b/src/template/src/layouts/Layout.astro
@@ -4,6 +4,7 @@ import Sidebar from '../components/Sidebar.astro';
 import MobileNav from '../components/MobileNav.astro';
 import SearchModal from '../components/SearchModal.astro';
 import { getConfigFile } from '../utils/config';
+import { createLink } from '../utils/url';
 import '../styles/global.css';
 
 interface Props {
@@ -28,7 +29,7 @@ const config = await getConfigFile();
     <meta property="og:description" content={description || config.metadata.description} />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:creator" content={config.seo.twitterHandle} />
-    <link rel="icon" href={config.branding.favicon} />
+    <link rel="icon" href={createLink(config.branding.favicon)} />
     
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
diff --git a/src/template/src/pages/index.astro b/src/template/src/pages/index.astro
@@ -5,6 +5,7 @@ import DocsFeatureGrid from '../components/landing/DocsFeatureGrid.astro';
 import DocsFeature from '../components/landing/DocsFeature.astro';
 import Footer from '../components/Footer.astro';
 import { getConfigFile, getNavigation } from '../utils/config';
+import { createLink } from '../utils/url';
 
 const config = await getConfigFile();
 const shouldRenderLanding = config.landing?.enabled ?? false;
@@ -17,7 +18,7 @@ if (!shouldRenderLanding) {
   if (nav?.sidebar && nav.sidebar.length > 0) {
       const firstGroup = nav.sidebar[0];
       if (firstGroup.items.length > 0) {
-          redirectUrl = `/${firstGroup.items[0].slug}`;
+          redirectUrl = createLink(`/${firstGroup.items[0].slug}`);
       }
   }
 }
diff --git a/src/template/src/utils/url.ts b/src/template/src/utils/url.ts
@@ -0,0 +1,43 @@
+/**
+ * Creates a full URL path including the base URL
+ * @param path The path to link to (e.g. '/getting-started')
+ * @returns The full path with base URL (e.g. '/docs/getting-started')
+ */
+export function createLink(path: string): string {
+  if (!path) return path;
+  if (
+    path.startsWith("http") ||
+    path.startsWith("mailto:") ||
+    path.startsWith("#")
+  ) {
+    return path;
+  }
+
+  const base = import.meta.env.BASE_URL.replace(/\/$/, "");
+  const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+
+  // Avoid double slashes if base is empty or path is just slash
+  if (base === "" && normalizedPath === "/") return "/";
+
+  return `${base}${normalizedPath}`;
+}
+
+/**
+ * Checks if a link is active based on the current path
+ * @param href The link href
+ * @param currentPath The current page path
+ * @returns true if the link is active
+ */
+export function isLinkActive(href: string, currentPath: string): boolean {
+  const normalizedCurrent = currentPath.replace(/\/$/, "");
+  const normalizedHref = href.replace(/\/$/, "");
+
+  // Handle base URL in comparison if needed, but usually currentPath includes it
+  // If href doesn't include base, we might need to add it for comparison
+  // But usually we pass the full href to this function
+
+  return (
+    normalizedCurrent === normalizedHref ||
+    normalizedCurrent === `${normalizedHref}.html`
+  );
+}
