Add cover images for posts

astro.config.ts

@@ -5,6 +5,7 @@ import svelte from "@astrojs/svelte";
 
 // https://astro.build/config
 export default defineConfig({
+  compressHTML: true,
   experimental: {
     assets: true,
     inlineStylesheets: "auto",

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1684428141,
-        "narHash": "sha256-yaMyF02+Wr4H9NQc0HDxQTUon8yqU0GrSzeDlnc1N3M=",
+        "lastModified": 1684787197,
+        "narHash": "sha256-tvGDj3zgpW5NGoVKvoTQvkhfFPDgkbzfX+zFUW8NeHw=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "edcd3d30564ca6d4c1f2442c4149fa908228243e",
+        "rev": "e2614d8ebcdf9a9eae0efe074f4d745d28595886",
         "type": "github"
       },
       "original": {

package-lock.json

@@ -11,7 +11,7 @@
         "@astrojs/svelte": "^2.1.1",
         "@fontsource/jetbrains-mono": "^4.5.12",
         "@fontsource/roboto": "^4.5.8",
-        "astro": "^2.4.5",
+        "astro": "^2.5.3",
         "open-props": "^1.5.8",
         "rehype-autolink-headings": "^6.1.1",
         "sharp": "^0.32.1",
@@ -59,11 +59,11 @@
       }
     },
     "node_modules/@astrojs/markdown-remark": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-2.2.0.tgz",
-      "integrity": "sha512-4M1+GzQwDqF0KfX9Ahug43b0avorcK+iTapEaVuNnaCUVS6sZKRkztT3g6hmXiFmGHSL8qYaS9IVEmKtP6hYmw==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-2.2.1.tgz",
+      "integrity": "sha512-VF0HRv4GpC1XEMLnsKf6jth7JSmlt9qpqP0josQgA2eSpCIAC/Et+y94mgdBIZVBYH/yFnMoIxgKVe93xfO2GA==",
       "dependencies": {
-        "@astrojs/prism": "^2.1.0",
+        "@astrojs/prism": "^2.1.2",
         "github-slugger": "^1.4.0",
         "import-meta-resolve": "^2.1.0",
         "rehype-raw": "^6.1.1",
@@ -78,7 +78,7 @@
         "vfile": "^5.3.2"
       },
       "peerDependencies": {
-        "astro": "^2.4.0"
+        "astro": "^2.5.0"
       }
     },
     "node_modules/@astrojs/markdown-remark/node_modules/github-slugger": {
@@ -87,9 +87,9 @@
       "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw=="
     },
     "node_modules/@astrojs/prism": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-2.1.1.tgz",
-      "integrity": "sha512-Gnwnlb1lGJzCQEg89r4/WqgfCGPNFC7Kuh2D/k289Cbdi/2PD7Lrdstz86y1itDvcb2ijiRqjqWnJ5rsfu/QOA==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-2.1.2.tgz",
+      "integrity": "sha512-3antim1gb34689GHRQFJ88JEo93HuZKQBnmxDT5W/nxiNz1p/iRxnCTEhIbJhqMOTRbbo5h2ldm5qSxx+TMFQA==",
       "dependencies": {
         "prismjs": "^1.28.0"
       },
@@ -1205,13 +1205,13 @@
       }
     },
     "node_modules/astro": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-2.4.5.tgz",
-      "integrity": "sha512-osxLnuLXaOX0FjWOVQH8cmK4N/Gdj/ZdEkeyMJWsUss7xQU4Q64tAxB/dAv75f/XZiu+PprmndJkyQ4sYLOv1g==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-2.5.3.tgz",
+      "integrity": "sha512-ZRk599V3f2dAW2+WIEi1eAhHaxqxYsp2VAAhcUp103OEw8UZIeEa7KU1xZ+cKDqaBszSnTs38EdLjwHWWXCqMw==",
       "dependencies": {
         "@astrojs/compiler": "^1.4.0",
         "@astrojs/language-server": "^1.0.0",
-        "@astrojs/markdown-remark": "^2.2.0",
+        "@astrojs/markdown-remark": "^2.2.1",
         "@astrojs/telemetry": "^2.1.1",
         "@astrojs/webapi": "^2.1.1",
         "@babel/core": "^7.18.2",
@@ -1233,12 +1233,14 @@
         "devalue": "^4.2.0",
         "diff": "^5.1.0",
         "es-module-lexer": "^1.1.0",
+        "esbuild": "^0.17.18",
         "estree-walker": "3.0.0",
         "execa": "^6.1.0",
         "fast-glob": "^3.2.11",
         "github-slugger": "^2.0.0",
         "gray-matter": "^4.0.3",
         "html-escaper": "^3.0.3",
+        "js-yaml": "^4.1.0",
         "kleur": "^4.1.4",
         "magic-string": "^0.27.0",
         "mime": "^3.0.0",
@@ -1279,6 +1281,22 @@
         }
       }
     },
+    "node_modules/astro/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/astro/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",

package.json

@@ -13,7 +13,7 @@
     "@astrojs/svelte": "^2.1.1",
     "@fontsource/jetbrains-mono": "^4.5.12",
     "@fontsource/roboto": "^4.5.8",
-    "astro": "^2.4.5",
+    "astro": "^2.5.3",
     "open-props": "^1.5.8",
     "rehype-autolink-headings": "^6.1.1",
     "sharp": "^0.32.1",

src/components/ArticleSearch.svelte

@@ -47,7 +47,13 @@
     inset-block-start: var(--nav-height);
     background-color: var(--background-color);
     display: grid;
-      overflow-x: auto;
+    max-block-size: calc(100vh - var(--nav-height) * 2);
+    overflow-y: auto;
+  }
+
+  input[type="search"] {
+    position: sticky;
+    inset-block-start: 0;
   }
 
   ul {

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 />
+  <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>