totole/sapper-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper-template.git synced 2026-01-22 06:15:18 +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>

14
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

14
routes/blog/index.html
View File

@@ -2,10 +2,9 @@
<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
@@ -13,8 +12,7 @@
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 };

20
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>