LayoutContainer

Async server layout that composes theme context, navigation, a skip link, article content, footer, and host-provided structured data.

Layout@gaudi/design-system/layout/LayoutContainerSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import LayoutContainer from '@gaudi/design-system/layout/LayoutContainer';

Usage

import LayoutContainer from '@gaudi/design-system/layout/LayoutContainer';
export default function RootLayout({ children }) {  return <LayoutContainer metadata={metadata} navigation={navigation} jsonLd={loadJsonLd}>    {children}  </LayoutContainer>;}

API

5 props

Accessibility

Keep the skip target and the single main landmark. Supply accessible navigation and footer content; analytics and JSON-LD must come from the host.

Notes

Import the async component directly from @gaudi/design-system/layout/LayoutContainer in a server component. Resolve request cookies in the host and pass metadata.theme; Gaudi does not read request cookies.

NavigationThe site header block: brand, primary NavigationMenu with a two-block Blog panel (categories beside recent posts) or a Categories panel on the supplied blog route, search, theme switch, and a phone sheet below lg. LayoutContainer renders it from menuProps.ArticleA complete blog article with Gaudi journal navigation, PostHeader metadata, reading progress, TableOfContents section navigation, expandable images, a gallery, and captioned video. The main Blog article is joined by a centered Focused essay, a Technical tutorial with nested navigation and code, a wider Photo essay with a gallery, and a Series article with PostSeriesBox navigation across three parts. Each workflow reuses the same scroll boundary, header, media controls, and layout component. Contents-enabled examples use the shared TableOfContents block for links, active sections, and nested branch controls.FootersSite footer with host-supplied navigation, social links, copyright, and optional newsletter form.NewsletterNewsletter sections built from one email subscription form, with an explicit host endpoint and local pending, success, and error feedback.