@lexibase/rdx-next 3.0.0 → 3.2.0

package/bin/cli.mjs

@@ -10,6 +10,7 @@ import { createJiti } from 'jiti'
 
 import postcssConfig from '../postcss.config.mjs'
 import { preparePublicAssets } from './public-assets.mjs'
+import { prepareProjectStyles } from './project-styles.mjs'
 
 export async function runRdxCli({ templateDir } = {}) {
   const supportedCommands = new Set(['dev', 'build', 'start'])
@@ -31,6 +32,7 @@ export async function runRdxCli({ templateDir } = {}) {
       force: true,
       recursive: true,
     })
+    await prepareProjectStyles(projectRoot, runtimeDirectory)
     // Resolve in Node before Next processes this file: UI may be transitive,
     // and native Tailwind plugins must stay outside the Turbopack module graph.
     const resolvePlugin = createRequire(import.meta.url)

package/bin/project-styles.mjs

@@ -0,0 +1,27 @@
+import { readFile, stat, writeFile } from 'node:fs/promises'
+import path from 'node:path'
+
+/** Import project-owned CSS after the theme without copying or editing it. */
+export async function prepareProjectStyles(projectRoot, runtimeDirectory) {
+  const source = path.join(projectRoot, 'rdx.css')
+  const destination = path.join(runtimeDirectory, 'app', 'globals.css')
+  const current = await readFile(destination, 'utf8')
+  const original = current.replace(
+    /^@import "\.\.\/\.\.\/rdx\.css";\r?\n/gm,
+    ''
+  )
+  let exists = false
+  try {
+    const info = await stat(source)
+    if (!info.isFile()) throw new Error('rdx.css must be a CSS file.')
+    exists = true
+  } catch (error) {
+    if (error.code !== 'ENOENT') throw error
+  }
+  const next = exists
+    ? original.replace(/(@import[^;]+;)/, '$1\n@import "../../rdx.css";')
+    : original
+  if (next !== current) {
+    await writeFile(destination, next)
+  }
+}

package/config.d.mts

@@ -1,8 +1,13 @@
 /** Common build root for the documentation project and its installed Next.js. */
 export function getRdxBuildRoot(rootDir: string): Promise<string>
 
-/** Explicit deployment files for a native Next.js application using RDX. */
+/** Explicit deployment files and historical route redirects for a native Next.js application. */
 export function getRdxTracingConfig(options: {
   rootDir: string
   appDir?: string
-}): Promise<{ outputFileTracingIncludes: Record<string, string[]> }>
+}): Promise<{
+  outputFileTracingIncludes: Record<string, string[]>
+  redirects?: () => Promise<
+    { source: string; destination: string; permanent: boolean }[]
+  >
+}>

package/config.mjs

@@ -62,7 +62,7 @@ function literalPattern(filename) {
     .replace(/([*?[\]{}()!+@])/g, '\\$1')
 }
 
