mirror of
https://github.com/kevin-DL/sapper-template.git
synced 2026-01-22 22:45:19 +00:00
@@ -1,9 +1,7 @@
|
|||||||
import { init } from 'sapper/runtime.js';
|
import { init } from 'sapper/runtime.js';
|
||||||
import { routes } from './manifest/client.js';
|
import { manifest } from './manifest/client.js';
|
||||||
import App from './App.html';
|
|
||||||
|
|
||||||
init({
|
init({
|
||||||
target: document.querySelector('#sapper'),
|
target: document.querySelector('#sapper'),
|
||||||
routes,
|
manifest
|
||||||
App
|
|
||||||
});
|
});
|
||||||
@@ -2,14 +2,13 @@ import sirv from 'sirv';
|
|||||||
import polka from 'polka';
|
import polka from 'polka';
|
||||||
import sapper from 'sapper';
|
import sapper from 'sapper';
|
||||||
import compression from 'compression';
|
import compression from 'compression';
|
||||||
import { routes } from './manifest/server.js';
|
import { manifest } 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 }),
|
||||||
sirv('assets'),
|
sirv('assets'),
|
||||||
sapper({ routes, App })
|
sapper({ manifest })
|
||||||
)
|
)
|
||||||
.listen(process.env.PORT)
|
.listen(process.env.PORT)
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a class='{path === "/" ? "selected" : ""}' href='.'>home</a></li>
|
<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
|
||||||
<li><a class='{path === "/about" ? "selected" : ""}' href='about'>about</a></li>
|
<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li>
|
||||||
|
|
||||||
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
|
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
|
||||||
the blog data when we hover over the link or tap it on a touchscreen -->
|
the blog data when we hover over the link or tap it on a touchscreen -->
|
||||||
<li><a rel=prefetch class='{path.startsWith("/blog") ? "selected" : ""}' href='blog'>blog</a></li>
|
<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"compression": "^1.7.1",
|
"compression": "^1.7.1",
|
||||||
"polka": "^0.4.0",
|
"polka": "^0.4.0",
|
||||||
"sapper": "^0.14.0",
|
"sapper": "^0.15.0",
|
||||||
"sirv": "^0.1.1"
|
"sirv": "^0.1.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<Nav path={props.path}/>
|
<Nav segment={child.segment}/>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<svelte:component this={Page} {...props}/>
|
<svelte:component this={child.component} {...child.props}/>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -16,11 +16,9 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Nav from '../components/Nav.html';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Nav
|
Nav: '../components/Nav.html'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
Reference in New Issue
Block a user