astro first commit

2025-09-09 20:20:42 +00:00 · 2024-11-22 00:42:48 +01:00
parent 13eb767fa0
commit d4e9b2027e
156 changed files with 11589 additions and 0 deletions
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -0,0 +1,36 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import FormattedDate from '../components/FormattedDate.astro'
+import { Image } from 'astro:assets'
+import Root from './Root.astro'
+
+type Props = CollectionEntry<'blog'>['data']
+
+const { title, updatedDate, date, tags, coverImage } = Astro.props
+---
+
+<Root>
+  <article>
+    <div class="hero-image">
+      {coverImage && <Image width={1020} height={510} src={coverImage} alt="" />}
+    </div>
+    <div class="prose">
+      <div class="title">
+        <div class="date">
+          <FormattedDate date={date} />
+          {
+            updatedDate && (
+              <div class="last-updated-on">
+                Last updated on <FormattedDate date={updatedDate} />
+              </div>
+            )
+          }
+        </div>
+        <h1>{title}</h1>
+        {tags.map((tag) => <a href={`/tag/${tag}`}>{tag}</a>)}
+        <hr />
+      </div>
+      <slot />
+    </div>
+  </article>
+</Root>
--- a/src/layouts/PageWithTitle.astro
+++ b/src/layouts/PageWithTitle.astro
@@ -0,0 +1,52 @@
+---
+import SpacedLetters from '../components/SpacedLetters.astro'
+import Root from './Root.astro'
+
+export type Props = {
+  title: string
+  readable?: boolean
+  expanded?: boolean
+}
+
+const { title, readable = false, expanded = true } = Astro.props
+---
+
+<Root>
+  <div>
+    <h1>
+      <SpacedLetters letters={title} {readable} />
+    </h1>
+    <section class:list={{ expanded }}>
+      <slot />
+    </section>
+  </div>
+</Root>
+
+<style>
+  div {
+    padding: 4rem;
+  }
+
+  @media screen and (max-width: 30rem) {
+    div {
+      padding: 1rem;
+    }
+  }
+
+  section {
+    max-width: 30em;
+    margin-bottom: 4em;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  section.expanded {
+    margin-top: 5em;
+  }
+
+  h1 {
+    margin-top: calc(28vh - 3em);
+    margin-bottom: 3em;
+  }
+</style>
--- a/src/layouts/Root.astro
+++ b/src/layouts/Root.astro
@@ -0,0 +1,34 @@
+---
+import BaseHead from '../components/BaseHead.astro'
+// import Footer from '../components/Footer.astro'
+// import Header from '../components/Header.astro'
+import Nav from '../components/Nav.astro'
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <BaseHead />
+  </head>
+  <body>
+    <!-- <Header /> -->
+    <Nav />
+    <main>
+      <slot />
+    </main>
+    <!-- <Footer /> -->
+  </body>
+</html>
+
+<style>
+  main {
+    padding-left: 3.5rem;
+    margin: o auto;
+  }
+
+  @media screen and (max-width: 30rem) {
+    main {
+      padding-left: 2.5rem;
+    }
+  }
+</style>