/** * DocHome layout. * * Documentation landing page with hero, install snippet, features grid, * packages grid, code example, and optional markdown content. * * All sections are optional — omit the frontmatter key and the section * is not rendered. Supports both single-package and monorepo projects. */ import { h } from "@pagesmith/docs/jsx-runtime"; import { DocSidebarModal } from "@pagesmith/docs/components"; import { DocFooter } from "../components/DocFooter"; import { DocHeader } from "../components/DocHeader"; import { DocSidebar } from "../components/DocSidebar"; import { Html } from "../components/Html"; import { resolveChrome } from "../utils/chrome"; type Props = { content: string; frontmatter: Record; headings: Array<{ depth: number; text: string; slug: string }>; slug: string; site: any; [key: string]: any; }; export default function DocHome(props: Props) { const { content, frontmatter, slug, site } = props; const chrome = resolveChrome(frontmatter); const hero = frontmatter.hero ?? (frontmatter.title || frontmatter.tagline || frontmatter.actions ? { name: frontmatter.title || site.name, text: frontmatter.tagline || frontmatter.title, tagline: frontmatter.description, badge: frontmatter.badge, actions: frontmatter.actions, } : undefined); const features = frontmatter.features; const installHtml: string | undefined = frontmatter.installHtml; const packages = frontmatter.packages; const codeExample = frontmatter.codeExample; const navItems = site.navItems as Array<{ path: string; label: string }> | undefined; const sidebarSections = navItems && navItems.length > 0 ? [ { title: "Navigation", items: navItems.map((item: { path: string; label: string }) => ({ title: item.label, slug: item.path, path: item.path, })), }, ] : undefined; return ( {chrome.header ? ( ) : null}
{chrome.sidebar ? : null}
{/* Hero section */} {hero ? (
{hero.badge ? (
{hero.badge}
) : null} {hero.name ?

{hero.name}

: null} {hero.text ?

{hero.text}

: null} {hero.tagline ?

{hero.tagline}

: null} {hero.actions && hero.actions.length > 0 ? (
{hero.actions.map((action: any) => ( {action.icon ? ( ) : null} {action.text} ))}
) : null}
) : null} {/* Install snippet — pre-rendered through the markdown code pipeline (see `renderInstallHtml` in @pagesmith/docs/src/install.ts) so it shares Shiki highlighting, frame chrome, and copy/line-number behavior with `\`\`\`` blocks elsewhere on the site. */} {installHtml ? (
) : null} {/* Features grid */} {features && features.length > 0 ? (

Features

{features.map((feature: any) => (
{feature.icon ? ( ) : null}

{feature.title}

{feature.details}

))}
) : null} {/* Packages grid (monorepo). The NPM badge is pre-rendered as inline SVG with explicit width/height by `enrichedPackages` in `loadDocsPages` (see `renderNpmBadge`), so the card reserves exact space and there is no CLS once the page paints. */} {packages && packages.length > 0 ? (

Packages

{packages.map((pkg: any) => { const Tag = pkg.href ? "a" : "div"; const hasMeta = Boolean(pkg.npmBadgeSvg || pkg.version || pkg.tag); // When the whole card is an ``, keep the badge as a // non-interactive `` to avoid nested anchors. When the // card is a `
`, the badge becomes its own link to the // npmjs.com package page. const cardIsLink = Boolean(pkg.href); const BadgeTag = cardIsLink ? "span" : "a"; const badgeProps: Record = { class: "doc-package-npm", style: `--ps-npm-badge-w:${pkg.npmBadgeWidth}px;--ps-npm-badge-h:${pkg.npmBadgeHeight}px`, innerHTML: pkg.npmBadgeSvg, }; if (!cardIsLink) { badgeProps.href = pkg.npmHref; badgeProps.target = "_blank"; badgeProps.rel = "noopener noreferrer"; badgeProps["aria-label"] = `View ${pkg.name} on npm`; } return (
{pkg.name}

{pkg.description}

{hasMeta ? (
{pkg.npmBadgeSvg ? : null} {pkg.version && !pkg.npmBadgeSvg ? ( {pkg.version} ) : null} {pkg.tag ? {pkg.tag} : null}
) : null} ); })}
) : null} {/* Code example — wraps a raw 
 in the same terminal chrome
              as `.ps-code-block[data-ps-code-frame="terminal"]`. */}
          {codeExample ? (
            

              
{codeExample.label || "Quick Start"}

              

                

                  

                    

                

                

                  
                

              

            

          ) : null}

          {/* Content (if any markdown content is provided) */}
          {content ? (
            

              

            

          ) : null}
{chrome.footer ? (
) : null}
{chrome.header && navItems && navItems.length > 0 ? ( ) : null} ); }