diff --git a/apps/svelte.dev/src/lib/icons/arrow-left.svg b/apps/svelte.dev/src/lib/icons/arrow-left.svg
new file mode 100644
index 0000000000..ee413e3551
--- /dev/null
+++ b/apps/svelte.dev/src/lib/icons/arrow-left.svg
@@ -0,0 +1,11 @@
+
diff --git a/apps/svelte.dev/src/lib/server/content.ts b/apps/svelte.dev/src/lib/server/content.ts
index 4136e7b295..3562d96867 100644
--- a/apps/svelte.dev/src/lib/server/content.ts
+++ b/apps/svelte.dev/src/lib/server/content.ts
@@ -42,13 +42,10 @@ export const blog_posts = index.blog.children
const date = post.metadata.date ?? post.file.split('/').pop()!.slice(0, 10);
return {
- title: post.metadata.title,
+ ...post,
date,
date_formatted: format_date(date),
- description: post.metadata.description,
- draft: post.metadata.draft,
- authors,
- ...post
+ authors
};
})
.sort((a, b) => (a.date < b.date ? 1 : -1));
diff --git a/apps/svelte.dev/src/routes/blog/+page.server.js b/apps/svelte.dev/src/routes/blog/+page.server.js
index 491ba98b86..37de117f70 100644
--- a/apps/svelte.dev/src/routes/blog/+page.server.js
+++ b/apps/svelte.dev/src/routes/blog/+page.server.js
@@ -4,6 +4,10 @@ export const prerender = true;
export async function load() {
return {
- posts: blog_posts
+ posts: blog_posts.map((document) => ({
+ metadata: document.metadata,
+ date: document.date,
+ slug: document.slug
+ }))
};
}
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 8afa659b19..5d3d161577 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -19,11 +19,11 @@
{#each data.posts as post}
- {#if !post.draft}
+ {#if !post.metadata.draft}
- {post.title}
- {post.description}
+ {post.metadata.title}
+ {post.metadata.description}
{/if}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js b/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js
index 66ba81c796..661cc1d995 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js
@@ -5,22 +5,16 @@ import { render_content } from '$lib/server/renderer';
export const prerender = true;
export async function load({ params }) {
- const post = blog_posts.find((post) => post.slug === `blog/${params.slug}`);
+ const document = blog_posts.find((document) => document.slug === `blog/${params.slug}`);
- if (!post) error(404);
+ if (!document) error(404);
// forgive me — terrible hack necessary to get diffs looking sensible
// on the `runes` blog post
- post.body = post.body.replace(/( )+/gm, (match) => ' '.repeat(match.length / 4));
+ const markdown = document.body.replace(/( )+/gm, (match) => ' '.repeat(match.length / 4));
return {
- title: post.title,
- description: post.description,
- path: `/${post.slug}`,
- date: post.date,
- date_formatted: post.date_formatted,
- body: await render_content(post.file, post.body),
- authors: post.authors,
- sections: post.sections
+ ...document,
+ body: await render_content(document.file, markdown)
};
}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index f022208fbc..9a8c060983 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -1,20 +1,22 @@
-
- {data.title}
+ {data.metadata.title}
-
-
-
+
+
+
@@ -22,8 +24,8 @@
- {data.title}
- {data.description}
+ {data.metadata.title}
+ {data.metadata.description}
{#each data.authors as author, i}
@@ -37,14 +39,9 @@
-
-
- {@html data.body}
+
+ {@html data.body}
+
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts b/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
index 068558509c..4d7e40ff4f 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
+++ b/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
@@ -27,7 +27,7 @@ export async function GET({ params }) {
if (!post) error(404);
- const result = render(Card, { props: post });
+ const result = render(Card, { props: { title: post.metadata.title, date: post.date_formatted } });
const element = toReactNode(`${result.body}`);
const svg = await satori(element, {
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte
index 512997600b..79b9c105ab 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte
@@ -1,5 +1,5 @@
@@ -7,7 +7,7 @@
{title}
-
{date_formatted}
+
{date}
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
index a66889bcaa..7d97a529c4 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
@@ -1,12 +1,7 @@
@@ -15,13 +10,6 @@
- {#if category}
-
{category}
- {/if}
- {#if title}
-
{title}
- {/if}
-
{@render children()}
@@ -45,14 +33,6 @@
all: unset;
}
- .category {
- font: 700 var(--sk-text-s) var(--sk-font);
- text-transform: uppercase;
- letter-spacing: 0.12em;
- margin: 0 0 0.5em;
- color: var(--sk-text-3);
- }
-
@media (min-width: 832px) {
.content {
padding-left: calc(var(--sidebar-width) + var(--sk-page-padding-side));
@@ -82,7 +62,16 @@
@media (min-width: 1200px) {
.container {
- --sidebar-width: max(28rem, 23vw);
+ --sidebar-width: max(
+ 28rem,
+ calc(
+ 0.5 *
+ (
+ 100vw - var(--sk-line-max-width) - var(--sk-page-padding-side) -
+ var(--sk-page-padding-side)
+ )
+ )
+ );
flex-direction: row;
}
@@ -90,7 +79,6 @@
--on-this-page-display: block;
padding: var(--sk-page-padding-top) calc(var(--sidebar-width) + var(--sk-page-padding-side));
margin: 0 auto;
- width: var(--sk-line-max-width);
box-sizing: content-box;
}
}
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 48a287dcee..a5d0437a7d 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -1,11 +1,14 @@
-
-
- Edit this page on GitHub
-
-
-
-
- {@html data.document.body}
+
+
+
+
+
+ {@html data.document.body}
+
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
new file mode 100644
index 0000000000..82099510aa
--- /dev/null
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -0,0 +1,172 @@
+
+
+
(current = location.hash.slice(1))} />
+
+
+
+
diff --git a/apps/svelte.dev/src/routes/nav.json/+server.ts b/apps/svelte.dev/src/routes/nav.json/+server.ts
index a403781747..5f6f40d96d 100644
--- a/apps/svelte.dev/src/routes/nav.json/+server.ts
+++ b/apps/svelte.dev/src/routes/nav.json/+server.ts
@@ -1,5 +1,5 @@
import { json } from '@sveltejs/kit';
-import { blog_posts, docs as _docs, index } from '$lib/server/content';
+import { docs as _docs, index } from '$lib/server/content';
import type { NavigationLink } from '@sveltejs/site-kit';
export const prerender = true;
@@ -23,18 +23,6 @@ async function get_nav_list(): Promise {
}))
.sort((a, b) => a.title.localeCompare(b.title)); // Svelte first
- const blog = [
- {
- title: '',
- sections: blog_posts.map(({ title, slug, date }) => ({
- title,
- path: '/' + slug,
- // Put a NEW badge on blog posts that are less than 14 days old
- badge: (+new Date() - +new Date(date)) / (1000 * 60 * 60 * 24) < 14 ? 'NEW' : undefined
- }))
- }
- ];
-
const tutorial = index.tutorial.children.map((topic) => ({
title: topic.metadata.title,
sections: topic.children.map((section) => ({
@@ -67,13 +55,7 @@ async function get_nav_list(): Promise {
{
title: 'Blog',
prefix: 'blog',
- pathname: '/blog',
- sections: [
- {
- title: 'BLOG',
- sections: blog
- }
- ]
+ pathname: '/blog'
}
];
}
diff --git a/packages/site-kit/src/lib/docs/DocsCopyCodeButton.svelte b/packages/site-kit/src/lib/docs/DocsCopyCodeButton.svelte
index a1431a6153..c5c3cf945e 100644
--- a/packages/site-kit/src/lib/docs/DocsCopyCodeButton.svelte
+++ b/packages/site-kit/src/lib/docs/DocsCopyCodeButton.svelte
@@ -41,7 +41,7 @@
}
-