diff --git a/site/content/examples/homepage-demo-hello-world/App.html b/site/content/examples/homepage-demo-hello-world/App.html new file mode 100644 index 0000000000..543c6059c4 --- /dev/null +++ b/site/content/examples/homepage-demo-hello-world/App.html @@ -0,0 +1 @@ +

Hello {name}!

\ No newline at end of file diff --git a/site/content/examples/homepage-demo-hello-world/data.json5 b/site/content/examples/homepage-demo-hello-world/data.json5 new file mode 100644 index 0000000000..3949aecc6a --- /dev/null +++ b/site/content/examples/homepage-demo-hello-world/data.json5 @@ -0,0 +1,3 @@ +{ + "name": "world" +} \ No newline at end of file diff --git a/site/content/examples/homepage-demo-reactivity/App.html b/site/content/examples/homepage-demo-reactivity/App.html new file mode 100644 index 0000000000..9d1b2757c0 --- /dev/null +++ b/site/content/examples/homepage-demo-reactivity/App.html @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/site/content/examples/homepage-demo-reactivity/data.json5 b/site/content/examples/homepage-demo-reactivity/data.json5 new file mode 100644 index 0000000000..9e26dfeeb6 --- /dev/null +++ b/site/content/examples/homepage-demo-reactivity/data.json5 @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/site/content/examples/homepage-demo-scoped-styles/App.html b/site/content/examples/homepage-demo-scoped-styles/App.html new file mode 100644 index 0000000000..7a372268d1 --- /dev/null +++ b/site/content/examples/homepage-demo-scoped-styles/App.html @@ -0,0 +1,12 @@ + + + + +

this <p> is bold but not red

+ \ No newline at end of file diff --git a/site/content/examples/homepage-demo-scoped-styles/Foo.html b/site/content/examples/homepage-demo-scoped-styles/Foo.html new file mode 100644 index 0000000000..eb1dd82f7f --- /dev/null +++ b/site/content/examples/homepage-demo-scoped-styles/Foo.html @@ -0,0 +1,7 @@ + + +

this <p> is red but not bold

\ No newline at end of file diff --git a/site/content/examples/homepage-demo-scoped-styles/data.json5 b/site/content/examples/homepage-demo-scoped-styles/data.json5 new file mode 100644 index 0000000000..9e26dfeeb6 --- /dev/null +++ b/site/content/examples/homepage-demo-scoped-styles/data.json5 @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/site/content/examples/homepage-demo-transitions/App.html b/site/content/examples/homepage-demo-transitions/App.html new file mode 100644 index 0000000000..485bbf2558 --- /dev/null +++ b/site/content/examples/homepage-demo-transitions/App.html @@ -0,0 +1,74 @@ + + + + +{#if visible} + + + + + + + +
+ {#each 'SVELTE' as char, i} + {char} + {/each} +
+{/if} + + + + \ No newline at end of file diff --git a/site/content/examples/homepage-demo-transitions/custom-transitions.js b/site/content/examples/homepage-demo-transitions/custom-transitions.js new file mode 100644 index 0000000000..63f0af87e4 --- /dev/null +++ b/site/content/examples/homepage-demo-transitions/custom-transitions.js @@ -0,0 +1,34 @@ +import { cubicOut } from 'svelte/easing'; + +export function expand(node, params) { + const { + delay = 0, + duration = 400, + easing = cubicOut + } = params; + + const w = parseFloat(getComputedStyle(node).strokeWidth); + + return { + delay, + duration, + easing, + css: t => `opacity: ${t}; stroke-width: ${t * w}` + }; +} + +export function blur(node, params) { + const { + b = 10, + delay = 0, + duration = 400, + easing = cubicOut + } = params; + + return { + delay, + duration, + easing, + css: (t, u) => `opacity: ${t}; filter: blur(${u * b}px);` + }; +} \ No newline at end of file diff --git a/site/content/examples/homepage-demo-transitions/data.json5 b/site/content/examples/homepage-demo-transitions/data.json5 new file mode 100644 index 0000000000..9e26dfeeb6 --- /dev/null +++ b/site/content/examples/homepage-demo-transitions/data.json5 @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/site/content/examples/homepage-demo-transitions/shape.js b/site/content/examples/homepage-demo-transitions/shape.js new file mode 100644 index 0000000000..032a58bf24 --- /dev/null +++ b/site/content/examples/homepage-demo-transitions/shape.js @@ -0,0 +1,5 @@ +export const inner = `M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45`; + +export const outer = ` + M65,34 L37,52 A1 1 0 0 0 44 60 L70.5,44.5 A1 1 0 0 0 65,34Z + M64,67 L36,85 A1 1 0 0 0 42 94 L68,77.5 A1 1 0 0 0 64,67Z`; \ No newline at end of file diff --git a/site/src/routes/api/examples/[slug].js b/site/src/routes/api/examples/[slug].js index 581c8f6086..221475b6b2 100644 --- a/site/src/routes/api/examples/[slug].js +++ b/site/src/routes/api/examples/[slug].js @@ -53,22 +53,21 @@ function createExample(slug) { export function get(req, res) { const { slug } = req.params; - if (!slugs.has(slug)) { + try { + if (!lookup.has(slug) || process.env.NODE_ENV !== 'production') { + lookup.set(slug, createExample(slug)); + } + + res.writeHead(200, { + 'Content-Type': 'application/json' + }); + + res.end(lookup.get(slug)); + } catch (err) { res.writeHead(404, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ error: 'not found' })); - return; } - - if (!lookup.has(slug) || process.env.NODE_ENV !== 'production') { - lookup.set(slug, createExample(slug)); - } - - res.writeHead(200, { - 'Content-Type': 'application/json' - }); - - res.end(lookup.get(slug)); } \ No newline at end of file diff --git a/site/src/routes/index.html b/site/src/routes/index.html index 7fde5c8bb9..6b03fc89bd 100644 --- a/site/src/routes/index.html +++ b/site/src/routes/index.html @@ -182,7 +182,7 @@ @@ -193,8 +193,8 @@ @@ -205,8 +205,8 @@ @@ -217,8 +217,8 @@ diff --git a/site/src/routes/repl/_components/Repl.html b/site/src/routes/repl/_components/Repl.html index edca340799..4ea5fded60 100644 --- a/site/src/routes/repl/_components/Repl.html +++ b/site/src/routes/repl/_components/Repl.html @@ -68,7 +68,7 @@ workers.compiler.postMessage({ type: 'init', version }); workers.compiler.onmessage = event => { js = event.data.js; - css = event.data.css; + css = event.data.css || `/* Add a