Overview

Page and PageFrame are the top-level layout components that orchestrate all other components into a complete documentation page.

Page Component

The Page component is the outermost layout orchestrator. It:

1. Imports all CSS design tokens (layers, props, reset, asides, utils, markdown, anchor links, print styles)
2. Imports all component CSS files
3. Reads RouteData from context
4. Composes the full page layout

Layout Structure

Page
├── SkipLink
├── Banner (if banner frontmatter exists)
├── PageFrame
│   ├── Header
│   │   ├── SiteTitle
│   │   ├── Search
│   │   ├── SocialIcons
│   │   └── ThemeSelect
│   ├── Sidebar
│   │   ├── SidebarSublist (recursive)
│   │   └── MobileMenuFooter
│   │       ├── ThemeSelect
│   │       └── SocialIcons
│   └── TwoColumnContent
│       ├── Main Column
│       │   ├── Hero (if hero frontmatter exists)
│       │   ├── DraftContentNotice (if draft: true)
│       │   ├── FallbackContentNotice (if isFallback)
│       │   ├── PageTitle
│       │   ├── ContentPanel
│       │   │   └── [Your MDX Content]
│       │   └── Footer
│       │       ├── EditLink
│       │       ├── LastUpdated
│       │       └── Pagination
│       └── Right Sidebar
│           ├── TableOfContents (desktop)
│           └── MobileTableOfContents (mobile)
└── ThemeProvider

Data Attributes

The page wrapper element sets several data attributes for CSS targeting:

Attribute	Value	Purpose
data-has-sidebar	"true"	Layout adjustments when sidebar present
data-has-toc	"true"	Layout adjustments when TOC present
data-has-hero	"true"	Hero-specific styling
data-pagefind-body	—	Pagefind search indexing scope

PageFrame Component

The PageFrame manages the three-column layout:

┌──────────────────────────────────────────────┐
│                   Header                      │
├──────────┬───────────────────────────────────┤
│          │                                    │
│ Sidebar  │         Main Frame                 │
│          │    (TwoColumnContent goes here)     │
│          │                                    │
└──────────┴───────────────────────────────────┘

Mobile Sidebar

On mobile, PageFrame manages sidebar visibility:

• Sidebar is hidden by default
• MobileMenuToggle sets aria-expanded on the sidebar pane
• The sidebar pane slides in/out based on expansion state
• A label "Navigation" is added via aria-label

Design Tokens

The Page component automatically loads these CSS files:

File	Purpose
layers.css	CSS @layer declarations for specificity management
props.css	CSS custom properties (colors, fonts, spacing, breakpoints)
reset.css	Browser reset styles
asides.css	Blockquote/aside styling
util.css	Utility classes (.sl-flex, .sr-only, etc.)
markdown.css	Markdown element styling
anchor-links.css	Heading anchor link styles
print.css	Print-specific styles