totole/sapper-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper-template.git synced 2026-01-21 14:05:08 +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

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>

56
routes/_components/Nav.html
View File

@@ -1,56 +0,0 @@
<nav>
<ul>
<li><a class='{page === "home" ? "selected" : ""}' href='.'>home</a></li>
<li><a class='{page === "about" ? "selected" : ""}' href='about'>about</a></li>
<!-- 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 -->
<li><a rel=prefetch class='{page === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
</ul>
</nav>
<style>
nav {
border-bottom: 1px solid rgba(170,30,30,0.1);
font-weight: 300;
padding: 0 1em;
}
ul {
margin: 0;
padding: 0;
}
/* clearfix */
ul::after {
content: '';
display: block;
clear: both;
}
li {
display: block;
float: left;
}
.selected {
position: relative;
display: inline-block;
}
.selected::after {
position: absolute;
content: '';
width: calc(100% - 1em);
height: 2px;
background-color: rgb(170,30,30);
display: block;
bottom: -1px;
}
a {
text-decoration: none;
padding: 1em 0.5em;
display: block;
}
</style>

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>