@lexibase/rdx-next 1.0.0-beta.4 → 1.0.0-beta.5

package/dist/index.d.ts

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

package/dist/runtime/index.d.ts

@@ -7,9 +7,12 @@ declare function RdxLayout({ children, config, }: {
     children: ReactNode;
     config: RdxRuntimeConfig;
 }): react_jsx_runtime.JSX.Element;
+declare function HomePage({ project }: {
+    project: RdxProject;
+}): react_jsx_runtime.JSX.Element;
 declare function DocsPage({ slug, project, }: {
     slug?: string[];
     project: RdxProject;
 }): Promise<react_jsx_runtime.JSX.Element>;
 
-export { DocsPage, RdxLayout };
+export { DocsPage, HomePage, RdxLayout };

package/dist/runtime/index.js

@@ -7,9 +7,9 @@ import {
 } from "@lexibase/rdx-core";
 import { compileMDX } from "next-mdx-remote/rsc";
 import Link from "next/link";
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { createRdxProject, getProjectDocsPaths } from "@lexibase/rdx-core";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var mdxComponents = {
   h1: (props) => /* @__PURE__ */ jsx("h1", { ...props }),
   h2: (props) => /* @__PURE__ */ jsx("h2", { ...props }),
@@ -38,31 +38,98 @@ function RdxLayout({
   children,
   config
 }) {
-  const brand = config.navbar?.title ?? config.title;
   return /* @__PURE__ */ jsx(
     "html",
     {
       lang: config.lang ?? "en",
       "data-theme": config.theme?.defaultTheme ?? "system",
       children: /* @__PURE__ */ jsxs("body", { children: [
-        /* @__PURE__ */ jsxs("header", { className: "rdx-header", children: [
-          /* @__PURE__ */ jsx(Link, { className: "rdx-brand", href: "/docs", "aria-label": config.title, children: brand }),
-          config.navbar?.actions?.github?.visible && config.navbar.actions.github.url && /* @__PURE__ */ jsx(
-            "a",
-            {
-              className: "rdx-github-link",
-              href: config.navbar.actions.github.url,
-              rel: "noreferrer",
-              target: "_blank",
-              children: "GitHub"
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsx("a", { className: "rdx-skip-link", href: "#rdx-main", children: "Skip to content" }),
         children
       ] })
     }
   );
 }
+function RdxHeader({
+  project,
+  slug
+}) {
+  const { config } = project;
+  const { source, slug: currentSlug } = resolveDocsRoute(project, slug);
+  const brand = config.navbar?.title ?? config.title;
+  return /* @__PURE__ */ jsxs("header", { className: "rdx-header", children: [
+    /* @__PURE__ */ jsx(
+      Link,
+      {
+        className: "rdx-brand",
+        href: config.homepage?.enabled ? "/" : "/docs",
+        "aria-label": config.title,
+        children: brand
+      }
+    ),
+    /* @__PURE__ */ jsxs("nav", { className: "rdx-header-actions", "aria-label": "Main navigation", children: [
+      config.homepage?.enabled && /* @__PURE__ */ jsx(Link, { href: "/", children: "Home" }),
+      /* @__PURE__ */ jsx(Link, { href: "/docs", children: "Documentation" }),
+      project.sources.length > 1 && /* @__PURE__ */ jsxs("details", { className: "rdx-version-menu", children: [
+        /* @__PURE__ */ jsxs("summary", { "aria-label": `Documentation version: ${source.label}`, children: [
+          source.label,
+          source.badge ? ` (${source.badge})` : ""
+        ] }),
+        /* @__PURE__ */ jsx("ul", { "aria-label": "Documentation versions", children: project.sources.map((edition) => {
+          const options = getSourceOptions(project, edition);
+          const destination = currentSlug && getDocument(currentSlug, options) ? currentSlug : getDocsPaths(options)[0];
+          const href = ["/docs", edition.routePrefix, destination].filter(Boolean).join("/");
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href,
+              "aria-current": edition.id === source.id ? "true" : void 0,
+              children: [
+                edition.label,
+                edition.badge ? ` (${edition.badge})` : ""
+              ]
+            }
+          ) }, edition.id);
+        }) })
+      ] }),
+      config.navbar?.actions?.github?.visible && config.navbar.actions.github.url && /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: "rdx-github-link",
+          href: config.navbar.actions.github.url,
+          rel: "noreferrer",
+          target: "_blank",
+          children: "GitHub"
+        }
+      )
+    ] })
+  ] });
+}
+function HomePage({ project }) {
+  const { config } = project;
+  if (!config.homepage?.enabled) redirect("/docs");
+  const homepage = config.homepage;
+  const buttons = homepage.buttons ?? [
+    { label: "Read the documentation", href: "/docs" }
+  ];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RdxHeader, { project }),
+    /* @__PURE__ */ jsxs("main", { id: "rdx-main", tabIndex: -1, className: "rdx-homepage", children: [
+      /* @__PURE__ */ jsx("p", { className: "rdx-homepage-eyebrow", children: config.title }),
+      /* @__PURE__ */ jsx("h1", { children: homepage.title ?? config.title }),
+      /* @__PURE__ */ jsx("p", { className: "rdx-homepage-description", children: homepage.description ?? config.description }),
+      /* @__PURE__ */ jsx("div", { className: "rdx-homepage-buttons", children: buttons.map((button, index) => /* @__PURE__ */ jsx(
+        Link,
+        {
+          className: index === 0 ? "rdx-button rdx-button-primary" : "rdx-button",
+          href: button.href,
+          children: button.label
+        },
+        `${index}:${button.href}`
+      )) })
+    ] })
+  ] });
+}
 async function DocsPage({
   slug,
   project
@@ -74,9 +141,12 @@ async function DocsPage({
     categories
   } = resolveDocsRoute(project, slug);
   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." })
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(RdxHeader, { project, slug }),
+      /* @__PURE__ */ jsxs("main", { id: "rdx-main", tabIndex: -1, 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." })
+      ] })
     ] });
   }
   if (!document) notFound();
