boltdocs 1.0.4 → 1.3.1

package/src/client/theme/ui/Link/Link.tsx

@@ -1,202 +1,254 @@
-import React from "react";
-import {
-  Link as RouterLink,
-  NavLink as RouterNavLink,
-  LinkProps as RouterLinkProps,
-  NavLinkProps as RouterNavLinkProps,
-  useLocation,
-} from "react-router-dom";
-import { usePreload } from "../../../app/preload";
-import { useConfig } from "../../../app";
-
-function useLocalizedTo(to: RouterLinkProps["to"]) {
-  const location = useLocation();
-  const config = useConfig();
-  if (!config || typeof to !== "string") return to;
-  if (!config.i18n && !config.versions) return to;
-
-  const basePath = "/docs";
-  if (!to.startsWith(basePath)) return to;
-
-  // 1. Detect current context from location
-  const curSub = location.pathname.substring(basePath.length);
-  const curParts = curSub.split("/").filter(Boolean);
-
-  let currentVersion = config.versions?.defaultVersion;
-  let currentLocale = config.i18n?.defaultLocale;
-
-  let cIdx = 0;
-  if (
-    config.versions &&
-    curParts.length > cIdx &&
-    config.versions.versions[curParts[cIdx]]
-  ) {
-    currentVersion = curParts[cIdx];
-    cIdx++;
-  }
-  if (
-    config.i18n &&
-    curParts.length > cIdx &&
-    config.i18n.locales[curParts[cIdx]]
-  ) {
-    currentLocale = curParts[cIdx];
-  }
-
-  // 2. Parse the target `to` path
-  const toSub = to.substring(basePath.length);
-  const toParts = toSub.split("/").filter(Boolean);
-
-  let tIdx = 0;
-  let hasVersion = false;
-  let hasLocale = false;
-
-  if (
-    config.versions &&
-    toParts.length > tIdx &&
-    config.versions.versions[toParts[tIdx]]
-  ) {
-    hasVersion = true;
-    tIdx++;
-  }
-  if (
-    config.i18n &&
-    toParts.length > tIdx &&
-    config.i18n.locales[toParts[tIdx]]
-  ) {
-    hasLocale = true;
-    tIdx++;
-  }
-
-  // Extract just the actual route parts
-  const routeParts = toParts.slice(tIdx);
-
-  // Reconstruct path
-  const finalParts = [];
-  if (config.versions) {
-    if (hasVersion) {
-      finalParts.push(toParts[0]);
-    } else if (currentVersion) {
-      finalParts.push(currentVersion);
-    }
-  }
-  if (config.i18n) {
-    if (hasLocale) {
-      finalParts.push(toParts[hasVersion ? 1 : 0]);
-    } else if (currentLocale) {
-      finalParts.push(currentLocale);
-    }
-  }
-
-  finalParts.push(...routeParts);
-
-  let finalPath = `${basePath}/${finalParts.join("/")}`;
-  if (finalPath.endsWith("/")) {
-    finalPath = finalPath.slice(0, -1);
-  }
-  return finalPath === basePath ? basePath : finalPath;
-}
-
-export interface LinkProps extends Omit<RouterLinkProps, "prefetch"> {
-  /** Should prefetch the page on hover? Options: 'hover' | 'none'. Default 'hover' */
-  boltdocsPrefetch?: "hover" | "none";
-}
-
-export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
-  (props, ref) => {
-    const {
-      boltdocsPrefetch = "hover",
-      onMouseEnter,
-      onFocus,
-      to,
-      ...rest
-    } = props;
-    const localizedTo = useLocalizedTo(to);
-    const { preload } = usePreload();
-
-    const handleMouseEnter = (e: React.MouseEvent<HTMLAnchorElement>) => {
-      onMouseEnter?.(e);
-      if (
-        boltdocsPrefetch === "hover" &&
-        typeof localizedTo === "string" &&
-        localizedTo.startsWith("/")
-      ) {
-        preload(localizedTo);
-      }
-    };
-
-    const handleFocus = (e: React.FocusEvent<HTMLAnchorElement>) => {
-      onFocus?.(e);
-      if (
-        boltdocsPrefetch === "hover" &&
-        typeof localizedTo === "string" &&
-        localizedTo.startsWith("/")
-      ) {
-        preload(localizedTo);
-      }
-    };
-
-    return (
-      <RouterLink
-        ref={ref}
-        to={localizedTo}
-        onMouseEnter={handleMouseEnter}
-        onFocus={handleFocus}
-        {...rest}
-      />
-    );
-  },
-);
-Link.displayName = "Link";
-
-export interface NavLinkProps extends Omit<RouterNavLinkProps, "prefetch"> {
-  /** Should prefetch the page on hover? Options: 'hover' | 'none'. Default 'hover' */
-  boltdocsPrefetch?: "hover" | "none";
-}
-
-export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
-  (props, ref) => {
-    const {
-      boltdocsPrefetch = "hover",
-      onMouseEnter,
-      onFocus,
-      to,
-      ...rest
-    } = props;
-
-    const localizedTo = useLocalizedTo(to);
-    const { preload } = usePreload();
-
-    const handleMouseEnter = (e: React.MouseEvent<HTMLAnchorElement>) => {
-      onMouseEnter?.(e);
-      if (
-        boltdocsPrefetch === "hover" &&
-        typeof localizedTo === "string" &&
-        localizedTo.startsWith("/")
-      ) {
-        preload(localizedTo);
-      }
-    };
-
-    const handleFocus = (e: React.FocusEvent<HTMLAnchorElement>) => {
-      onFocus?.(e);
-      if (
-        boltdocsPrefetch === "hover" &&
-        typeof localizedTo === "string" &&
-        localizedTo.startsWith("/")
-      ) {
-        preload(localizedTo);
-      }
-    };
-
-    return (
-      <RouterNavLink
-        ref={ref}
-        to={localizedTo}
-        onMouseEnter={handleMouseEnter}
-        onFocus={handleFocus}
-        {...rest}
-      />
-    );
-  },
-);
-NavLink.displayName = "NavLink";
+import React from "react";
+import {
+  Link as RouterLink,
+  NavLink as RouterNavLink,
+  LinkProps as RouterLinkProps,
+  NavLinkProps as RouterNavLinkProps,
+  useLocation,
+  useNavigate,
+} from "react-router-dom";
+import { usePreload } from "../../../app/preload";
+import { useConfig } from "../../../app";
+
+function useLocalizedTo(to: RouterLinkProps["to"]) {
+  const location = useLocation();
+  const config = useConfig();
+  if (!config || typeof to !== "string") return to;
+  if (!config.i18n && !config.versions) return to;
+
+  const basePath = "/docs";
+  if (!to.startsWith(basePath)) return to;
+
+  // 1. Detect current context from location
+  const curSub = location.pathname.substring(basePath.length);
+  const curParts = curSub.split("/").filter(Boolean);
+
+  let currentVersion = config.versions?.defaultVersion;
+  let currentLocale = config.i18n?.defaultLocale;
+
+  let cIdx = 0;
+  if (
+    config.versions &&
+    curParts.length > cIdx &&
+    config.versions.versions[curParts[cIdx]]
+  ) {
+    currentVersion = curParts[cIdx];
+    cIdx++;
+  }
+  if (
+    config.i18n &&
+    curParts.length > cIdx &&
+    config.i18n.locales[curParts[cIdx]]
+  ) {
+    currentLocale = curParts[cIdx];
+  }
+
+  // 2. Parse the target `to` path
+  const toSub = to.substring(basePath.length);
+  const toParts = toSub.split("/").filter(Boolean);
+
+  let tIdx = 0;
+  let hasVersion = false;
+  let hasLocale = false;
+
+  if (
+    config.versions &&
+    toParts.length > tIdx &&
+    config.versions.versions[toParts[tIdx]]
+  ) {
+    hasVersion = true;
+    tIdx++;
+  }
+  if (
+    config.i18n &&
+    toParts.length > tIdx &&
+    config.i18n.locales[toParts[tIdx]]
+  ) {
+    hasLocale = true;
+    tIdx++;
+  }
+
+  // Extract just the actual route parts
+  const routeParts = toParts.slice(tIdx);
+
+  // Reconstruct path
+  const finalParts = [];
+  if (config.versions) {
+    if (hasVersion) {
+      finalParts.push(toParts[0]);
+    } else if (currentVersion) {
+      finalParts.push(currentVersion);
+    }
+  }
+  if (config.i18n) {
+    if (hasLocale) {
+      finalParts.push(toParts[hasVersion ? 1 : 0]);
+    } else if (currentLocale) {
+      finalParts.push(currentLocale);
+    }
+  }
+
+  finalParts.push(...routeParts);
+
+  let finalPath = `${basePath}/${finalParts.join("/")}`;
+  if (finalPath.endsWith("/")) {
+    finalPath = finalPath.slice(0, -1);
+  }
+  return finalPath === basePath ? basePath : finalPath;
+}
+
+export interface LinkProps extends Omit<RouterLinkProps, "prefetch"> {
+  /** Should prefetch the page on hover? Options: 'hover' | 'none'. Default 'hover' */
+  boltdocsPrefetch?: "hover" | "none";
+}
+
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  (props, ref) => {
+    const {
+      boltdocsPrefetch = "hover",
+      onMouseEnter,
+      onFocus,
+      onClick,
+      to,
+      ...rest
+    } = props;
+    const localizedTo = useLocalizedTo(to);
+    const { preload } = usePreload();
+    const navigate = useNavigate();
+
+    const handleMouseEnter = (e: React.MouseEvent<HTMLAnchorElement>) => {
+      onMouseEnter?.(e);
+      if (
+        boltdocsPrefetch === "hover" &&
+        typeof localizedTo === "string" &&
+        localizedTo.startsWith("/")
+      ) {
+        preload(localizedTo);
+      }
+    };
+
+    const handleFocus = (e: React.FocusEvent<HTMLAnchorElement>) => {
+      onFocus?.(e);
+      if (
+        boltdocsPrefetch === "hover" &&
+        typeof localizedTo === "string" &&
+        localizedTo.startsWith("/")
+      ) {
+        preload(localizedTo);
+      }
+    };
+
+    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+      // Allow user onClick to handle defaults or custom logic
+      onClick?.(e);
+
+      // If default prevented or not a simple left click, don't handle
+      if (
+        e.defaultPrevented ||
+        e.button !== 0 ||
+        e.metaKey ||
+        e.ctrlKey ||
+        e.shiftKey ||
+        e.altKey
+      ) {
+        return;
+      }
+
+      // Intercept navigation to wrap in startTransition
+      if (typeof localizedTo === "string" && !localizedTo.startsWith("http")) {
+        e.preventDefault();
+        React.startTransition(() => {
+          navigate(localizedTo);
+        });
+      }
+    };
+
+    return (
+      <RouterLink
+        ref={ref}
+        to={localizedTo}
+        onMouseEnter={handleMouseEnter}
+        onFocus={handleFocus}
+        onClick={handleClick}
+        {...rest}
+      />
+    );
+  },
+);
+Link.displayName = "Link";
+
+export interface NavLinkProps extends Omit<RouterNavLinkProps, "prefetch"> {
+  /** Should prefetch the page on hover? Options: 'hover' | 'none'. Default 'hover' */
+  boltdocsPrefetch?: "hover" | "none";
+}
+
+export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
+  (props, ref) => {
+    const {
+      boltdocsPrefetch = "hover",
+      onMouseEnter,
+      onFocus,
+      onClick,
+      to,
+      ...rest
+    } = props;
+
+    const localizedTo = useLocalizedTo(to);
+    const { preload } = usePreload();
+    const navigate = useNavigate();
+
+    const handleMouseEnter = (e: React.MouseEvent<HTMLAnchorElement>) => {
+      onMouseEnter?.(e);
+      if (
+        boltdocsPrefetch === "hover" &&
+        typeof localizedTo === "string" &&
+        localizedTo.startsWith("/")
+      ) {
+        preload(localizedTo);
+      }
+    };
+
+    const handleFocus = (e: React.FocusEvent<HTMLAnchorElement>) => {
+      onFocus?.(e);
+      if (
+        boltdocsPrefetch === "hover" &&
+        typeof localizedTo === "string" &&
+        localizedTo.startsWith("/")
+      ) {
+        preload(localizedTo);
+      }
+    };
+
+    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+      onClick?.(e);
+      if (
+        e.defaultPrevented ||
+        e.button !== 0 ||
+        e.metaKey ||
+        e.ctrlKey ||
+        e.shiftKey ||
+        e.altKey
+      ) {
+        return;
+      }
+      if (typeof localizedTo === "string" && !localizedTo.startsWith("http")) {
+        e.preventDefault();
+        React.startTransition(() => {
+          navigate(localizedTo);
+        });
+      }
+    };
+
+    return (
+      <RouterNavLink
+        ref={ref}
+        to={localizedTo}
+        onMouseEnter={handleMouseEnter}
+        onFocus={handleFocus}
+        onClick={handleClick}
+        {...rest}
+      />
+    );
+  },
+);
+NavLink.displayName = "NavLink";

