page-context.ts

Source

15 documented symbols. Read the signatures first, then expand each item for parameters, return types, and examples.

15 symbols 7 functions 6 interfaces 1 types 1 modules 4 parameters 25 members 7 returns 6 examples

Reference

interfaceBasePagePropsBase page props available for all pages.

Base page props available for all pages.

Signature

export interface BasePageProps

View source

Members

Properties
NameTypeDescription
descriptionoptional string
Page description from frontmatter
frontmatter Record<string, unknown>
Raw frontmatter object
html string
Rendered HTML content
lastUpdatedoptional number
Last git commit timestamp in milliseconds
layoutoptional string
Layout name from frontmatter
path string
Source file path (relative to docs root)
title string
Page title from frontmatter or first heading
toc TocEntry[]
Table of contents entries
url string
Output URL path
interfaceFrontmatterSchemaSchema for frontmatter type generation.

Schema for frontmatter type generation.

Signature

export interface FrontmatterSchema

View source

Members

Properties
NameTypeDescription
descriptionoptional string
JSDoc description
name string
Field name
optional boolean
Whether the field is optional
type string
TypeScript type
fngenerateFrontmatterTypes(samples: Record<string, unknown>[], interfaceName = "PageFrontmatter"): stringGenerates TypeScript interface from frontmatter samples.

Generates TypeScript interface from frontmatter samples.

Signature

export function generateFrontmatterTypes(samples: Record<string, unknown>[], interfaceName = "PageFrontmatter"): string

View source

Parameters

  • samples Record<string, unknown>[]
  • interfaceName unknown

    optional · default: "PageFrontmatter"

Returns

string
fninferType(value: unknown): stringInfers TypeScript types from frontmatter values.

Infers TypeScript types from frontmatter values.

Signature

export function inferType(value: unknown): string

View source

Parameters

  • value unknown

Returns

string
interfaceNavGroupNavigation group.

Navigation group.

Signature

export interface NavGroup

View source

Members

Properties
NameTypeDescription
interfaceNavItemNavigation item.

Navigation item.

Signature

export interface NavItem

View source

Members

Properties
NameTypeDescription
modulepage-contextPage Context for Static HTML Generation Provides a way to access page props (frontmatter, content, etc.) from theme com…

Page Context for Static HTML Generation

Provides a way to access page props (frontmatter, content, etc.) from theme components during static rendering.

View source

Examples

Example 1
// theme/Layout.tsx
import { usePageProps, PageProps } from '@ox-content/vite-plugin';

typePageProps<T extends Record<string, unknown> = Record<string, unknown>> = BasePageProps & { frontmatter: T & Record<string, unknown> }Extended page props with custom frontmatter.

Extended page props with custom frontmatter.

Signature

export type PageProps<T extends Record<string, unknown> = Record<string, unknown>> = BasePageProps & { frontmatter: T & Record<string, unknown> }

View source

Members

Properties
NameTypeDescription
frontmatter T & Record<string, unknown>
Custom frontmatter fields
interfaceRenderContext<T extends Record<string, unknown> = Record<string, unknown>>Complete render context.

Complete render context.

Signature

export interface RenderContext<T extends Record<string, unknown> = Record<string, unknown>>

View source

Members

Properties
NameTypeDescription
page PageProps<T>
Current page props
site SiteConfig
Site configuration
interfaceSiteConfigSite-wide configuration available in context.

Site-wide configuration available in context.

Signature

export interface SiteConfig

View source

Members

Properties
NameTypeDescription
base string
Base URL path
name string
Site name
nav NavGroup[]
Navigation groups
pages BasePageProps[]
All pages in the site
fnuseIsActive(path: string): booleanChecks if the given path is the current page.

Checks if the given path is the current page.

Signature

export function useIsActive(path: string): boolean

View source

Parameters

  • path string

Returns

boolean

Examples

Example 1
function NavLink({ href, children }) {
  const isActive = useIsActive(href);
  return <a href={href} class={isActive ? 'active' : ''}>{children}</a>;
}
fnuseNav(): NavGroup[]Gets the navigation groups.

Gets the navigation groups.

Signature

export function useNav(): NavGroup[]

View source

Returns

NavGroup[]

Examples

Example 1
function Sidebar() {
  const nav = useNav();
  return (
    <nav>
      {each(nav, (group) => (
        <div>
          <h3>{group.title}</h3>
          <ul>
            {each(group.items, (item) => (
              <li><a href={item.href}>{item.title}</a></li>
            ))}
          </ul>
        </div>
      ))}
    </nav>
  );
}
fnusePageProps< T extends Record<string, unknown> = Record<string, unknown>, >(): PageProps<T>Gets the current page props.

Gets the current page props.

Signature

export function usePageProps<
  T extends Record<string, unknown> = Record<string, unknown>,
>(): PageProps<T>

View source

Returns

PageProps<T>

The current page props

Examples

Example 1
function PageTitle() {
  const page = usePageProps();
  return <h1>{page.title}</h1>;
}
fnuseRenderContext< T extends Record<string, unknown> = Record<string, unknown>, >(): RenderContext<T>Gets the full render context.

Gets the full render context.

Signature

export function useRenderContext<
  T extends Record<string, unknown> = Record<string, unknown>,
>(): RenderContext<T>

View source

Returns

RenderContext<T>

The complete render context

Examples

Example 1
function Layout({ children }) {
  const ctx = useRenderContext();
  return (
    <html>
      <head><title>{ctx.page.title} - {ctx.site.name}</title></head>
      <body>{children}</body>
    </html>
  );
}
fnuseSiteConfig(): SiteConfigGets the site configuration.

Gets the site configuration.

Signature

export function useSiteConfig(): SiteConfig

View source

Returns

SiteConfig

The site configuration

Examples

Example 1
function SiteHeader() {
  const site = useSiteConfig();
  return <header>{site.name}</header>;
}