@lexibase/rdx-next 1.0.0-beta.1 → 1.0.0-beta.10

package/dist/runtime/index.js

@@ -1,100 +1,294 @@
 // src/runtime/index.tsx
-import { getDocument, getDocsIndex, getDocsPaths } from "@lexibase/rdx-core";
+import {
+  getDocument as getDocument2,
+  getDocsPaths,
+  getSourceOptions as getSourceOptions2,
+  resolveDocsRoute
+} from "@lexibase/rdx-core";
+import { Button } from "@lexibase/rdx-ui/components/button";
+import { ButtonLink } from "@lexibase/rdx-ui/components/button-link";
+import { DocsSidebar } from "@lexibase/rdx-ui/components/docs-sidebar";
+import { DocsToc } from "@lexibase/rdx-ui/components/docs-toc";
+import { DocsSearch } from "@lexibase/rdx-ui/components/docs-search";
+import { Home } from "@lexibase/rdx-ui/components/home";
+import { Logo } from "@lexibase/rdx-ui/components/logo";
+import { mdxComponents } from "@lexibase/rdx-ui/components/mdx-components";
+import { Navbar } from "@lexibase/rdx-ui/components/navbar";
+import {
+  VersionDropdown
+} from "@lexibase/rdx-ui/components/version-dropdown";
+import { ThemeProvider } from "@lexibase/rdx-ui/providers/theme-provider";
+import { notFound, redirect } from "next/navigation";
+
+// src/runtime/mdx.ts
 import { compileMDX } from "next-mdx-remote/rsc";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import { jsx, jsxs } from "react/jsx-runtime";
-var mdxComponents = {
-  h1: (props) => /* @__PURE__ */ jsx("h1", { ...props }),
-  h2: (props) => /* @__PURE__ */ jsx("h2", { ...props }),
-  h3: (props) => /* @__PURE__ */ jsx("h3", { ...props }),
-  p: (props) => /* @__PURE__ */ jsx("p", { ...props }),
-  ul: (props) => /* @__PURE__ */ jsx("ul", { ...props }),
-  ol: (props) => /* @__PURE__ */ jsx("ol", { ...props }),
-  li: (props) => /* @__PURE__ */ jsx("li", { ...props }),
-  blockquote: (props) => /* @__PURE__ */ jsx("blockquote", { ...props }),
-  pre: (props) => /* @__PURE__ */ jsx("pre", { ...props }),
-  code: (props) => /* @__PURE__ */ jsx("code", { ...props }),
-  a: ({ href, ...props }) => {
-    const isExternal = href?.startsWith("http");
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href,
-        rel: isExternal ? "noreferrer" : void 0,
-        target: isExternal ? "_blank" : void 0,
-        ...props
+import remarkGfm from "remark-gfm";
+import {
+  remarkDocumentLinks,
+  rehypeDocumentationHeadings,
+  rehypeDocumentationCode
+} from "@lexibase/rdx-core/mdx";
+function compileDocumentation(source, components, links) {
+  return compileMDX({
+    source,
+    components,
+    options: {
+      blockJS: true,
+      blockDangerousJS: true,
+      mdxOptions: {
+        remarkPlugins: [remarkGfm, [remarkDocumentLinks, links]],
+        rehypePlugins: [rehypeDocumentationHeadings, rehypeDocumentationCode]
       }
-    );
-  }
-};
+    }
+  });
+}
+
+// src/runtime/index.tsx
+import { createRdxProject, getProjectDocsPaths } from "@lexibase/rdx-core";
+
+// src/runtime/search.ts
+import { getDocsIndex, getDocument, getSourceOptions } from "@lexibase/rdx-core";
+import { buildSearchIndex } from "@lexibase/rdx-core/search";
+function getSearchSources(project) {
+  return project.config.search ? project.sources.map((source) => ({ source: source.routePrefix || "_" })) : [];
+}
+function getSearchResponse(project, key) {
+  if (!project.config.search) return new Response(null, { status: 404 });
+  const source = project.sources.find(
+    (entry) => (entry.routePrefix || "_") === key
+  );
+  if (!source) return new Response(null, { status: 404 });
+  const options = getSourceOptions(project, source);
+  const documents = getDocsIndex(options).flatMap(
+    (category) => category.pages.map((page) => ({
+      title: page.title,
+      description: page.description,
+      category: category.title,
+      href: [
+        "/docs",
+        source.routePrefix,
+        page.slug.split("/").map(encodeURIComponent).join("/")
+      ].filter(Boolean).join("/"),
+      content: getDocument(page.slug, options)?.content ?? ""
+    }))
+  );
+  return Response.json(buildSearchIndex(documents));
+}
+
+// src/runtime/index.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function RdxLayout({
   children,
