Skip to content

Implement nested Layouts #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
clowa merged 4 commits into from
Dec 23, 2025
Merged

Implement nested Layouts #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
af74892
refactor: add new @styles alias for consistent imports
clowa Dec 23, 2025
fc9a2a8
refactor: renamed Layout.astro to BaseLayout.astro to point out it's …
clowa Dec 23, 2025
2a2ac2c
refactor: integrate BaseLayout into BlogPost layout to not repead glo…
clowa Dec 23, 2025
6dfb098
refactor: enhance BaseLayout to accept description and keywords props…
clowa Dec 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions swa/src/layouts/Layout.astro → swa/src/layouts/BaseLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,20 @@ import "../styles/base.css";

interface Props {
title: string;
description?: string;
keywords?: string;
}

const { title } = Astro.props;
const { title, description, keywords } = Astro.props;
---

<!doctype html>
<html lang="en">
<head>
<title>{title}</title>
<meta charset="UTF-8" />
<meta name="description" content="Personal website, portfolio, and blog of Cedric Ahlers (clowa): software projects, tutorials, and social links." />
<meta name="keywords" content="Cedric Ahlers, clowa, portfolio, blog, tutorials, cloud, azure, personal website" />
<meta name="description" content={description ?? description} />
<meta name="keywords" content={keywords ?? keywords} />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
Expand Down
27 changes: 11 additions & 16 deletions swa/src/layouts/BlogPost.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,18 @@
---
import "../styles/base.css";
import BaseLayout from '@layouts/BaseLayout.astro';
import "@styles/base.css";
import "remark-github-blockquote-alert/alert.css";
// 1. The frontmatter prop gives access to frontmatter and other data
const { frontmatter } = Astro.props;
---
<html lang="en">
<head>
<title>{frontmatter.title}</title>
<meta charset="utf-8" />
<meta name="description" content={frontmatter.description} />
<meta name="keywords" content={frontmatter.tags.join(", ")} />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<meta name="generator" content={Astro.generator} />
</head>
<body>
<main class="container">
<BaseLayout
title={frontmatter.title}
description={frontmatter.description}
keywords={frontmatter.tags.join(", ")}
>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">

<main class="container">
<header class="blog-header">
<h1>{frontmatter.title}</h1>
<div class="meta">
Expand All @@ -37,8 +33,7 @@ const { frontmatter } = Astro.props;
© {new Date().getFullYear()} {frontmatter.author} — All rights reserved.
</footer>
</main>
</body>
</html>
</BaseLayout>

<style>
main.container {
Expand Down
6 changes: 3 additions & 3 deletions swa/src/pages/404.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
import Layout from '@layouts/Layout.astro';
import BaseLayout from '@layouts/BaseLayout.astro';
---

<Layout title="Page Not Found.">
<BaseLayout title="Page Not Found.">
<div>
<div class="icon">
<i class="fa-solid fa-circle-exclamation fa-10x"></i>
Expand All @@ -14,7 +14,7 @@ import Layout from '@layouts/Layout.astro';
<p>Hm, looks like this page doesn't exist ...</p>
</div>
</div>
</Layout>
</BaseLayout>

<style>
div {
Expand Down
10 changes: 7 additions & 3 deletions swa/src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import Layout from '@layouts/Layout.astro';
import BaseLayout from '@layouts/BaseLayout.astro';
import Footer from '@components/Footer.astro';
import CardGrid from '@components/CardGrid.astro';
import IconList from '@components/IconList.astro';
Expand All @@ -26,7 +26,11 @@ const publishedPosts = allPosts
.sort((a: any, b: any) => new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf());
---

<Layout title="Cedric Ahlers">
<BaseLayout
title="Cedric Ahlers"
description="Personal website, portfolio, and blog of Cedric Ahlers (clowa): software projects, tutorials, and social links."
keywords="Cedric Ahlers, clowa, portfolio, blog, tutorials, cloud, azure, personal website"
>
<main>
<div class="profile-picture">
<Image
Expand Down Expand Up @@ -89,7 +93,7 @@ const publishedPosts = allPosts
}))}
/>
</main>
</Layout>
</BaseLayout>
<Footer text="Assembled with no clue, Astro magic and Pico.css."/>

<style>
Expand Down
3 changes: 2 additions & 1 deletion swa/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"paths": {
"@components/*": ["./src/components/*"],
"@layouts/*": ["./src/layouts/*"],
"@scripts/*": ["./src/scripts/*"]
"@scripts/*": ["./src/scripts/*"],
"@styles/*": ["./src/styles/*"]
}
}
}