Skip to content

Commit 2ecb261

Browse files
Rich-Harrisdummdidumm
Rich-Harris
and
dummdidumm
authored
two-column blog landing page (#246)
* two-column blog landing page * design tweaks * tweak implementation * tweak * fixes * tidy up fonts, use DM Serif italic * fix * fix blockquotes --------- Co-authored-by: Simon H <[email protected]>
1 parent e409489 commit 2ecb261

File tree

12 files changed

+251
-200
lines changed

12 files changed

+251
-200
lines changed

‎apps/svelte.dev/content/blog/2017-08-07-the-easiest-way-to-get-started.md‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ Here's an equivalent component in Vue:
101101
```
102102

103103
<aside>
104-
<p>I'm counting by copying the source code to the clipboard and running `pbpaste | wc -c` in my terminal</p>
104+
<p>I'm counting by copying the source code to the clipboard and running <code>pbpaste | wc -c</code> in my terminal</p>
105105
</aside>
106106

107107
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‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ For the last several months, we've been hard at work rewriting Svelte from the g
2828
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/):
2929

3030
<div class="max">
31-
<figure style="max-width: 960px; margin: 0 auto">
31+
<figure style="max-width: 1040px; margin: 0 auto">
3232
<div style="aspect-ratio: 1.755; position: relative; margin: 0 auto;">
3333
<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>
3434
</div>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,17 @@ import { blog_posts } from '$lib/server/content';
33
export const prerender = true;
44

55
export async function load() {
6-
return {
7-
posts: blog_posts.map((document) => ({
6+
const posts = blog_posts
7+
.map((document) => ({
88
metadata: document.metadata,
99
date: document.date,
10+
date_formatted: document.date_formatted,
11+
authors: document.authors,
1012
slug: document.slug
1113
}))
14+
.filter((document) => !document.metadata.draft);
15+
16+
return {
17+
posts
1218
};
1319
}

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

Lines changed: 113 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
<script>
2-
export let data;
1+
<script lang="ts">
2+
import Byline from './Byline.svelte';
3+
4+
let { data } = $props();
5+
6+
const featured = data.posts.filter((post) => !post.metadata.title.startsWith('What’s new'));
7+
const whats_new = data.posts.filter((post) => post.metadata.title.startsWith('What’s new'));
8+
const top = data.posts[0];
39
</script>
410

511
<svelte:head>
@@ -17,29 +23,53 @@
1723
</svelte:head>
1824

1925
<h1 class="visually-hidden">Blog</h1>
20-
<div class="posts stretch">
21-
{#each data.posts as post}
22-
{#if !post.metadata.draft}
23-
<article class="post" data-pubdate={post.date}>
24-
<a href="/{post.slug}" title="Read the article »">
25-
<h2>{post.metadata.title}</h2>
26-
<p>{post.metadata.description}</p>
27-
</a>
28-
</article>
29-
{/if}
30-
{/each}
26+
27+
<div class="container">
28+
<article class="top" data-pubdate={top.date}>
29+
<a href="/{top.slug}" title="Read the article »">
30+
<h2>{top.metadata.title}</h2>
31+
<p>{top.metadata.description}</p>
32+
</a>
33+
34+
<Byline post={top} />
35+
</article>
36+
37+
<div class="grid">
38+
<div class="featured posts">
39+
{#each data.posts.slice(1) as post}
40+
<article
41+
class:feature={!post.metadata.title.startsWith('What’s new')}
42+
data-pubdate={post.date}
43+
>
44+
<a href="/{post.slug}" title="Read the article »">
45+
<h2>{post.metadata.title}</h2>
46+
<p>{post.metadata.description}</p>
47+
</a>
48+
49+
<Byline {post} />
50+
</article>
51+
{/each}
52+
</div>
53+
54+
<ul class="feed">
55+
{#each whats_new as post}
56+
<li>
57+
<a href="/{post.slug}" title="Read the article »">
58+
{post.metadata.title.replace('What’s new in Svelte: ', '')}
59+
</a>
60+
</li>
61+
{/each}
62+
</ul>
63+
</div>
3164
</div>
3265

3366
<style>
34-
.posts {
35-
grid-template-columns: 1fr 1fr;
36-
grid-gap: 1em;
37-
min-height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
38-
padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
67+
.container {
3968
max-width: var(--sk-page-content-width);
4069
box-sizing: content-box;
4170
margin: 0 auto;
4271
text-wrap: balance;
72+
padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
4373
}
4474
4575
h2 {
@@ -48,22 +78,11 @@
4878
font-size: var(--sk-font-size-h3);
4979
}
5080
51-
.post {
81+
article {
5282
margin: 2em 0;
5383
54-
&:where(:first-child, :nth-child(2))::before {
55-
content: 'Latest post • ' attr(data-pubdate);
56-
color: var(--sk-text-4);
57-
font-family: var(--sk-font-ui);
58-
font-size: var(--sk-font-size-ui-small);
59-
text-transform: uppercase;
60-
}
61-
62-
&:nth-child(2)::before {
63-
content: 'Older posts';
64-
}
65-
66-
&:first-child {
84+
/* we need to use :global because snippets don't currently cause a deopt */
85+
&.top {
6786
margin: 0 0 2rem 0;
6887
padding: 0 0 4rem 0;
6988
@@ -76,6 +95,8 @@
7695
a {
7796
display: block;
7897
text-decoration: none;
98+
color: var(--sk-text-2);
99+
font-size: var(--sk-font-size-body);
79100
80101
&:hover h2 {
81102
text-decoration: underline;
@@ -85,7 +106,67 @@
85106
p {
86107
font-size: var(--sk-font-size-body-small);
87108
color: var(--sk-text-3);
109+
margin: 0 0 0.5em 0;
110+
}
111+
}
112+
113+
.feed {
114+
display: none;
115+
}
116+
117+
@media (min-width: 800px) {
118+
.grid {
119+
display: grid;
120+
grid-template-columns: 3fr 1fr;
121+
gap: 3em;
122+
}
123+
124+
.featured {
125+
display: block;
126+
127+
&::before {
128+
content: 'Featured posts';
129+
font-family: var(--sk-font-ui);
130+
font-size: var(--sk-font-size-ui-medium);
131+
text-transform: uppercase;
132+
color: var(--sk-text-4);
133+
}
134+
135+
article {
136+
&:not(.feature) {
137+
display: none;
138+
}
139+
140+
h2 {
141+
font-size: var(--sk-font-size-h2);
142+
}
143+
}
144+
}
145+
146+
.feed {
147+
position: relative;
148+
display: block;
149+
padding: 2em 0;
88150
margin: 0;
151+
list-style: none;
152+
153+
&::before {
154+
content: 'Monthly updates';
155+
position: absolute;
156+
top: 0;
157+
font-family: var(--sk-font-ui);
158+
font-size: var(--sk-font-size-ui-medium);
159+
text-transform: uppercase;
160+
color: var(--sk-text-4);
161+
}
162+
163+
a {
164+
display: block;
165+
font-family: var(--sk-font-body);
166+
font-weight: 400;
167+
font-size: var(--sk-font-size-body);
168+
color: var(--sk-text-2);
169+
}
89170
}
90171
}
91172
</style>

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script lang="ts">
2+
interface PostStub {
3+
authors: Array<{ name: string; url: string }>;
4+
date: string;
5+
date_formatted: string;
6+
}
7+
8+
let { post }: { post: PostStub } = $props();
9+
</script>
10+
11+
<p class="byline">
12+
{#each post.authors as author, i}
13+
{@const show_comma = post.authors.length > 2 && i < post.authors.length - 1}
14+
{@const show_and = i === post.authors.length - 2}
15+
<svelte:element this={author.url ? 'a' : 'span'} href={author.url}>{author.name}</svelte:element
16+
>{#if show_comma},&nbsp;{/if}
17+
{#if show_and}and&nbsp;{/if}
18+
{/each}
19+
<time datetime={post.date}>{post.date_formatted}</time>
20+
</p>
21+
22+
<style>
23+
.byline {
24+
margin: 0 0 4rem 0;
25+
padding: 1rem 0 0 0;
26+
font-family: var(--sk-font-ui);
27+
font-size: var(--sk-font-size-ui-small);
28+
text-transform: uppercase;
29+
}
30+
</style>

0 commit comments

Comments
 (0)