Create a base layout for all pages to use

2024-11-27 14:25:47 +01:00 · 2023-09-02 20:50:17 +02:00 · 2023-09-02 20:50:17 +02:00 · 8b2a7f0e4d
commit 8b2a7f0e4d
parent b39d1c4ae3
4 changed files with 105 additions and 0 deletions
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@ -0,0 +1,24 @@
+<footer class="bd-light text-center">
+  <p>
+    Made with 🧠 by <span lang="pl"
+      ><a href="https://maciejpedzi.ch">Maciej Pędzich</a></span
+    >. Built with <a href="https://astro.build">Astro</a>, <a
+      href="https://jenil.github.io/chota">Chota</a
+    >, and <a href="https://usebasin.com">Basin</a>. Hosted on <a
+      href="https://netlify.com">Netlify</a
+    >.
+  </p>
+  <p>
+    <a href="https://github.com/maciejpedzich/catsof.tech">Source Code</a>
+  </p>
+</footer>
+
+<style>
+  footer {
+    margin: 2rem 0 3rem 0;
+  }
+
+  p {
+    margin: 1rem 0;
+  }
+</style>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@ -0,0 +1,20 @@
+<header>
+  <nav class="nav" aria-label="Main menu">
+    <div class="nav-left">
+      <a id="logo" class="brand" href="/">Cats Of Tech</a>
+    </div>
+    <div class="nav-right">
+      <a class="button outline" href="/submit">Submit a cat</a>
+    </div>
+  </nav>
+</header>
+
+<style>
+  header {
+    margin-bottom: 2rem;
+    padding: 1rem 0;
+    border-bottom-width: 3px;
+    border-bottom-style: solid;
+    border-bottom-color: var(--color-primary);
+  }
+</style>
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -0,0 +1,53 @@
+---
+import 'chota/dist/chota.min.css';
+import '../styles/global.css';
+
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+
+export interface Props {
+  title?: string;
+  description?: string;
+  image?: string;
+}
+
+const {
+  title: titleProp,
+  description = 'Cats of people working in the tech industry',
+  image
+} = Astro.props;
+
+const title = `${titleProp ? `${titleProp} - ` : ''}Cats Of Tech`;
+const imageUrl = image ? new URL(image, Astro.site) : null;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <title>{title}</title>
+    <meta name="generator" content={Astro.generator} />
+    <meta name="description" content={description} />
+    <meta property="twitter:card" content="summary" />
+    <meta property="og:title" content={title} />
+    <meta property="twitter:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="twitter:description" content={description} />
+    {
+      imageUrl && (
+        <>
+          <meta property="og:image" content={imageUrl} />
+          <meta property="twitter:description" content={imageUrl} />
+        </>
+      )
+    }
+  </head>
+  <body>
+    <Header />
+    <main>
+      <slot />
+    </main>
+    <Footer />
+  </body>
+</html>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@ -0,0 +1,8 @@
+:root {
+  --grid-gutter: 3rem;
+}
+
+body {
+  margin: 0 auto;
+  max-width: min(1200px, 85%);
+}