Restyle Breadcrumbs

patches/nextra-theme-docs.patch

@@ -1,8 +1,8 @@
 diff --git a/dist/index.d.mts b/dist/index.d.mts
-index 71f87bcd1dde49d7c19ad49fc098e715a76c5c10..aadd6228910ee3ebafccfae8672cb9ae1b0bca3c 100644
+index 71f87bcd1dde49d7c19ad49fc098e715a76c5c10..53dffe4fbe5fb2a92cb55a0466bf95315f904e4e 100644
 --- a/dist/index.d.mts
 +++ b/dist/index.d.mts
-@@ -1421,3 +1421,25 @@ declare function ThemeSwitch({ lite, className }: ThemeSwitchProps): ReactElemen
+@@ -1421,3 +1421,24 @@ declare function ThemeSwitch({ lite, className }: ThemeSwitchProps): ReactElemen
  declare function Layout({ children, themeConfig, pageOpts }: NextraThemeLayoutProps): ReactElement;
 
  export { Bleed, Collapse, type PartialDocsThemeConfig as DocsThemeConfig, Link, LocaleSwitch, Navbar, NotFoundPage, SkipNavContent, SkipNavLink, ThemeSwitch, Layout as default, getComponents, useConfig, useMenu, useThemeConfig };
@@ -22,14 +22,13 @@ index 71f87bcd1dde49d7c19ad49fc098e715a76c5c10..aadd6228910ee3ebafccfae8672cb9ae
 +export declare const useIntersectionObserver: () => IntersectionObserver | null
 +export declare const useSlugs: () => WeakMap<any, any>
 +
-+export declare const Breadcrumb: (props: { activePath: Item[] }) => ReactElement | null
 +export declare const NavLinks: (props: NavLinkProps) => ReactElement | null
 +export interface NavLinkProps {
 +  currentIndex: number
 +  flatDocsDirectories: Item[]
 +}
 diff --git a/dist/index.js b/dist/index.js
-index 56201641fd965dcc5ab7c5df53e444c41293c00e..07147c688ae75c4c7daf082833acc71de16b36ee 100644
+index 56201641fd965dcc5ab7c5df53e444c41293c00e..29a446663f5d24acad0389f873c5e31be910717c 100644
 --- a/dist/index.js
 +++ b/dist/index.js
 @@ -100,10 +100,10 @@ IntersectionObserverContext.displayName = "IntersectionObserver";
