From a0e1d650d210fc3075236e7dcad65c07e77c2c1d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 4 Oct 2024 21:34:23 -0400 Subject: [PATCH 01/11] two-column blog landing page --- .../src/routes/blog/+page.server.js | 12 +- apps/svelte.dev/src/routes/blog/+page.svelte | 149 ++++++++++++++---- 2 files changed, 124 insertions(+), 37 deletions(-) diff --git a/apps/svelte.dev/src/routes/blog/+page.server.js b/apps/svelte.dev/src/routes/blog/+page.server.js index 37de117f70..5dc81e8de7 100644 --- a/apps/svelte.dev/src/routes/blog/+page.server.js +++ b/apps/svelte.dev/src/routes/blog/+page.server.js @@ -4,10 +4,12 @@ export const prerender = true; export async function load() { return { - posts: blog_posts.map((document) => ({ - metadata: document.metadata, - date: document.date, - slug: document.slug - })) + posts: blog_posts + .map((document) => ({ + metadata: document.metadata, + date: document.date, + slug: document.slug + })) + .filter((document) => !document.metadata.draft) }; } diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte index 44474755a1..e869424a8b 100644 --- a/apps/svelte.dev/src/routes/blog/+page.svelte +++ b/apps/svelte.dev/src/routes/blog/+page.svelte @@ -1,5 +1,8 @@ - @@ -17,29 +20,62 @@

Blog

