@lukoweb/apitogo 0.2.60 → 0.2.64

package/src/config/v2/wrapper.ts

@@ -24,7 +24,7 @@ import {
 } from "./manifest.js";
 import { type PortalProfile, portalProfile } from "./portal-profile.js";
 import { protectedRoutesFor } from "./protected-routes.js";
-import { isLogoUrl, type ResolvedConfigV2 } from "./resolve.js";
+import { isLogoUrl, type ResolvedConfigV2, toGlobPath } from "./resolve.js";
 import { findTsxPages, TSX_PAGE_ELEMENT_PREFIX } from "./tsx-pages.js";
 
 export const WRAPPER_FILE = "apitogo.config.tsx";
@@ -322,6 +322,29 @@ export const REFERENCE_SPEC_FILE = "openapi/gateway.json";
 /** Route of the API reference page. */
 export const API_REFERENCE_PATH = "api";
 
+const MARKDOWN_PAGE = /\.mdx?$/i;
+
+/** Placeholder of a React header page in the site config; the wrapper puts the component in its place. */
+export const HEADER_PAGE_ELEMENT_PREFIX = "apitogo:header-page:";
+
+/** The React header pages (`portal.header.links[].page` ending in `.tsx`), each with its wrapper placeholder. */
+export function headerTsxPages(
+  resolved: ResolvedConfigV2,
+  plan: PortalPlan,
+): { id: string; route: string; label: string; file: string }[] {
+  if (!plan.docs) return [];
+  return (resolved.portal?.headerLinks ?? [])
+    .flatMap((link) =>
+      link.page && /\.tsx$/i.test(link.page)
+        ? [{ route: link.to, label: link.label, file: link.page }]
+        : [],
+    )
+    .map((page, index) => ({
+      ...page,
+      id: `${HEADER_PAGE_ELEMENT_PREFIX}${index}`,
+    }));
+}
+
 /**
  * The site settings (title, modules, docs globs, theme, sign-in) in the shape the existing build reads from
  * `apitogo.config.json`. It is generated, never edited, and lives in `generated/`.
@@ -342,9 +365,31 @@ export function buildSiteConfig(
 ): Record<string, unknown> {
   const portal = resolved.portal;
   const redirects = extras.redirects ?? [];
+  // Header pages are pages the sidebar leaves out. A Markdown one is served by the docs plugin from its own file; a React
+  // one is a hidden custom page, whose placeholder the wrapper replaces with the component. Both need hosted docs.
+  const headerLinks = portal?.headerLinks ?? [];
+  const headerPages = plan.docs
+    ? headerLinks.flatMap((link) =>
+        link.page && MARKDOWN_PAGE.test(link.page) ? [link.page] : [],
+      )
+    : [];
+  const shownHeaderLinks = headerLinks
+    .filter((link) => !link.page || plan.docs)
+    .map((link) => ({
+      label: link.label,
+      to: link.to,
+      ...(link.to.startsWith("https://") ? { target: "_blank" } : {}),
+    }));
   // One header tab for the docs sidebar, and the API reference as a link next to it.
   const navigation = [
     ...(extras.docsNavigation ?? []),
+    ...headerTsxPages(resolved, plan).map((page) => ({
+      type: "custom-page",
+      path: page.route,
+      label: page.label,
+      element: page.id,
+      display: "hide",
+    })),
     ...(plan.apiReference
       ? [
           {
@@ -392,9 +437,10 @@ export function buildSiteConfig(
     ...(plan.docs
       ? {
           docs: {
-            files: portal?.docs.content.map((glob) =>
-              contentGlob(resolved.configDir, glob),
-            ),
+            files: [
+              ...(portal?.docs.content ?? []),
+              ...headerPages.map(toGlobPath),
+            ].map((glob) => contentGlob(resolved.configDir, glob)),
           },
         }
       : {}),
@@ -412,15 +458,18 @@ export function buildSiteConfig(
       : {}),
     ...(navigation.length > 0 ? { navigation } : {}),
     // The sidebar link above is only seen inside the docs; the header is what every page shows. A header navigation
-    // replaces the docs tab, so the docs get a header link of their own.
-    ...(plan.apiReference
+    // replaces the docs tab, so the docs get a header link of their own. The tenant's own links (portal.header) follow.
+    ...(plan.apiReference || shownHeaderLinks.length > 0
       ? {
           header: {
             navigation: [
               ...(plan.docs && extras.docsPath
                 ? [{ label: "Documentation", to: extras.docsPath }]
                 : []),
-              { label: "API Reference", to: `/${API_REFERENCE_PATH}` },
+              ...(plan.apiReference
+                ? [{ label: "API Reference", to: `/${API_REFERENCE_PATH}` }]
+                : []),
+              ...shownHeaderLinks,
             ],
           },
         }
@@ -764,13 +813,19 @@ export async function preparePortal(
         (page) => !markdownRoutes.includes(page.route),
       )
     : [];
+  const importPathOf = (file: string) =>
+    `./${CONTENT_LINK}/${path
+      .relative(resolved.configDir, file)
+      .split(path.sep)
+      .join("/")}`;
   const wrapperPages: WrapperPage[] = tsxPages.map((page, index) => ({
     id: `${TSX_PAGE_ELEMENT_PREFIX}${index}`,
-    importPath: `./${CONTENT_LINK}/${path
-      .relative(resolved.configDir, page.file)
-      .split(path.sep)
-      .join("/")}`,
+    importPath: importPathOf(page.file),
   }));
+  // React header pages are imported the same way; their placeholders are in the navigation, outside the sidebar.
+  const headerWrapperPages: WrapperPage[] = headerTsxPages(resolved, plan).map(
+    (page) => ({ id: page.id, importPath: importPathOf(page.file) }),
+  );
   const hostedDocRoutes = [
     ...new Set([...markdownRoutes, ...tsxPages.map((page) => page.route)]),
   ].sort();
@@ -872,7 +927,15 @@ export async function preparePortal(
       protectedRoutes: protectedRoutesFor({
         requireAuth: resolved.portal?.requireAuth,
         hasAuth: !!plan.auth,
-        docRoutes: hostedDocRoutes,
+        // A header page is a docs page too, so a portal behind login keeps it behind login.
+        docRoutes: plan.docs
+          ? [
+              ...hostedDocRoutes,
+              ...(resolved.portal?.headerLinks ?? []).flatMap((link) =>
+                link.page ? [link.to] : [],
+              ),
+            ]
+          : hostedDocRoutes,
         apiReferencePath: plan.apiReference
           ? `/${API_REFERENCE_PATH}`
           : undefined,
@@ -881,7 +944,7 @@ export async function preparePortal(
   );
   const wrapper = renderWrapper(
     plan,
-    wrapperPages,
+    [...wrapperPages, ...headerWrapperPages],
     resolved.portal?.footer
       ? wrapperImport(contentFile(resolved.configDir, resolved.portal.footer))
       : undefined,