Layouts

Overview

Foundry provides four layouts. Each is designed for a specific content type:

Assigning Layouts

Layouts are assigned via route rules in nuxt.config.ts:

routeRules: {
  '/': { appLayout: 'landing' },
  '/about': { appLayout: 'default' },
  '/offers/**': { appLayout: 'article' },
  '/docs/**': { appLayout: 'docs' },
}

Landing Layout

Minimal chrome — renders page content directly without a hero section. Designed for pages built entirely from MDC section components.

Features:

• SEO meta from page frontmatter
• OG image generation with site logo
• No hero section (sections handle their own headers)

Use for: Homepage, success pages, any page using ::section-* components.

Default Layout

Standard content page with an optional hero section.

Features:

• Automatic hero with title/description (when hero: true in frontmatter)
• RSS feed link (when page has hasRss flag)
• Content rendered inside a centered container

Use for: About page, listing pages, general content.

Article Layout

Article format with rich header, back navigation, and prev/next links.

Features:

• Back button (label from collection config)
• Title, label badge, date display
• Description paragraph
• Optional hero image
• Centered prose content (max-w-3xl)
• Prev/next article navigation (surround)

Use for: Offer detail pages, blog posts, changelog entries.

Docs Layout

Three-panel documentation layout with navigation sidebar and table of contents.

Features:

• Left sidebar: Search button + navigation tree from docs collection
• Main area: Page title, description, header links (copy, share, GPT/Claude), content body, prev/next navigation, bibliography
• Right sidebar: Table of contents with section links, community links
• GitHub edit/report links
• KaTeX support for LaTeX math rendering

Use for: Documentation, technical guides, reference pages.

Docs Header Links

The docs layout includes utility actions in the page header:

• Copy Page — Fetches raw Markdown and copies to clipboard
• Dropdown: Copy link, view raw, open in GPT, open in Claude, MCP server URL

App Shell

All layouts share the same app shell defined in app.vue:

• AppBanner — Site-wide banner (when banner config exists)
• AppHeader — Navigation header with logo, links, search, color mode
• Layout content
• AppFooter — Footer with columns, social links, copyright

Each can be hidden per-route via page meta flags (header: false, footer: false, banner: false).