totole/sapper-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper-template.git synced 2026-01-22 14:35:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

start updating template for v3

Browse Source
This commit is contained in:
Rich Harris
2019-01-31 14:44:24 -05:00
parent be4747861e
commit 8d259871f1
6 changed files with 84 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package_template.json
View File

@@ -19,7 +19,7 @@
"devDependencies": { "devDependencies": {
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"sapper": "^0.24.2", "sapper": "^0.24.2",
"svelte": "^2.0.0" "svelte": "^3.0.0"
}, },
"merge-configs": { "merge-configs": {
"rollup": { "rollup": {

33
src/routes/_error.html
View File

@@ -1,14 +1,9 @@
<svelte:head> <script>
<title>{status}</title> export let status;
</svelte:head> export let error;
<h1>{status}</h1> const dev = process.env.NODE_ENV === 'development';
</script>
<p>{error.message}</p>
{#if dev && error.stack}
<pre>{error.stack}</pre>
{/if}
<style> <style>
h1, p { h1, p {
@@ -32,10 +27,14 @@
} }
</style> </style>
<script> <svelte:head>
export default { <title>{status}</title>
helpers: { </svelte:head>
dev: process.env.NODE_ENV === 'development'
} <h1>{status}</h1>
};
</script> <p>{error.message}</p>
{#if dev && error.stack}
<pre>{error.stack}</pre>
{/if}

20
src/routes/_layout.html
View File

@@ -1,8 +1,8 @@
<Nav segment={child.segment}/> <script>
import Nav from '../components/Nav.html';
<main> export let child;
<svelte:component this={child.component} {...child.props}/> </script>
</main>
<style> <style>
main { main {
@@ -15,10 +15,8 @@
} }
</style> </style>
<script> <Nav segment={child.segment}/>
export default {
components: { <main>
Nav: '../components/Nav.html' <svelte:component this={child.component} {...child.props}/>
} </main>
};
</script>

46
src/routes/blog/[slug].html
View File

@@ -1,12 +1,21 @@
<svelte:head> <script context="module">
<title>{post.title}</title> export async function preload({ params, query }) {
</svelte:head> // the `slug` parameter is available because
// this file is called [slug].html
const res = await this.fetch(`blog/${params.slug}.json`);
const data = await res.json();
<h1>{post.title}</h1> if (res.status === 200) {
return { post: data };
} else {
this.error(res.status, data.message);
}
}
</script>
<div class='content'> <script>
{@html post.html} export let post;
</div> </script>
<style> <style>
/* /*
@@ -44,19 +53,12 @@
} }
</style> </style>
<script> <svelte:head>
export default { <title>{post.title}</title>
async preload({ params, query }) { </svelte:head>
// the `slug` parameter is available because
// this file is called [slug].html
const res = await this.fetch(`blog/${params.slug}.json`);
const data = await res.json();
if (res.status === 200) { <h1>{post.title}</h1>
return { post: data };
} else { <div class='content'>
this.error(res.status, data.message); {@html post.html}
} </div>
}
};
</script>

38
src/routes/blog/index.html
View File

@@ -1,3 +1,22 @@
<script context="module">
export function preload({ params, query }) {
return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
return { posts };
});
}
</script>
<script>
export let posts;
</script>
<style>
ul {
margin: 0 0 1em 0;
line-height: 1.5;
}
</style>
<svelte:head> <svelte:head>
<title>Blog</title> <title>Blog</title>
</svelte:head> </svelte:head>
@@ -12,21 +31,4 @@
waiting for the 'click' event --> waiting for the 'click' event -->
<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li> <li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
{/each} {/each}
</ul> </ul>
<style>
ul {
margin: 0 0 1em 0;
line-height: 1.5;
}
</style>
<script>
export default {
preload({ params, query }) {
return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
return { posts };
});
}
};
</script>

28
src/routes/index.html
View File

@@ -1,16 +1,3 @@
<svelte:head>
<title>Sapper project template</title>
</svelte:head>
<h1>Great success!</h1>
<figure>
<img alt='Borat' src='great-success.png'>
<figcaption>HIGH FIVE!</figcaption>
</figure>
<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>
<style> <style>
h1, figure, p { h1, figure, p {
text-align: center; text-align: center;
@@ -43,4 +30,17 @@
font-size: 4em; font-size: 4em;
} }
} }
</style> </style>
<svelte:head>
<title>Sapper project template</title>
</svelte:head>
<h1>Great success!</h1>
<figure>
<img alt='Borat' src='great-success.png'>
<figcaption>HIGH FIVE!</figcaption>
</figure>
<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>