@lexibase/rdx-next 5.1.2 → 5.2.0

package/README.md

@@ -50,8 +50,8 @@ through `@lexibase/rdx-ui`: logo, navbar, Base UI version dropdown, mobile/deskt
 sidebar, landing page, MDX styles and theme provider. The adapter owns content
 and route data; it does not implement a parallel UI theme.
 
-Use `homepage: { enabled: true }` in `rdx.config.ts` for the centered-logo
-homepage, or import a project-owned React component with `homepage.component`.
+Use `homepage: { enabled: true }` in `rdx.config.ts` for the built-in landing
+page, or import a project-owned React component with `homepage.component`.
 Without the option, `/` redirects to `/docs`. Additional content sources from
 explicitly configured plugins enable the shared navbar dropdown.
 

package/bin/locale-routes.mjs

@@ -11,6 +11,7 @@ const generated = [
   ...defaultFiles.map((file) => `app/(rdx-default)/${file}`),
   'app/(rdx-default)/[...notFound]/page.tsx',
   'app/(rdx-locales)/[locale]/layout.tsx',
+  'app/(rdx-locales)/[locale]/page.tsx',
   'app/(rdx-locales)/[locale]/not-found.tsx',
   'app/(rdx-locales)/[locale]/docs/[[...slug]]/page.tsx',
   'app/(rdx-locales)/[locale]/rdx-search/[source]/route.ts',
@@ -107,6 +108,61 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
 export default async function Layout({ children, params }: { children: React.ReactNode, params: Promise<{ locale: string }> }) {
   return <RdxLayout config={await configuration(params)} bodyClassName="antialiased">{children}</RdxLayout>
 }
+`
+  )
+  const homeRoute = 'app/(rdx-locales)/[locale]/page.tsx'
+  const localizedHomes = []
+  if (project.config.homepage?.enabled) {
+    for (const locale of project.localization.locales) {
+      if (!locale.folder || locale.code === project.localization.defaultLocale)
+        continue
+
+      const file = path.join(
+        project.rootDir,
+        'locale',
+        locale.folder,
+        'home.tsx'
+      )
+      const exists = await stat(file).then(
+        (entry) => entry.isFile(),
+        (error) => {
+          if (error.code === 'ENOENT' || error.code === 'ENOTDIR') return false
+          throw error
+        }
+      )
+      if (!exists) continue
+
+      // Literal imports let Next compile and trace project-owned components.
+      const specifier = path
+        .relative(path.dirname(path.join(runtime, homeRoute)), file)
+        .split(path.sep)
+        .join('/')
+        .slice(0, -'.tsx'.length)
+      localizedHomes.push(
+        `    case ${JSON.stringify(locale.path)}: return (await import(${JSON.stringify(specifier)})).default`
+      )
+    }
+  }
+  await emit(
+    homeRoute,
+    `import { HomePage, getLocalizedProject } from '${provider}'
+import { notFound, permanentRedirect } from 'next/navigation'
+import { getProject } from '../../../rdx-project'
+async function getLocalizedHome(locale: string) {
+  switch (locale) {
+${localizedHomes.join('\n')}
+    default: return undefined
+  }
+}
+export default async function Page({ params }: { params: Promise<{ locale: string }> }) {
+  const project = await getProject()
+  const { locale } = await params
+  const selected = project.localization?.locales.find(entry => entry.path === locale)
+  if (!project.config.homepage?.enabled || !selected) notFound()
+  if (selected.code === project.localization!.defaultLocale) permanentRedirect('/')
+  const component = await getLocalizedHome(locale)
+  return <HomePage project={getLocalizedProject(project, locale)} component={component} />
+}
 `
   )
   await emit(

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { defineConfig } from '@lexibase/rdx-core/config';
-export { RDXConfig, RdxHomepage, RdxMetadata, RdxPlugin, RdxPluginContext, RdxRuntimeConfig } from '@lexibase/rdx-types';
+export { RDXConfig, RdxHomepage, RdxHomepageProps, RdxMetadata, RdxPlugin, RdxPluginContext, RdxRuntimeConfig } from '@lexibase/rdx-types';

package/dist/runtime/index.d.ts

@@ -47,8 +47,9 @@ declare function RdxLayout({ children, config, bodyClassName, }: {
     config: RDXConfig;
     bodyClassName?: string;
 }): react.JSX.Element;
-declare function HomePage({ project }: {
+declare function HomePage({ project, component, }: {
     project: RdxProject;
+    component?: NonNullable<RDXConfig['homepage']>['component'];
 }): react.JSX.Element;
 declare function NotFoundPage({ project }: {
     project: RdxProject;

package/dist/runtime/index.js

@@ -1,6 +1,7 @@
 // src/runtime/index.tsx
 import {
   getDocument as getDocument4,
+  getDocsIndex as getDocsIndex4,
   getDocsPaths,
   getSourceOptions as getSourceOptions5,
   resolveDocsRoute as resolveDocsRoute2,
@@ -17,7 +18,7 @@ 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 { Home, HomeSection } 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 { EditPageLink } from "@lexibase/rdx-ui/components/edit-page-link";
@@ -429,9 +430,13 @@ function RdxLayout({
     }
   ) }) });
 }
+function homepageHref(project, locale) {
+  return locale && locale.code !== project.localization?.defaultLocale ? `/${locale.path}` : "/";
+}
 function RdxHeader({
   project,
-  slug
+  slug,
+  onHomepage = false
 }) {
   const { config } = project;
   const messages = getMessages(config.lang);
@@ -460,14 +465,18 @@ function RdxHeader({
       ) : void 0,
       siteTitle: config.metadata.applicationName,
       logo: /* @__PURE__ */ jsx(BrandLogo, { source: config.navbar?.logo, className: "size-5" }),
-      homeHref: config.homepage?.enabled ? "/" : getDocsHref4(project),
+      homeHref: config.homepage?.enabled ? homepageHref(project, project.locale) : getDocsHref4(project),
       docsHref: getDocsHref4(project, source),
       languageMenu: project.localization ? /* @__PURE__ */ jsx(
         LanguageDropdown,
         {
           lang: config.lang,
           current: project.locale?.code ?? project.localization.defaultLocale,
-          options: getLanguageLinks(project, source, currentSlug),
+          options: onHomepage ? project.localization.locales.map((locale) => ({
+            code: locale.code,
+            label: locale.label,
+            href: homepageHref(project, locale)
+          })) : getLanguageLinks(project, source, currentSlug),
           contributionUrl: project.localization.contributionUrl
         }
       ) : void 0,
@@ -477,32 +486,68 @@ function RdxHeader({
     }
   );
 }
-function HomePage({ project }) {
+function HomePage({
+  project,
+  component
+}) {
   const { config } = project;
-  if (!config.homepage?.enabled) redirect(getDocsHref4(project));
+  const docsHref = getDocsHref4(project);
+  if (!config.homepage?.enabled) redirect(docsHref);
   const homepage = config.homepage;
-  const CustomHome = homepage.component;
+  const CustomHome = component ?? homepage.component;
+  const docsLabel = getMessages(config.lang).docs;
+  const source = project.sources[0];
+  const categories = CustomHome ? [] : getDocsIndex4(getSourceOptions5(project, source));
+  const firstPage = categories[0]?.pages[0];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(RdxHeader, { project }),
+    /* @__PURE__ */ jsx(RdxHeader, { project, onHomepage: true }),
     /* @__PURE__ */ jsx(
       "main",
       {
         id: "rdx-main",
         tabIndex: -1,
-        className: "flex-1 min-h-0 overflow-y-auto",
-        children: CustomHome ? /* @__PURE__ */ jsx(CustomHome, {}) : /* @__PURE__ */ jsx(
+        className: "relative flex-1 min-h-0 overflow-y-auto",
+        children: CustomHome ? /* @__PURE__ */ jsx(CustomHome, { lang: config.lang, docsHref }) : /* @__PURE__ */ jsx(
           Home,
           {
             title: homepage.title ?? config.metadata.applicationName,
-            logo: /* @__PURE__ */ jsx(
-              BrandLogo,
+            logo: /* @__PURE__ */ jsx(BrandLogo, { source: config.navbar?.logo, className: "size-5" }),
+            description: homepage.description ?? config.description,
+            buttons: homepage.buttons?.map((button) => ({
+              ...button,
+              href: project.locale && /^\/docs(?:[/?#]|$)/.test(button.href) ? `/${project.locale.path}${button.href}` : button.href
+            })) ?? [{ label: docsLabel, href: docsHref }],
+            previewTitle: firstPage?.title,
+            previewDescription: firstPage?.description,
+            children: categories.length > 0 && /* @__PURE__ */ jsx(
+              HomeSection,
               {
-                source: config.navbar?.logo,
-                className: "size-52 hover:scale-105 hover:rotate-1 transition-[scale,rotation] duration-1000"
+                "aria-labelledby": "home-docs-title",
+                className: "border-t bg-muted/20",
+                children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-6xl", children: [
+                  /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      id: "home-docs-title",
+                      className: "text-3xl font-semibold tracking-tight sm:text-4xl",
+                      children: docsLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("ul", { className: "mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: categories.map((category) => {
+                    const page = category.pages[0];
+                    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        href: getDocsHref4(project, source, page.slug),
+                        variant: "link",
+                        className: "h-auto whitespace-normal p-0 text-left",
+                        children: category.title
+                      }
+                    ) }, category.id);
+                  }) })
+                ] })
               }
-            ),
-            description: homepage.description,
-            buttons: homepage.buttons
+            )
           }
         )
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexibase/rdx-next",
-  "version": "5.1.2",
+  "version": "5.2.0",
   "description": "The Next.js runtime for RDX documentation projects.",
   "license": "MIT",
   "type": "module",
@@ -52,8 +52,8 @@
     "next-mdx-remote": "^6.0.0",
     "remark-gfm": "^4",
     "typescript": "6.0.3",
-    "@lexibase/rdx-core": "3.1.0",
-    "@lexibase/rdx-types": "2.4.0"
+    "@lexibase/rdx-core": "3.1.1",
+    "@lexibase/rdx-types": "2.5.0"
   },
   "peerDependencies": {
     "@lexibase/rdx-ui": "^3.5.0",
@@ -81,9 +81,9 @@
     "next": "^16.4.2",
     "react": "19.3.1",
     "react-dom": "19.3.1",
-    "@lexibase/rdx-ui": "3.5.3",
-    "@rdx/typescript-config": "1.0.0",
-    "@rdx/eslint-config": "1.0.0"
+    "@lexibase/rdx-ui": "3.5.4",
+    "@rdx/eslint-config": "1.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

@@ -5,3 +5,4 @@
 @source '../../components/**/*.{ts,tsx}';
 @source '../../docs/**/*.mdx';
 @source '../../locale/*/docs/**/*.mdx';
+@source '../../locale/*/home.tsx';