@tayacrystals/lore 0.1.0

package/components/mdx/FileTree.astro

@@ -0,0 +1,117 @@
+---
+import { transformFileTree } from "../../utils/rehype-file-tree";
+
+const html = await Astro.slots.render("default");
+const transformed = await transformFileTree(html);
+---
+
+<div class="ft-root not-prose" set:html={transformed} />
+
+<style>
+  .ft-root {
+    --ft-indent: 1.25rem;
+    --ft-icon-size: 1rem;
+    font-size: 0.875rem;
+    line-height: 1.625;
+    border: 1px solid var(--color-fd-border);
+    border-radius: 0.5rem;
+    padding: 1rem 1.25rem;
+    background: var(--color-fd-card);
+  }
+
+  .ft-root :global(.ft-list) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ft-root :global(.ft-list .ft-list) {
+    padding-left: var(--ft-indent);
+  }
+
+  .ft-root :global(.ft-entry) {
+    position: relative;
+  }
+
+  .ft-root :global(.ft-entry-inner) {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.0625rem 0;
+  }
+
+  .ft-root :global(.ft-icon) {
+    width: var(--ft-icon-size);
+    height: var(--ft-icon-size);
+    flex-shrink: 0;
+    color: var(--color-fd-muted-foreground);
+  }
+
+  .ft-root :global(.ft-directory > details > .ft-dir-summary .ft-icon),
+  .ft-root :global(.ft-directory > .ft-entry-inner .ft-icon) {
+    color: var(--color-fd-primary);
+  }
+
+  .ft-root :global(.ft-name) {
+    color: var(--color-fd-foreground);
+  }
+
+  .ft-root :global(.ft-highlight) {
+    font-weight: 600;
+    color: var(--color-fd-primary);
+  }
+
+  .ft-root :global(.ft-comment) {
+    color: var(--color-fd-muted-foreground);
+    font-size: 0.8125rem;
+  }
+
+  .ft-root :global(.ft-placeholder-text) {
+    color: var(--color-fd-muted-foreground);
+    user-select: none;
+  }
+
+  /* Collapsible directories */
+  .ft-root :global(details) {
+    position: relative;
+  }
+
+  .ft-root :global(summary) {
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .ft-root :global(summary::-webkit-details-marker) {
+    display: none;
+  }
+
+  .ft-root :global(summary::marker) {
+    display: none;
+    content: "";
+  }
+
+  .ft-root :global(.ft-dir-summary) {
+    border-radius: 0.25rem;
+  }
+
+  .ft-root :global(.ft-dir-summary:hover) {
+    background: var(--color-fd-muted);
+  }
+
+  /* Tree lines for nested items */
+  .ft-root :global(.ft-list .ft-list) {
+    border-left: 1px solid var(--color-fd-border);
+    margin-left: calc(var(--ft-icon-size) / 2);
+  }
+
+  .ft-root :global(a) {
+    color: var(--color-fd-foreground);
+    text-decoration: underline;
+    text-decoration-color: var(--color-fd-border);
+    text-underline-offset: 2px;
+  }
+
+  .ft-root :global(a:hover) {
+    text-decoration-color: var(--color-fd-foreground);
+  }
+</style>

package/components/mdx/Step.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+  title?: string;
+}
+
+const { title } = Astro.props;
+---
+
+<div class="relative [counter-increment:step]">
+  <div
+    class="absolute -left-[calc(1.5rem+1px+0.625rem)] w-5 h-5 rounded-full bg-fd-primary text-fd-primary-foreground flex items-center justify-center text-xs font-bold before:content-[counter(step)]"
+  >
+  </div>
+  {title && <h4 class="font-semibold text-sm mb-2">{title}</h4>}
+  <div class="text-sm [&>h3]:text-base [&>h3]:font-semibold [&>h3]:mb-2 [&>h3]:mt-0 [&>p]:mb-2 [&>p]:text-fd-muted-foreground">
+    <slot />
+  </div>
+</div>

