Layout

A layout is the top component that wraps a page to render a full HTML page.

It's also known as the root component because it returns the entire document including the root <html> tag.

Built-in List

  • Holy - Full layout
  • HolyMedium - Holy layout without the sidebar
  • Hamburger - header, content and footer
  • Landing - Hamburger layout where the content is not constrained
  • None: No layout applied, your page should return the html root element

How to set a layout

You can set the layout by giving its name in the layout frontmatter property

Example:

markdown
---
layout: holy
---
javascript
export const frontmatter = {
    layout: 'holy'
}

How to create a layout

See How to create a layout

Not a Client Component Restriction

Layout and partial component cannot be client component otherwise you get the fatal rsc error

Partials

Default layouts are composed of the following partials:

  • Html - the html tag
  • Head - the head tag
  • Body - the body tag
  • Header - the page header
  • Hero - the page content header
  • Aside - the sidebar
  • Toc - the toc
  • Footer - the page footer

If you want to override the default ones, you should create a partial with the same name and store it at: @/components/partials.

They:

  • are and should be server component
  • accepts the context props (page and request)