init

2026-02-12 23:54:49 +01:00
commit 724500ae0b
16 changed files with 575 additions and 0 deletions
--- a/components/Footer.ts
+++ b/components/Footer.ts
@@ -0,0 +1,12 @@
+import { html } from "@mastrojs/mastro";
+
+export const Footer = () =>
+  html`
+    <footer>
+      <div>
+        Check us out
+        <a href="https://github.com/mastrojs/mastro">on GitHub</a>.
+        © ${new Date().getFullYear()}
+      </div>
+    </footer>
+  `;
--- a/components/Header.ts
+++ b/components/Header.ts
@@ -0,0 +1,7 @@
+import { html } from "@mastrojs/mastro";
+
+export const Header = () => html`
+  <header>
+    <div><a href="/">jens.pub</a></div>
+  </header>
+`;
--- a/components/Layout.ts
+++ b/components/Layout.ts
@@ -0,0 +1,31 @@
+import { ghPagesBasePath, html, type Html } from "@mastrojs/mastro";
+import { Header } from "./Header.ts";
+import { Footer } from "./Footer.ts";
+
+export const basePath = ghPagesBasePath();
+
+interface Props {
+  title?: string;
+  children: Html;
+}
+
+export const Layout = (props: Props) =>
+  html`
+    <!doctype html>
+    <html lang="en">
+      <head>
+        <title>${props.title}</title>
+        <link rel="stylesheet" href=${basePath + "/styles.css"}>
+        <meta name="viewport" content="width=device-width">
+      </head>
+      <body>
+        ${Header()}
+
+        <main>
+          ${props.children}
+        </main>
+
+        ${Footer()}
+      </body>
+    </html>
+  `;