package/components/mdx/Steps.astro

@@ -0,0 +1,6 @@
+---
+---
+
+<div class="steps-container my-6 ml-4 border-l-2 border-fd-border pl-6 space-y-6 [counter-reset:step]">
+  <slot />
+</div>

package/components/mdx/Tab.astro

@@ -0,0 +1,11 @@
+---
+interface Props {
+  label: string;
+}
+
+const { label } = Astro.props;
+---
+
+<div class="tab-panel hidden" role="tabpanel" data-tab-label={label}>
+  <slot />
+</div>

package/components/mdx/Tabs.astro

@@ -0,0 +1,73 @@
+---
+interface Props {
+  id?: string;
+}
+
+const { id = "tabs-" + Math.random().toString(36).slice(2, 8) } = Astro.props;
+const tabs = await Astro.slots.render("default");
+const labels: string[] = [];
+
+// Extract labels from Tab components
+const labelMatches = tabs.matchAll(/data-tab-label="([^"]+)"/g);
+for (const match of labelMatches) {
+  labels.push(match[1]);
+}
+---
+
+<div class="tabs-wrapper my-5 rounded-lg border border-fd-border overflow-hidden" data-tabs-id={id}>
+  <!-- Tab buttons -->
+  <div class="flex border-b border-fd-border bg-fd-muted/50" role="tablist">
+    {
+      labels.map((label, i) => (
+        <button
+          role="tab"
+          class:list={[
+            "tabs-trigger px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px",
+            i === 0
+              ? "border-fd-primary text-fd-foreground"
+              : "border-transparent text-fd-muted-foreground hover:text-fd-foreground",
+          ]}
+          data-tab-index={i}
+          aria-selected={i === 0 ? "true" : "false"}
+        >
+          {label}
+        </button>
+      ))
+    }
+  </div>
+  <!-- Tab panels -->
+  <div class="tabs-panels p-4" set:html={tabs} />
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>(".tabs-wrapper").forEach((wrapper) => {
+    const triggers = wrapper.querySelectorAll<HTMLButtonElement>(".tabs-trigger");
+    const panels = wrapper.querySelectorAll<HTMLElement>(":scope > .tabs-panels > .tab-panel");
+    const id = wrapper.dataset.tabsId || "";
+
+    function activate(index: number) {
+      triggers.forEach((t, i) => {
+        const active = i === index;
+        t.setAttribute("aria-selected", String(active));
+        t.classList.toggle("border-fd-primary", active);
+        t.classList.toggle("text-fd-foreground", active);
+        t.classList.toggle("border-transparent", !active);
+        t.classList.toggle("text-fd-muted-foreground", !active);
+      });
+      panels.forEach((p, i) => {
+        p.classList.toggle("hidden", i !== index);
+      });
+      if (id) localStorage.setItem(`tab-${id}`, String(index));
+    }
+
+    triggers.forEach((trigger) => {
+      trigger.addEventListener("click", () => {
+        activate(Number(trigger.dataset.tabIndex));
+      });
+    });
+
+    // Restore from localStorage or default to first tab
+    const stored = id ? localStorage.getItem(`tab-${id}`) : null;
+    activate(stored !== null ? Number(stored) : 0);
+  });
+</script>

package/components.ts

@@ -0,0 +1,11 @@
+export { default as Callout } from "./components/mdx/Callout.astro";
+export { default as Card } from "./components/mdx/Card.astro";
+export { default as CardGrid } from "./components/mdx/CardGrid.astro";
+export { default as Tabs } from "./components/mdx/Tabs.astro";
+export { default as Tab } from "./components/mdx/Tab.astro";
+export { default as Steps } from "./components/mdx/Steps.astro";
+export { default as Step } from "./components/mdx/Step.astro";
+export { default as Accordion } from "./components/mdx/Accordion.astro";
+export { default as FileTree } from "./components/mdx/FileTree.astro";
+export { default as CodeTabs } from "./components/mdx/CodeTabs.astro";
+export { Icon } from "astro-icon/components";