@@ -47,16 +46,52 @@ index 56201641fd965dcc5ab7c5df53e444c41293c00e..07147c688ae75c4c7daf082833acc71d
  var ActiveAnchorProvider = ({
    children
  }) => {
-@@ -526,7 +526,7 @@ import NextLink2 from "next/link";
- import { ArrowRightIcon } from "nextra/icons";
- import { Fragment as Fragment3 } from "react";
- import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+@@ -520,44 +520,6 @@ function Bleed({
+   );
+ }
+
+-// src/components/breadcrumb.tsx
+-import cn4 from "clsx";
+-import NextLink2 from "next/link";
+-import { ArrowRightIcon } from "nextra/icons";
+-import { Fragment as Fragment3 } from "react";
+-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 -function Breadcrumb({
-+export function Breadcrumb({
-   activePath
- }) {
-   return /* @__PURE__ */ jsx9("div", { className: "nextra-breadcrumb _mt-1.5 _flex _items-center _gap-1 _overflow-hidden _text-sm _text-gray-500 dark:_text-gray-400 contrast-more:_text-current", children: activePath.map((item, index, arr) => {
-@@ -1255,7 +1255,7 @@ var classes = {
+-  activePath
+-}) {
+-  return /* @__PURE__ */ jsx9("div", { className: "nextra-breadcrumb _mt-1.5 _flex _items-center _gap-1 _overflow-hidden _text-sm _text-gray-500 dark:_text-gray-400 contrast-more:_text-current", children: activePath.map((item, index, arr) => {
+-    const nextItem = arr[index + 1];
+-    const href = nextItem ? item.withIndexPage ? item.route : item.children[0].route === nextItem.route ? "" : item.children[0].route : "";
+-    const ComponentToUse = href ? NextLink2 : "span";
+-    return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+-      index > 0 && /* @__PURE__ */ jsx9(
+-        ArrowRightIcon,
+-        {
+-          height: "14",
+-          className: "_shrink-0 rtl:_rotate-180"
+-        }
+-      ),
+-      /* @__PURE__ */ jsx9(
+-        ComponentToUse,
+-        __spreadProps(__spreadValues({
+-          className: cn4(
+-            "_whitespace-nowrap _transition-colors",
+-            nextItem ? "_min-w-6 _overflow-hidden _text-ellipsis" : "_font-medium _text-gray-700 contrast-more:_font-bold contrast-more:_text-current dark:_text-gray-100 contrast-more:dark:_text-current",
+-            href && "nextra-focus _ring-inset hover:_text-gray-900 dark:hover:_text-gray-100"
+-          ),
+-          title: item.title
+-        }, href && { href }), {
+-          children: item.title
+-        })
+-      )
+-    ] }, item.route + item.name);
+-  }) });
+-}
+-
+ // src/components/collapse.tsx
+ import cn5 from "clsx";
+ import { useEffect as useEffect3, useRef as useRef3 } from "react";
+@@ -1255,7 +1217,7 @@ var classes = {
    ),
    icon: cn10("_inline _h-5 _shrink-0")
  };
@@ -65,3 +100,11 @@ index 56201641fd965dcc5ab7c5df53e444c41293c00e..07147c688ae75c4c7daf082833acc71d
    flatDocsDirectories,
    currentIndex
  }) {
+@@ -2421,7 +2383,6 @@ function Body({ children }) {
+         themeContext.typesetting === "article" && "nextra-body-typesetting-article"
+       ),
+       children: /* @__PURE__ */ jsxs17("main", { className: "_w-full _min-w-0 _max-w-6xl _px-6 _pt-4 md:_px-12", children: [
+-        activeType !== "page" && themeContext.breadcrumb && /* @__PURE__ */ jsx26(Breadcrumb, { activePath }),
+         body
+       ] })
+     }

patches/nextra.patch

@@ -1,14 +1,3 @@
-diff --git a/dist/client/components/image.js b/dist/client/components/image.js
-index 239d72f5921e2d1b7359e569ae5b74c12d7c9d8a..ebeb619da1e3ccb7722e9388c92c1e2192527027 100644
---- a/dist/client/components/image.js
-+++ b/dist/client/components/image.js
-@@ -1,5 +1,5 @@
- import { jsx } from "react/jsx-runtime";
--import NextImage from "next/image";
-+import NextImage from "next/image"; // :)
- import { forwardRef } from "react";
- const Image = forwardRef((props, ref) => {
-   const ComponentToUse = typeof props.src === "object" ? NextImage : "img";
 diff --git a/dist/client/components/index.js b/dist/client/components/index.js
 index 9d05118d3d10e746cd2c020785a0f34465bb8570..218107600d7efed1b5f9d49f0a696b166917d1ce 100644
 --- a/dist/client/components/index.js

src/_design-system/breadcrumbs.tsx

@@ -0,0 +1,62 @@
+import { Fragment } from "react"
+import { clsx } from "clsx"
+import NextLink from "next/link"
+import { ArrowRightIcon } from "nextra/icons"
+import type { Item } from "nextra/normalize-pages"
+
+import CaretDown from "@/app/conf/_design-system/pixelarticons/caret-down.svg?svgr"
+
+import { extractStringsFromReactNode } from "../components/utils/extract-strings-from-react-node"
+
+export const Breadcrumbs = ({
+  activePath,
+  className,
+}: {
+  activePath: Item[]
+  className?: string
+}) => {
+  return (
+    <div
+      className={clsx(
+        "typography-menu flex items-center gap-1 overflow-hidden text-sm",
+        className,
+      )}
+    >
+      {activePath.map((item, index, arr) => {
+        const nextItem = arr[index + 1]
+        const href = nextItem
+          ? "frontMatter" in item
+            ? item.route
+            : (item as { children: { route: string }[] }).children[0]?.route ===
+                nextItem.route
+              ? ""
+              : (item as { children: { route: string }[] }).children[0]?.route
+          : ""
+
+        const title = extractStringsFromReactNode(item.title)
+        const className = clsx(
+          "truncate text-neu-700 dark:text-neu-400 min-w-6 last:text-neu-800 dark:last:text-neu-800 leading-none",
+          href &&
+            "focus-visible:gql-focus-visible ring-inset hover:text-neu-900 hover:underline",
+        )
+
+        return (
+          <Fragment key={item.route + item.name}>
+            {index > 0 && (
+              <CaretDown className="size-4 translate-x-[0.5px] -rotate-90" />
+            )}
+            {href ? (
+              <NextLink href={href} title={title} prefetch={false}>
+                {item.title}
+              </NextLink>
+            ) : (
+              <span className={className} title={title}>
+                {item.title}
+              </span>
+            )}
+          </Fragment>
+        )
+      })}
+    </div>
+  )
+}

src/components/footer/index.tsx

@@ -6,7 +6,7 @@ import { SocialIcons } from "@/app/conf/_components/social-icons"
 import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 import blurBean from "@/app/conf/2025/components/footer/blur-bean.webp"
 
-import { renderComponent } from "../utils"
+import { renderComponent } from "../utils/render-component"
 import { Anchor } from "@/app/conf/_design-system/anchor"
 import type { ReactNode } from "react"
 import { ConferenceFooterBox } from "./conference-footer-box"

src/components/navbar/navbar.tsx

@@ -8,7 +8,7 @@ import type * as normalizePages from "nextra/normalize-pages"
 import { Fragment, useState, type ReactElement, type ReactNode } from "react"
 import { useMenu, useThemeConfig } from "nextra-theme-docs"
 import { Anchor } from "@/app/conf/_design-system/anchor"
-import { renderComponent } from "@/components/utils"
+import { renderComponent } from "@/components/utils/render-component"
 
 import MenuIcon from "@/app/conf/_design-system/pixelarticons/menu.svg?svgr"
 import CloseIcon from "@/app/conf/_design-system/pixelarticons/close.svg?svgr"

src/components/nextra-mdx-wrapper.tsx

@@ -5,14 +5,14 @@ import {
   useConfig,
   useThemeConfig,
   SkipNavContent,
-  Breadcrumb,
   NavLinks,
 } from "nextra-theme-docs"
 import { clsx } from "clsx"
 
 import { Sidebar } from "./sidebar"
-import { renderComponent } from "./utils"
+import { renderComponent } from "./utils/render-component"
 import { TableOfContents } from "./table-of-contents"
+import { Breadcrumbs } from "../_design-system/breadcrumbs"
 
 const classes = {
   toc: clsx("nextra-toc order-last max-xl:hidden w-64 shrink-0 print:hidden"),
@@ -146,7 +146,7 @@ function Body({ children }: { children: ReactNode }): ReactElement {
     >
       <main className="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
         {activeType !== "page" && themeContext.breadcrumb && (
-          <Breadcrumb activePath={activePath} />
+          <Breadcrumbs activePath={activePath} className="mt-1.5" />
         )}
         {body}
       </main>

src/components/sidebar.tsx

@@ -20,7 +20,7 @@ import {
   useState,
 } from "react"
 import scrollIntoView from "scroll-into-view-if-needed"
-import { renderComponent } from "./utils"
+import { renderComponent } from "./utils/render-component"
 import {
   useActiveAnchor,
   useMenu,
@@ -52,7 +52,7 @@ const Folder = memo(function FolderInner(props: FolderProps) {
 const classes = {
   link: cn(
     "_flex _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word]",
-    "_cursor-pointer contrast-more:border contrast-more:hover:underline",
+    "_cursor-pointer contrast-more:border contrast-more:hover:underline gql-focus-visible focus-visible:outline-offset-1",
   ),
   inactive: cn(
     "text-neu-800 hover:bg-neu-100 hover:text-neu-900 hover:bg-neu-100 dark:hover:bg-neu-50/50",

src/components/table-of-contents.tsx

@@ -8,7 +8,7 @@ import { useEffect, useRef, type ReactElement } from "react"
 import scrollIntoView from "scroll-into-view-if-needed"
 
 import { Anchor } from "../app/conf/_design-system/anchor"
-import { renderComponent } from "./utils"
+import { renderComponent } from "./utils/render-component"
 import { BackToTop } from "./back-to-top"
 
 export type TableOfContentsProps = {

src/components/utils/extract-strings-from-react-node.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from "react"
+
+export function extractStringsFromReactNode(node: ReactNode): string {
+  if (typeof node === "string") return node
+  if (typeof node === "number") return String(node)
+  if (Array.isArray(node))
+    return node.map(n => extractStringsFromReactNode(n)).join("")
+
+  const children = (node as any)?.props?.children as ReactNode
+  if (!children) return ""
+  return extractStringsFromReactNode(children)
+}