mirror of https://github.com/sveltejs/svelte
Richard Harris
6 years ago
parent
771d9eed06
commit
2edb5df09c
@ -1,34 +0,0 @@
|
||||
<script>
|
||||
const todos = [
|
||||
{
|
||||
description: "Buy some milk",
|
||||
done: true
|
||||
},
|
||||
{
|
||||
description: "Do the laundry",
|
||||
done: true
|
||||
},
|
||||
{
|
||||
description: "Find life's true purpose",
|
||||
done: false
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style>
|
||||
input[type="text"] {
|
||||
width: 20em;
|
||||
max-width: calc(100% - 2em);
|
||||
}
|
||||
|
||||
.done {
|
||||
opacity: 0.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
{#each todos as todo}
|
||||
<div class="todo {todo.done ? 'done': ''}">
|
||||
<input type=checkbox bind:checked={todo.done}>
|
||||
<input type=text bind:value={todo.description}>
|
||||
</div>
|
||||
{/each}
|
||||
@ -1,5 +0,0 @@
|
||||
<script>
|
||||
let name = 'world';
|
||||
</script>
|
||||
|
||||
<h1>Hello {name}!</h1>
|
||||
@ -1,11 +0,0 @@
|
||||
<script>
|
||||
let count = 0;
|
||||
|
||||
function increment() {
|
||||
count += 1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button on:click={increment}>
|
||||
clicks: {count}
|
||||
</button>
|
||||
@ -1,12 +0,0 @@
|
||||
<script>
|
||||
import Foo from './Foo.svelte';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
p {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>this <p> is bold but not red</p>
|
||||
<Foo/>
|
||||
@ -1,7 +0,0 @@
|
||||
<style>
|
||||
p {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>this <p> is red but not bold</p>
|
||||
@ -1,184 +0,0 @@
|
||||
[
|
||||
{
|
||||
"name": "Basics",
|
||||
"examples": [
|
||||
{
|
||||
"slug": "hello-world",
|
||||
"title": "Hello World!"
|
||||
},
|
||||
{
|
||||
"slug": "if-blocks",
|
||||
"title": "If blocks"
|
||||
},
|
||||
{
|
||||
"slug": "each-blocks",
|
||||
"title": "Each blocks"
|
||||
},
|
||||
{
|
||||
"slug": "scoped-styles",
|
||||
"title": "Scoped styles"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Two-way bindings",
|
||||
"examples": [
|
||||
{
|
||||
"slug": "binding-input-text",
|
||||
"title": "Text input"
|
||||
},
|
||||
{
|
||||
"slug": "binding-input-numeric",
|
||||
"title": "Numeric input"
|
||||
},
|
||||
{
|
||||
"slug": "binding-textarea",
|
||||
"title": "Textarea"
|
||||
},
|
||||
{
|
||||
"slug": "binding-input-checkbox",
|
||||
"title": "Checkbox input"
|
||||
},
|
||||
{
|
||||
"slug": "binding-input-checkbox-group",
|
||||
"title": "Checkbox input (grouped)"
|
||||
},
|
||||
{
|
||||
"slug": "binding-input-radio",
|
||||
"title": "Radio input"
|
||||
},
|
||||
{
|
||||
"slug": "binding-media-elements",
|
||||
"title": "Media elements"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Nested components",
|
||||
"examples": [
|
||||
{
|
||||
"slug": "nested-components",
|
||||
"title": "Nested components"
|
||||
},
|
||||
{
|
||||
"slug": "modal-with-slot",
|
||||
"title": "Modal with <slot>"
|
||||
},
|
||||
{
|
||||
"slug": "self-references",
|
||||
"title": "Self-references"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "SVG and dataviz",
|
||||
"examples": [
|
||||
{
|
||||
"slug": "svg-clock",
|
||||
"title": "SVG Clock"
|
||||
},
|
||||
{
|
||||
"slug": "line-chart",
|
||||
"title": "Line/area chart"
|
||||
},
|
||||
{
|
||||
"slug": "bar-chart",
|
||||
"title": "Bar chart"
|
||||
},
|
||||
{
|
||||
"slug": "scatterplot",
|
||||
"title": "Scatterplot"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Transitions",
|
||||
"examples": [
|
||||
{
|
||||
"slug": "transitions-fade",
|
||||
"title": "Simple fade"
|
||||
},
|
||||
{
|
||||
"slug": "transitions-fly",
|
||||
"title": "Parameterised"
|
||||
},
|
||||
{
|
||||
"slug": "transitions-in-out",
|
||||
"title": "In and out"
|
||||
},
|
||||
{
|
||||
"slug": "transitions-custom",
|
||||
"title": "Custom CSS"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Motion",
|
||||
"examples": [
|
||||
{
|
||||
"slug": "motion-spring",
|
||||
"title": "Spring physics"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Async data",
|
||||
"examples": [
|
||||
{
|
||||
"slug": "await-block",
|
||||
"title": "Await block"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "7guis",
|
||||
"examples": [
|
||||
{
|
||||
"slug": "7guis-counter",
|
||||
"title": "Counter"
|
||||
},
|
||||
{
|
||||
"slug": "7guis-temperature",
|
||||
"title": "Temperature converter"
|
||||
},
|
||||
{
|
||||
"slug": "7guis-flight-booker",
|
||||
"title": "Flight booker"
|
||||
},
|
||||
{
|
||||
"slug": "7guis-timer",
|
||||
"title": "Timer"
|
||||
},
|
||||
{
|
||||
"slug": "7guis-crud",
|
||||
"title": "CRUD"
|
||||
},
|
||||
{
|
||||
"slug": "7guis-circles",
|
||||
"title": "Circles"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "<:Window>",
|
||||
"examples": [
|
||||
{
|
||||
"slug": "parallax",
|
||||
"title": "Parallax"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Miscellaneous",
|
||||
"examples": [
|
||||
{
|
||||
"slug": "hacker-news",
|
||||
"title": "Hacker News"
|
||||
},
|
||||
{
|
||||
"slug": "immutable",
|
||||
"title": "Immutable data"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "SVG transitions"
|
||||
}
|
||||
@ -1,5 +1,2 @@
|
||||
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`;
|
||||
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`;
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "Modal"
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "Hacker News"
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "Immutable data"
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "Miscellaneous"
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
export function process_example(files) {
|
||||
return files
|
||||
.map(file => {
|
||||
const [name, type] = file.name.split('.');
|
||||
return { name, type, source: file.source };
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (a.name === 'App' && a.type === 'svelte') return -1;
|
||||
if (b.name === 'App' && b.type === 'svelte') return 1;
|
||||
|
||||
if (a.type === b.type) return a.name < b.name ? -1 : 1;
|
||||
|
||||
if (a.type === 'svelte') return -1;
|
||||
if (b.type === 'svelte') return 1;
|
||||
});
|
||||
}
|
||||
Loading…
Reference in new issue