-  config
+  config,
+  bodyClassName
+}) {
+  return /* @__PURE__ */ jsx("html", { suppressHydrationWarning: true, lang: config.lang ?? "en", children: /* @__PURE__ */ jsx("body", { className: bodyClassName, children: /* @__PURE__ */ jsxs(
+    ThemeProvider,
+    {
+      disableTransitionOnChange: true,
+      enableSystem: true,
+      attribute: "class",
+      defaultTheme: config.theme?.defaultTheme ?? "system",
+      children: [
+        /* @__PURE__ */ jsx("a", { className: "rdx-skip-link", href: "#rdx-main", children: "Skip to content" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col h-dvh", children })
+      ]
+    }
+  ) }) });
+}
+function RdxHeader({
+  project,
+  slug
 }) {
-  const brand = config.navbar?.title || config.title;
-  return /* @__PURE__ */ jsx("html", { lang: "en", children: /* @__PURE__ */ jsxs("body", { children: [
-    /* @__PURE__ */ jsxs("header", { className: "rdx-header", children: [
-      /* @__PURE__ */ jsx(Link, { className: "rdx-brand", href: "/docs", children: brand }),
-      config.navbar?.actions?.github?.visible && config.navbar.actions.github.url && /* @__PURE__ */ jsx(
-        "a",
+  const { config } = project;
+  const { source, slug: currentSlug } = resolveDocsRoute(project, slug);
+  const options = project.sources.map((edition) => {
+    const docs = getSourceOptions2(project, edition);
+    const destination = currentSlug && getDocument2(currentSlug, docs) ? currentSlug : getDocsPaths(docs)[0];
+    return {
+      id: edition.id,
+      label: edition.id === "current" ? "Current" : `Version ${edition.label}`,
+      kind: edition.id === "current" ? "live" : edition.badge === "Archived" ? "archived" : "version",
+      href: ["/docs", edition.routePrefix, destination].filter(Boolean).join("/")
+    };
+  });
+  const BrandLogo = config.navbar?.logo ?? Logo;
+  return /* @__PURE__ */ jsx(
+    Navbar,
+    {
+      title: config.navbar?.title ?? "",
+      search: config.search ? /* @__PURE__ */ jsx(
+        DocsSearch,
         {
-          className: "rdx-github-link",
-          href: config.navbar.actions.github.url,
-          rel: "noreferrer",
-          target: "_blank",
-          children: "GitHub"
+          indexUrl: `/rdx-search/${encodeURIComponent(source.routePrefix || "_")}`,
+          version: source.label
         }
-      )
-    ] }),
-    children
-  ] }) });
+      ) : void 0,
+      siteTitle: config.title,
+      logo: /* @__PURE__ */ jsx(BrandLogo, { className: "size-5" }),
+      homeHref: config.homepage?.enabled ? "/" : "/docs",
+      docsHref: ["/docs", source.routePrefix].filter(Boolean).join("/"),
+      versionMenu: project.sources.length > 1 ? /* @__PURE__ */ jsx(VersionDropdown, { options, currentId: source.id }) : void 0,
+      github: config.navbar?.actions?.github,
+      showToggleMode: config.navbar?.actions?.showToggleMode
+    }
+  );
 }
-async function DocsPage({ slug }) {
-  const categories = getDocsIndex();
-  const currentSlug = slug?.join("/") || getDocsPaths()[0];
-  if (!currentSlug) {
-    return /* @__PURE__ */ jsxs("main", { className: "rdx-empty-state", children: [
-      /* @__PURE__ */ jsx("h1", { children: "Your documentation is ready." }),
-      /* @__PURE__ */ jsx("p", { children: "Add an `.mdx` file inside `docs/` to create your first page." })
+function HomePage({ project }) {
+  const { config } = project;
+  if (!config.homepage?.enabled) redirect("/docs");
+  const homepage = config.homepage;
+  const CustomHome = homepage.component;
+  const BrandLogo = config.navbar?.logo ?? Logo;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RdxHeader, { project }),
+    /* @__PURE__ */ jsx(
+      "main",
+      {
+        id: "rdx-main",
+        tabIndex: -1,
+        className: "flex-1 min-h-0 overflow-y-auto",
+        children: CustomHome ? /* @__PURE__ */ jsx(CustomHome, {}) : /* @__PURE__ */ jsx(
+          Home,
+          {
+            title: homepage.title ?? config.title,
+            logo: /* @__PURE__ */ jsx(BrandLogo, { className: "size-52 hover:scale-105 hover:rotate-1 transition-[scale,rotation] duration-1000" }),
+            description: homepage.description,
+            buttons: homepage.buttons
+          }
+        )
+      }
+    )
+  ] });
+}
+async function DocsPage({
+  slug,
+  project
+}) {
+  const {
+    source,
+    slug: currentSlug,
+    document,
+    categories
+  } = resolveDocsRoute(project, slug);
+  if (!currentSlug)
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(RdxHeader, { project, slug }),
+      /* @__PURE__ */ jsxs("main", { id: "rdx-main", tabIndex: -1, className: "p-8", children: [
+        /* @__PURE__ */ jsx("h1", { children: "Your documentation is ready." }),
+        /* @__PURE__ */ jsx("p", { children: "Add an .mdx file inside your configured documentation directory." })
+      ] })
     ] });
-  }
-  const document = getDocument(currentSlug);
   if (!document) notFound();
