totole/sapper-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper-template.git synced 2026-01-12 02:15:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

experimental new structure

Browse Source
This commit is contained in:
Rich Harris
2018-05-04 22:36:17 -04:00
parent a08258c8da
commit 98813dd8fd
13 changed files with 71 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/App.html Normal file
View File

@@ -0,0 +1,31 @@
<Nav page={
props.path === '/' ? 'home' :
props.path === '/about' ? 'about' :
props.path.startsWith('/blog') ? 'blog' :
null
}/>
<main>
<svelte:component this={Page} {...props}/>
</main>
<style>
main {
position: relative;
max-width: 56em;
background-color: white;
padding: 2em;
margin: 0 auto;
box-sizing: border-box;
}
</style>
<script>
import Nav from '../components/Nav.html';
export default {
components: {
Nav
}
};
</script>

10
app/client.js
View File

@@ -1,7 +1,9 @@
import { init } from 'sapper/runtime.js';
import { routes } from './manifest/client.js';
import App from './App.html';
// `routes` is an array of route objects injected by Sapper
init(document.querySelector('#sapper'), routes);
if (module.hot) module.hot.accept();
init({
target: document.querySelector('#sapper'),
routes,
App
});

6
app/server.js
View File

@@ -3,11 +3,15 @@ import compression from 'compression';
import sapper from 'sapper';
import serve from 'serve-static';
import { routes } from './manifest/server.js';
import App from './App.html';
polka() // You can also use Express
.use(
compression({ threshold: 0 }),
serve('assets'),
sapper({ routes })
sapper({
routes,
App
})
)
.listen(process.env.PORT);

9
assets/global.css
View File

@@ -6,15 +6,6 @@ body {
color: #333;
}
main {
position: relative;
max-width: 56em;
background-color: white;
padding: 2em;
margin: 0 auto;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em 0;
font-weight: 400;

0
routes/_components/Nav.html → components/Nav.html
View File

2
package.json
View File

@@ -17,7 +17,7 @@
"polka": "^0.3.4",
"sapper": "^0.10.0",
"serve-static": "^1.13.1",
"svelte": "^2.0.0",
"svelte": "^2.4.4",
"svelte-loader": "^2.3.3",
"webpack": "^4.1.0"
}

18
routes/4xx.html
View File

@@ -2,11 +2,9 @@
<title>Not found</title>
</svelte:head>
<Layout page='home'>
<h1>Not found</h1>
<h1>Not found</h1>
<p>Please check the URL</p>
</Layout>
<p>Please check the URL</p>
<style>
h1, p {
@@ -30,14 +28,4 @@
font-size: 4em;
}
}
</style>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>
</style>

16
routes/5xx.html
View File

@@ -2,9 +2,7 @@
<title>Internal server error</title>
</svelte:head>
<Layout page='home'>
<h1>Internal server error</h1>
</Layout>
<h1>Internal server error</h1>
<style>
h1 {
@@ -21,14 +19,4 @@
font-size: 4em;
}
}
</style>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>
</style>

15
routes/_components/Layout.html
View File

@@ -1,15 +0,0 @@
<Nav page={page}/>
<main>
<slot></slot>
</main>
<script>
import Nav from './Nav.html';
export default {
components: {
Nav
}
};
</script>

16
routes/about.html
View File

@@ -2,18 +2,6 @@
<title>About</title>
</svelte:head>
<Layout page='about'>
<h1>About this site</h1>
<h1>About this site</h1>
<p>This is the 'about' page. There's not much here.</p>
</Layout>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>
<p>This is the 'about' page. There's not much here.</p>

16
routes/blog/[slug].html
View File

@@ -2,13 +2,11 @@
<title>{post.title}</title>
</svelte:head>
<Layout page='blog'>
<h1>{post.title}</h1>
<h1>{post.title}</h1>
<div class='content'>
{@html post.html}
</div>
</Layout>
<div class='content'>
{@html post.html}
</div>
<style>
/*
@@ -47,13 +45,7 @@
</style>
<script>
import Layout from '../_components/Layout.html';
export default {
components: {
Layout
},
preload({ params, query }) {
// the `slug` parameter is available because this file
// is called [slug].html

28
routes/blog/index.html
View File

@@ -2,19 +2,17 @@
<title>Blog</title>
</svelte:head>
<Layout page='blog'>
<h1>Recent posts</h1>
<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>
</Layout>
<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 {
@@ -24,13 +22,7 @@
</style>
<script>
import Layout from '../_components/Layout.html';
export default {
components: {
Layout
},
preload({ params, query }) {
return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
return { posts };

26
routes/index.html
View File

@@ -2,16 +2,14 @@
<title>Sapper project template</title>
</svelte:head>
<Layout page='home'>
<h1>Great success!</h1>
<h1>Great success!</h1>
<figure>
<img alt='Borat' src='great-success.png'>
<figcaption>HIGH FIVE!</figcaption>
</figure>
<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>
</Layout>
<p><strong>Try editing this file (routes/index.html) to test hot module reloading.</strong></p>
<style>
h1, figure, p {
@@ -45,14 +43,4 @@
font-size: 4em;
}
}
</style>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>
</style>