radiant-docs 0.1.0

package/template/src/components/SidebarDropdown.astro

@@ -0,0 +1,149 @@
+---
+import { Icon } from "astro-icon/components";
+import type { NavMenu } from "../lib/validation";
+import SidebarMenu from "./SidebarMenu.astro";
+import { slugify } from "../lib/utils";
+import { getAllRoutes } from "../lib/routes";
+
+interface Props {
+  menu: NavMenu;
+  parentSlug?: string;
+}
+
+const { menu, parentSlug = "" } = Astro.props;
+
+const pathname = Astro.url.pathname;
+
+let currentMenuIndex = menu.items.findIndex(
+  (i) => slugify(i.label) === pathname.split("/")[1]
+);
+currentMenuIndex = currentMenuIndex === -1 ? 0 : currentMenuIndex;
+
+const routes = await getAllRoutes();
+
+let firstHrefOfMenuItems: string[] = [];
+
+const seen = new Set();
+
+for (const route of routes) {
+  const slug = route.slug;
+
+  const parts = slug.split("/");
+  const topLevel = parts[0];
+
+  if (!seen.has(topLevel)) {
+    seen.add(topLevel);
+    firstHrefOfMenuItems.push(slug);
+  }
+}
+
+// Calculate the parentSlug for the currently selected menu item
+const selectedMenuItem = menu.items[currentMenuIndex];
+const menuItemSlug = slugify(selectedMenuItem.label);
+const currentPrefix = parentSlug
+  ? `${parentSlug}/${menuItemSlug}`
+  : menuItemSlug;
+---
+
+<div x-data=`{
+    open: false,
+}`>
+  <div
+    class:list={[
+      "mt-3 mx-2",
+      menu.label &&
+        "rounded-lg bg-neutral-100/80 px-0.5 pb-0.5 inset-shadow-xs inset-shadow-neutral-700/5 border border-neutral-200/60",
+    ]}
+  >
+    {
+      menu.label && (
+        <label class="font-semibold text-xs px-2 py-1.5 block">
+          {menu.label}
+        </label>
+      )
+    }
+    <div class="relative">
+      <button
+        class="flex items-center w-full text-sm bg-white border border-neutral-200 rounded-lg shadow-xs px-3 py-2 cursor-pointer"
+        x-on:click="open = true"
+        aria-haspopup="menu"
+        aria-expanded
+      >
+        {
+          menu.items[currentMenuIndex].icon && (
+            <Icon
+              class="mr-2 size-4"
+              name={`lucide:${menu.items[currentMenuIndex].icon}`}
+            />
+          )
+        }
+        <span class="font-medium">{menu.items[currentMenuIndex].label}</span>
+        <Icon class="ml-auto" name="lucide:chevrons-up-down" />
+      </button>
+      <div class="fixed inset-0 z-50" x-show="open" x-on:click="open = false">
+      </div>
+      <ul
+        class:list={[
+          "z-50 absolute bg-white border border-neutral-200 rounded-lg inset-x-0 top-full py-[3px] shadow-xl overflow-hidden",
+          menu.label ? "mt-1.5" : "mt-1",
+        ]}
+        x-init
+        role="menu"
+        x-show="open"
+        x-transition.origin.top
+        x-cloak
+      >
+        {
+          menu.items.map(({ label }, index) => {
+            return (
+              <li
+                x-data={`{
+                index: ${index}
+              }`}
+                role="menuitem"
+              >
+                <a
+                  class="flex items-center px-3 py-2 cursor-pointer text-sm text-neutral-700 relative z-0 before:-z-10 before:absolute before:inset-x-1 before:inset-y-px before:rounded-md before:duration-150"
+                  class:list={[
+                    index === currentMenuIndex
+                      ? "before:bg-neutral-200/50 text-neutral-900"
+                      : "hover:before:bg-neutral-100/70",
+                  ]}
+                  href={`/${firstHrefOfMenuItems[index]}`}
+                >
+                  {menu.items[index].icon && (
+                    <Icon
+                      class="mr-2 size-4"
+                      name={`lucide:${menu.items[index].icon}`}
+                    />
+                  )}
+                  {label}
+                  {index === currentMenuIndex && (
+                    <Icon
+                      class="ml-auto text-neutral-900 [&_path]:stroke-3"
+                      name="lucide:check"
+                      stroke-width={10}
+                    />
+                  )}
+                </a>
+              </li>
+            );
+          })
+        }
+      </ul>
+    </div>
+  </div>
+  <div
+    class:list={[
+      "relative overflow-y-auto",
+      menu.label
+        ? "h-[calc(100vh-4px-64px-12px-70px-52px)]"
+        : "h-[calc(100vh-4px-64px-12px-38px-52px)]",
+    ]}
+  >
+    <SidebarMenu
+      navigation={menu.items[currentMenuIndex].submenu}
+      parentSlug={currentPrefix}
+    />
+  </div>
+</div>

package/template/src/components/SidebarGroup.astro

