diff --git a/sites/svelte.dev/src/lib/components/ReplWidget.svelte b/sites/svelte.dev/src/lib/components/ReplWidget.svelte index 2160136fe8..8b03a7e910 100644 --- a/sites/svelte.dev/src/lib/components/ReplWidget.svelte +++ b/sites/svelte.dev/src/lib/components/ReplWidget.svelte @@ -2,7 +2,7 @@ import { browser } from '$app/environment'; import { process_example } from '$lib/utils/examples'; import Repl from '@sveltejs/repl'; - import { onMount } from 'svelte'; + import { getContext, onMount } from 'svelte'; export let version = '3'; export let gist = null; @@ -57,15 +57,12 @@ repl.set({ components }); }); } else if (example) { - fetch(`/examples/api/${example}.json`).then(async (response) => { - if (response.ok) { - const data = await response.json(); - const components = process_example(data.files); - - repl.set({ - components, - }); - } + const components = process_example( + getContext('repl_widget_examples').find(({ id }) => id === example).files + ); + + repl.set({ + components, }); } } diff --git a/sites/svelte.dev/src/routes/+page.js b/sites/svelte.dev/src/routes/+page.js deleted file mode 100644 index 189f71e2e1..0000000000 --- a/sites/svelte.dev/src/routes/+page.js +++ /dev/null @@ -1 +0,0 @@ -export const prerender = true; diff --git a/sites/svelte.dev/src/routes/+page.server.js b/sites/svelte.dev/src/routes/+page.server.js new file mode 100644 index 0000000000..e171f25a36 --- /dev/null +++ b/sites/svelte.dev/src/routes/+page.server.js @@ -0,0 +1,43 @@ +import { get_example } from '$lib/server/examples'; +import { get_examples_data, get_examples_list } from '$lib/server/examples/get-examples'; + +export const prerender = true; + +const examples = [ + { + id: 'hello-world', + title: 'Hello World', + description: 'Svelte components are built on top of HTML. Just add data.', + }, + { + id: 'nested-components', + title: 'Scoped CSS', + description: + 'CSS is component-scoped by default — no more style collisions or specificity wars. Or you can use your favourite CSS-in-JS library.', + }, + { + id: 'reactive-assignments', + title: 'Reactivity', + description: + 'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.', + }, + { + id: 'svg-transitions', + title: 'Transitions', + description: + 'Build beautiful UIs with a powerful, performant transition engine built right into the framework.', + }, +]; + +export const load = () => { + const examples_data = get_examples_data(); + + return { + examples: examples.map(({ description, id, title }) => ({ + id, + title, + description, + files: get_example(examples_data, id).files, + })), + }; +}; diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte index 98280d76e9..15d5566104 100644 --- a/sites/svelte.dev/src/routes/+page.svelte +++ b/sites/svelte.dev/src/routes/+page.svelte @@ -1,11 +1,16 @@ diff --git a/sites/svelte.dev/src/routes/_components/Demo.svelte b/sites/svelte.dev/src/routes/_components/Demo.svelte index 3dad67e71a..a230e10aa0 100644 --- a/sites/svelte.dev/src/routes/_components/Demo.svelte +++ b/sites/svelte.dev/src/routes/_components/Demo.svelte @@ -1,34 +1,11 @@
@@ -48,10 +25,12 @@ more  examples - + {#if selected} + + {/if} -

{@html selected.description}

+

{@html selected?.description}