two-column blog landing page

apps/svelte.dev/content/blog/2019-04-20-write-less-code.md

@@ -101,7 +101,7 @@ Here's an equivalent component in Vue:
 ```
 
 <aside>
-	<p>I'm counting by copying the source code to the clipboard and running `pbpaste | wc -c` in my terminal</p>
+	<p>I'm counting by copying the source code to the clipboard and running <code>pbpaste | wc -c</code> in my terminal</p>
 </aside>
 
 In other words, it takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger!

apps/svelte.dev/content/blog/2024-04-30-svelte-5-release-candidate.md

@@ -28,7 +28,7 @@ For the last several months, we've been hard at work rewriting Svelte from the g
 You can learn more about the new features from the [preview documentation](https://svelte-5-preview.vercel.app/docs), and by watching the presentation from the most recent [Svelte Summit](https://www.sveltesummit.com/):
 
 <div class="max">
-<figure style="max-width: 960px; margin: 0 auto">
+<figure style="max-width: 1040px; margin: 0 auto">
 <div style="aspect-ratio: 1.755; position: relative; margin: 0 auto;">
 	<iframe credentialless style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/xCeYmdukOKI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>

apps/svelte.dev/src/routes/blog/+page.server.js

@@ -3,11 +3,17 @@ import { blog_posts } from '$lib/server/content';
 export const prerender = true;
 
 export async function load() {
-	return {
-		posts: blog_posts.map((document) => ({
+	const posts = blog_posts
+		.map((document) => ({
 			metadata: document.metadata,
 			date: document.date,
+			date_formatted: document.date_formatted,
+			authors: document.authors,
 			slug: document.slug
 		}))
+		.filter((document) => !document.metadata.draft);
+
+	return {
+		posts
 	};
 }

apps/svelte.dev/src/routes/blog/+page.svelte

@@ -1,5 +1,11 @@
-<script>
-	export let data;
+<script lang="ts">
+	import Byline from './Byline.svelte';
+
+	let { data } = $props();
+
+	const featured = data.posts.filter((post) => !post.metadata.title.startsWith('What’s new'));
+	const whats_new = data.posts.filter((post) => post.metadata.title.startsWith('What’s new'));
+	const top = data.posts[0];
 </script>
 
 <svelte:head>
@@ -17,29 +23,53 @@
 </svelte:head>
 
 <h1 class="visually-hidden">Blog</h1>
-<div class="posts stretch">
-	{#each data.posts as post}
-		{#if !post.metadata.draft}
-			<article class="post" data-pubdate={post.date}>
-				<a href="/{post.slug}" title="Read the article »">
-					<h2>{post.metadata.title}</h2>
-					<p>{post.metadata.description}</p>
-				</a>
-			</article>
-		{/if}
-	{/each}
+
+<div class="container">
+	<article class="top" data-pubdate={top.date}>
+		<a href="/{top.slug}" title="Read the article »">
+			<h2>{top.metadata.title}</h2>
+			<p>{top.metadata.description}</p>
+		</a>
+
+		<Byline post={top} />
+	</article>
+
+	<div class="grid">
+		<div class="featured posts">
+			{#each data.posts.slice(1) as post}
+				<article
+					class:feature={!post.metadata.title.startsWith('What’s new')}
+					data-pubdate={post.date}
+				>
+					<a href="/{post.slug}" title="Read the article »">
+						<h2>{post.metadata.title}</h2>
+						<p>{post.metadata.description}</p>
+					</a>
+
+					<Byline {post} />
+				</article>
+			{/each}
+		</div>
+
+		<ul class="feed">
+			{#each whats_new as post}
+				<li>
+					<a href="/{post.slug}" title="Read the article »">
+						{post.metadata.title.replace('What’s new in Svelte: ', '')}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	</div>
 </div>
 
 <style>
-	.posts {
-		grid-template-columns: 1fr 1fr;
-		grid-gap: 1em;
-		min-height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
-		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
+	.container {
 		max-width: var(--sk-page-content-width);
 		box-sizing: content-box;
 		margin: 0 auto;
 		text-wrap: balance;
+		padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
 	}
 
 	h2 {
@@ -48,22 +78,11 @@
 		font-size: var(--sk-font-size-h3);
 	}
 
-	.post {
+	article {
 		margin: 2em 0;
 
-		&:where(:first-child, :nth-child(2))::before {
-			content: 'Latest post • ' attr(data-pubdate);
-			color: var(--sk-text-4);
-			font-family: var(--sk-font-ui);
-			font-size: var(--sk-font-size-ui-small);
-			text-transform: uppercase;
-		}
-
-		&:nth-child(2)::before {
-			content: 'Older posts';
-		}
-
-		&:first-child {
+		/* we need to use :global because snippets don't currently cause a deopt */
+		&.top {
 			margin: 0 0 2rem 0;
 			padding: 0 0 4rem 0;
 
@@ -76,6 +95,8 @@
 		a {
 			display: block;
 			text-decoration: none;
+			color: var(--sk-text-2);
+			font-size: var(--sk-font-size-body);
 
 			&:hover h2 {
 				text-decoration: underline;
@@ -85,7 +106,67 @@
 		p {
 			font-size: var(--sk-font-size-body-small);
 			color: var(--sk-text-3);
+			margin: 0 0 0.5em 0;
+		}
+	}
+
+	.feed {
+		display: none;
+	}
+
+	@media (min-width: 800px) {
+		.grid {
+			display: grid;
+			grid-template-columns: 3fr 1fr;
+			gap: 3em;
+		}
+
+		.featured {
+			display: block;
+
+			&::before {
+				content: 'Featured posts';
+				font-family: var(--sk-font-ui);
+				font-size: var(--sk-font-size-ui-medium);
+				text-transform: uppercase;
+				color: var(--sk-text-4);
+			}
+
+			article {
+				&:not(.feature) {
+					display: none;
+				}
+
+				h2 {
+					font-size: var(--sk-font-size-h2);
+				}
+			}
+		}
+
+		.feed {
+			position: relative;
+			display: block;
+			padding: 2em 0;
 			margin: 0;
+			list-style: none;
+
+			&::before {
+				content: 'Monthly updates';
+				position: absolute;
+				top: 0;
+				font-family: var(--sk-font-ui);
+				font-size: var(--sk-font-size-ui-medium);
+				text-transform: uppercase;
+				color: var(--sk-text-4);
+			}
+
+			a {
+				display: block;
+				font-family: var(--sk-font-body);
+				font-weight: 400;
+				font-size: var(--sk-font-size-body);
+				color: var(--sk-text-2);
+			}
 		}
 	}
 </style>

apps/svelte.dev/src/routes/blog/Byline.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	interface PostStub {
+		authors: Array<{ name: string; url: string }>;
+		date: string;
+		date_formatted: string;
+	}
+
+	let { post }: { post: PostStub } = $props();
+</script>
+
+<p class="byline">
+	{#each post.authors as author, i}
+		{@const show_comma = post.authors.length > 2 && i < post.authors.length - 1}
+		{@const show_and = i === post.authors.length - 2}
+		<svelte:element this={author.url ? 'a' : 'span'} href={author.url}>{author.name}</svelte:element
+		>{#if show_comma},&nbsp;{/if}
+		{#if show_and}and&nbsp;{/if}
+	{/each}
+	<time datetime={post.date}>{post.date_formatted}</time>
+</p>
+
+<style>
+	.byline {
+		margin: 0 0 4rem 0;
+		padding: 1rem 0 0 0;
+		font-family: var(--sk-font-ui);
+		font-size: var(--sk-font-size-ui-small);
+		text-transform: uppercase;
+	}
+</style>