mirror of
https://github.com/kevin-DL/sapper-template.git
synced 2026-01-14 03:04:40 +00:00
realign with 0.15
This commit is contained in:
Rich Harris
@@ -1,7 +1,7 @@
|
||||
import { init } from 'sapper/runtime.js';
|
||||
import { routes } from './manifest/client.js';
|
||||
import { manifest } from './manifest/client.js';
|
||||
|
||||
init({
|
||||
target: document.querySelector('#sapper'),
|
||||
routes
|
||||
manifest
|
||||
});
|
||||
@@ -2,13 +2,13 @@ import sirv from 'sirv';
|
||||
import polka from 'polka';
|
||||
import sapper from 'sapper';
|
||||
import compression from 'compression';
|
||||
import { routes } from './manifest/server.js';
|
||||
import { manifest } from './manifest/server.js';
|
||||
|
||||
polka() // You can also use Express
|
||||
.use(
|
||||
compression({ threshold: 0 }),
|
||||
sirv('assets'),
|
||||
sapper({ routes })
|
||||
sapper({ manifest })
|
||||
)
|
||||
.listen(process.env.PORT)
|
||||
.catch(err => {
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
<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 hot module reloading.</strong></p>
|
||||
|
||||
<style>
|
||||
h1, figure, p {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.8em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<h1>{status}</h1>
|
||||
|
||||
<p>{error.message}</p>
|
||||
<pre>{error.stack}</pre>
|
||||
|
||||
<style>
|
||||
h1, p {
|
||||
|
||||
24
routes/_layout.html
Normal file
24
routes/_layout.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<Nav segment={child.segment}/>
|
||||
|
||||
<main>
|
||||
<svelte:component this={child.component} {...child.props}/>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
position: relative;
|
||||
max-width: 56em;
|
||||
background-color: white;
|
||||
padding: 2em;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
Nav: '../components/Nav.html'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,32 +0,0 @@
|
||||
<svelte:head>
|
||||
<title>Blog</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Recent posts</h1>
|
||||
|
||||
<ul>
|
||||
{#each posts as post}
|
||||
<!-- we're using the non-standard `rel=prefetch` attribute to
|
||||
tell Sapper to load the data for the page as soon as
|
||||
the user hovers over the link or taps it, instead of
|
||||
waiting for the 'click' event -->
|
||||
<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
|
||||
{/each}
|
||||
</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>
|
||||
@@ -1 +1,32 @@
|
||||
<svelte:component this={child.component} {...child.props}/>
|
||||
<svelte:head>
|
||||
<title>Blog</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Recent posts</h1>
|
||||
|
||||
<ul>
|
||||
{#each posts as post}
|
||||
<!-- we're using the non-standard `rel=prefetch` attribute to
|
||||
tell Sapper to load the data for the page as soon as
|
||||
the user hovers over the link or taps it, instead of
|
||||
waiting for the 'click' event -->
|
||||
<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
|
||||
{/each}
|
||||
</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>
|
||||
@@ -1,24 +1,46 @@
|
||||
<Nav segment={child.segment}/>
|
||||
<svelte:head>
|
||||
<title>Sapper project template</title>
|
||||
</svelte:head>
|
||||
|
||||
<main>
|
||||
<svelte:component this={child.component} {...child.props}/>
|
||||
</main>
|
||||
<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 hot module reloading.</strong></p>
|
||||
|
||||
<style>
|
||||
main {
|
||||
position: relative;
|
||||
max-width: 56em;
|
||||
background-color: white;
|
||||
padding: 2em;
|
||||
h1, figure, p {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
Nav: '../components/Nav.html'
|
||||
h1 {
|
||||
font-size: 2.8em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user