fix: keep shared navigation links canonical

Remove configurable `baseHref` so shared chrome cannot route canonical destinations into deployment subpaths.

Author: claymcleod

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@openwdl/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "OpenWDL shared React design system and component library.",
   "license": "BSD-3-Clause",
   "type": "module",

package.json

@@ -70,7 +70,7 @@ describe("Footer", () => {
     expect(labelsIn("Contact")).toEqual(["Slack"]);
   });
 
-  it("puts the brand site under Explore and marks only that Explore link as external", () => {
+  it("puts the Brand site under Explore without an external arrow", () => {
     render(<Footer logo={<span>OpenWDL</span>} />);
     const nav = screen.getByRole("navigation", { name: "Footer navigation" });
 
@@ -83,10 +83,11 @@ describe("Footer", () => {
       "Blog",
       "Brand",
     ]);
-    expect(exploreLinks.slice(0, 3).every((link) => link.querySelector("svg") === null)).toBe(true);
+    expect(exploreLinks.every((link) => link.querySelector("svg") === null)).toBe(true);
     expect(within(explore).getByRole("link", { name: "Brand" }))
       .toHaveAttribute("href", "https://brand.openwdl.org");
-    expect(within(explore).getByRole("link", { name: "Brand" }).querySelector("svg"))
+    const repositories = lists[1];
+    expect(within(repositories).getByRole("link", { name: "Specification" }).querySelector("svg"))
       .toBeInTheDocument();
 
     for (const list of within(nav).getAllByRole("list")) {

src/components/Footer.test.tsx

@@ -180,7 +180,7 @@ const COLUMNS: FooterColumn[] = [
       { label: "Home", href: "https://openwdl.org" },
       { label: "Documentation", href: "https://openwdl.org/docs/" },
       { label: "Blog", href: "https://openwdl.org/blog/" },
-      { label: "Brand", href: "https://brand.openwdl.org", external: true },
+      { label: "Brand", href: "https://brand.openwdl.org" },
     ],
   },
   {

src/components/Footer.tsx

@@ -36,6 +36,8 @@ describe("NavBar", () => {
 
   it("renders every canonical OpenWDL destination", () => {
     render(<NavBar logo={<span>OpenWDL</span>} />);
+    expect(screen.getByRole("link", { name: "OpenWDL home" }))
+      .toHaveAttribute("href", "https://openwdl.org/");
     const navigation = screen.getByRole("navigation", { name: "Primary navigation" });
     const destinationLabels = within(navigation)
       .getAllByRole("link")
@@ -65,41 +67,6 @@ describe("NavBar", () => {
       .toHaveAttribute("href", "https://openwdl.org/docs/start/your-first-workflow/");
   });
 
-  it("keeps every primary destination internal to the deployment base", () => {
-    render(<NavBar logo={<span>OpenWDL</span>} baseHref="/brand/" />);
-    const navigation = screen.getByRole("navigation", { name: "Primary navigation" });
-
-    // No primary destination points off-site any more; the only external link
-    // left in the nav is the GitHub utility.
-    const offBase = within(navigation)
-      .getAllByRole("link")
-      .filter((link) => !/^\/brand\//.test(link.getAttribute("href") ?? ""))
-      .map((link) => link.getAttribute("href"));
-    expect(offBase).toEqual(["https://github.com/openwdl"]);
-  });
-
-  it("keeps internal destinations within the deployment base", () => {
-    render(<NavBar logo={<span>OpenWDL</span>} baseHref="/brand/" />);
-
-    expect(screen.getByRole("link", { name: "OpenWDL home" }))
-      .toHaveAttribute("href", "/brand/");
-    expect(screen.queryByRole("link", { name: "About" }))
-      .not.toBeInTheDocument();
-    expect(screen.queryByRole("link", { name: "Community" }))
-      .not.toBeInTheDocument();
-    expect(screen.getByRole("link", { name: "Documentation" }))
-      .toHaveAttribute("href", "/brand/docs/");
-    expect(screen.getByRole("link", { name: "Blog" }))
-      .toHaveAttribute("href", "/brand/blog/");
-    expect(screen.queryByRole("link", { name: "Modules" }))
-      .not.toBeInTheDocument();
-    expect(screen.queryByRole("link", { name: "Brand" }))
-      .not.toBeInTheDocument();
-    expect(screen.getByRole("link", { name: "Get started" }))
-      .toHaveAttribute("href", "/brand/docs/start/your-first-workflow/");
-    expect(screen.queryByRole("link", { name: "Spec" })).not.toBeInTheDocument();
-  });
-
   it("marks the active canonical destination", () => {
     render(<NavBar logo={<span>OpenWDL</span>} active="docs" />);
     expect(screen.getByRole("link", { name: "Documentation" })).toHaveAttribute(
@@ -119,13 +86,6 @@ describe("NavBar", () => {
     expect(current).toEqual(["Blog"]);
   });
 
-
-  it("labels the logo link as the OpenWDL home, not a generic brand", () => {
-    render(<NavBar logo={<span>OpenWDL</span>} />);
-    expect(screen.getByRole("link", { name: "OpenWDL home" }))
-      .toHaveAttribute("href", "https://openwdl.org/");
-  });
-
   it("opens the mobile menu and closes it after selecting a link", () => {
     render(<NavBar logo={<span>OpenWDL</span>} />);
     const button = screen.getByRole("button", { name: "Open navigation" });

src/components/NavBar.test.tsx

@@ -24,27 +24,23 @@ export interface NavBarProps extends HTMLAttributes<HTMLElement> {
   logo?: ReactNode;
   /** Current canonical destination. */
   active?: NavBarActive;
-  /** Base URL for canonical destinations (default `"https://openwdl.org/"`). */
-  baseHref?: string;
   /** Stick to the top with a frosted backdrop (default `true`). */
   sticky?: boolean;
 }
 
 const DESTINATIONS = [
-  { key: "docs", label: "Documentation", path: "docs/" },
-  { key: "blog", label: "Blog", path: "blog/" },
+  { key: "docs", label: "Documentation", href: "https://openwdl.org/docs/" },
+  { key: "blog", label: "Blog", href: "https://openwdl.org/blog/" },
 ] as const;
 
+const HOME_HREF = "https://openwdl.org/";
+
 /**
  * The primary call to action resolves into the documentation quickstart rather
  * than a separate landing page: the shared goal across OpenWDL sites is getting
  * a newcomer to a running workflow, and that tutorial is where it happens.
  */
-const GET_STARTED_PATH = "docs/start/your-first-workflow/";
-
-function normalizeBaseHref(baseHref: string) {
-  return `${baseHref.replace(/\/+$/, "")}/`;
-}
+const GET_STARTED_HREF = "https://openwdl.org/docs/start/your-first-workflow/";
 
 function assignRef<T>(ref: ForwardedRef<T>, value: T | null) {
   if (typeof ref === "function") {
@@ -62,15 +58,13 @@ export const NavBar = forwardRef<HTMLElement, NavBarProps>(function NavBar(
   {
     logo = <OpenWdlLogo height={24} />,
     active,
-    baseHref = "https://openwdl.org/",
     sticky = true,
     className,
     onBlur,
     ...props
   },
   forwardedRef,
 ) {
-  const base = normalizeBaseHref(baseHref);
   const [menuOpen, setMenuOpen] = useState(false);
   const navigationId = useId();
   const navigationRef = useRef<HTMLElement>(null);
@@ -139,7 +133,7 @@ export const NavBar = forwardRef<HTMLElement, NavBarProps>(function NavBar(
     >
       <div className={styles.inner}>
         {logo && (
-          <a href={base} className={styles.brand} aria-label="OpenWDL home">
+          <a href={HOME_HREF} className={styles.brand} aria-label="OpenWDL home">
             {logo}
           </a>
         )}
@@ -155,7 +149,7 @@ export const NavBar = forwardRef<HTMLElement, NavBarProps>(function NavBar(
           {DESTINATIONS.map((destination) => (
             <a
               key={destination.key}
-              href={`${base}${destination.path}`}
+              href={destination.href}
               className={styles.navLink}
               aria-current={destination.key === active ? "page" : undefined}
             >
@@ -171,7 +165,7 @@ export const NavBar = forwardRef<HTMLElement, NavBarProps>(function NavBar(
           </span>
         </nav>
 
-        <a href={`${base}${GET_STARTED_PATH}`} className={styles.action}>
+        <a href={GET_STARTED_HREF} className={styles.action}>
           <span>Get started</span>
           <span className={styles.actionIcon} aria-hidden="true">
             <FiArrowRight />