Support cover images and lists

Author: willburden

astro.config.mjs

@@ -2,4 +2,10 @@
 import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+    image: {
+        responsiveStyles: true,
+        layout: 'constrained',
+        breakpoints: [400, 640, 750, 828, 1080, 1280, 1668, 2048, 2560],
+    },
+});

src/components/sections/BlogPost.astro src/components/BlogPost.astrosrc/components/sections/BlogPost.astro renamed to src/components/BlogPost.astro

@@ -1,7 +1,8 @@
 ---
 import { render, type CollectionEntry } from 'astro:content'
-import formatDate from '../../util/formatDate';
+import formatDate from '../util/formatDate';
 import TagCluster from './TagCluster.astro';
+import { Image } from 'astro:assets';
 
 interface Props {
     post: CollectionEntry<'blog'>;
@@ -17,6 +18,9 @@ const { Content } = await render(post);
     <header>
         <h1>{post.data.title}</h1>
         <p>{pubDate}</p>
+        {post.data.cover !== undefined &&
+            <Image src={post.data.cover} alt={post.data.coverAlt ?? null} />
+        }
         <TagCluster />
     </header>
     <div class="content">
@@ -25,15 +29,7 @@ const { Content } = await render(post);
 </article>
 
 <style lang="scss">
-    @use '../../styles/_theme' as *;
-
-    article {
-        padding: $space-lg 0;
-    }
-
-    header, .content {
-        padding-inline: $space-md;
-    }
+    @use '../styles/_theme' as *;
 
     header {
         margin-bottom: $space-md;
@@ -49,6 +45,11 @@ const { Content } = await render(post);
         p {
             @include font-technical;
         }
+
+        img {
+            padding: 0;
+            margin: 0;
+        }
     }
 
     .content {

src/components/sections/Header.astro src/components/Header.astrosrc/components/sections/Header.astro renamed to src/components/Header.astro

@@ -1,5 +1,5 @@
 ---
-import BearIcon from "../icons/BearIcon.astro";
+import BearIcon from "./icons/BearIcon.astro";
 ---
 
 <header>
@@ -13,7 +13,7 @@ import BearIcon from "../icons/BearIcon.astro";
 </header>
 
 <style lang="scss">
-	@use '../../styles/_theme' as *;
+	@use '../styles/_theme' as *;
 
 	header {
 		padding: $space-lg $space-md;

src/components/sections/TagCluster.astro src/components/TagCluster.astrosrc/components/sections/TagCluster.astro renamed to src/components/TagCluster.astro

@@ -5,17 +5,19 @@
 </ul>
 
 <style lang="scss">
-    @use '../../styles/_theme' as *;
+    @use '../styles/_theme' as *;
 
     ul {
-        padding-inline-start: 0;
+        padding-inline-start: $space-md;
 
         li {
             display: inline-block;
+            margin: 0;
             padding: $space-sm;
+
             border: $border-thickness solid $color-subtle;
             border-radius: $border-radius;
-            box-shadow: 0 $shadow-offset $color-subtle;
+            box-shadow: 0 $border-thickness $color-subtle;
         }
     }
 </style>

src/content.config.ts

@@ -1,13 +1,15 @@
-import { defineCollection, z } from "astro:content";
+import { defineCollection, z, type SchemaContext } from "astro:content";
 
 import { glob } from 'astro/loaders';
 
 const blog = defineCollection({
     loader: glob({ pattern: '**/*.md', base: './src/content/posts' }),
-    schema: z.object({
+    schema: ({ image }) => z.strictObject({
         title: z.string(),
         pubDate: z.coerce.date(),
-    })
+        cover: image().optional(),
+        coverAlt: z.string().optional(),
+    }),
 });
 
 export const collections = { blog };

src/content/posts/building-a-blog.md

@@ -11,6 +11,12 @@ Suspendisse facilisis, mi ac scelerisque interdum, ligula ex imperdiet felis, a
 
 Nullam consequat, dui in tristique accumsan, lorem nulla eleifend elit, vel volutpat mauris orci a elit. Suspendisse auctor volutpat ex, eu bibendum nisi feugiat vitae. Vestibulum dapibus varius neque, vitae placerat ex tincidunt quis. Nullam vehicula diam non efficitur pretium. Morbi est enim, consequat nec magna interdum, malesuada elementum erat. Vestibulum a elit mauris. Proin a orci et risus fermentum ultrices. Nullam congue convallis lacus et tincidunt.
 
+Eget at nec:
+
+- Ut sem mi, suscipit quis nisi a.
+- Orci egestas varius neque.
+- Non feugiat turpis eleifend tristique.
+
 Etiam quis massa non massa sagittis accumsan eget at tellus. Quisque non fringilla magna, in tincidunt ligula. Nullam euismod, odio non luctus suscipit, neque quam mollis diam, in consequat augue mauris vitae nunc. Vestibulum consectetur quam ante. Donec vulputate dolor in odio ultricies, ut venenatis lorem luctus. Sed quis tellus risus. Nullam quis mi vitae nibh malesuada blandit. Duis sit amet tortor interdum, sodales est ut, pellentesque mi.
 
 Mauris non enim consectetur, ultrices lacus gravida, imperdiet lacus. Duis eget nulla nec turpis euismod laoreet. Nam tristique sem in elit lacinia tristique. Ut sem mi, suscipit quis nisi a, finibus ultrices eros. Donec sed ultricies est. Nullam volutpat metus sed dui lobortis tincidunt. Pellentesque rutrum maximus libero non luctus. Pellentesque id felis quis lacus varius tempus. Phasellus a est et justo mattis molestie a ac augue. Sed at purus erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec dapibus eget nulla eu venenatis. 

src/layouts/BaseLayout.astro

@@ -1,6 +1,6 @@
 ---
 import LinkFonts from '../components/meta/LinkFonts.astro';
-import Header from '../components/sections/Header.astro';
+import Header from '../components/Header.astro';
 import '../styles/_normalise.scss';
 import '../styles/global.scss';
 ---
@@ -24,3 +24,11 @@ import '../styles/global.scss';
 		</main>
 	</body>
 </html>
+
+<style lang="scss">
+	@use '../styles/_theme' as *;
+
+	main {
+		padding: $space-lg 0;
+	}
+</style>

src/pages/posts/[...id].astro src/pages/posts/[...slug].astrosrc/pages/posts/[...id].astro renamed to src/pages/posts/[...slug].astro

@@ -2,7 +2,7 @@
 import type { GetStaticPaths } from "astro";
 import { getCollection, type CollectionEntry } from "astro:content";
 import BaseLayout from "../../layouts/BaseLayout.astro";
-import BlogPost from "../../components/sections/BlogPost.astro";
+import BlogPost from "../../components/BlogPost.astro";
 
 interface Props {
     post: CollectionEntry<"blog">;
@@ -11,7 +11,7 @@ interface Props {
 export const getStaticPaths: GetStaticPaths = async () => {
     const posts = await getCollection("blog");
     return posts.map((post) => ({
-        params: { id: post.id },
+        params: { slug: post.id },
         props: { post },
     }));
 };

src/styles/_theme.scss

@@ -51,7 +51,7 @@ $size-2xl: 2.4rem;
 // Decoration
 
 $shadow-offset: 1px;
-$shadow-blur: 2px;
+$shadow-blur: 6px;
 
 $border-thickness: 1px;
 $border-radius: 2px;

src/styles/global.scss

@@ -12,10 +12,15 @@
     font-size: $size-md;
 }
 
-h1, h2, h3, h4, h5, h6, p, ul, ol {
+h1, h2, h3, h4, h5, h6, p {
+    padding-inline: $space-md;
     @include space-between($space-md);
 }
 
+li {
+    @include space-between($space-sm);
+}
+
 h1, h2, h3, h4, h5, h6 {
     @include font-display;
     font-size: $size-lg;