radiant-docs 0.1.68 → 0.1.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radiant-docs",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "description": "CLI tool for previewing Radiant documentation locally",
   "type": "module",
   "bin": {

package/template/package-lock.json

@@ -32,6 +32,7 @@
         "@iconify/react": "^6.0.2",
         "@paper-design/shaders": "^0.0.76",
         "@preact/preset-vite": "^2.10.3",
+        "@radiant-docs/assistant-shiki": "file:../packages/assistant-shiki",
         "@readme/oas-to-snippet": "^29.3.0",
         "@shikijs/core": "4.2.0",
         "@shikijs/engine-javascript": "4.2.0",
@@ -3222,6 +3223,10 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/@radiant-docs/assistant-shiki": {
+      "resolved": "../packages/assistant-shiki",
+      "link": true
+    },
     "node_modules/@readme/better-ajv-errors": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@readme/better-ajv-errors/-/better-ajv-errors-2.4.0.tgz",

package/template/package.json

@@ -7,6 +7,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@radiant-docs/assistant-shiki": "file:../packages/assistant-shiki",
     "@alpinejs/collapse": "^3.15.2",
     "@alpinejs/focus": "^3.15.3",
     "@alpinejs/persist": "^3.15.2",

package/template/src/components/Header.astro

@@ -131,42 +131,24 @@ const navbarPrimaryHref = config.navbar?.primary
       "sm:bg-background/85 sm:backdrop-blur-[18px] sm:backdrop-saturate-50 sm:border-b-neutral-100/85 sm:dark:border-neutral-800/85 sm:bg-clip-padding",
   ]}
   data-pagefind-ignore
+  data-rd-navbar-header
 >
-  <div class="flex h-full">
-    <div class="lg:w-[283px] h-full">
-      <div class="flex gap-3 lg:block h-full lg:border-r border-border-light">
-        <button
-          x-on:click="open = ! open"
-          class="lg:hidden cursor-pointer pl-4 sm:pl-6 pr-2"
-        >
-          <div
-            class="flex flex-col items-center justify-center gap-1 h-full transition"
-            x-bind:class="open ? 'rotate-90': ''"
-          >
-            <div
-              class="w-[14px] h-0.5 bg-neutral-900 dark:bg-white rounded-full origin-[20%_50%] transition"
-              x-bind:class="open ? 'rotate-45': ''"
-            >
-            </div>
-            <div
-              class="w-[14px] h-0.5 bg-neutral-900 dark:bg-white rounded-full origin-[20%_50%] transition"
-              x-bind:class="open ? '-rotate-45': ''"
-            >
-            </div>
-          </div>
-        </button>
+  <div class="flex h-full items-stretch">
+    <div class="h-full min-w-0 shrink lg:w-[283px] lg:shrink-0">
+      <div
+        class="flex h-full items-center justify-start pl-4 sm:pl-6 lg:justify-center lg:border-r lg:border-border-light lg:pl-0"
+      >
         <LogoLink />
       </div>
     </div>
-    <div class="flex-1 flex">
+    <div class="flex min-w-0 flex-1">
       <div
-        class="min-w-0 w-full flex items-center justify-end md:justify-between gap-3 px-4 sm:px-6"
+        class="flex w-full min-w-0 items-center justify-end pr-2 sm:pr-4 lg:justify-between lg:gap-8 lg:px-6"
+        data-rd-navbar-content
       >
         <div
