msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

put homepage demos into the repo

Browse Source
pull/1901/head
Rich Harris 6 years ago
parent 8e826e618d
commit 4016f4ff71
15 changed files with 186 additions and 31 deletions
Show Stats Download Patch File Download Diff File

1
site/content/examples/homepage-demo-hello-world/App.html
Unescape View File

@ -0,0 +1 @@
<h1>Hello {name}!</h1>

3
site/content/examples/homepage-demo-hello-world/data.json5
Unescape View File

@ -0,0 +1,3 @@
{
"name": "world"
}

11
site/content/examples/homepage-demo-reactivity/App.html
Unescape View File

@ -0,0 +1,11 @@
<script>
let count = 0;
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
clicks: {count}
</button>

1
site/content/examples/homepage-demo-reactivity/data.json5
Unescape View File

@ -0,0 +1 @@
{}

12
site/content/examples/homepage-demo-scoped-styles/App.html
Unescape View File

@ -0,0 +1,12 @@
<script>
import Foo from './Foo.html';
</script>
<style>
p {
font-weight: bold;
}
</style>
<p>this &lt;p&gt; is bold but not red</p>
<Foo/>

7
site/content/examples/homepage-demo-scoped-styles/Foo.html
Unescape View File

@ -0,0 +1,7 @@
<style>
p {
color: red;
}
</style>
<p>this &lt;p&gt; is red but not bold</p>

1
site/content/examples/homepage-demo-scoped-styles/data.json5
Unescape View File

@ -0,0 +1 @@
{}

74
site/content/examples/homepage-demo-transitions/App.html
Unescape View File

@ -0,0 +1,74 @@
<script>
import { quintOut } from 'svelte/easing';
import { fade, draw, fly } from 'svelte/transition';
import { expand, blur } from './custom-transitions.js';
import { inner, outer } from './shape.js';
let visible = true;
</script>
<style>
svg {
width: 100%;
height: 100%;
}
path {
fill: white;
opacity: 1;
}
label {
position: absolute;
top: 1em;
left: 1em;
}
.centered {
font-size: 20vw;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-family: 'Overpass';
letter-spacing: 0.12em;
color: #676778;
font-weight: 100;
}
.centered span {
will-change: filter;
}
</style>
{#if visible}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
<g out:fade="{{duration: 200}}" opacity=0.2>
<path
in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"
style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
d={outer}
/>
<path
in:draw="{{duration: 1000}}"
style="stroke:#ff3e00; stroke-width: 1.5"
d={inner}
/>
</g>
</svg>
<div class="centered" out:fly="{{y: -20, duration: 800}}">
{#each 'SVELTE' as char, i}
<span
in:blur="{{delay: 1000 + i * 150, duration: 800}}"
>{char}</span>
{/each}
</div>
{/if}
<label>
<input type="checkbox" bind:checked={visible}>
toggle me
</label>
<link href="https://fonts.googleapis.com/css?family=Overpass:100" rel="stylesheet">

34
site/content/examples/homepage-demo-transitions/custom-transitions.js
Unescape View File

@ -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);`
};
}

1
site/content/examples/homepage-demo-transitions/data.json5
Unescape View File

@ -0,0 +1 @@
{}

5
site/content/examples/homepage-demo-transitions/shape.js
Unescape View File

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

23
site/src/routes/api/examples/[slug].js
Unescape View File

@ -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));
}

14
site/src/routes/index.html
Unescape View File

@ -182,7 +182,7 @@
<iframe
title="Hello world example"
src="/repl/embed?gist=0eb9e3a2d22b981b67924c326ed1293a"
src="/repl/embed?demo=homepage-demo-hello-world"
scrolling="no"
></iframe>
</section>
@ -193,8 +193,8 @@
</div>
<iframe
title="Scoped styles example"
src="/repl/embed?gist=ea123e7c4e7edc809670eb2dcab25b56"
title="Hello world example"
src="/repl/embed?demo=homepage-demo-scoped-styles"
scrolling="no"
></iframe>
</section>
@ -205,8 +205,8 @@
</div>
<iframe
title="Reactivity example"
src="/repl/embed?gist=7b7908b677eb0c374e17f1c5b6287e6e"
title="Hello world example"
src="/repl/embed?demo=homepage-demo-reactivity"
scrolling="no"
></iframe>
</section>
@ -217,8 +217,8 @@
</div>
<iframe
title="Transitions example"
src="/repl/embed?gist=c5336bba9eb1195bb2403aa04ff25186"
title="Hello world example"
src="/repl/embed?demo=homepage-demo-transitions"
scrolling="no"
></iframe>
</section>

2
site/src/routes/repl/_components/Repl.html
Unescape View File

@ -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 <style> tag to see compiled CSS */`;
if (event.data.props) props = event.data.props;
};

28
site/src/routes/repl/embed.html
Unescape View File

@ -4,11 +4,7 @@
import Repl from './_components/Repl.html';
export let query;
let version = query.version;
let gist_id = query.gist;
let gist;
let version = query.version || 'alpha';
let app = {
components: [],
@ -18,15 +14,14 @@
let name = 'loading...';
onMount(() => {
fetch(`https://unpkg.com/svelte@${version || 'alpha'}/package.json`)
fetch(`https://unpkg.com/svelte@${version}/package.json`)
.then(r => r.json())
.then(pkg => {
version = pkg.version;
});
if (gist_id) {
fetch(`gist/${gist_id}`).then(r => r.json()).then(data => {
gist = data;
if (query.gist) {
fetch(`gist/${query.gist}`).then(r => r.json()).then(data => {
const { id, description, files } = data;
name = description;
@ -63,8 +58,19 @@
app = { components, values };
});
} else {
// TODO err...
} else if (query.demo) {
const url = `api/examples/${query.demo}`;
fetch(url).then(async response => {
if (response.ok) {
const data = await response.json();
app = {
values: tryParseData(data.json5) || {}, // TODO make this more error-resistant
components: data.components
};
}
});
}
});

Write Preview
Loading…
Cancel
Save