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

Merge pull request #57 from sveltejs/layout

Browse Source 
[WIP] experimental new structure
This commit is contained in:
Rich Harris
2018-05-05 10:11:26 -04:00
committed by GitHub
parent a08258c8da 7f64e4cf8e
commit 9d6dd4af02
13 changed files with 78 additions and 127 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

14
package.json
View File

@@ -6,19 +6,21 @@
"dev": "sapper dev", "dev": "sapper dev",
"build": "sapper build", "build": "sapper build",
"export": "sapper export", "export": "sapper export",
"start": "sapper start", "start": "node build",
"cy:run": "cypress run", "cy:run": "cypress run",
"cy:open": "cypress open", "cy:open": "cypress open",
"test": "run-p --race dev cy:run" "test": "run-p --race dev cy:run"
}, },
"dependencies": { "dependencies": {
"compression": "^1.7.1", "compression": "^1.7.1",
"npm-run-all": "^4.1.2",
"polka": "^0.3.4", "polka": "^0.3.4",
"sapper": "^0.10.0", "sapper": "^0.12.0",
"serve-static": "^1.13.1", "serve-static": "^1.13.1"
},
"devDependencies": {
"npm-run-all": "^4.1.2",
"svelte": "^2.0.0", "svelte": "^2.0.0",
"svelte-loader": "^2.3.3", "svelte-loader": "^2.9.0",
"webpack": "^4.1.0" "webpack": "^4.7.0"
} }
} }

18
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 {
@@ -30,14 +28,4 @@
font-size: 4em; font-size: 4em;
} }
} }
</style> </style>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>

16
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 {
@@ -21,14 +19,4 @@
font-size: 4em; font-size: 4em;
} }
} }
</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 };

26
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 {
@@ -45,14 +43,4 @@
font-size: 4em; font-size: 4em;
} }
} }
</style> </style>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>