@@ -0,0 +1,51 @@
+---
+import type { NavGroup } from "../lib/validation";
+import SidebarLink from "./SidebarLink.astro";
+import SidebarSubgroup from "./SidebarSubgroup.astro";
+import { slugify } from "../lib/utils";
+import Tag from "./ui/Tag.astro";
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  item: NavGroup;
+  parentSlug?: string;
+}
+
+const { item, parentSlug = "" } = Astro.props;
+
+const groupSlug = slugify(item.group);
+const currentPrefix = parentSlug ? `${parentSlug}/${groupSlug}` : groupSlug;
+---
+
+<li>
+  <div class:list={["text-sm font-semibold mb-2 flex items-center gap-2 px-2"]}>
+    {
+      item.icon && (
+        <Icon name={`lucide:${item.icon}`} class="size-4 text-neutral-500" />
+      )
+    }
+    {item.group}
+    {item.tag && <Tag>{item.tag}</Tag>}
+  </div>
+
+  <ul>
+    {
+      item.pages.map((child) => (
+        <li>
+          {typeof child === "string" ? (
+            <SidebarLink path={child} groupSlug={currentPrefix} />
+          ) : "page" in child ? (
+            <SidebarLink
+              path={child.page}
+              icon={child.icon}
+              tag={child.tag}
+              groupSlug={currentPrefix}
+            />
+          ) : (
+            <SidebarSubgroup item={child} parentSlug={currentPrefix} />
+          )}
+        </li>
+      ))
+    }
+  </ul>
+</li>

package/template/src/components/SidebarLink.astro

@@ -0,0 +1,56 @@
+---
+import { deriveTitleFromEntryId, slugify } from "../lib/utils";
+import { Icon } from "astro-icon/components";
+import Tag from "./ui/Tag.astro";
+import { getCollection } from "astro:content";
+
+interface Props {
+  path: string;
+  groupSlug?: string;
+  icon?: string;
+  tag?: string;
+}
+
+const { path: filePath, groupSlug = "", icon, tag } = Astro.props;
+
+const docs = await getCollection("docs");
+
+// Find the entry matching this path
+const entry = docs.find((doc: any) => {
+  const docPath = doc.id.replace(/\.mdx$/, "");
+  return docPath === filePath;
+});
+
+if (!entry) {
+  throw new Error("Entry not found");
+}
+
+// Generate a nice label from the filename (e.g. "writing-content/page" -> "Page")
+const filename = filePath ? filePath.split("/").pop() || filePath : "";
+const text = entry.data.title || deriveTitleFromEntryId(entry.id);
+
+const pageSlug = slugify(filename);
+// If groupSlug exists, join it. Otherwise just use pageSlug (though practically groupSlug should exist from hierarchy)
+const href = groupSlug ? `/${groupSlug}/${pageSlug}` : `/${pageSlug}`;
+
+// Normalize paths for comparison (remove trailing slashes)
+const currentPath = Astro.url.pathname.replace(/\/$/, "");
+const targetPath = href.replace(/\/$/, "");
+const isActive = currentPath === targetPath;
+---
+
+<a
+  href={href}
+  class:list={[
+    "block px-2 py-[7px] text-sm relative z-0 font-[450] before:-z-10 before:absolute before:inset-x-0 before:inset-y-px before:rounded-md before:duration-150",
+    isActive
+      ? "before:bg-neutral-200/50 dark:before:bg-neutral-800 text-neutral-900 dark:text-neutral-200"
+      : "text-neutral-600 dark:text-neutral-400 hover:before:bg-neutral-100/70 dark:hover:before:bg-neutral-800/50 hover:text-neutral-900 dark:hover:text-neutral-300",
+  ]}
+>
+  <div class="flex items-center gap-2">
+    {icon && <Icon name={`lucide:${icon}`} class="size-4 opacity-75" />}
+    {text}
+    {tag && <Tag>{tag}</Tag>}
+  </div>
+</a>

package/template/src/components/SidebarMenu.astro

@@ -0,0 +1,46 @@
+---
+import type { NavGroup, NavigationItem, NavPage } from "../lib/validation";
+import SidebarOpenApi from "./sidebar/SidebarOpenApi.astro";
+import SidebarDropdown from "./SidebarDropdown.astro";
+import SidebarGroup from "./SidebarGroup.astro";
+import SidebarLink from "./SidebarLink.astro";
+
+interface Props {
+  navigation: NavigationItem;
+  parentSlug?: string;
+}
+
+let { navigation, parentSlug = "" } = Astro.props;
+---
+
+{
+  navigation.pages ? (
+    <ul class="px-2 pt-4 pb-3">
+      {navigation.pages.map((item) => (
+        <li>
+          {typeof item === "string" ? (
+            <SidebarLink path={item} />
+          ) : (
+            <SidebarLink
+              path={(item as NavPage).page}
+              icon={(item as NavPage).icon}
+              tag={(item as NavPage).tag}
+            />
+          )}
+        </li>
+      ))}
+    </ul>
+  ) : navigation.groups ? (
+    <ul class="px-2 pt-4 pb-3 [&>:nth-child(n+2)]:mt-5 [&>:nth-child(n+2)]:pt-[25px] [&>:nth-child(n+2)]:relative [&>:nth-child(n+2)]:before:absolute [&>:nth-child(n+2)]:before:top-0 [&>:nth-child(n+2)]:before:inset-x-0 [&>:nth-child(n+2)]:before:h-px [&>:nth-child(n+2)]:before:bg-linear-[90deg,transparent,var(--color-neutral-200)_20%,var(--color-neutral-200)_80%,transparent] dark:[&>:nth-child(n+2)]:before:bg-linear-[90deg,transparent,var(--color-neutral-700)_20%,var(--color-neutral-700)_80%,transparent]">
+      {navigation.groups.map((item) => (
+        <SidebarGroup item={item as NavGroup} parentSlug={parentSlug} />
+      ))}
+    </ul>
+  ) : navigation.menu ? (
+    !navigation.menu.type || navigation.menu.type === "dropdown" ? (
+      <SidebarDropdown menu={navigation.menu} parentSlug={parentSlug} />
+    ) : navigation.menu.type === "collapsible" ? null : null
+  ) : navigation.openapi ? (
+    <SidebarOpenApi openapi={navigation.openapi} parentSlug={parentSlug} />
+  ) : null
+}

