coherent-docs-theme 1.0.2 → 1.0.4

package/index.ts

@@ -9,6 +9,7 @@ import type { CoherentThemeOptions } from './internal/themeConfig';
 import { fileURLToPath } from 'url';
 import { directives } from './remark-directives';
 import { getSortedCoherentReleases } from './utils/coherentReleases';
+import { version } from './package.json';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -56,7 +57,7 @@ export default function coherentThemePlugin(options: CoherentThemeOptions = { do
     name: 'coherent-docs-theme',
     hooks: {
       'config:setup'({ config, logger, updateConfig, addIntegration }) {
-        logger.info('Initializing Coherent Theme...');
+        logger.info(`Initializing Coherent Theme v${version}...`);
 
         addIntegration({
           name: 'coherent-docs-theme-integration',

package/internal-components/NavLinks.astro

@@ -7,12 +7,41 @@ interface Props {
 }
 
 const { type = "header" } = Astro.props;
-const { navLinks } = getThemeConfig();
-const currentPath = Astro.url.pathname;
+const { navLinks, documentationSearchTag } = getThemeConfig();
+const currentUrl = Astro.url;
+
+const isLinkActive = (href: string, label: string) => {
+    try {
+        const linkUrl = new URL(href, currentUrl.origin);
+        const isLocal =
+            currentUrl.hostname === "localhost" ||
+            currentUrl.hostname === "127.0.0.1";
+
+        const normalize = (p: string) => p.replace(/\/+$/, "") || "/";
+        const currentPath = normalize(currentUrl.pathname);
+        const linkPath = normalize(linkUrl.pathname);
+
+        if (isLocal) {
+            const isCurrentProject = label === documentationSearchTag;
+
+            if (!isCurrentProject) return false;
+
+            if (linkPath === "/") return true;
+            return (
+                currentPath === linkPath ||
+                currentPath.startsWith(linkPath + "/")
+            );
+        }
+
+        if (linkUrl.origin !== currentUrl.origin) return false;
 
-const isLinkActive = (href: string) => {
-    if (href === "/") return currentPath === "/";
-    return currentPath.startsWith(href);
+        if (linkPath === "/") return currentPath === "/";
+        return (
+            currentPath === linkPath || currentPath.startsWith(linkPath + "/")
+        );
+    } catch (e) {
+        return false;
+    }
 };
 
 const navClasses =
@@ -20,14 +49,20 @@ const navClasses =
         ? "extra-links sl-hidden md:sl-flex"
         : "extra-links mobile sidebar-mode lg:hidden";
 
-const activeLinkObj = navLinks?.find((link) => isLinkActive(link.href));
+const activeLinkObj = navLinks?.find((link) =>
+    isLinkActive(link.href, link.label),
+);
 const activeLabel = activeLinkObj ? activeLinkObj.label : "Documentations";
 ---
 
 {
     navLinks && navLinks.length > 0 && (
         <>
-            <nav class={"smart-nav " + navClasses} id="smart-nav" aria-label="Global Navigation">
+            <nav
+                class={"smart-nav " + navClasses}
+                id="smart-nav"
+                aria-label="Global Navigation"
+            >
                 {type === "header" && (
                     <div class="vertical-separator md:sl-flex" />
                 )}
@@ -37,7 +72,7 @@ const activeLabel = activeLinkObj ? activeLinkObj.label : "Documentations";
                         <li class="nav-item">
                             <a
                                 href={link.href}
-                                class={`nav-link ${isLinkActive(link.href) ? "active" : ""}`}
+                                class={`nav-link ${isLinkActive(link.href, link.label) ? "active" : ""}`}
                             >
                                 {link.label}
                             </a>
@@ -56,7 +91,7 @@ const activeLabel = activeLinkObj ? activeLinkObj.label : "Documentations";
                             <li>
                                 <a
                                     href={link.href}
-                                    class={`dropdown-link ${isLinkActive(link.href) ? "active" : ""}`}
+                                    class={`dropdown-link ${isLinkActive(link.href, link.label) ? "active" : ""}`}
                                 >
                                     {link.label}
                                 </a>
@@ -191,9 +226,15 @@ const activeLabel = activeLinkObj ? activeLinkObj.label : "Documentations";
 
         constructor(navElement: HTMLElement) {
             this.container = navElement;
-            this.verticalSeparator = navElement.querySelector(".vertical-separator") as HTMLElement;
-            this.fullList = navElement.querySelector(".full-nav-list") as HTMLElement;
-            this.collapsedMenu = navElement.querySelector(".collapsed-menu") as HTMLElement;
+            this.verticalSeparator = navElement.querySelector(
+                ".vertical-separator",
+            ) as HTMLElement;
+            this.fullList = navElement.querySelector(
+                ".full-nav-list",
+            ) as HTMLElement;
+            this.collapsedMenu = navElement.querySelector(
+                ".collapsed-menu",
+            ) as HTMLElement;
 
             this.fullListWidth = this.calculateRequiredWidth();
 
@@ -230,12 +271,14 @@ const activeLabel = activeLinkObj ? activeLinkObj.label : "Documentations";
             if (availableWidth === 0) return;
 
             if (availableWidth < this.fullListWidth) {
-                if(this.verticalSeparator) this.verticalSeparator.style.display = "none";
+                if (this.verticalSeparator)
+                    this.verticalSeparator.style.display = "none";
                 this.container.style.flexDirection = "row-reverse";
                 this.fullList.style.display = "none";
                 this.collapsedMenu.style.display = "block";
             } else {
-                if(this.verticalSeparator) this.verticalSeparator.style.display = "block";
+                if (this.verticalSeparator)
+                    this.verticalSeparator.style.display = "block";
                 this.container.style.flexDirection = "row";
                 this.fullList.style.display = "flex";
                 this.collapsedMenu.style.display = "none";
@@ -250,4 +293,4 @@ const activeLabel = activeLinkObj ? activeLinkObj.label : "Documentations";
 
     document.addEventListener("astro:page-load", init);
     document.addEventListener("DOMContentLoaded", init);
-</script>
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coherent-docs-theme",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "license": "MIT",
   "description": "Theme for all the coherent documentations",
   "author": "CoherentLabs",