-/** Next.js tracing for configured RDX content, independent of plugin names. */
+/** Next.js tracing and historical route redirects, independent of plugin names. */
 export async function getRdxTracingConfig({ rootDir, appDir = rootDir }) {
   rootDir = path.resolve(rootDir)
   appDir = path.resolve(appDir)
@@ -77,11 +77,17 @@ export async function getRdxTracingConfig({ rootDir, appDir = rootDir }) {
   const project = await createRdxProject(input, { rootDir })
   const files = (
     await Promise.all(
-      project.sources.map((source) =>
-        contentFiles(
-          resolveProjectPath(rootDir, source.docsDir, 'content source docsDir')
+      project.sources
+        .filter((source) => source.redirectTo === undefined)
+        .map((source) =>
+          contentFiles(
+            resolveProjectPath(
+              rootDir,
+              source.docsDir,
+              'content source docsDir'
+            )
+          )
         )
-      )
     )
   ).flat()
   for (const filename of project.runtimeFiles) {
@@ -94,7 +100,15 @@ export async function getRdxTracingConfig({ rootDir, appDir = rootDir }) {
       throw new Error(`Plugin runtimeFiles must name a file: ${filename}`)
     files.push(resolved)
   }
+  const redirects = project.sources
+    .filter((source) => source.redirectTo !== undefined)
+    .map((source) => ({
+      source: `/docs/${source.routePrefix}/:path*`,
+      destination: `/docs/${source.redirectTo}/:path*`,
+      permanent: true,
+    }))
   return {
+    ...(redirects.length ? { redirects: async () => redirects } : {}),
     outputFileTracingIncludes: {
       '/*': [
         ...new Set(

package/dist/runtime/index.js

@@ -8,8 +8,10 @@ import {
 import { Button } from "@lexibase/rdx-ui/components/button";
 import { DocsSidebar } from "@lexibase/rdx-ui/components/docs-sidebar";
 import { DocsToc } from "@lexibase/rdx-ui/components/docs-toc";
+import { DocsPageTransition } from "@lexibase/rdx-ui/components/docs-page-transition";
 import { DocsSearch } from "@lexibase/rdx-ui/components/docs-search";
 import { Home } from "@lexibase/rdx-ui/components/home";
+import { SkipLink } from "@lexibase/rdx-ui/components/skip-link";
 import { FooterCredit } from "@lexibase/rdx-ui/components/footer-credit";
 import { Logo } from "@lexibase/rdx-ui/components/logo";
 import { getMdxComponents } from "@lexibase/rdx-ui/components/mdx-components";
@@ -21,13 +23,14 @@ import {
   VersionDropdown
 } from "@lexibase/rdx-ui/components/version-dropdown";
 import { ThemeProvider } from "@lexibase/rdx-ui/providers/theme-provider";
-import { notFound as notFound2, redirect } from "next/navigation";
+import { notFound as notFound2, redirect, permanentRedirect } from "next/navigation";
 
 // src/runtime/mdx.ts
 import { compileMDX } from "next-mdx-remote/rsc";
 import remarkGfm from "remark-gfm";
 import {
   remarkDocumentLinks,
+  remarkDocumentationComponents,
   rehypeDocumentationHeadings,
   rehypeDocumentationCode
 } from "@lexibase/rdx-core/mdx";
@@ -39,7 +42,11 @@ function compileDocumentation(source, components, links) {
       blockJS: true,
       blockDangerousJS: true,
       mdxOptions: {
-        remarkPlugins: [remarkGfm, [remarkDocumentLinks, links]],
+        remarkPlugins: [
+          remarkGfm,
+          remarkDocumentationComponents,
+          [remarkDocumentLinks, links]
+        ],
         rehypePlugins: [rehypeDocumentationHeadings, rehypeDocumentationCode]
       }
     }
@@ -53,12 +60,12 @@ import { createRdxProject, getProjectDocsPaths } from "@lexibase/rdx-core";
 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 || "_" })) : [];
+  return project.config.search ? project.sources.filter((source) => source.redirectTo === void 0).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
+    (entry) => entry.redirectTo === void 0 && (entry.routePrefix || "_") === key
   );
   if (!source) return new Response(null, { status: 404 });
   const options = getSourceOptions(project, source);
@@ -86,6 +93,7 @@ function getDocumentMetadata({
   slug
 }) {
   const route = resolveDocsRoute(project, slug);
+  if (route.source.redirectTo !== void 0) return {};
   if (!route.slug) return {};
   if (!route.document) notFound();
   const page = route.categories.flatMap((category) => category.pages).find((page2) => page2.slug === route.slug);
@@ -134,7 +142,6 @@ function RdxLayout({
   config,
   bodyClassName
 }) {
-  const messages = getMessages(config.lang);
   return /* @__PURE__ */ jsx("html", { suppressHydrationWarning: true, lang: config.lang ?? "en", children: /* @__PURE__ */ jsx("body", { className: bodyClassName, children: /* @__PURE__ */ jsx(
     ThemeProvider,
     {
@@ -143,7 +150,7 @@ function RdxLayout({
       attribute: "class",
       defaultTheme: config.theme?.defaultTheme ?? "system",
       children: /* @__PURE__ */ jsxs(LocaleProvider, { lang: config.lang, children: [
-        /* @__PURE__ */ jsx("a", { className: "rdx-skip-link", href: "#rdx-main", children: messages.skipContent }),
+        /* @__PURE__ */ jsx(SkipLink, { lang: config.lang }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-col h-dvh", children })
       ] })
     }
@@ -156,7 +163,7 @@ function RdxHeader({
   const { config } = project;
   const messages = getMessages(config.lang);
   const { source, slug: currentSlug } = resolveDocsRoute2(project, slug);
-  const options = project.sources.map((edition) => {
+  const options = project.sources.filter((edition) => edition.redirectTo === void 0).map((edition) => {
     const docs = getSourceOptions2(project, edition);
     const destination = currentSlug && getDocument2(currentSlug, docs) ? currentSlug : getDocsPaths(docs)[0];
     return {
@@ -233,6 +240,14 @@ async function DocsPage({
     document,
     categories
   } = resolveDocsRoute2(project, slug);
+  if (source.redirectTo !== void 0)
+    permanentRedirect(
+      [
+        "/docs",
+        source.redirectTo,
+        ...slug?.slice(1).map(encodeURIComponent) ?? []
+      ].join("/")
+    );
   if (!currentSlug)
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(RdxHeader, { project, slug }),
@@ -286,51 +301,68 @@ async function DocsPage({
           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",
+            /* @__PURE__ */ jsx(
+              DocsPageTransition,
               {
-                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 === "Archived" ? messages.archivedVersion : 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(
-                        Button,
+                previousHref: previous ? hrefFor(previous.slug) : void 0,
+                nextHref: next ? hrefFor(next.slug) : void 0,
+                children: /* @__PURE__ */ jsxs(
+                  "section",
+                  {
+                    className: `w-full min-h-full bg-background px-7 flex flex-col gap-5 pb-8 md:py-8 ${project.config.TOC ? "xl:pr-20" : ""}`,
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        "main",
                         {
-                          variant: "outline",
-                          size: "sm",
-                          href: hrefFor(previous.slug),
-                          children: previous.title
+                          id: "rdx-main",
+                          tabIndex: -1,
+                          className: "w-full flex flex-col gap-5 md:mx-auto md:max-w-[860px] pt-14 md:pt-0 flex-1 outline-none",
+                          children: [
+                            /* @__PURE__ */ jsxs("header", { className: "mb-6", children: [
+                              source.badge && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: source.badge === "Archived" ? messages.archivedVersion : 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("div", { className: "h-full w-full flex-1 max-w-[960px]", children: content })
+                          ]
                         }
-                      ) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: messages.previous }),
-                      next ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", href: hrefFor(next.slug), children: next.title }) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: messages.next })
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      FooterCredit,
-                      {
-                        lang: project.config.lang,
-                        name: project.config.metadata.applicationName,
-                        since: project.config.metadata.since
-                      }
-                    )
-                  ] })
-                ]
+                      ),
+                      /* @__PURE__ */ jsxs("footer", { className: "flex flex-col", children: [
+                        /* @__PURE__ */ jsxs("section", { className: "flex items-center justify-between", children: [
+                          previous ? /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "outline",
+                              size: "sm",
+                              href: hrefFor(previous.slug),
+                              transitionTypes: ["rdx-doc-back"],
+                              children: previous.title
+                            }
+                          ) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: messages.previous }),
+                          next ? /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "outline",
+                              size: "sm",
+                              href: hrefFor(next.slug),
+                              transitionTypes: ["rdx-doc-forward"],
+                              children: next.title
+                            }
+                          ) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: messages.next })
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          FooterCredit,
+                          {
+                            lang: project.config.lang,
+                            name: project.config.metadata.applicationName,
+                            since: project.config.metadata.since
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
               }
             )
           ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexibase/rdx-next",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "The Next.js runtime for RDX documentation projects.",
   "license": "MIT",
   "type": "module",
@@ -51,11 +51,11 @@
     "next-mdx-remote": "^6.0.0",
     "remark-gfm": "^4",
     "typescript": "6.0.3",
-    "@lexibase/rdx-core": "1.2.0",
-    "@lexibase/rdx-types": "1.1.1"
+    "@lexibase/rdx-core": "1.4.0",
+    "@lexibase/rdx-types": "1.2.0"
   },
   "peerDependencies": {
-    "@lexibase/rdx-ui": "^3.0.0",
+    "@lexibase/rdx-ui": "^3.2.0",
     "next": "^16.4.2",
     "react": "^19.3.1",
     "react-dom": "^19.3.1"
@@ -80,9 +80,9 @@
     "next": "^16.4.2",
     "react": "19.3.1",
     "react-dom": "19.3.1",
-    "@rdx/eslint-config": "1.0.0",
+    "@lexibase/rdx-ui": "3.2.0",
     "@rdx/typescript-config": "1.0.0",
-    "@lexibase/rdx-ui": "3.0.0"
+    "@rdx/eslint-config": "1.0.0"
   },
   "scripts": {
     "dev": "tsup src/index.ts src/runtime/index.tsx --format esm --dts --watch --external @lexibase/rdx-core --external @lexibase/rdx-types --external @lexibase/rdx-ui --external next --external react --external react-dom --external next-mdx-remote",

package/src/runtime/styles.css

@@ -2,16 +2,4 @@
 /* Register the entry file directly: consumer ignore rules can hide nested dist folders. */
 @source '../../dist/runtime/index.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;
-}
+/* Colors, focus navigation and typography come from the shared UI theme. */