Add the most recent post to the home page

.devcontainer/devcontainer.json

@@ -18,5 +18,13 @@
   // "customizations": {},
 
   // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-  "remoteUser": "root"
+  "remoteUser": "root",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "svelte.svelte-vscode",
+        "esbenp.prettier-vscode"
+      ]
+    }
+  }
 }

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+	"recommendations": [
+		"svelte.svelte-vscode",
+		"ms-vscode-remote.remote-containers",
+		"esbenp.prettier-vscode",
+		"streetsidesoftware.code-spell-checker"
+	]
+}

bgenc.net.code-workspace

@@ -0,0 +1,7 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	]
+}

src/routes/+page.server.ts

@@ -30,12 +30,15 @@ export async function load() {
 		}),
 	);
 
+	const mostRecentPost = _.maxBy(posts, ({ meta }) => meta.date);
 	const highlightedPosts = _.reverse(
 		_.sortBy(
-			posts.filter((post) => post.meta.highlighted),
+			posts.filter(
+				(post) => post.meta.highlighted && (!mostRecentPost || post.path !== mostRecentPost.path),
+			),
 			({ meta }) => meta.date,
 		),
-	);
+	).slice(0, 4);
 
-	return { highlightedPosts };
+	return { highlightedPosts, mostRecentPost };
 }

src/routes/+page.svelte

@@ -12,6 +12,7 @@
 	import MastodonLogo from 'phosphor-svelte/lib/MastodonLogo';
 	import BlogPostList from './posts/[[page=integer]]/BlogPostList.svelte';
 	import Button from '$lib/Button.svelte';
+	import BlogPost from './posts/[[page=integer]]/BlogPost.svelte';
 
 	export let data;
 </script>
@@ -101,6 +102,13 @@
 	</ul>
 </section>
 
+{#if data.mostRecentPost}
+	<section class="most-recent">
+		<h2>Most Recent Blog Post</h2>
+		<BlogPost showYear showReadingTime={false} post={data.mostRecentPost} />
+	</section>
+{/if}
+
 {#if data.highlightedPosts.length > 0}
 	<section class="highlighted">
 		<h2>Highlighted Blog Posts</h2>
@@ -122,7 +130,7 @@
 		clip-path: var(--clip-path);
 	}
 
-	.highlighted {
+	section {
 		margin-top: 4rem;
 	}
 

src/routes/posts/2024.05.27.adding-single-click-dev-environment-links-to-your-open-sourc.md

@@ -2,6 +2,7 @@
 title: 'Adding single click dev environment links to your open source project for easy contributions'
 date: 2024-05-27T05:10:06Z
 description: 'See how you can streamline contributions and onboarding by leveraging DevContainers and cloud dev environments - a one-click setup that lets new folks dive right in!'
+highlighted: true
 ---
 
 [I have been using DevContainers](/2023.02.10.why-use-devcontainer/) a lot. If
@@ -15,6 +16,7 @@ containers, and runs any commands you defined in the configuration to set things
 up.
 
 This comes with many benefits:
+
 - Assuming you deploy with containers, your development environment can more
   closely match your production environment.
 - There are no "works on my machine" issues, everyone has the same development
@@ -63,7 +65,6 @@ To do so, simply add the following links to your Readme, replacing `<Owner>` and
 Codespaces, these are not restricted to Github and
 can be used with other forge services like [Gitlab](https://about.gitlab.com) or [Codeberg](https://codeberg.org).
 
-
 ```md
 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/<Owner>/<Repo>)
 [![Open in DevPod](https://devpod.sh/assets/open-in-devpod.svg)](https://devpod.sh/open#https://github.com/<Owner>/<Repo>)

src/routes/posts/[[page=integer]]/BlogPost.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { format } from 'date-fns';
+	import type { Post } from './+page.server';
+
+	export let showYear: boolean = false;
+	export let showReadingTime: boolean = true;
+	export let post: Post;
+</script>
+
+<a href={`/${post.path}`}>
+	<li>
+		<div>
+			<h5 class="post-title">
+				{post.meta.title}
+			</h5>
+			{#if post.meta.description}
+				<p class="description">{post.meta.description}</p>
+			{/if}
+		</div>
+		<div class="meta">
+			<time datetime={post.meta.date}>
+				{format(new Date(post.meta.date), showYear ? 'MMMM d, yyyy' : 'MMMM d')}
+			</time>
+			{#if showReadingTime}
+				<div>{post.readingTime.words} words, {post.readingTime.text}</div>
+			{/if}
+		</div>
+	</li>
+</a>
+
+<style lang="scss">
+	@import '../../../vars';
+
+	/* Restore the color of everything under the post links, except the titles */
+	a {
+		color: $color-text;
+		text-decoration: none;
+
+		.post-title {
+			color: $color-primary;
+		}
+
+		&:hover .post-title {
+			text-decoration-color: unset;
+		}
+	}
+
+	time {
+		width: 8rem;
+	}
+
+	.post-title {
+		text-decoration: underline;
+		text-decoration-color: transparent;
+		transition: all var(--animation-speed) var(--animation-type);
+	}
+
+	li {
+		list-style-type: none;
+		font-weight: normal;
+	}
+
+	.description {
+		font-size: 0.9rem;
+		margin-top: -1.4rem;
+	}
+	.meta {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		font-size: 0.9rem;
+		opacity: 0.8;
+	}
+</style>

src/routes/posts/[[page=integer]]/BlogPostList.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { format } from 'date-fns';
 	import type { Post } from './+page.server';
-	import { readingTime } from 'reading-time-estimator';
+	import BlogPost from './BlogPost.svelte';
 
 	export let showYear: boolean = false;
 	export let showReadingTime: boolean = true;
@@ -10,60 +10,12 @@
 
 <ol class="posts">
 	{#each posts as post}
-		<a href={`/${post.path}`}>
-			<li>
-				<div>
-					<h5 class="post-title">
-						{post.meta.title}
-					</h5>
-					{#if post.meta.description}
-						<p class="description">{post.meta.description}</p>
-					{/if}
-				</div>
-				<div class="meta">
-					<time datetime={post.meta.date}>
-						{format(new Date(post.meta.date), showYear ? 'MMMM d, yyyy' : 'MMMM d')}
-					</time>
-					{#if showReadingTime}
-						<div>{post.readingTime.words} words, {post.readingTime.text}</div>
-					{/if}
-				</div>
-			</li>
-		</a>
+		<BlogPost {post} {showYear} {showReadingTime} />
 	{/each}
 </ol>
 
 <style lang="scss">
 	@import '../../../vars';
-
-	/* Restore the color of everything under the post links, except the titles */
-	.posts a {
-		color: $color-text;
-	}
-	.posts a .post-title {
-		color: $color-primary;
-	}
-
-	time {
-		width: 8rem;
-	}
-
-	.post-title {
-		text-decoration: underline;
-		text-decoration-color: transparent;
-		transition: all var(--animation-speed) var(--animation-type);
-	}
-	a:hover .post-title {
-		text-decoration-color: unset;
-	}
-	.posts a {
-		text-decoration: none;
-	}
-
-	li {
-		list-style-type: none;
-		font-weight: normal;
-	}
 	.posts {
 		display: flex;
 		flex-direction: column;
@@ -72,16 +24,4 @@
 	.posts {
 		gap: 1.5rem;
 	}
-
-	.description {
-		font-size: 0.9rem;
-		margin-top: -1.4rem;
-	}
-	.meta {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		font-size: 0.9rem;
-		opacity: 0.8;
-	}
 </style>