Design post index page

willburden · willburden · commit 26d233ab05e9 · 2025-12-17T23:40:26.000Z
diff --git a/src/components/Aside.astro b/src/components/Aside.astro
@@ -10,10 +10,12 @@
     aside {
         @media (min-width: $single-width) {
             float: inline-end;
+            padding-inline-start: $space-md;
         }
 
         @media (min-width: $full-width) {
             position: relative;
+            padding-inline-start: none;
         }
     }
 
diff --git a/src/components/Bandcamp.astro b/src/components/Bandcamp.astro
@@ -11,6 +11,7 @@ const { album, tracks = 5 } = Astro.props;
     style=`--num-tracks: ${tracks};`
     src={`https://bandcamp.com/EmbeddedPlayer/album=${album}/size=large/bgcol=ffffff/linkcol=000000/transparent=true/`}
     seamless
+    sandbox="allow-scripts allow-same-origin"
 ></iframe>
 
 <style lang="scss">
@@ -30,8 +31,7 @@ const { album, tracks = 5 } = Astro.props;
         margin-block-start: $space-xs;
 
         @media (min-width: $single-width) {
-            margin-block-start: 0;
-            max-width: none;
+            max-width: 40vw;
         }
 
         @media (min-width: $full-width) {
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,5 +1,5 @@
 <footer>
-    <p>Made with <a href="https://astro.build/">Astro</a> and <a href="https://docs.github.com/en/pages">GitHub Pages</a></p>
+    <p>This site was made with <a href="https://astro.build/">Astro</a> and <a href="https://docs.github.com/en/pages">GitHub Pages</a></p>
     <p>View the source code on <a href="https://github.com/willburden/willburden.github.io">GitHub</a></p>
 </footer>
 
diff --git a/src/components/TagList.astro b/src/components/TagList.astro
@@ -0,0 +1,27 @@
+---
+interface Props {
+    tags: string[],
+}
+
+const { tags } = Astro.props;
+---
+
+{tags.length > 0 &&
+    <div>
+        {tags.map(tag => (
+            <span><a href={`/tag/${tag}`}>{tag}</a></span>
+        ))}
+    </div>
+}
+
+<style lang="scss">
+    @use '../styles/_tokens' as *;
+
+    div {
+        margin-top: -$underline-thickness;
+
+        span {
+            @include margin-inline-between($space-xs);
+        }
+    }
+</style>
diff --git a/src/components/post/PostHeader.astro b/src/components/post/PostHeader.astro
@@ -1,8 +1,8 @@
 ---
 import type { InferEntrySchema } from 'astro:content'
 import { Image } from 'astro:assets';
-import formatDate from '../../util/formatDate';
-import PostTags from './PostTags.astro';
+import * as formatDate from '../../util/formatDate';
+import TagList from '../TagList.astro';
 import Aside from '../Aside.astro';
 import Bandcamp from '../Bandcamp.astro';
 
@@ -12,7 +12,7 @@ interface Props {
 
 const { data } = Astro.props;
 
-const pubDate = formatDate(data.pubDate);
+const pubDate = formatDate.verbose(data.pubDate);
 ---
 
 <header>
@@ -22,6 +22,7 @@ const pubDate = formatDate(data.pubDate);
             <h2>{data.subtitle}</h2>
         }
         <p>{pubDate}</p>
+        <TagList tags={data.tags} />
     </div>
     {data.hero?.image !== undefined &&
         <Image
@@ -31,47 +32,73 @@ const pubDate = formatDate(data.pubDate);
     {data.bandcamp?.album !== undefined &&
         <Aside><Bandcamp {...data.bandcamp} /></Aside>
     }
-    <PostTags tags={data.tags} />
 </header>
 
 <style lang="scss">
     @use '../../styles/_tokens' as *;
 
     header {
         position: relative;
-
+        margin-block-end: $space-md;
+        line-height: $line-height-md;
+        
         > * {
-            @include space-between($space-xs);
-
-            &:last-child {
-                margin-block-end: $space-md;
-            }
+            margin-block: 0;
         }
-
+            
         h1 {
             font-size: $size-xl;
         }
 
         .frontmatter {
-            margin-block-end: 0;
+            margin-block-end: $space-sm;
 
             > * {
                 margin-block: 0;
             }
 
-            &:last-child {
-                margin-block-end: $space-md;
+            h2 {
+                font-size: $size-md;
             }
-        }
-
-        p {
-            @include font-technical;
-        }
 
-        img {
-            margin-block-end: 0;
-            padding: 0;
-            border-radius: 0;
+            p {
+                @include font-technical;
+                line-height: $line-height-md;
+            }
         }
     }
+
+    // header {
+    //     position: relative;
+    //     margin-block-end: $space-md;
+    //     line-height: $line-height-md;
+
+    //     > * {
+    //         @include margin-between($space-xs);
+    //     }
+
+    //     h1 {
+    //         font-size: $size-xl;
+    //     }
+
+    //     .frontmatter {
+    //         > * {
+    //             margin-block: 0;
+    //         }
+    //     }
+
+    //     h2 {
+    //         font-size: $size-md;
+    //     }
+
+    //     p {
+    //         @include font-technical;
+    //     }
+
+    //     img {
+    //         margin-block-end: 0;
+    //         padding: 0;
+    //         border-radius: 0;
+    //     }
+    // }
 </style>
diff --git a/src/components/post/PostTags.astro b/src/components/post/PostTags.astro
diff --git a/src/content/posts/example-album.md b/src/content/posts/example-album.md
@@ -1,14 +1,14 @@
 ---
-title: "Example album"
-subtitle: Album review
+title: "Twain: Noon"
+subtitle: Album Review
 pubDate: 2025-10-28
 bandcamp:
     album: 826228865
     tracks: 13
 tags:
     - music
     - review
-    - artist name
+    - Twain
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non lorem diam. Quisque vulputate nibh sodales eros pretium tincidunt. Aenean porttitor efficitur convallis. Nulla sagittis finibus convallis. Phasellus in fermentum quam, eu egestas tortor. Maecenas ac mollis leo. Integer maximus eu nisl vel sagittis.
diff --git a/src/content/posts/third-post.md b/src/content/posts/third-post.md
@@ -0,0 +1,4 @@
+---
+title: A third post with a very long title that tests the malleability of the layout
+pubDate: 2025-12-16
+---
diff --git a/src/content/posts/walking.md b/src/content/posts/walking.md
@@ -6,6 +6,7 @@ hero:
     alt: 'A photo of someone walking through woods, taken from a distance behind. There are bright green and yellow leaves.'
 ---
 
+
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non lorem diam. Quisque vulputate nibh sodales eros pretium tincidunt. Aenean porttitor efficitur convallis. Nulla sagittis finibus convallis. Phasellus in fermentum quam, eu egestas tortor. Maecenas ac mollis leo. Integer maximus eu nisl vel sagittis.
 
 # Aliquam ante urna
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -36,6 +36,14 @@ import '../styles/global.scss';
 <style lang="scss">
 	@use '../styles/_tokens' as *;
 
+	:root {
+		scrollbar-gutter: stable both-edges;
+	}
+
+	body, .columns {
+		min-height: 100vh;
+	}
+
 	.columns {
 		display: flex;
 		flex-direction: row;
@@ -56,6 +64,13 @@ import '../styles/global.scss';
 			@media (min-width: $full-width) {
 				padding-inline-end: $space-lg;
 			}
+
+			display: flex;
+			flex-direction: column;
+
+			main {
+				flex: 1;
+			}
 		}
 
 		.aside {
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,24 +1,67 @@
 ---
 import { getCollection } from "astro:content";
 import BaseLayout from "../layouts/BaseLayout.astro";
-import formatDate from "../util/formatDate";
+import TagList from "../components/TagList.astro";
+import * as formatDate from "../util/formatDate";
 
 const posts = await getCollection("blog");
 
-posts.sort((a, b) => a.data.pubDate.getTime() - b.data.pubDate.getDate())
-
-console.log(posts);
+posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
 ---
 
 <BaseLayout>
     <h1>Posts</h1>
-    <ul>
-        {posts.map((post) => (
-            <li>
-                <a href={`/posts/${post.id}/`}>
-                    {post.data.title} ({formatDate(post.data.pubDate)})
-                </a>
-            </li>
-        ))}
-    </ul>
+    <div class="collection">
+        {posts.map((post) => (<>
+            <p class="date">{formatDate.compact(post.data.pubDate)}</p>
+            <div class="item">
+                <p><a href={`/posts/${post.id}/`}>
+                    {post.data.title}
+                    {post.data.subtitle &&
+                        <>— {post.data.subtitle}</>
+                    }
+                </a></p>
+                {post.data.tags.length > 0 &&
+                    <TagList tags={post.data.tags} />
+                }
+            </div>
+        </>))}
+    </div>
 </BaseLayout>
+
+<style lang="scss">
+    @use '../styles/tokens' as *;
+
+    .collection {
+        margin-inline: $space-md;
+        line-height: $line-height-lg;
+        text-align: center;
+
+        p {
+            margin-block: 0;
+        }
+
+        .date {
+            @include font-technical;
+        }
+
+        .item:not(:last-child) {
+            margin-block-end: $size-lg;
+        }
+    }
+
+    @media (min-width: $single-width) {
+        .collection {
+            margin-inline: $space-lg;
+            text-align: left;
+
+            display: grid;
+            gap: $space-md $space-md;
+            grid-template: auto auto / min-content auto;
+
+            .date {
+                text-align: right;
+            }
+        }
+    }
+</style>
diff --git a/src/styles/_tokens.scss b/src/styles/_tokens.scss
diff --git a/src/styles/global.scss b/src/styles/global.scss
diff --git a/src/util/formatDate.ts b/src/util/formatDate.ts

Original file line number	Diff line number	Diff line change
`@@ -10,10 +10,12 @@`
`10`	`10`	`aside {`
`11`	`11`	`@media (min-width: $single-width) {`
`12`	`12`	`float: inline-end;`
	`13`	`+ padding-inline-start: $space-md;`
`13`	`14`	`}`
`14`	`15`
`15`	`16`	`@media (min-width: $full-width) {`
`16`	`17`	`position: relative;`
	`18`	`+ padding-inline-start: none;`
`17`	`19`	`}`
`18`	`20`	`}`
`19`	`21`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +---
 +title: A third post with a very long title that tests the malleability of the layout
 +pubDate: 2025-12-16
 +---