totole/sapper-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper-template.git synced 2026-01-20 21:45:10 +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 { init } from 'sapper/runtime.js';
import { routes } from './manifest/client.js'; import { routes } from './manifest/client.js';
import App from './App.html';
// `routes` is an array of route objects injected by Sapper init({
init(document.querySelector('#sapper'), routes); target: document.querySelector('#sapper'),
routes,
if (module.hot) module.hot.accept(); App
});

6
app/server.js
View File

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

9
assets/global.css
View File

@@ -6,15 +6,6 @@ body {
color: #333; 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 { h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
font-weight: 400; 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", "polka": "^0.3.4",
"sapper": "^0.10.0", "sapper": "^0.10.0",
"serve-static": "^1.13.1", "serve-static": "^1.13.1",
"svelte": "^2.0.0", "svelte": "^2.4.4",
"svelte-loader": "^2.3.3", "svelte-loader": "^2.3.3",
"webpack": "^4.1.0" "webpack": "^4.1.0"
} }

16
routes/4xx.html
View File

@@ -2,11 +2,9 @@
<title>Not found</title> <title>Not found</title>
</svelte:head> </svelte:head>
<Layout page='home'> <h1>Not found</h1>
<h1>Not found</h1>
<p>Please check the URL</p> <p>Please check the URL</p>
</Layout>
<style> <style>
h1, p { h1, p {
@@ -31,13 +29,3 @@
} }
} }
</style> </style>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>

14
routes/5xx.html
View File

@@ -2,9 +2,7 @@
<title>Internal server error</title> <title>Internal server error</title>
</svelte:head> </svelte:head>
<Layout page='home'> <h1>Internal server error</h1>
<h1>Internal server error</h1>
</Layout>
<style> <style>
h1 { h1 {
@@ -22,13 +20,3 @@
} }
} }
</style> </style>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>

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> <title>About</title>
</svelte:head> </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> <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>

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

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

28
routes/blog/index.html
View File

@@ -2,19 +2,17 @@
<title>Blog</title> <title>Blog</title>
</svelte:head> </svelte:head>
<Layout page='blog'> <h1>Recent posts</h1>
<h1>Recent posts</h1>
<ul> <ul>
{#each posts as post} {#each posts as post}
<!-- we're using the non-standard `rel=prefetch` attribute to <!-- we're using the non-standard `rel=prefetch` attribute to
tell Sapper to load the data for the page as soon as tell Sapper to load the data for the page as soon as
the user hovers over the link or taps it, instead of the user hovers over the link or taps it, instead of
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>
</Layout>
<style> <style>
ul { ul {
@@ -24,13 +22,7 @@
</style> </style>
<script> <script>
import Layout from '../_components/Layout.html';
export default { export default {
components: {
Layout
},
preload({ params, query }) { preload({ params, query }) {
return this.fetch(`blog.json`).then(r => r.json()).then(posts => { return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
return { posts }; return { posts };

24
routes/index.html
View File

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