diff --git a/sites/svelte.dev/src/lib/server/examples/get-examples.js b/sites/svelte.dev/src/lib/server/examples/get-examples.js new file mode 100644 index 0000000000..66967f8630 --- /dev/null +++ b/sites/svelte.dev/src/lib/server/examples/get-examples.js @@ -0,0 +1,72 @@ +// @ts-check +import fs from 'node:fs'; + +const base = new URL('../../../../../../site/content/examples/', import.meta.url).pathname; + +/** + * @returns {import('./types').ExamplesData} + */ +export function get_examples_data() { + const examples = []; + + for (const subdir of fs.readdirSync(base)) { + // Exclude embeds + if (subdir.endsWith('99-embeds')) continue; + + const section = { + title: '', // Initialise with empty + slug: subdir.split('-').slice(1).join('-'), + examples: [], + }; + + if (!(fs.statSync(`${base}/${subdir}`).isDirectory() || subdir.endsWith('meta.json'))) continue; + + if (!subdir.endsWith('meta.json')) + section.title = JSON.parse(fs.readFileSync(`${base}/${subdir}/meta.json`, 'utf-8')).title; + + for (const section_dir of fs.readdirSync(`${base}/${subdir}`)) { + const match = /\d{2}-(.+)/.exec(section_dir); + if (!match) continue; + + const slug = match[1]; + + const example_base_dir = `${base}/${subdir}/${section_dir}`; + + // Get title for + const example_title = JSON.parse( + fs.readFileSync(`${example_base_dir}/meta.json`, 'utf-8') + ).title; + + const files = []; + for (const file of fs + .readdirSync(example_base_dir) + .filter((file) => !file.endsWith('meta.json'))) { + files.push({ + filename: file, + type: file.split('.').at(-1), + content: fs.readFileSync(`${example_base_dir}/${file}`, 'utf-8'), + }); + } + + section.examples.push({ title: example_title, slug, files }); + } + + examples.push(section); + } + + return examples; +} + +/** + * @param {import('./types').ExamplesData} examples_data + * @returns {import('./types').ExamplesList} + */ +export function get_examples_list(examples_data) { + return examples_data.map((section) => ({ + title: section.title, + examples: section.examples.map((example) => ({ + title: example.title, + slug: example.slug, + })), + })); +} diff --git a/sites/svelte.dev/src/lib/server/examples/index.js b/sites/svelte.dev/src/lib/server/examples/index.js new file mode 100644 index 0000000000..822d072636 --- /dev/null +++ b/sites/svelte.dev/src/lib/server/examples/index.js @@ -0,0 +1,11 @@ +/** + * @param {import('./types').ExamplesData} examples_data + * @param {string} slug + */ +export function get_example(examples_data, slug) { + const example = examples_data + .find((section) => section.examples.find((example) => example.slug === slug)) + ?.examples.find((example) => example.slug === slug); + + return example; +} diff --git a/sites/svelte.dev/src/lib/server/examples/types.d.ts b/sites/svelte.dev/src/lib/server/examples/types.d.ts new file mode 100644 index 0000000000..5fe93a0ca5 --- /dev/null +++ b/sites/svelte.dev/src/lib/server/examples/types.d.ts @@ -0,0 +1,25 @@ +export type ExamplesData = { + title: string; + slug: string; + examples: { + title: string; + slug: string; + files: { + content: string; + type: 'svelte' | 'js'; + filename: string; + }[]; + }[]; +}[]; + +export interface Example { + title: string; + slug: string; +} + +export interface ExampleSection { + title: string; + examples: Example[]; +} + +export type ExamplesList = ExampleSection[]; diff --git a/sites/svelte.dev/src/routes/examples/+layout.js b/sites/svelte.dev/src/routes/examples/+layout.js deleted file mode 100644 index e0904af004..0000000000 --- a/sites/svelte.dev/src/routes/examples/+layout.js +++ /dev/null @@ -1,6 +0,0 @@ -import { PUBLIC_API_BASE } from '$env/static/public'; - -export async function load({ fetch }) { - const examples = await fetch(`${PUBLIC_API_BASE}/docs/svelte/examples`).then((r) => r.json()); - return { examples }; -} diff --git a/sites/svelte.dev/src/routes/examples/+layout.svelte b/sites/svelte.dev/src/routes/examples/+layout.svelte deleted file mode 100644 index 75bd0e2cfd..0000000000 --- a/sites/svelte.dev/src/routes/examples/+layout.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/sites/svelte.dev/src/routes/examples/+page.js b/sites/svelte.dev/src/routes/examples/+page.js index ac962514a0..6c39a1de34 100644 --- a/sites/svelte.dev/src/routes/examples/+page.js +++ b/sites/svelte.dev/src/routes/examples/+page.js @@ -1,5 +1,7 @@ import { redirect } from '@sveltejs/kit'; +export const prerender = true; + /** @type {import('./$types').PageLoad} */ export function load() { throw redirect(301, 'examples/hello-world'); diff --git a/sites/svelte.dev/src/routes/examples/[slug]/+page.js b/sites/svelte.dev/src/routes/examples/[slug]/+page.js deleted file mode 100644 index e2a1472cea..0000000000 --- a/sites/svelte.dev/src/routes/examples/[slug]/+page.js +++ /dev/null @@ -1,17 +0,0 @@ -import { PUBLIC_API_BASE } from '$env/static/public'; - -/** @type {import('./$types').PageLoad} */ -export async function load({ fetch, params, setHeaders }) { - const example = await fetch(`${PUBLIC_API_BASE}/docs/svelte/examples/${params.slug}`, { - credentials: 'omit' - }); - - setHeaders({ - 'cache-control': 'public, max-age=60' - }); - - return { - example: await example.json(), - slug: params.slug - }; -} diff --git a/sites/svelte.dev/src/routes/examples/[slug]/+page.server.js b/sites/svelte.dev/src/routes/examples/[slug]/+page.server.js new file mode 100644 index 0000000000..6bc280e098 --- /dev/null +++ b/sites/svelte.dev/src/routes/examples/[slug]/+page.server.js @@ -0,0 +1,17 @@ +import { get_example } from '$lib/server/examples'; +import { get_examples_data, get_examples_list } from '$lib/server/examples/get-examples'; + +export const prerender = true; + +export async function load({ params }) { + const examples_data = get_examples_data(); + + const examples_list = get_examples_list(examples_data); + const example = get_example(examples_data, params.slug); + + return { + examples_list, + example, + slug: params.slug, + }; +} diff --git a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte b/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte index 6a12d3d0a3..c27de536b7 100644 --- a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte +++ b/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte @@ -1,16 +1,12 @@ - {data.example.name} {data.example.name ? '•' : ''} Svelte Examples + {data.example.title} {data.example.title ? '•' : ''} Svelte Examples @@ -44,7 +38,11 @@

Examples

- +
{#each sections as section}
  • - {section.name} + {section.title} {#each section.examples as example}
    @@ -31,7 +31,7 @@ src="/examples/thumbnails/{example.slug}.jpg" /> - {example.name} + {example.title} {#if example.slug === active_section} REPL @@ -109,7 +109,7 @@ } .thumbnail { - background-color: var(--sk-back-1); + background-color: #fff; object-fit: contain; width: 5rem; height: 5rem; diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/TableOfContents.svelte b/sites/svelte.dev/src/routes/tutorial/[slug]/TableOfContents.svelte index 8aef8a3e29..db5ec790d5 100644 --- a/sites/svelte.dev/src/routes/tutorial/[slug]/TableOfContents.svelte +++ b/sites/svelte.dev/src/routes/tutorial/[slug]/TableOfContents.svelte @@ -14,7 +14,6 @@