package/src/client/theme/ui/Link/index.ts

@@ -1,2 +1,2 @@
-export { Link, NavLink } from "./Link";
-export type { LinkProps, NavLinkProps } from "./Link";
+export { Link, NavLink } from "./Link";
+export type { LinkProps, NavLinkProps } from "./Link";

package/src/client/theme/ui/Loading/Loading.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-
-export function Loading() {
-  return (
-    <div className="boltdocs-loading">
-      <div className="loading-spinner" />
-      <p className="loading-text">Loading...</p>
-    </div>
-  );
-}
+import React from 'react';
+
+export function Loading() {
+  return (
+    <div className="boltdocs-loading">
+      <div className="loading-spinner" />
+      <p className="loading-text">Loading...</p>
+    </div>
+  );
+}

package/src/client/theme/ui/Loading/index.ts

@@ -1 +1 @@
-export { Loading } from "./Loading";
+export { Loading } from "./Loading";

package/src/client/theme/ui/Loading/loading.css

@@ -1,30 +1,30 @@
-/* ─── Loading ─────────────────────────────────────────────── */
-.boltdocs-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 40vh;
-  gap: 1rem;
-}
-
-.loading-spinner {
-  width: 2.5rem;
-  height: 2.5rem;
-  border: 3px solid var(--ld-border-subtle);
-  border-top-color: var(--ld-color-primary);
-  border-radius: 50%;
-  animation: boltdocs-spin 0.7s linear infinite;
-}
-
-@keyframes boltdocs-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.loading-text {
-  font-size: 0.875rem;
-  color: var(--ld-text-dim);
-  margin: 0;
-}
+/* ─── Loading ─────────────────────────────────────────────── */
+.boltdocs-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 40vh;
+  gap: 1rem;
+}
+
+.loading-spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 3px solid var(--ld-border-subtle);
+  border-top-color: var(--ld-color-primary);
+  border-radius: 50%;
+  animation: boltdocs-spin 0.7s linear infinite;
+}
+
+@keyframes boltdocs-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  font-size: 0.875rem;
+  color: var(--ld-text-dim);
+  margin: 0;
+}

