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 @@

Blog

{#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}

- - - {@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 @@ - @@ -20,21 +23,23 @@
- - Edit this page on GitHub - - - - - {@html data.document.body} +
+

{data.document.metadata.title}

+ + + Edit this page on GitHub + +
+ + + +
+ {@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 @@ } - diff --git a/packages/site-kit/src/lib/docs/index.ts b/packages/site-kit/src/lib/docs/index.ts index fcff5c2986..7ad8700961 100644 --- a/packages/site-kit/src/lib/docs/index.ts +++ b/packages/site-kit/src/lib/docs/index.ts @@ -1,3 +1,2 @@ export { default as DocsContents } from './DocsContents.svelte'; -export { default as DocsOnThisPage } from './DocsOnThisPage.svelte'; export { setupDocsHovers } from './hover'; diff --git a/packages/site-kit/src/lib/markdown/utils.ts b/packages/site-kit/src/lib/markdown/utils.ts index 25cbb98c6b..9b83f6a25e 100644 --- a/packages/site-kit/src/lib/markdown/utils.ts +++ b/packages/site-kit/src/lib/markdown/utils.ts @@ -50,9 +50,7 @@ export function escape(html: string, encode = false) { export function slugify(title: string) { return title .toLowerCase() - .replace(/'/g, '') - .replace(/</g, '') - .replace(/>/g, '') + .replace(/&.+;/g, '') .replace(/[^a-z0-9-$]/g, '-') .replace(/-{2,}/g, '-') .replace(/^-/, '') diff --git a/packages/site-kit/src/lib/server/content/index.ts b/packages/site-kit/src/lib/server/content/index.ts index b56155ebbb..ad9cd2cca8 100644 --- a/packages/site-kit/src/lib/server/content/index.ts +++ b/packages/site-kit/src/lib/server/content/index.ts @@ -25,7 +25,7 @@ export async function create_index( } const sections = Array.from(body.matchAll(/^##\s+(.*)$/gm)).map((match) => { - const title = match[1]; + const title = match[1].replace(/`/g, '').replace(/</g, '<').replace(/>/g, '>'); const slug = slugify(title); return { slug, title }; diff --git a/packages/site-kit/src/lib/styles/text.css b/packages/site-kit/src/lib/styles/text.css index b489111a36..7e1627e129 100644 --- a/packages/site-kit/src/lib/styles/text.css +++ b/packages/site-kit/src/lib/styles/text.css @@ -355,7 +355,6 @@ details.legacy { color: hsl(var(--sk-text-warning-hsl)); font-size: 1.4rem; font-weight: 600; - cursor: pointer; &::after { content: 'show all';