@lexibase/rdx-next 1.2.1 → 2.0.0

package/bin/cli.mjs

@@ -1,6 +1,6 @@
 import { spawn } from 'node:child_process'
 import { createRequire } from 'node:module'
-import { access, cp, mkdir } from 'node:fs/promises'
+import { access, cp, mkdir, writeFile } from 'node:fs/promises'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import process from 'node:process'
@@ -8,6 +8,7 @@ import process from 'node:process'
 import { createRdxProject } from '@lexibase/rdx-core/config'
 import { createJiti } from 'jiti'
 
+import postcssConfig from '../postcss.config.mjs'
 import { preparePublicAssets } from './public-assets.mjs'
 
 export async function runRdxCli({ templateDir } = {}) {
@@ -30,6 +31,19 @@ export async function runRdxCli({ templateDir } = {}) {
       force: true,
       recursive: true,
     })
+    // 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)
+    const plugins = Object.fromEntries(
+      Object.entries(postcssConfig.plugins).map(([name, options]) => [
+        resolvePlugin.resolve(name),
+        options,
+      ])
+    )
+    await writeFile(
+      path.join(runtimeDirectory, 'postcss.config.mjs'),
+      `export default ${JSON.stringify({ ...postcssConfig, plugins }, null, 2)}\n`
+    )
   }
 
   async function main() {

package/dist/runtime/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { RdxProject, RDXConfig } from '@lexibase/rdx-types';
+import { RdxProject, RDXConfig, RdxDocPage } from '@lexibase/rdx-types';
 export { createRdxProject, getProjectDocsPaths } from '@lexibase/rdx-core';
 import { Metadata } from 'next';
 
@@ -14,6 +14,8 @@ declare function getDocumentMetadata({ project, slug, }: {
     project: RdxProject;
     slug?: string[];
 }): Metadata;
+/** Keep page previews in sync while retaining the site's social images and options. */
+declare function getPageMetadata(config: RDXConfig, page: Pick<RdxDocPage, 'title' | 'description'>): Metadata;
 /** Translate the shared configuration through Next's native Metadata API. */
 declare function getRdxMetadata(config: RDXConfig): Metadata;
 
@@ -25,9 +27,12 @@ declare function RdxLayout({ children, config, bodyClassName, }: {
 declare function HomePage({ project }: {
     project: RdxProject;
 }): react.JSX.Element;
+declare function NotFoundPage({ project }: {
+    project: RdxProject;
+}): react.JSX.Element;
 declare function DocsPage({ slug, project, }: {
     slug?: string[];
     project: RdxProject;
 }): Promise<react.JSX.Element>;
 
-export { DocsPage, HomePage, RdxLayout, getDocumentMetadata, getRdxMetadata, getSearchResponse, getSearchSources };
+export { DocsPage, HomePage, NotFoundPage, RdxLayout, getDocumentMetadata, getPageMetadata, getRdxMetadata, getSearchResponse, getSearchSources };

package/dist/runtime/index.js

@@ -6,15 +6,17 @@ import {
   resolveDocsRoute as resolveDocsRoute2
 } 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 { FooterCredit } from "@lexibase/rdx-ui/components/footer-credit";
 import { Logo } from "@lexibase/rdx-ui/components/logo";
-import { mdxComponents } from "@lexibase/rdx-ui/components/mdx-components";
+import { getMdxComponents } from "@lexibase/rdx-ui/components/mdx-components";
+import { getMessages, formatMessage } from "@lexibase/rdx-ui/lib/i18n";
+import { LocaleProvider } from "@lexibase/rdx-ui/providers/locale-provider";
 import { Navbar } from "@lexibase/rdx-ui/components/navbar";
+import { NotFound } from "@lexibase/rdx-ui/components/not-found";
 import {
   VersionDropdown
 } from "@lexibase/rdx-ui/components/version-dropdown";
@@ -87,9 +89,16 @@ function getDocumentMetadata({
   if (!route.slug) return {};
   if (!route.document) notFound();
   const page = route.categories.flatMap((category) => category.pages).find((page2) => page2.slug === route.slug);
+  return getPageMetadata(project.config, page);
+}
+function getPageMetadata(config, page) {
+  const title = page.title;
+  const description = page.description || config.description;
   return {
-    title: page.title,
-    description: page.description || project.config.description
+    title,
+    description,
+    openGraph: { ...config.metadata.openGraph, title, description },
+    twitter: { ...config.metadata.twitter, title, description }
   };
 }
 function getRdxMetadata(config) {
@@ -125,17 +134,18 @@ function RdxLayout({
   config,
   bodyClassName
 }) {
-  return /* @__PURE__ */ jsx("html", { suppressHydrationWarning: true, lang: config.lang ?? "en", children: /* @__PURE__ */ jsx("body", { className: bodyClassName, children: /* @__PURE__ */ jsxs(
+  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,
     {
       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" }),
+      children: /* @__PURE__ */ jsxs(LocaleProvider, { lang: config.lang, children: [
+        /* @__PURE__ */ jsx("a", { className: "rdx-skip-link", href: "#rdx-main", children: messages.skipContent }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-col h-dvh", children })
-      ]
+      ] })
     }
   ) }) });
 }
@@ -144,13 +154,14 @@ function RdxHeader({
   slug
 }) {
   const { config } = project;
+  const messages = getMessages(config.lang);
   const { source, slug: currentSlug } = resolveDocsRoute2(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}`,
+      label: edition.id === "current" ? messages.current : formatMessage(messages.version, { version: edition.label }),
       kind: edition.id === "current" ? "live" : edition.badge === "Archived" ? "archived" : "version",
       href: ["/docs", edition.routePrefix, destination].filter(Boolean).join("/")
     };
@@ -159,12 +170,13 @@ function RdxHeader({
   return /* @__PURE__ */ jsx(
     Navbar,
     {
+      lang: config.lang,
       title: config.navbar?.title ?? "",
       search: config.search ? /* @__PURE__ */ jsx(
         DocsSearch,
         {
           indexUrl: `/rdx-search/${encodeURIComponent(source.routePrefix || "_")}`,
-          version: source.label
+          version: source.id === "current" ? messages.current : formatMessage(messages.version, { version: source.label })
         }
       ) : void 0,
       siteTitle: config.metadata.applicationName,
@@ -204,10 +216,17 @@ function HomePage({ project }) {
     )
   ] });
 }
+function NotFoundPage({ project }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RdxHeader, { project }),
+    /* @__PURE__ */ jsx(NotFound, { lang: project.config.lang })
+  ] });
+}
 async function DocsPage({
   slug,
   project
 }) {
+  const messages = getMessages(project.config.lang);
   const {
     source,
     slug: currentSlug,
@@ -218,14 +237,14 @@ async function DocsPage({
     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." })
+        /* @__PURE__ */ jsx("h1", { children: messages.documentationReady }),
+        /* @__PURE__ */ jsx("p", { children: messages.addDocument })
       ] })
     ] });
   if (!document) notFound2();
   const { content } = await compileDocumentation(
     document.content,
-    mdxComponents,
+    getMdxComponents(project.config.lang),
     {
       sourceRoot: getSourceOptions2(project, source).docsDir,
       sourcePath: document.sourcePath,
@@ -274,7 +293,7 @@ async function DocsPage({
                 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 }),
+                      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 })
@@ -292,27 +311,20 @@ async function DocsPage({
                   /* @__PURE__ */ jsxs("footer", { className: "flex flex-col", children: [
                     /* @__PURE__ */ jsxs("section", { className: "flex items-center justify-between", children: [
                       previous ? /* @__PURE__ */ jsx(
-                        ButtonLink,
+                        Button,
                         {
                           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(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
                       }
@@ -330,9 +342,11 @@ async function DocsPage({
 export {
   DocsPage,
   HomePage,
+  NotFoundPage,
   RdxLayout,
   createRdxProject,
   getDocumentMetadata,
+  getPageMetadata,
   getProjectDocsPaths,
   getRdxMetadata,
   getSearchResponse,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexibase/rdx-next",
-  "version": "1.2.1",
+  "version": "2.0.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.1.0",
-    "@lexibase/rdx-types": "1.1.0"
+    "@lexibase/rdx-types": "1.1.1",
+    "@lexibase/rdx-core": "1.1.1"
   },
   "peerDependencies": {
-    "@lexibase/rdx-ui": "^1.1.0",
+    "@lexibase/rdx-ui": "^2.0.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",
-    "@lexibase/rdx-ui": "1.1.0",
-    "@rdx/typescript-config": "1.0.0",
-    "@rdx/eslint-config": "1.0.0"
+    "@rdx/eslint-config": "1.0.0",
+    "@lexibase/rdx-ui": "2.0.0",
+    "@rdx/typescript-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/templates/runtime/app/globals.css

@@ -1,4 +1,6 @@
 @import '@lexibase/rdx-next/styles.css';
+/* Build output contains serialized classes, not authoring sources. */
+@source not '../.next';
 @source '../../home.{ts,tsx}';
 @source '../../components/**/*.{ts,tsx}';
 @source '../../docs/**/*.mdx';

package/templates/runtime/app/not-found.tsx

@@ -0,0 +1,7 @@
+import { NotFoundPage } from '@lexibase/rdx-next/runtime'
+import { getProject } from '../rdx-project'
+
+export default async function NotFound() {
+  const project = await getProject()
+  return <NotFoundPage project={project} />
+}