package/src/client/theme/ui/Navbar/GithubStars.tsx

@@ -1,27 +1,27 @@
-import { useEffect, useState } from "react";
-import { GitHub } from "../../icons/github";
-import { getStarsRepo } from "../../../utils";
-
-export function GithubStars({ repo }: { repo: string }) {
-  const [stars, setStars] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (repo) {
-      getStarsRepo(repo)
-        .then((stars) => setStars(stars))
-        .catch(() => setStars("0"));
-    }
-  }, [repo]);
-
-  return (
-    <a
-      href={`https://github.com/${repo}`}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="navbar-github-stars"
-    >
-      <GitHub />
-      {stars && <span>{stars}</span>}
-    </a>
-  );
-}
+import { useEffect, useState } from "react";
+import { GitHub } from "../../icons/github";
+import { getStarsRepo } from "../../../utils";
+
+export function GithubStars({ repo }: { repo: string }) {
+  const [stars, setStars] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (repo) {
+      getStarsRepo(repo)
+        .then((stars) => setStars(stars))
+        .catch(() => setStars("0"));
+    }
+  }, [repo]);
+
+  return (
+    <a
+      href={`https://github.com/${repo}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="navbar-github-stars"
+    >
+      <GitHub />
+      {stars && <span>{stars}</span>}
+    </a>
+  );
+}