-          class:list={[
-            "flex items-center gap-2 mx-0",
-            "md:mx-auto lg:mx-0",
-          ]}
+          class="flex min-w-0 flex-1 items-center justify-end gap-2 md:justify-center lg:flex-none lg:justify-start"
+          data-rd-navbar-search
         >
           <Search />
           {
@@ -193,24 +175,23 @@ const navbarPrimaryHref = config.navbar?.primary
         </div>
         {
           config.navbar && (
-            <nav class="hidden xs:flex items-center gap-3">
+            <nav
+              class="hidden lg:flex items-center gap-3"
+              data-rd-navbar-desktop-nav
+            >
               {navbarLinks.length > 0 && (
                 <div
                   class:list={[
-                    "space-x-1",
+                    "flex shrink-0 items-center gap-1",
                     config.navbar.primary || config.navbar.secondary
-                      ? "pr-2 hidden xl:flex"
-                      : "hidden lg:flex",
+                      ? "pr-2"
+                      : "",
                   ]}
+                  data-rd-navbar-links
                 >
-                  {navbarLinks.map((l, i, a) => (
+                  {navbarLinks.map((l) => (
                     <a
-                      class:list={[
-                        "items-center gap-1 text-[13px] font-medium dark:font-normal text-neutral-600/85 hover:text-neutral-600 dark:text-neutral-200/90 dark:hover:text-neutral-200 duration-200 px-1.5 py-[5px] whitespace-nowrap",
-                        showAssistantNavbarButton && a.length === 3 && i === 2
-                          ? "hidden 2xl:flex"
-                          : "flex",
-                      ]}
+                      class="flex items-center gap-1 px-1.5 py-[5px] text-[13px] font-medium text-neutral-600/85 whitespace-nowrap duration-200 hover:text-neutral-600 dark:font-normal dark:text-neutral-200/90 dark:hover:text-neutral-200"
                       href={l.href}
                     >
                       {l.icon && (
@@ -226,52 +207,134 @@ const navbarPrimaryHref = config.navbar?.primary
                   ))}
                 </div>
               )}
-              {config.navbar.secondary && (
-                <a
-                  class:list={[
-                    "h-[33px] items-center gap-1.5 px-[11px] text-[13px] bg-linear-to-br from-neutral-100/70 to-neutral-100/90 dark:bg-none dark:bg-neutral-800/80 text-neutral-900/85 hover:text-neutral-600 dark:text-neutral-200/95 dark:hover:text-neutral-200 rounded-lg [corner-shape:superellipse(1.2)] border-[0.5px] border-neutral-900/10 dark:border-white/5 transition-all whitespace-nowrap",
-                    config.navbar.primary ? "hidden lg:flex" : "flex",
-                  ]}
-                  href={navbarSecondaryHref}
+              {navbarLinks.length > 0 && (
+                <div
+                  class="relative shrink-0"
+                  data-rd-navbar-overflow
+                  hidden
                 >
-                  {config.navbar.secondary.icon && (
+                  <button
+                    type="button"
+                    class="flex size-8 cursor-pointer items-center justify-center rounded-lg text-neutral-600 transition-colors hover:bg-neutral-100/70 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-500 dark:text-neutral-300 dark:hover:bg-neutral-800/70 dark:hover:text-white dark:focus-visible:outline-neutral-400"
+                    aria-label="Show more navbar links"
+                    aria-haspopup="true"
+                    aria-expanded="false"
+                    aria-controls="navbar-overflow-menu"
+                    data-rd-navbar-overflow-trigger
+                  >
                     <Icon
-                      name={config.navbar.secondary.icon}
-                      width="14"
-                      height="14"
-                      class="-ml-px"
+                      name="lucide:ellipsis-vertical"
+                      class="size-4"
+                      aria-hidden="true"
                     />
-                  )}
-                  {config.navbar.secondary.text}
-                </a>
+                  </button>
+                </div>
               )}
-              {config.navbar.primary && (
-                <a
-                  class:list={[
-                    "navbar-primary-trigger h-8 flex items-center gap-2 px-3 text-[13px] font-normal dark:font-medium rounded-lg [corner-shape:superellipse(1.2)] duration-200 transition-all whitespace-nowrap hover:opacity-95",
-                  ]}
-                  style={navbarPrimaryButtonStyle}
-                  href={navbarPrimaryHref}
+              {(config.navbar.secondary || config.navbar.primary) && (
+                <div
+                  class="flex shrink-0 items-center gap-3"
+                  data-rd-navbar-actions
                 >
-                  {config.navbar.primary.icon && (
-                    <Icon
-                      name={config.navbar.primary.icon}
-                      width="14"
-                      height="14"
-                      class="-ml-px"
-                    />
+                  {config.navbar.secondary && (
+                    <a
+                      class="flex h-[33px] items-center gap-1.5 rounded-lg [corner-shape:superellipse(1.2)] border-[0.5px] border-neutral-900/10 bg-linear-to-br from-neutral-100/70 to-neutral-100/90 px-[11px] text-[13px] text-neutral-900/85 whitespace-nowrap transition-all hover:text-neutral-600 dark:border-white/5 dark:bg-none dark:bg-neutral-800/80 dark:text-neutral-200/95 dark:hover:text-neutral-200"
+                      href={navbarSecondaryHref}
+                    >
+                      {config.navbar.secondary.icon && (
+                        <Icon
+                          name={config.navbar.secondary.icon}
+                          width="14"
+                          height="14"
+                          class="-ml-px"
+                        />
+                      )}
+                      {config.navbar.secondary.text}
+                    </a>
                   )}
-                  {config.navbar.primary.text}
-                </a>
+                  {config.navbar.primary && (
+                    <a
+                      class="navbar-primary-trigger flex h-8 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] px-3 text-[13px] font-normal whitespace-nowrap transition-all duration-200 hover:opacity-95 dark:font-medium"
+                      style={navbarPrimaryButtonStyle}
+                      href={navbarPrimaryHref}
+                    >
+                      {config.navbar.primary.icon && (
+                        <Icon
+                          name={config.navbar.primary.icon}
+                          width="14"
+                          height="14"
+                          class="-ml-px"
+                        />
+                      )}
+                      {config.navbar.primary.text}
+                    </a>
+                  )}
+                </div>
               )}
             </nav>
           )
         }
+        <button
+          type="button"
+          x-on:click="open = !open"
+          x-bind:aria-expanded="open"
+          x-bind:aria-label="open ? 'Close navigation menu' : 'Open navigation menu'"
+          aria-controls="mobile-navigation"
+          class="flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg text-neutral-900 transition-colors hover:bg-neutral-100/70 dark:text-white dark:hover:bg-neutral-800/70 lg:hidden"
+        >
+          <span class="sr-only">Toggle navigation menu</span>
+          <span
+            aria-hidden="true"
+            class="flex flex-col items-center justify-center gap-1 transition"
+            x-bind:class="open ? 'rotate-90': ''"
+          >
+            <span
+              class="h-0.5 w-[14px] origin-[20%_50%] rounded-full bg-current transition"
+              x-bind:class="open ? 'rotate-45': ''"
+            >
+            </span>
+            <span
+              class="h-0.5 w-[14px] origin-[20%_50%] rounded-full bg-current transition"
+              x-bind:class="open ? '-rotate-45': ''"
+            >
+            </span>
+          </span>
+        </button>
       </div>
     </div>
   </div>
 </header>
 
+{
+  navbarLinks.length > 0 && (
+    <nav
+      id="navbar-overflow-menu"
+      aria-label="More navbar links"
+      class="fixed z-50 w-56 max-w-[calc(100vw-1rem)] overflow-y-auto rounded-xl border-[0.5px] border-neutral-200 bg-white p-1 shadow-2xl shadow-neutral-900/12 dark:border-neutral-800 dark:bg-neutral-800 dark:shadow-black/40"
+      data-rd-navbar-overflow-menu
+      data-pagefind-ignore
+      hidden
+    >
+      {navbarLinks.map((link) => (
+        <a
+          class="flex min-h-9 items-center gap-2 rounded-lg px-2.5 py-2 text-[13px] font-medium text-neutral-700 transition-colors hover:bg-neutral-100/70 hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-neutral-500 dark:font-normal dark:text-neutral-200 dark:hover:bg-neutral-700/70 dark:hover:text-white dark:focus-visible:outline-neutral-400"
+          href={link.href}
+          data-rd-navbar-overflow-link
+        >
+          {link.icon && (
+            <Icon
+              name={link.icon}
+              width="14"
+              height="14"
+              class="shrink-0"
+            />
+          )}
+          <span class="min-w-0 break-words">{link.text}</span>
+        </a>
+      ))}
+    </nav>
+  )
+}
+
 <style>
   .assistant-header-trigger {
     --assistant-header-theme: var(--assistant-header-theme-light);
@@ -305,3 +368,215 @@ const navbarPrimaryHref = config.navbar?.primary
     --navbar-primary-foreground: var(--navbar-primary-foreground-dark);
   }
 </style>
+
+<script is:inline>
+  (() => {
+    const cleanupKey = "__radiantDocsNavbarFitCleanup";
+    const previousCleanup = window[cleanupKey];
+
+    if (typeof previousCleanup === "function") previousCleanup();
+
+    const header = document.querySelector("[data-rd-navbar-header]");
+    const content = header?.querySelector("[data-rd-navbar-content]");
+    const search = header?.querySelector("[data-rd-navbar-search]");
+    const nav = header?.querySelector("[data-rd-navbar-desktop-nav]");
+    const links = header?.querySelector("[data-rd-navbar-links]");
+    const actions = header?.querySelector("[data-rd-navbar-actions]");
+    const overflow = header?.querySelector("[data-rd-navbar-overflow]");
+    const overflowTrigger = header?.querySelector(
+      "[data-rd-navbar-overflow-trigger]",
+    );
+    const overflowMenu = document.querySelector(
+      "[data-rd-navbar-overflow-menu]",
+    );
+
+    if (
+      !(header instanceof HTMLElement) ||
+      !(content instanceof HTMLElement) ||
+      !(search instanceof HTMLElement) ||
+      !(nav instanceof HTMLElement) ||
+      !(links instanceof HTMLElement) ||
+      !(overflow instanceof HTMLElement) ||
+      !(overflowTrigger instanceof HTMLButtonElement) ||
+      !(overflowMenu instanceof HTMLElement)
+    ) {
+      return;
+    }
+
+    const desktopQuery = window.matchMedia("(min-width: 64rem)");
+    let linksWidth = 0;
+    let frameId = 0;
+
+    const positionOverflowMenu = () => {
+      const triggerRect = overflowTrigger.getBoundingClientRect();
+      const menuWidth = overflowMenu.getBoundingClientRect().width;
+      const viewportPadding = 8;
+      const left = Math.min(
+        Math.max(viewportPadding, triggerRect.right - menuWidth),
+        window.innerWidth - menuWidth - viewportPadding,
+      );
+
+      overflowMenu.style.left = `${Math.max(viewportPadding, left)}px`;
+      overflowMenu.style.top = `${triggerRect.bottom + 8}px`;
+      overflowMenu.style.maxHeight = `${Math.max(
+        120,
+        window.innerHeight - triggerRect.bottom - 16,
+      )}px`;
+    };
+
+    const setOverflowMenuOpen = (nextOpen, focusFirstLink = false) => {
+      const canOpen =
+        nextOpen && desktopQuery.matches && !overflow.hasAttribute("hidden");
+
+      overflowMenu.hidden = !canOpen;
+      overflowTrigger.setAttribute("aria-expanded", String(canOpen));
+
+      if (!canOpen) return;
+
+      positionOverflowMenu();
+      if (focusFirstLink) {
+        const firstLink = overflowMenu.querySelector(
+          "[data-rd-navbar-overflow-link]",
+        );
+        if (firstLink instanceof HTMLElement) firstLink.focus();
+      }
+    };
+
+    const measureLinksWidth = () => {
+      const clone = links.cloneNode(true);
+      if (!(clone instanceof HTMLElement)) return linksWidth;
+
+      clone.removeAttribute("hidden");
+      clone.removeAttribute("data-rd-navbar-links");
+      clone.setAttribute("aria-hidden", "true");
+      clone.style.position = "fixed";
+      clone.style.inset = "0 auto auto -10000px";
+      clone.style.display = "flex";
+      clone.style.width = "max-content";
+      clone.style.visibility = "hidden";
+      clone.style.pointerEvents = "none";
+      document.body.append(clone);
+
+      const width = clone.getBoundingClientRect().width;
+      clone.remove();
+      return width;
+    };
+
+    const updateLinksVisibility = () => {
+      frameId = 0;
+
+      if (!desktopQuery.matches) {
+        links.removeAttribute("hidden");
+        overflow.setAttribute("hidden", "");
+        setOverflowMenuOpen(false);
+        return;
+      }
+
+      const contentStyle = getComputedStyle(content);
+      const navStyle = getComputedStyle(nav);
+      const availableWidth =
+        content.clientWidth -
+        (Number.parseFloat(contentStyle.paddingLeft) || 0) -
+        (Number.parseFloat(contentStyle.paddingRight) || 0);
+      const searchWidth = search.getBoundingClientRect().width;
+      const actionsWidth =
+        actions instanceof HTMLElement
+          ? actions.getBoundingClientRect().width
+          : 0;
+      const contentGap = Number.parseFloat(contentStyle.columnGap) || 0;
+      const navGap =
+        actions instanceof HTMLElement
+          ? Number.parseFloat(navStyle.columnGap) || 0
+          : 0;
+      const requiredWidth =
+        searchWidth +
+        contentGap +
+        linksWidth +
+        navGap +
+        actionsWidth;
+
+      const linksDoNotFit = requiredWidth > availableWidth;
+      links.toggleAttribute("hidden", linksDoNotFit);
+      overflow.toggleAttribute("hidden", !linksDoNotFit);
+
+      if (!linksDoNotFit) {
+        setOverflowMenuOpen(false);
+      } else if (!overflowMenu.hidden) {
+        positionOverflowMenu();
+      }
+    };
+
+    const scheduleUpdate = () => {
+      if (frameId !== 0) return;
+      frameId = requestAnimationFrame(updateLinksVisibility);
+    };
+
+    const onOverflowTriggerClick = () => {
+      setOverflowMenuOpen(overflowMenu.hidden);
+    };
+
+    const onOverflowTriggerKeydown = (event) => {
+      if (event.key !== "ArrowDown") return;
+      event.preventDefault();
+      setOverflowMenuOpen(true, true);
+    };
+
+    const onDocumentPointerDown = (event) => {
+      if (overflowMenu.hidden || !(event.target instanceof Node)) return;
+      if (
+        overflowTrigger.contains(event.target) ||
+        overflowMenu.contains(event.target)
+      ) {
+        return;
+      }
+      setOverflowMenuOpen(false);
+    };
+
+    const onDocumentKeydown = (event) => {
+      if (event.key !== "Escape" || overflowMenu.hidden) return;
+      setOverflowMenuOpen(false);
+      overflowTrigger.focus();
+    };
+
+    const onOverflowMenuClick = (event) => {
+      if (
+        event.target instanceof Element &&
+        event.target.closest("[data-rd-navbar-overflow-link]")
+      ) {
+        setOverflowMenuOpen(false);
+      }
+    };
+
+    linksWidth = measureLinksWidth();
+    updateLinksVisibility();
+
+    const resizeObserver = new ResizeObserver(scheduleUpdate);
+    resizeObserver.observe(content);
+    resizeObserver.observe(search);
+    if (actions instanceof HTMLElement) resizeObserver.observe(actions);
+    desktopQuery.addEventListener("change", scheduleUpdate);
+    overflowTrigger.addEventListener("click", onOverflowTriggerClick);
+    overflowTrigger.addEventListener("keydown", onOverflowTriggerKeydown);
+    overflowMenu.addEventListener("click", onOverflowMenuClick);
+    document.addEventListener("pointerdown", onDocumentPointerDown);
+    document.addEventListener("keydown", onDocumentKeydown);
+
+    document.fonts?.ready.then(() => {
+      if (!header.isConnected) return;
+      linksWidth = measureLinksWidth();
+      scheduleUpdate();
+    });
+
+    window[cleanupKey] = () => {
+      if (frameId !== 0) cancelAnimationFrame(frameId);
+      resizeObserver.disconnect();
+      desktopQuery.removeEventListener("change", scheduleUpdate);
+      overflowTrigger.removeEventListener("click", onOverflowTriggerClick);
+      overflowTrigger.removeEventListener("keydown", onOverflowTriggerKeydown);
+      overflowMenu.removeEventListener("click", onOverflowMenuClick);
+      document.removeEventListener("pointerdown", onDocumentPointerDown);
+      document.removeEventListener("keydown", onDocumentKeydown);
+      overflowMenu.hidden = true;
+    };
+  })();
+</script>

package/template/src/components/MdxPage.astro

@@ -65,9 +65,54 @@ const tocHeadings = headings.filter(
 );
 ---
 
-<Layout pageTitle={title} pageDescription={description}>
-  <div class="flex w-full min-w-0 justify-between gap-x-10">
-    <div class="mx-auto max-w-3xl w-full">
+<Layout pageTitle={title} pageDescription={description} hasMarkdownAlternate>
+  <style is:inline>
+    [data-rd-mdx-shell] {
+      display: grid;
+      grid-template-columns: minmax(0, 48rem);
+      width: 100%;
+      min-width: 0;
+      justify-content: center;
+      column-gap: 2.5rem;
+    }
+
+    [data-rd-mdx-content] {
+      width: 100%;
+      max-width: none;
+      min-width: 0;
+      margin-inline: 0;
+    }
+
+    [data-rd-toc-column] {
+      display: none;
+      width: 12rem;
+      flex: 0 0 12rem;
+    }
+
+    @media (min-width: 80rem) {
+      [data-rd-mdx-shell] {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 48rem) minmax(
+            0,
+            1fr
+          ) 12rem;
+        justify-content: stretch;
+      }
+
+      [data-rd-mdx-content] {
+        grid-column: 2;
+      }
+
+      [data-rd-toc-column] {
+        display: block;
+        grid-column: 4;
+      }
+    }
+  </style>
+  <div
+    class="flex w-full min-w-0 justify-between gap-x-10"
+    data-rd-mdx-shell
+  >
+    <div class="mx-auto max-w-3xl w-full" data-rd-mdx-content>
       <header
         class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between"
       >
@@ -85,15 +130,23 @@ const tocHeadings = headings.filter(
       <article class="prose-rules">
         <Content components={components} />
       </article>
+    </div>
+    <aside class="hidden xl:block w-48 shrink-0" data-rd-toc-column>
+      <TableOfContents headings={tocHeadings} />
+    </aside>
+  </div>
+  <div
+    slot="page-pagination"
+    class="w-full min-w-0"
+    data-rd-mdx-shell
+  >
+    <div class="mx-auto max-w-3xl w-full" data-rd-mdx-content>
       <PagePagination
         previousRoute={previousRoute}
         nextRoute={nextRoute}
         homePath={homePath}
       />
     </div>
-    <aside class="hidden xl:block w-48 shrink-0">
-      <TableOfContents headings={tocHeadings} />
-    </aside>
   </div>
   <script is:inline>
     function fallbackCopy(text) {