Add BaseLayout with meta tags, favicon, robots.txt, and OG card

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-24 17:13:07 +02:00
parent e0a7ec4651
commit e084177acf
5 changed files with 84 additions and 5 deletions
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,53 @@
+---
+import '../styles/global.css';
+
+interface Props {
+  title: string;
+  description: string;
+  canonicalPath?: string;
+  ogImage?: string;
+}
+
+const {
+  title,
+  description,
+  canonicalPath = Astro.url.pathname,
+  ogImage = '/og-image.svg',
+} = Astro.props;
+
+const canonical = new URL(canonicalPath, Astro.site ?? 'https://www.cameleer.io').toString();
+const ogUrl = new URL(ogImage, Astro.site ?? 'https://www.cameleer.io').toString();
+---
+<!doctype html>
+<html lang="en" class="bg-bg">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="dark" />
+    <meta name="theme-color" content="#060a13" />
+    <meta name="generator" content={Astro.generator} />
+
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <link rel="canonical" href={canonical} />
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Cameleer" />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:url" content={canonical} />
+    <meta property="og:image" content={ogUrl} />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={ogUrl} />
+
+    <meta name="robots" content="index,follow" />
+  </head>
+  <body class="min-h-screen bg-bg text-text font-sans antialiased">
+    <slot />
+  </body>
+</html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,8 @@
 ---
-import '../styles/global.css';
+import BaseLayout from '../layouts/BaseLayout.astro';
 ---
-<html lang="en">
-  <head><meta charset="utf-8" /><title>scaffold</title></head>
-  <body class="bg-bg text-text"><p class="text-accent font-mono">scaffold ok</p></body>
-</html>
+<BaseLayout title="Cameleer — scaffolding" description="Scaffolding placeholder.">
+  <main class="max-w-content mx-auto px-6 py-24">
+    <p class="text-accent font-mono">BaseLayout ok</p>
+  </main>
+</BaseLayout>