-
- {#each data.posts as post} - {#if !post.metadata.draft} - - {/if} - {/each} + +
+ {#snippet article(post: any)} + + {/snippet} + + + +
+
+ {#each featured.slice(1) as post} + + {/each} +
+ +
+ {#each data.posts.filter((post) => post !== top) as post} + + {/each} +
+
From bad3e255002752f4e2ee28d8fc0e20e13ffeec60 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 5 Oct 2024 15:58:37 -0400 Subject: [PATCH 02/11] design tweaks --- .../src/routes/blog/+page.server.js | 18 ++++--- apps/svelte.dev/src/routes/blog/+page.svelte | 54 +++++++++---------- apps/svelte.dev/src/routes/blog/Byline.svelte | 30 +++++++++++ .../src/routes/blog/[slug]/+page.svelte | 13 +---- 4 files changed, 70 insertions(+), 45 deletions(-) create mode 100644 apps/svelte.dev/src/routes/blog/Byline.svelte diff --git a/apps/svelte.dev/src/routes/blog/+page.server.js b/apps/svelte.dev/src/routes/blog/+page.server.js index 5dc81e8de7..a6b721c5de 100644 --- a/apps/svelte.dev/src/routes/blog/+page.server.js +++ b/apps/svelte.dev/src/routes/blog/+page.server.js @@ -3,13 +3,17 @@ import { blog_posts } from '$lib/server/content'; export const prerender = true; export async function load() { + 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: blog_posts - .map((document) => ({ - metadata: document.metadata, - date: document.date, - slug: document.slug - })) - .filter((document) => !document.metadata.draft) + posts }; } diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte index e869424a8b..6c72c641cd 100644 --- a/apps/svelte.dev/src/routes/blog/+page.svelte +++ b/apps/svelte.dev/src/routes/blog/+page.svelte @@ -1,7 +1,10 @@ @@ -22,25 +25,18 @@

Blog

- {#snippet article(post: any)} - - {/snippet} -
- {#each featured.slice(1) as post} + {#each data.posts.slice(1) as post}
{post.metadata.title}

{post.metadata.description}

+ +
{/each}
- {#each data.posts.filter((post) => post !== top) as post} -
+ {#each whats_new as post} + {/each} @@ -101,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; @@ -110,19 +106,19 @@ p { font-size: var(--sk-font-size-body-small); color: var(--sk-text-3); - margin: 0; + margin: 0 0 0.5em 0; } } - .featured { + .feed { display: none; } - @media (max-width: 799px) { + /* @media (max-width: 799px) { article:not(.feature) h2::before { content: 'What’s new in Svelte: '; } - } + } */ @media (min-width: 800px) { .grid { @@ -143,6 +139,10 @@ } article { + &:not(.feature) { + display: none; + } + h2 { font-size: var(--sk-font-size-h2); } @@ -150,21 +150,21 @@ } .feed { + display: block; + &::before { - content: 'What’s new'; + content: 'Monthly updates'; font-family: var(--sk-font-ui); font-size: var(--sk-font-size-ui-medium); text-transform: uppercase; color: var(--sk-text-4); } - .feature { - display: none; - } - article { h2 { - font-size: var(--sk-font-size-h3); + font-family: var(--sk-font-body); + font-weight: 400; + font-size: var(--sk-font-size-body); } p { diff --git a/apps/svelte.dev/src/routes/blog/Byline.svelte b/apps/svelte.dev/src/routes/blog/Byline.svelte new file mode 100644 index 0000000000..a2c06f8ea6 --- /dev/null +++ b/apps/svelte.dev/src/routes/blog/Byline.svelte @@ -0,0 +1,30 @@ + + +

+ {#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} + {author.name}{#if show_comma}, {/if} + {#if show_and}and {/if} + {/each} + +

+ + diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte index 88565531ac..787f40c42e 100644 --- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte +++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte @@ -2,6 +2,7 @@ import { page } from '$app/stores'; import { Text } from '@sveltejs/site-kit/components'; import { setupDocsHovers } from '@sveltejs/site-kit/docs'; + import Byline from '../Byline.svelte'; let { data } = $props(); @@ -25,17 +26,7 @@

{data.metadata.title}

{data.metadata.description}

-

- {#each data.authors as author, i} - {@const show_comma = data.authors.length > 2 && i < data.authors.length - 1} - {@const show_and = i === data.authors.length - 2} - {author.name}{#if show_comma}, {/if} - {#if show_and}and {/if} - {/each} - -

+ {@html data.body} From 02c6ce9ef4134419135fe108b9d05fe29ab234cb Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 5 Oct 2024 16:02:55 -0400 Subject: [PATCH 03/11] tweak implementation --- apps/svelte.dev/src/routes/blog/+page.svelte | 36 +++++++++----------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte index 6c72c641cd..0785ee4dfb 100644 --- a/apps/svelte.dev/src/routes/blog/+page.svelte +++ b/apps/svelte.dev/src/routes/blog/+page.svelte @@ -51,15 +51,15 @@ {/each}
-
+
+
@@ -114,12 +114,6 @@ display: none; } - /* @media (max-width: 799px) { - article:not(.feature) h2::before { - content: 'What’s new in Svelte: '; - } - } */ - @media (min-width: 800px) { .grid { display: grid; @@ -150,26 +144,28 @@ } .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); } - article { - h2 { - font-family: var(--sk-font-body); - font-weight: 400; - font-size: var(--sk-font-size-body); - } - - p { - display: none; - } + a { + display: block; + font-family: var(--sk-font-body); + font-weight: 400; + font-size: var(--sk-font-size-body); + color: var(--sk-text-2); } } } From 01ef6051e7d9d6b5eebf9a3a4b4913e31cdd8049 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 5 Oct 2024 16:07:08 -0400 Subject: [PATCH 04/11] tweak --- apps/svelte.dev/src/routes/blog/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte index 0785ee4dfb..c85cfbcd3c 100644 --- a/apps/svelte.dev/src/routes/blog/+page.svelte +++ b/apps/svelte.dev/src/routes/blog/+page.svelte @@ -117,7 +117,7 @@ @media (min-width: 800px) { .grid { display: grid; - grid-template-columns: 2fr 1fr; + grid-template-columns: 3fr 1fr; gap: 3em; } From d6b21fd25330d16e13976d7d854aaaa9cfaced3b Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 6 Oct 2024 09:06:13 -0400 Subject: [PATCH 05/11] fixes --- ...17-08-07-the-easiest-way-to-get-started.md | 65 --------- .../blog/2019-04-20-write-less-code.md | 2 +- .../2024-04-30-svelte-5-release-candidate.md | 2 +- .../src/routes/blog/[slug]/+page.svelte | 132 ++++++++++-------- 4 files changed, 73 insertions(+), 128 deletions(-) delete mode 100644 apps/svelte.dev/content/blog/2017-08-07-the-easiest-way-to-get-started.md diff --git a/apps/svelte.dev/content/blog/2017-08-07-the-easiest-way-to-get-started.md b/apps/svelte.dev/content/blog/2017-08-07-the-easiest-way-to-get-started.md deleted file mode 100644 index 2bbb2d4639..0000000000 --- a/apps/svelte.dev/content/blog/2017-08-07-the-easiest-way-to-get-started.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: The easiest way to get started with Svelte -description: This'll only take a minute. -author: Rich Harris -authorURL: https://twitter.com/Rich_Harris ---- - -Svelte is a [new kind of framework](/blog/frameworks-without-the-framework). Rather than putting a `