-  const { content } = await compileMDX({
-    source: document.content,
-    components: mdxComponents
-  });
+  const { content } = await compileDocumentation(
+    document.content,
+    mdxComponents,
+    {
+      sourceRoot: getSourceOptions2(project, source).docsDir,
+      sourcePath: document.sourcePath,
+      routePrefix: source.routePrefix,
+      documents: categories.flatMap((category2) => category2.pages)
+    }
+  );
   const title = typeof document.frontmatter.title === "string" ? document.frontmatter.title : currentSlug;
   const description = typeof document.frontmatter.description === "string" ? document.frontmatter.description : null;
-  return /* @__PURE__ */ jsxs("div", { className: "rdx-docs-layout", children: [
-    /* @__PURE__ */ jsx("aside", { className: "rdx-sidebar", "aria-label": "Documentation navigation", children: categories.map((category) => /* @__PURE__ */ jsxs("section", { className: "rdx-sidebar-category", children: [
-      /* @__PURE__ */ jsx("h2", { children: category.title }),
-      /* @__PURE__ */ jsx("ul", { children: category.pages.map((page) => {
-        const href = `/docs/${page.slug}`;
-        const isCurrentPage = page.slug === currentSlug;
-        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-          Link,
-          {
-            "aria-current": isCurrentPage ? "page" : void 0,
-            className: isCurrentPage ? "is-active" : void 0,
-            href,
-            children: page.title
-          }
-        ) }, page.slug);
-      }) })
-    ] }, category.id)) }),
-    /* @__PURE__ */ jsxs("main", { className: "rdx-document", children: [
-      /* @__PURE__ */ jsxs("header", { className: "rdx-document-header", children: [
-        /* @__PURE__ */ jsx("p", { className: "rdx-breadcrumb", children: currentSlug }),
-        /* @__PURE__ */ jsx("h1", { children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "rdx-description", children: description })
-      ] }),
-      /* @__PURE__ */ jsx("article", { className: "rdx-mdx-content", children: content })
+  const hrefFor = (pageSlug) => ["/docs", source.routePrefix, pageSlug].filter(Boolean).join("/");
+  const sidebarCategories = categories.map((category2) => ({
+    title: category2.title,
+    links: category2.pages.map((page) => ({
+      label: page.title,
+      href: hrefFor(page.slug)
+    }))
+  }));
+  const pages = categories.flatMap((category2) => category2.pages);
+  const index = pages.findIndex((page) => page.slug === currentSlug);
+  const previous = pages[index - 1];
+  const next = pages[index + 1];
+  const category = categories.find(
+    (entry) => entry.pages.some((page) => page.slug === currentSlug)
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RdxHeader, { project, slug }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0 overflow-hidden relative", children: [
+      /* @__PURE__ */ jsx(
+        DocsSidebar,
+        {
+          categories: sidebarCategories,
+          pathname: hrefFor(currentSlug)
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-rdx-docs-scroll": true,
+          className: "relative flex-1 min-w-0 h-full overflow-y-auto pt-12 md:pt-0 outline-none",
+          children: [
+            project.config.TOC && /* @__PURE__ */ jsx(DocsToc, {}, hrefFor(currentSlug)),
+            /* @__PURE__ */ jsxs(
+              "section",
+              {
+                className: `w-full min-h-full px-7 flex flex-col gap-5 pb-8 md:py-8 ${project.config.TOC ? "xl:pr-20" : ""}`,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-5 md:mx-auto md:max-w-[860px] pt-14 md:pt-0 flex-1", children: [
+                    /* @__PURE__ */ jsxs("header", { className: "mb-6", children: [
+                      source.badge && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: source.badge }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-600 font-semibold uppercase block -mb-0.5", children: category?.title }),
+                      /* @__PURE__ */ jsx("h1", { className: "text-4xl uppercase font-bold mb-2", children: title }),
+                      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-ring max-w-[726px]", children: description })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "main",
+                      {
+                        id: "rdx-main",
+                        tabIndex: -1,
+                        className: "h-full w-full flex-1 max-w-[960px]",
+                        children: content
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("footer", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsxs("section", { className: "flex items-center justify-between", children: [
+                      previous ? /* @__PURE__ */ jsx(
+                        ButtonLink,
+                        {
+                          variant: "outline",
+                          size: "sm",
+                          href: hrefFor(previous.slug),
+                          children: previous.title
+                        }
+                      ) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: "Previous" }),
+                      next ? /* @__PURE__ */ jsx(
+                        ButtonLink,
+                        {
+                          variant: "outline",
+                          size: "sm",
+                          href: hrefFor(next.slug),
+                          children: next.title
+                        }
+                      ) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: "Next" })
+                    ] }),
+                    /* @__PURE__ */ jsx("section", { className: "flex items-center justify-center w-full py-5", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                      "\xA9 ",
+                      (/* @__PURE__ */ new Date()).getFullYear(),
+                      " ",
+                      /* @__PURE__ */ jsx("strong", { children: project.config.title })
+                    ] }) })
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
     ] })
   ] });
 }
 export {
   DocsPage,
-  RdxLayout
+  HomePage,
+  RdxLayout,
+  createRdxProject,
+  getProjectDocsPaths,
+  getSearchResponse,
+  getSearchSources
 };