@@ -86,55 +156,43 @@ async function DocsPage({
   });
   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__ */ jsxs("aside", { className: "rdx-sidebar", "aria-label": "Documentation navigation", children: [
-      project.sources.length > 1 && /* @__PURE__ */ jsx("nav", { className: "rdx-editions", "aria-label": "Documentation editions", children: project.sources.map((edition) => {
-        const options = getSourceOptions(project, edition);
-        const destination = getDocument(currentSlug, options) ? currentSlug : getDocsPaths(options)[0];
-        const href = ["/docs", edition.routePrefix, destination].filter(Boolean).join("/");
-        return /* @__PURE__ */ jsxs(
-          Link,
-          {
-            href,
-            "aria-current": edition.id === source.id ? "page" : void 0,
-            children: [
-              edition.label,
-              edition.badge ? ` (${edition.badge})` : ""
-            ]
-          },
-          edition.id
-        );
-      }) }),
-      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", source.routePrefix, page.slug].filter(Boolean).join("/");
-          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: [
-        source.badge && /* @__PURE__ */ jsx("p", { className: "rdx-source-badge", children: source.badge }),
-        /* @__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 })
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RdxHeader, { project, slug }),
+    /* @__PURE__ */ jsxs("div", { className: "rdx-docs-layout", children: [
+      /* @__PURE__ */ jsx("aside", { className: "rdx-sidebar", "aria-label": "Documentation navigation", children: /* @__PURE__ */ jsxs("details", { className: "rdx-sidebar-menu", open: true, children: [
+        /* @__PURE__ */ jsx("summary", { children: "On this site" }),
+        /* @__PURE__ */ jsx("nav", { "aria-label": "Documentation pages", 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", source.routePrefix, page.slug].filter(Boolean).join("/");
+            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", { id: "rdx-main", tabIndex: -1, className: "rdx-document", children: [
+        /* @__PURE__ */ jsxs("header", { className: "rdx-document-header", children: [
+          source.badge && /* @__PURE__ */ jsx("p", { className: "rdx-source-badge", children: source.badge }),
+          /* @__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 })
+      ] })
     ] })
   ] });
 }
 export {
   DocsPage,
+  HomePage,
   RdxLayout,
   createRdxProject,
   getProjectDocsPaths

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexibase/rdx-next",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "The Next.js runtime for RDX documentation projects.",
   "license": "MIT",
   "type": "module",
@@ -26,8 +26,8 @@
   "dependencies": {
     "jiti": "^2.6.1",
     "next-mdx-remote": "^5.0.0",
-    "@lexibase/rdx-types": "1.0.0-beta.2",
-    "@lexibase/rdx-core": "1.0.0-beta.2"
+    "@lexibase/rdx-types": "1.0.0-beta.3",
+    "@lexibase/rdx-core": "1.0.0-beta.3"
   },
   "peerDependencies": {
     "next": "^15.5.0",
@@ -62,6 +62,7 @@
     "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",
-    "test": "node --test tests/*.test.mjs"
+    "test": "node --test tests/*.test.mjs",
+    "test:runtime": "node --test tests/runtime.integration.mjs"
   }
 }

package/templates/runtime/app/globals.css

@@ -27,12 +27,6 @@
   --rdx-link: #7bb0ff;
 }
 
-.rdx-editions {
-  border-bottom: 1px solid var(--rdx-border);
-  margin-bottom: 20px;
-  padding-bottom: 20px;
-}
-
 .rdx-source-badge {
   color: var(--rdx-muted);
   font-size: 0.85rem;
@@ -62,9 +56,137 @@ a {
   align-items: center;
   border-bottom: 1px solid var(--rdx-border);
   display: flex;
-  height: 60px;
+  min-height: 64px;
+  gap: 16px;
+  flex-wrap: wrap;
   justify-content: space-between;
-  padding: 0 24px;
+  padding: 12px 24px;
+}
+
+.rdx-header-actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  font-size: 0.9rem;
+}
+
+.rdx-header-actions a {
+  text-decoration: none;
+}
+.rdx-header-actions a:hover {
+  color: var(--rdx-link);
+}
+.rdx-brand {
+  overflow-wrap: anywhere;
+}
+
+:where(a, summary):focus-visible {
+  outline: 2px solid var(--rdx-link);
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+
+.rdx-skip-link {
+  position: fixed;
+  top: -100px;
+  left: 16px;
+  z-index: 20;
+  padding: 12px;
+  background: var(--rdx-background);
+}
+.rdx-skip-link:focus {
+  top: 12px;
+}
+
+.rdx-version-menu {
+  position: relative;
+}
+.rdx-version-menu summary {
+  cursor: pointer;
+  padding: 8px 12px;
+  border: 1px solid var(--rdx-border);
+  border-radius: 8px;
+  background: var(--rdx-accent);
+}
+.rdx-version-menu ul {
+  position: absolute;
+  right: 0;
+  z-index: 10;
+  min-width: 180px;
+  max-width: calc(100vw - 48px);
+  max-height: 320px;
+  overflow: auto;
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 6px;
+  border: 1px solid var(--rdx-border);
+  border-radius: 10px;
+  background: var(--rdx-background);
+  box-shadow: 0 8px 24px #0002;
+}
+.rdx-version-menu a {
+  display: block;
+  padding: 10px;
+  border-radius: 6px;
+  overflow-wrap: anywhere;
+}
+.rdx-version-menu a:hover,
+.rdx-version-menu a[aria-current] {
+  background: var(--rdx-accent);
+}
+.rdx-sidebar-menu > summary {
+  display: list-item;
+  cursor: pointer;
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+.rdx-homepage {
+  max-width: 1040px;
+  margin: 0 auto;
+  padding: clamp(72px, 16vh, 160px) 24px;
+  text-align: center;
+}
+.rdx-homepage-eyebrow {
+  color: var(--rdx-link);
+  font-weight: 600;
+}
+.rdx-homepage h1 {
+  font-size: clamp(2.5rem, 7vw, 5rem);
+  line-height: 1.05;
+  letter-spacing: -0.05em;
+  margin: 24px 0;
+  overflow-wrap: anywhere;
+}
+.rdx-homepage-description {
+  color: var(--rdx-muted);
+  font-size: 1.2rem;
+  line-height: 1.7;
+  max-width: 640px;
+  margin: 0 auto;
+}
+.rdx-homepage-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: center;
+  margin-top: 32px;
+}
+.rdx-button {
+  border: 1px solid var(--rdx-border);
+  border-radius: 8px;
+  padding: 14px 20px;
+  text-decoration: none;
+  font-weight: 600;
+}
+.rdx-button-primary {
+  background: var(--rdx-foreground);
+  color: var(--rdx-background);
+}
+.rdx-button:hover {
+  outline: 2px solid var(--rdx-link);
+  outline-offset: 2px;
 }
 
 .rdx-brand {
@@ -82,7 +204,7 @@ a {
 .rdx-docs-layout {
   display: grid;
   grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
-  min-height: calc(100vh - 60px);
+  min-height: calc(100vh - 64px);
 }
 
 .rdx-sidebar {
@@ -218,6 +340,19 @@ a {
 }
 
 @media (max-width: 720px) {
+  .rdx-header {
+    padding: 12px 20px;
+  }
+  .rdx-header-actions {
+    gap: 12px;
+  }
+  .rdx-sidebar-menu > summary {
+    display: list-item;
+    padding: 4px 0;
+  }
+  .rdx-sidebar-menu[open] > summary {
+    margin-bottom: 20px;
+  }
   .rdx-docs-layout {
     display: block;
   }

package/templates/runtime/app/page.tsx

@@ -1,5 +1,7 @@
-import { redirect } from 'next/navigation'
+import { HomePage } from '@lexibase/rdx-next/runtime'
 
-export default function Home() {
-  redirect('/docs')
+import { getProject } from '../rdx-project'
+
+export default async function Home() {
+  return <HomePage project={await getProject()} />
 }