package/config.ts

@@ -0,0 +1,42 @@
+import { z } from "zod";
+
+const sidebarGroupSchema: z.ZodType<{
+  label: string;
+  order: number;
+  children?: Record<string, { label: string; order: number; children?: Record<string, any> }>;
+}> = z.lazy(() =>
+  z.object({
+    label: z.string(),
+    order: z.number(),
+    children: z.record(z.string(), sidebarGroupSchema).optional().default({}),
+  }),
+);
+
+const configSchema = z.object({
+  title: z.string().default("Docs"),
+  sidebar: z
+    .record(z.string(), sidebarGroupSchema)
+    .optional()
+    .default({}),
+  social: z
+    .object({
+      github: z.string().optional(),
+    })
+    .optional()
+    .default({}),
+  primaryHue: z.number().min(0).max(360).optional().default(55),
+  customCss: z.array(z.string()).optional().default([]),
+});
+
+export type LoreUserConfig = z.input<typeof configSchema>;
+export type LoreConfig = z.output<typeof configSchema>;
+
+export interface SidebarGroupConfig {
+  label: string;
+  order: number;
+  children?: Record<string, SidebarGroupConfig>;
+}
+
+export function validateConfig(userConfig: LoreUserConfig): LoreConfig {
+  return configSchema.parse(userConfig);
+}

package/index.ts

@@ -0,0 +1,2 @@
+export { defineIntegration as default } from "./integration";
+export type { LoreConfig, LoreUserConfig } from "./config";

package/integration.ts

@@ -0,0 +1,68 @@
+import type { AstroIntegration } from "astro";
+import { fileURLToPath } from "node:url";
+import expressiveCode from "astro-expressive-code";
+import mdx from "@astrojs/mdx";
+import sitemap from "@astrojs/sitemap";
+import icon from "astro-icon";
+import pagefind from "astro-pagefind";
+import tailwindcss from "@tailwindcss/vite";
+import { validateConfig, type LoreUserConfig } from "./config";
+import { vitePluginLore } from "./vite-plugin";
+
+export function defineIntegration(userConfig: LoreUserConfig = {}): AstroIntegration {
+  const config = validateConfig(userConfig);
+
+  return {
+    name: "lore",
+    hooks: {
+      "astro:config:setup": ({
+        injectRoute,
+        updateConfig,
+      }) => {
+        const routePath = fileURLToPath(
+          new URL("./routes/docs.astro", import.meta.url),
+        );
+
+        injectRoute({
+          pattern: "docs/[...slug]",
+          entrypoint: routePath,
+        });
+
+        updateConfig({
+          integrations: [
+            expressiveCode({
+              themes: ["github-dark", "github-light"],
+              themeCssSelector: (theme) => {
+                if (theme.name === "github-dark") return ".dark";
+                return ":root:not(.dark)";
+              },
+              defaultProps: {
+                frame: "code",
+                overridesByLang: {
+                  "bash,sh,shell,zsh,powershell,ps,bat,cmd,terminal": {
+                    frame: "code",
+                  },
+                },
+              },
+              styleOverrides: {
+                borderRadius: "0.5rem",
+                codeFontFamily: "'Geist Mono', monospace",
+                codeFontSize: "0.875rem",
+              },
+            }),
+            mdx(),
+            sitemap(),
+            icon(),
+            pagefind(),
+          ],
+          vite: {
+            plugins: [
+              tailwindcss(),
+              vitePluginLore(config),
+            ],
+          },
+        });
+      },
+    },
+  };
+}

package/layouts/DocsLayout.astro