package/package.json

@@ -1,13 +1,21 @@
 {
   "name": "@lexibase/rdx-next",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.10",
   "description": "The Next.js runtime for RDX documentation projects.",
   "license": "MIT",
   "type": "module",
+  "engines": {
+    "node": ">=20.9"
+  },
   "bin": {
     "rdx": "./bin/rdx.mjs"
   },
   "exports": {
+    "./postcss.config": "./postcss.config.mjs",
+    "./styles.css": {
+      "types": "./src/runtime/styles.d.css.ts",
+      "default": "./src/runtime/styles.css"
+    },
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
@@ -21,17 +29,25 @@
     "bin",
     "dist",
     "templates",
+    "postcss.config.mjs",
+    "src/runtime/styles.css",
+    "src/runtime/styles.d.css.ts",
     "README.md"
   ],
   "dependencies": {
-    "next-mdx-remote": "^5.0.0",
-    "@lexibase/rdx-types": "1.0.0-beta.0",
-    "@lexibase/rdx-core": "1.0.0-beta.0"
+    "cross-spawn": "^7.0.6",
+    "jiti": "^2.6.1",
+    "next-mdx-remote": "^6.0.0",
+    "remark-gfm": "^4",
+    "typescript": "6.0.3",
+    "@lexibase/rdx-core": "1.0.0-beta.7",
+    "@lexibase/rdx-ui": "1.0.0-beta.2",
+    "@lexibase/rdx-types": "1.0.0-beta.5"
   },
   "peerDependencies": {
-    "next": "^15.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "next": "^16.4.2",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
   },
   "publishConfig": {
     "access": "public"
@@ -47,19 +63,20 @@
   "homepage": "https://github.com/lexibase/rdx#readme",
   "devDependencies": {
     "@types/node": "^22.15.3",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.1",
-    "eslint": "^9.34.0",
-    "next": "^15.5.0",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "typescript": "5.9.2",
-    "@rdx/eslint-config": "1.0.0",
-    "@rdx/typescript-config": "1.0.0"
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "eslint": "^9.39.5",
+    "next": "^16.4.2",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "@rdx/typescript-config": "1.0.0",
+    "@rdx/eslint-config": "1.0.0"
   },
   "scripts": {
     "build": "tsup src/index.ts src/runtime/index.tsx --format esm --dts --clean --external @lexibase/rdx-core --external @lexibase/rdx-types --external next --external react --external react-dom --external next-mdx-remote",
     "lint": "eslint . --max-warnings 0",
-    "check-types": "tsc --noEmit"
+    "check-types": "tsc --noEmit",
+    "test": "node --test tests/*.test.mjs",
+    "test:runtime": "node --test tests/runtime.integration.mjs"
   }
 }

package/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from '@lexibase/rdx-ui/postcss.config'

package/src/runtime/styles.css

@@ -0,0 +1,16 @@
+@import '@lexibase/rdx-ui/globals.css';
+@source '../../dist/**/*.js';
+
+/* Colors, buttons, dropdowns and typography come from the shared UI theme. */
+.rdx-skip-link {
+  position: fixed;
+  top: -100px;
+  left: 16px;
+  z-index: 100;
+  padding: 12px;
+  background: var(--background);
+  color: var(--foreground);
+}
+.rdx-skip-link:focus {
+  top: 12px;
+}

package/src/runtime/styles.d.css.ts

@@ -0,0 +1,2 @@
+// Global runtime styles are loaded for their side effects only.
+export {}

package/templates/runtime/app/docs/[[...slug]]/page.tsx

@@ -1,8 +1,11 @@
-import { DocsPage } from '@lexibase/rdx-next/runtime'
-import { getDocsPaths } from '@lexibase/rdx-core'
+import { DocsPage, getProjectDocsPaths } from '@lexibase/rdx-next/runtime'
 
-export function generateStaticParams() {
-  return getDocsPaths().map((slug) => ({ slug: slug.split('/') }))
+import { getProject } from '../../../rdx-project'
+
+export async function generateStaticParams() {
+  return getProjectDocsPaths(await getProject()).map((slug) => ({
+    slug: slug.split('/'),
+  }))
 }
 
 export default async function DocumentationPage({
@@ -12,5 +15,5 @@ export default async function DocumentationPage({
 }) {
   const { slug } = await params
 
-  return <DocsPage slug={slug} />
+  return <DocsPage slug={slug} project={await getProject()} />
 }