Add cover images for posts

src/components/ArticleSearch.svelte

@@ -23,39 +23,45 @@
     <div class="article-search">
       <label for="article-search">Search for an article:</label>
       <input type="search" id="article-search" placeholder="first po..." bind:value={searchTerm} />
-        {#if filteredArticles.length > 0}
-          <p>Results: <strong>{filteredArticles.length}</strong></p>
-            <ul>
-              {#each filteredArticles as article}
-                <li>
-                  <a href="/{article.slug}">{article.data.title}</a>
-                </li>
-              {/each}
-            </ul>
-        {:else if searchTerm.trim() !== ""}
-          <p>No results found</p>
-        {/if}
+      {#if filteredArticles.length > 0}
+        <p>Results: <strong>{filteredArticles.length}</strong></p>
+          <ul>
+            {#each filteredArticles as article}
+              <li>
+                <a href="/{article.slug}">{article.data.title}</a>
+              </li>
+            {/each}
+          </ul>
+      {:else if searchTerm.trim() !== ""}
+        <p>No results found</p>
+      {/if}
     </div>
 </Dropdown>
 
 <style>
-    .article-search {
-      padding: var(--size-3);
-      position: absolute;
-      inset-inline: 0;
-      border: var(--standard-border);
-      inset-block-start: var(--nav-height);
-      background-color: var(--background-color);
-      display: grid;
-      overflow-x: auto;
-    }
+  .article-search {
+    padding: var(--size-3);
+    position: absolute;
+    inset-inline: 0;
+    border: var(--standard-border);
+    inset-block-start: var(--nav-height);
+    background-color: var(--background-color);
+    display: grid;
+    max-block-size: calc(100vh - var(--nav-height) * 2);
+    overflow-y: auto;
+  }
 
-    ul {
-      margin-block-start: 0;
-    }
+  input[type="search"] {
+    position: sticky;
+    inset-block-start: 0;
+  }
 
-    input {
-      inline-size: 100%;
-      margin-block-start: var(--size-1);
-    }
+  ul {
+    margin-block-start: 0;
+  }
+
+  input {
+    inline-size: 100%;
+    margin-block-start: var(--size-1);
+  }
 </style>

src/components/Header.astro

@@ -4,6 +4,7 @@ const { title } = Astro.props;
 
 <header>
   <div class="container">
+    <slot name="before-title" />
     <h1>{title}</h1>
     <slot />
   </div>

src/components/TableOfContents.svelte

@@ -30,6 +30,8 @@
     padding: 0;
     list-style: none;
     inset-inline-end: 0;
+    max-block-size: calc(100vh - var(--nav-height) * 2);
+    overflow-y: auto;
   }
 
   a {

src/content/about/about.md

@@ -1,8 +1,3 @@
----
-title: "aurora"
-description: "Minimalistic blog theme built with Astro, focused on accessibility and usability."
----
-
 ## About
 
 aurora is a minimal blog theme built with Astro, Svelte and plain CSS. It is focused on accessibility and usability.

src/content/blog/build-a-good-website.md

@@ -1,4 +1,6 @@
 ---
+cover: "../../assets/blog/build-a-good-website/cover.jpg"
+coverAlt: "Cover image for the blog post"
 title: "Build a good website"
 publicationDate: 2023-05-07
 description: "Learn to create and publish a performant, accessible and SEO friendly website."

src/content/blog/markdown-style-guide.md

@@ -1,4 +1,6 @@
 ---
+cover: "../../assets/blog/markdown-style-guide/cover.jpg"
+coverAlt: "Cover image for the blog post"
 title: "Markdown style guide"
 publicationDate: 2023-05-20
 description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."

src/content/blog/nix-flake-examples.md

@@ -1,4 +1,6 @@
 ---
+cover: "../../assets/blog/nix-flake-examples/cover.jpg"
+coverAlt: "Cover image for the blog post"
 title: "Nix flake examples"
 publicationDate: 2023-05-12
 description: "Improve reproducibility, composability and usability of nix-based projects with flakes and the experimental cli commands."

src/content/config.ts

@@ -1,18 +1,15 @@
 import { z, defineCollection } from "astro:content";
 
 export const collections = {
-  home: defineCollection({
-    schema: z.object({
-      title: z.string(),
-      description: z.string(),
-    }),
-  }),
   blog: defineCollection({
-    schema: z.object({
+    schema: ({ image }) => z.object({
+      cover: image().refine((img) => img.width >= 1080, {
+        message: "Cover image must be at least 1080 pixels wide!",
+      }),
+      coverAlt: z.string(),
       title: z.string(),
       publicationDate: z.date(),
       description: z.string(),
-      workInProgress: z.boolean().default(false),
     }),
   }),
 };

src/layouts/ArticleLayout.astro

@@ -1,6 +1,7 @@
 ---
-const { id, title, description, publicationDate, headings } = Astro.props;
+const { id, cover, coverAlt, title, description, publicationDate, headings } = Astro.props;
 
+import { Image } from "astro:assets";
 import PageLayout from "./PageLayout.astro";
 import TableOfContents from "../components/TableOfContents.svelte";
 import PublicationDate from "../components/PublicationDate.astro";
@@ -8,6 +9,7 @@ import PublicationDate from "../components/PublicationDate.astro";
 
 <PageLayout {title} {description}>
   <TableOfContents slot="nav" client:only="svelte" {headings} />
+  <Image src={cover} alt={coverAlt} slot="header-before" />  
   <Fragment slot="header">
     <p>
       Published on

src/layouts/PageLayout.astro

@@ -19,6 +19,7 @@ import Footer from "../components/Footer.astro";
       <slot name="nav" />
     </Nav>
     <Header {title}>
+      <slot slot="before-title" name="header-before" />
       <slot name="header" />
     </Header>
     <main>

src/pages/index.astro

@@ -1,37 +1,62 @@
 ---
 import { getEntryBySlug, getCollection } from "astro:content";
+import { Image } from "astro:assets";
 import PageLayout from "../layouts/PageLayout.astro";
 import PublicationDate from "../components/PublicationDate.astro";
-import TableOfContents from "../components/TableOfContents.svelte";
 
-const home = await getEntryBySlug("home", "home");
-const { Content, headings } = await home.render();
+const about = await getEntryBySlug("about", "about");
+const { Content } = await about.render();
 
 const articles = (await getCollection("blog")).sort(
   (a, b) => b.data.publicationDate.valueOf() - a.data.publicationDate.valueOf()
 );
 ---
 
-<PageLayout {...home.data}>
-  <TableOfContents slot="nav" client:only="svelte" {headings} />
+<PageLayout title="aurora" description="Minimalistic blog theme built with Astro, focused on accessibility and usability.">
   <Content />
-  {
-    articles.map((article) => (
-      <article>
-        <PublicationDate publicationDate={article.data.publicationDate} />
-        <h2>
-          <a href={article.slug}>{article.data.title}</a>
-        </h2>
-        <p>{article.data.description}</p>
-      </article>
-    ))
-  }
+  <div class="article-grid">
+    {
+      articles.map((article) => (
+        <article>
+          <header>
+            <Image src={article.data.cover} alt={article.data.coverAlt} width="320" height="180" />  
+          </header>
+          <div class="article-content">
+            <PublicationDate publicationDate={article.data.publicationDate} />
+            <h2>
+              <a href={article.slug}>{article.data.title}</a>
+            </h2>
+            <p>{article.data.description}</p>
+          </div>
+        </article>
+      ))
+    }
+  </div>
 </PageLayout>
 
 <style>
-  article:not(:first-of-type) {
-    margin-block-start: 2rem;
-    padding-block-start: 2rem;
-    border-block-start: var(--standard-border);
+  .article-grid {
+    display: grid;
+    gap: var(--size-7);
+    grid-auto-rows: 1fr;
+  }
+
+  article {
+    border: var(--standard-border);
+  }
+
+  article header {
+    padding: 0;
+    border-block-end: var(--standard-border);
+    padding-inline: var(--size-3);
+    padding-block: var(--size-7);
+  }
+
+  article img {
+    margin-inline: auto;
+  }
+
+  .article-content {
+    padding: var(--size-3);
   }
 </style>