@@ -0,0 +1,277 @@
+---
+import "../styles/global.css";
+import "../styles/prose.css";
+import "virtual:lore/user-css";
+import { Icon } from "astro-icon/components";
+import Sidebar from "../components/docs/Sidebar.astro";
+import TableOfContents from "../components/docs/TableOfContents.astro";
+import Breadcrumbs from "../components/docs/Breadcrumbs.astro";
+import PrevNext from "../components/docs/PrevNext.astro";
+import SearchModal from "../components/global/SearchModal.astro";
+import type { SidebarEntry } from "../utils/sidebar";
+import type { TocItem } from "../utils/toc";
+import type { FlatNavItem } from "../utils/navigation";
+import config from "virtual:lore/config";
+
+interface Props {
+  title: string;
+  description?: string;
+  sidebar: SidebarEntry[];
+  toc: TocItem[];
+  showToc: boolean;
+  prev: FlatNavItem | null;
+  next: FlatNavItem | null;
+  lastUpdated?: Date | null;
+}
+
+const { title, description, sidebar, toc, showToc, prev, next, lastUpdated } = Astro.props;
+const BASE_URL = import.meta.env.BASE_URL || "/";
+const currentPath = Astro.url.pathname.replace(/\/$/, "") || `${BASE_URL}docs`;
+const siteTitle = config.title;
+const githubUrl = config.social?.github;
+const primaryHue = config.primaryHue;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content={description || "Documentation"} />
+    <link rel="icon" type="image/svg+xml" href={`${BASE_URL}favicon.svg`} />
+    <meta name="generator" content={Astro.generator} />
+    <title>{`${title} - ${siteTitle}`}</title>
+    <style set:html={`:root { --fd-hue: ${primaryHue}; }`}></style>
+    <script is:inline>
+      (function () {
+        const stored = localStorage.getItem("theme");
+        if (
+          stored === "dark" ||
+          (!stored && window.matchMedia("(prefers-color-scheme: dark)").matches)
+        ) {
+          document.documentElement.classList.add("dark");
+        }
+      })();
+    </script>
+  </head>
+  <body class="min-h-screen">
+    <!-- Desktop sidebar (fixed left panel) -->
+    <aside
+      id="docs-sidebar"
+      class="hidden lg:flex fixed top-0 bottom-0 w-(--width-sidebar) flex-col bg-fd-background z-30"
+      style="left: max(0px, calc((100vw - var(--max-width-layout)) / 2))"
+    >
+      <!-- Sidebar header -->
+      <div class="flex items-center justify-between h-(--height-header) px-4 shrink-0">
+        <a href={BASE_URL} class="flex items-center gap-2 font-semibold text-[15px]">
+          <Icon name="lucide:book-open" class="w-5 h-5 text-fd-primary" />
+          <span>{siteTitle}</span>
+        </a>
+      </div>
+
+      <!-- Search trigger -->
+      <div class="px-3 mb-3 shrink-0">
+        <button
+          id="search-trigger"
+          class="flex items-center gap-2 w-full text-sm text-fd-muted-foreground hover:text-fd-foreground bg-fd-muted/60 hover:bg-fd-muted rounded-lg px-3 py-2 transition-colors border border-fd-border"
+        >
+          <Icon name="lucide:search" class="w-4 h-4 shrink-0" />
+          <span class="flex-1 text-left">Search</span>
+          <span class="flex items-center gap-0.5 text-[10px] font-mono">
+            <kbd class="rounded border border-fd-border bg-fd-background px-1 py-0.5">⌘</kbd>
+            <kbd class="rounded border border-fd-border bg-fd-background px-1 py-0.5">K</kbd>
+          </span>
+        </button>
+      </div>
+
+      <!-- Navigation -->
+      <nav class="flex-1 overflow-y-auto px-3 pb-4 scrollbar-thin" aria-label="Documentation sidebar">
+        <Sidebar entries={sidebar} currentPath={currentPath} />
+      </nav>
+
+      <!-- Sidebar footer -->
+      <div class="flex items-center gap-1 px-3 py-3 border-t border-fd-border shrink-0">
+        {githubUrl && (
+          <a
+            href={githubUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center justify-center w-8 h-8 rounded-md hover:bg-fd-muted transition-colors text-fd-muted-foreground hover:text-fd-foreground"
+            aria-label="GitHub"
+          >
+            <Icon name="lucide:github" class="w-4 h-4" />
+          </a>
+        )}
+        <button
+          id="theme-toggle"
+          class="inline-flex items-center justify-center w-8 h-8 rounded-md hover:bg-fd-muted transition-colors text-fd-muted-foreground hover:text-fd-foreground"
+          aria-label="Toggle dark mode"
+        >
+          <Icon name="lucide:sun" class="w-4 h-4 hidden dark:block" />
+          <Icon name="lucide:moon" class="w-4 h-4 block dark:hidden" />
+        </button>
+      </div>
+    </aside>
+
+    <!-- Mobile header -->
+    <header class="lg:hidden sticky top-0 z-40 flex items-center justify-between h-(--height-header) px-4 bg-fd-background/80 backdrop-blur-lg border-b border-fd-border">
+      <div class="flex items-center gap-3">
+        <button
+          id="mobile-sidebar-toggle"
+          class="inline-flex items-center justify-center w-8 h-8 rounded-md hover:bg-fd-muted transition-colors"
+          aria-label="Toggle sidebar"
+        >
+          <Icon name="lucide:menu" class="w-4.5 h-4.5" />
+        </button>
+        <a href={BASE_URL} class="font-semibold text-sm">{siteTitle}</a>
+      </div>
+      <div class="flex items-center gap-1">
+        <button
+          id="search-trigger-mobile"
+          class="inline-flex items-center justify-center w-8 h-8 rounded-md hover:bg-fd-muted transition-colors"
+          aria-label="Search"
+        >
+          <Icon name="lucide:search" class="w-4 h-4" />
+        </button>
+      </div>
+    </header>
+
+    <!-- Main content area -->
+    <div class="max-w-(--max-width-layout) mx-auto lg:pl-(--width-sidebar)">
+      <div class="flex">
+        <!-- Article content -->
+        <article class="min-w-0 flex-1 px-6 lg:px-10 py-8 lg:py-10">
+          <Breadcrumbs />
+
+          <div class="fd-prose">
+            <h1>{title}</h1>
+            {description && <p class="text-fd-muted-foreground text-base mt-1 mb-6">{description}</p>}
+            <slot />
+          </div>
+
+          <PrevNext prev={prev} next={next} />
+
+          {lastUpdated && (
+            <div class="mt-8 text-xs text-fd-muted-foreground">
+              Last updated on {lastUpdated.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}
+            </div>
+          )}
+        </article>
+
+        <!-- Table of contents -->
+        {
+          showToc && toc.length > 0 && (
+            <aside class="hidden xl:block w-(--width-toc) shrink-0 py-10">
+              <div class="sticky top-(--height-header) pt-2">
+                <TableOfContents items={toc} />
+              </div>
+            </aside>
+          )
+        }
+      </div>
+    </div>
+
+    <!-- Mobile sidebar overlay -->
+    <div id="mobile-sidebar-overlay" class="lg:hidden fixed inset-0 z-50 hidden">
+      <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="mobile-sidebar-backdrop"></div>
+      <div
+        class="absolute left-0 top-0 bottom-0 w-72 bg-fd-background overflow-y-auto transform transition-transform duration-200 -translate-x-full flex flex-col"
+        id="mobile-sidebar-panel"
+      >
+        <!-- Mobile sidebar header -->
+        <div class="flex items-center justify-between h-(--height-header) px-4 shrink-0">
+          <a href={BASE_URL} class="flex items-center gap-2 font-semibold text-[15px]">
+            <Icon name="lucide:book-open" class="w-5 h-5 text-fd-primary" />
+            <span>{siteTitle}</span>
+          </a>
+          <button id="mobile-sidebar-close" class="p-1 rounded hover:bg-fd-muted" aria-label="Close">
+            <Icon name="lucide:x" class="w-5 h-5" />
+          </button>
+        </div>
+
+        <!-- Mobile search -->
+        <div class="px-3 mb-3 shrink-0">
+          <button
+            id="search-trigger-mobile-sidebar"
+            class="flex items-center gap-2 w-full text-sm text-fd-muted-foreground hover:text-fd-foreground bg-fd-muted/60 hover:bg-fd-muted rounded-lg px-3 py-2 transition-colors border border-fd-border"
+          >
+            <Icon name="lucide:search" class="w-4 h-4 shrink-0" />
+            <span>Search</span>
+          </button>
+        </div>
+
+        <!-- Mobile nav -->
+        <nav class="flex-1 overflow-y-auto px-3 pb-4 scrollbar-thin">
+          <Sidebar entries={sidebar} currentPath={currentPath} />
+        </nav>
+
+        <!-- Mobile sidebar footer -->
+        <div class="flex items-center gap-1 px-3 py-3 border-t border-fd-border shrink-0">
+          {githubUrl && (
+            <a
+              href={githubUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center justify-center w-8 h-8 rounded-md hover:bg-fd-muted transition-colors text-fd-muted-foreground hover:text-fd-foreground"
+              aria-label="GitHub"
+            >
+              <Icon name="lucide:github" class="w-4 h-4" />
+            </a>
+          )}
+          <button
+            id="mobile-theme-toggle"
+            class="inline-flex items-center justify-center w-8 h-8 rounded-md hover:bg-fd-muted transition-colors text-fd-muted-foreground hover:text-fd-foreground"
+            aria-label="Toggle dark mode"
+          >
+            <Icon name="lucide:sun" class="w-4 h-4 hidden dark:block" />
+            <Icon name="lucide:moon" class="w-4 h-4 block dark:hidden" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <SearchModal />
+
+    <script>
+      // Theme toggle (desktop + mobile)
+      function toggleTheme() {
+        const isDark = document.documentElement.classList.toggle("dark");
+        localStorage.setItem("theme", isDark ? "dark" : "light");
+      }
+      document.getElementById("theme-toggle")?.addEventListener("click", toggleTheme);
+      document.getElementById("mobile-theme-toggle")?.addEventListener("click", toggleTheme);
+
+      // Mobile sidebar
+      const toggle = document.getElementById("mobile-sidebar-toggle");
+      const overlay = document.getElementById("mobile-sidebar-overlay");
+      const backdrop = document.getElementById("mobile-sidebar-backdrop");
+      const panel = document.getElementById("mobile-sidebar-panel");
+      const close = document.getElementById("mobile-sidebar-close");
+
+      function openSidebar() {
+        overlay?.classList.remove("hidden");
+        requestAnimationFrame(() => {
+          panel?.classList.remove("-translate-x-full");
+        });
+      }
+
+      function closeSidebar() {
+        panel?.classList.add("-translate-x-full");
+        setTimeout(() => overlay?.classList.add("hidden"), 200);
+      }
+
+      toggle?.addEventListener("click", openSidebar);
+      backdrop?.addEventListener("click", closeSidebar);
+      close?.addEventListener("click", closeSidebar);
+
+      // Mobile sidebar search trigger
+      document.getElementById("search-trigger-mobile-sidebar")?.addEventListener("click", () => {
+        closeSidebar();
+        const dialog = document.getElementById("search-dialog") as HTMLDialogElement;
+        const input = document.getElementById("search-input") as HTMLInputElement;
+        dialog?.showModal();
+        input?.focus();
+      });
+    </script>
+  </body>
+</html>

package/loaders.ts

@@ -0,0 +1,5 @@
+import { glob } from "astro/loaders";
+
+export function docsLoader() {
+  return glob({ pattern: "**/*.mdx", base: "./src/content/docs" });
+}