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>