Homepage
  1. Pages
  2. Layouts

Layouts

Most sites share some markup between pages. One way to avoid repeating that markup us to create layouts.

// components/layouts/Base.stencil
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="/style.css" />
		<title>My website</title>
	</head>
	<body>
		<slot />
	</body>
</html>

Layouts are regular components. There is nothing that differentiates a layout from any other component.

Base layout

A common pattern is to create a Base layout that contains only the bare minimum that is reused across pages. That usually means stuff in the tag:

// components/layouts/Base.stencil
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="/style.css" />
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
	</head>
	<body>
		<slot />
	</body>
</html>

All pages that use the Base layout now have access to the CSS and JS.

// pages/index.stencil
<Base>
	<h1 class="title">
		Philosopher's Inkwell
	</h1>
	<p class="tagline">
		A collection of important works from the 1800's
	</p>
</Base>

Extending the base layout

Using the Base layout for one-off pages is useful. But some pages might share more markup than what’s included in Base.

A common pattern is to create layouts that extend other layouts. You might create a layout that includes the page navigation as well:

// components/layouts/Page.stencil
<Base>
	<nav>
		<NavigationLink href="/">
			<LogoIcon />
		</NavigationLink>
		<NavigationLink href="/articles">
			Articles
		</NavigationLink>
		<NavigationLink href="/about">
			About us
		</NavigationLink>
	</nav>

	<main>
		<slot />
	</main>
</Base>

It can be a good idea to create several layouts with different granularity. You might create a layout specifically for articles:

// components/layouts/Article.stencil
<Page>
	<h1>Layouts</h1>

	<div>
		Posted on {‎{ published_date }} by {‎{ author.name }}
	</div>

	<article>
		<slot />
	</article>
</Page>
Collections