package/template/src/components/SidebarSubgroup.astro

@@ -0,0 +1,136 @@
+---
+import type { NavGroup } from "../lib/validation";
+import SidebarLink from "./SidebarLink.astro";
+import { slugify } from "../lib/utils";
+import Tag from "./ui/Tag.astro";
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  item: NavGroup;
+  parentSlug: string;
+}
+
+const { item, parentSlug } = Astro.props;
+
+const groupSlug = slugify(item.group);
+const currentPrefix = `${parentSlug}/${groupSlug}`;
+
+const groupId = `group-${currentPrefix}`;
+const listId = `list-${groupId}`;
+
+// Check if any child page is active (shallow check, no recursion needed)
+const containsActivePage = item.pages.some((child) => {
+  const pagePath =
+    typeof child === "string" ? child : "pages" in child ? null : child.page;
+
+  if (pagePath) {
+    const filename = pagePath.split("/").pop() || pagePath;
+    const pageSlug = slugify(filename);
+    const href = `/${currentPrefix}/${pageSlug}`;
+
+    // Normalize paths for comparison (remove trailing slashes)
+    const normalizedCurrent = Astro.url.pathname.replace(/\/$/, "");
+    const normalizedTarget = href.replace(/\/$/, "");
+    return normalizedCurrent === normalizedTarget;
+  }
+  return false;
+});
+---
+
+<div
+  class="group"
+  x-data={`{
+    expanded: $persist(${item.expanded ?? false}).as('sidebar-state-${groupId}'),
+    init() {
+      if (${containsActivePage}) {
+        this.expanded = true;
+      }
+    }
+  }`}
+>
+  <button
+    type="button"
+    @click="expanded = !expanded"
+    class:list={[
+      "flex items-center justify-between gap-2 w-full px-2 py-[7px] text-sm font-[450] text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-300 cursor-pointer relative z-0 before:-z-10 before:absolute before:inset-x-0 before:inset-y-px before:rounded-md before:transition-colors hover:before:bg-neutral-100/70 dark:hover:before:bg-neutral-800/50",
+    ]}
+  >
+    <div class="flex items-center gap-2">
+      {
+        item.icon && (
+          <Icon name={`lucide:${item.icon}`} class="size-4 opacity-75" />
+        )
+      }
+      {item.group}
+      {item.tag && <Tag>{item.tag}</Tag>}
+    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="transition-transform duration-200 text-inherit opacity-80"
+      :class="expanded ? 'rotate-90' : ''"
+    >
+      <path d="m9 18 6-6-6-6"></path>
+    </svg>
+  </button>
+
+  <ul
+    id={listId}
+    x-show="expanded"
+    x-collapse
+    x-cloak
+    class="border-l border-neutral-300/80 ml-[15.5px] pl-2"
+  >
+    {
+      item.pages.map((child) => (
+        <li>
+          {typeof child === "string" ? (
+            <SidebarLink path={child} groupSlug={currentPrefix} />
+          ) : "page" in child ? (
+            <SidebarLink
+              path={child.page}
+              icon={child.icon}
+              tag={child.tag}
+              groupSlug={currentPrefix}
+            />
+          ) : null}
+        </li>
+      ))
+    }
+  </ul>
+
+  {/* Anti-flash script to prevent content jumping */}
+  <script define:vars={{ listId, groupId, containsActivePage }}>
+    (function () {
+      try {
+        const storageKey = "sidebar-state-" + groupId;
+
+        // 1. Force state in localStorage if this is the active group
+        if (containsActivePage) {
+          localStorage.setItem(storageKey, "true");
+        }
+
+        // 2. Read state
+        const storedState = localStorage.getItem(storageKey);
+        const shouldBeVisible = storedState === "true";
+
+        // 3. Remove x-cloak immediately if it should be visible
+        if (shouldBeVisible) {
+          const list = document.getElementById(listId);
+          if (list) {
+            list.removeAttribute("x-cloak");
+          }
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    })();
+  </script>
+</div>