Skip to content
This repository was archived by the owner on Oct 13, 2022. It is now read-only.

Commit 9d6dd4a

Browse files
Rich-HarrisRich-Harris
authored
Merge pull request #57 from sveltejs/layout
[WIP] experimental new structure
2 parents a08258c + 7f64e4c commit 9d6dd4a

File tree

13 files changed

+78
-127
lines changed

13 files changed

+78
-127
lines changed

‎app/App.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<Nav page={
2+
props.path === '/' ? 'home' :
3+
props.path === '/about' ? 'about' :
4+
props.path.startsWith('/blog') ? 'blog' :
5+
null
6+
}/>
7+
8+
<main>
9+
<svelte:component this={Page} {...props}/>
10+
</main>
11+
12+
<style>
13+
main {
14+
position: relative;
15+
max-width: 56em;
16+
background-color: white;
17+
padding: 2em;
18+
margin: 0 auto;
19+
box-sizing: border-box;
20+
}
21+
</style>
22+
23+
<script>
24+
import Nav from '../components/Nav.html';
25+
26+
export default {
27+
components: {
28+
Nav
29+
}
30+
};
31+
</script>

‎app/client.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { init } from 'sapper/runtime.js';
22
import { routes } from './manifest/client.js';
3+
import App from './App.html';
34

4-
// `routes` is an array of route objects injected by Sapper
5-
init(document.querySelector('#sapper'), routes);
6-
7-
if (module.hot) module.hot.accept();
5+
init({
6+
target: document.querySelector('#sapper'),
7+
routes,
8+
App
9+
});

‎app/server.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ import compression from 'compression';
33
import sapper from 'sapper';
44
import serve from 'serve-static';
55
import { routes } from './manifest/server.js';
6+
import App from './App.html';
67

78
polka() // You can also use Express
89
.use(
910
compression({ threshold: 0 }),
1011
serve('assets'),
11-
sapper({ routes })
12+
sapper({
13+
routes,
14+
App
15+
})
1216
)
1317
.listen(process.env.PORT);

‎assets/global.css

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,6 @@ body {
66
color: #333;
77
}
88

9-
main {
10-
position: relative;
11-
max-width: 56em;
12-
background-color: white;
13-
padding: 2em;
14-
margin: 0 auto;
15-
box-sizing: border-box;
16-
}
17-
189
h1, h2, h3, h4, h5, h6 {
1910
margin: 0 0 0.5em 0;
2011
font-weight: 400;

‎routes/_components/Nav.html renamed to ‎components/Nav.html

File renamed without changes.

‎package.json

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,21 @@
66
"dev": "sapper dev",
77
"build": "sapper build",
88
"export": "sapper export",
9-
"start": "sapper start",
9+
"start": "node build",
1010
"cy:run": "cypress run",
1111
"cy:open": "cypress open",
1212
"test": "run-p --race dev cy:run"
1313
},
1414
"dependencies": {
1515
"compression": "^1.7.1",
16-
"npm-run-all": "^4.1.2",
1716
"polka": "^0.3.4",
18-
"sapper": "^0.10.0",
19-
"serve-static": "^1.13.1",
17+
"sapper": "^0.12.0",
18+
"serve-static": "^1.13.1"
19+
},
20+
"devDependencies": {
21+
"npm-run-all": "^4.1.2",
2022
"svelte": "^2.0.0",
21-
"svelte-loader": "^2.3.3",
22-
"webpack": "^4.1.0"
23+
"svelte-loader": "^2.9.0",
24+
"webpack": "^4.7.0"
2325
}
2426
}

‎routes/4xx.html

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@
22
<title>Not found</title>
33
</svelte:head>
44

5-
<Layout page='home'>
6-
<h1>Not found</h1>
5+
<h1>Not found</h1>
76

8-
<p>Please check the URL</p>
9-
</Layout>
7+
<p>Please check the URL</p>
108

119
<style>
1210
h1, p {
@@ -30,14 +28,4 @@ <h1>Not found</h1>
3028
font-size: 4em;
3129
}
3230
}
33-
</style>
34-
35-
<script>
36-
import Layout from './_components/Layout.html';
37-
38-
export default {
39-
components: {
40-
Layout
41-
}
42-
};
43-
</script>
31+
</style>

‎routes/5xx.html

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
<title>Internal server error</title>
33
</svelte:head>
44

5-
<Layout page='home'>
6-
<h1>Internal server error</h1>
7-
</Layout>
5+
<h1>Internal server error</h1>
86

97
<style>
108
h1 {
@@ -21,14 +19,4 @@ <h1>Internal server error</h1>
2119
font-size: 4em;
2220
}
2321
}
24-
</style>
25-
26-
<script>
27-
import Layout from './_components/Layout.html';
28-
29-
export default {
30-
components: {
31-
Layout
32-
}
33-
};
34-
</script>
22+
</style>

‎routes/_components/Layout.html

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎routes/about.html

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,6 @@
22
<title>About</title>
33
</svelte:head>
44

5-
<Layout page='about'>
6-
<h1>About this site</h1>
5+
<h1>About this site</h1>
76

8-
<p>This is the 'about' page. There's not much here.</p>
9-
</Layout>
10-
11-
<script>
12-
import Layout from './_components/Layout.html';
13-
14-
export default {
15-
components: {
16-
Layout
17-
}
18-
};
19-
</script>
7+
<p>This is the 'about' page. There's not much here.</p>

‎routes/blog/[slug].html

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@
22
<title>{post.title}</title>
33
</svelte:head>
44

5-
<Layout page='blog'>
6-
<h1>{post.title}</h1>
5+
<h1>{post.title}</h1>
76

8-
<div class='content'>
9-
{@html post.html}
10-
</div>
11-
</Layout>
7+
<div class='content'>
8+
{@html post.html}
9+
</div>
1210

1311
<style>
1412
/*
@@ -47,13 +45,7 @@ <h1>{post.title}</h1>
4745
</style>
4846

4947
<script>
50-
import Layout from '../_components/Layout.html';
51-
5248
export default {
53-
components: {
54-
Layout
55-
},
56-
5749
preload({ params, query }) {
5850
// the `slug` parameter is available because this file
5951
// is called [slug].html

‎routes/blog/index.html

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,17 @@
22
<title>Blog</title>
33
</svelte:head>
44

5-
<Layout page='blog'>
6-
<h1>Recent posts</h1>
5+
<h1>Recent posts</h1>
76

8-
<ul>
9-
{#each posts as post}
10-
<!-- we're using the non-standard `rel=prefetch` attribute to
11-
tell Sapper to load the data for the page as soon as
12-
the user hovers over the link or taps it, instead of
13-
waiting for the 'click' event -->
14-
<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
15-
{/each}
16-
</ul>
17-
</Layout>
7+
<ul>
8+
{#each posts as post}
9+
<!-- we're using the non-standard `rel=prefetch` attribute to
10+
tell Sapper to load the data for the page as soon as
11+
the user hovers over the link or taps it, instead of
12+
waiting for the 'click' event -->
13+
<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
14+
{/each}
15+
</ul>
1816

1917
<style>
2018
ul {
@@ -24,13 +22,7 @@ <h1>Recent posts</h1>
2422
</style>
2523

2624
<script>
27-
import Layout from '../_components/Layout.html';
28-
2925
export default {
30-
components: {
31-
Layout
32-
},
33-
3426
preload({ params, query }) {
3527
return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
3628
return { posts };

‎routes/index.html

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,14 @@
22
<title>Sapper project template</title>
33
</svelte:head>
44

5-
<Layout page='home'>
6-
<h1>Great success!</h1>
5+
<h1>Great success!</h1>
76

8-
<figure>
9-
<img alt='Borat' src='great-success.png'>
10-
<figcaption>HIGH FIVE!</figcaption>
11-
</figure>
7+
<figure>
8+
<img alt='Borat' src='great-success.png'>
9+
<figcaption>HIGH FIVE!</figcaption>
10+
</figure>
1211

13-
<p><strong>Try editing this file (routes/index.html) to test hot module reloading.</strong></p>
14-
</Layout>
12+
<p><strong>Try editing this file (routes/index.html) to test hot module reloading.</strong></p>
1513

1614
<style>
1715
h1, figure, p {
@@ -45,14 +43,4 @@ <h1>Great success!</h1>
4543
font-size: 4em;
4644
}
4745
}
48-
</style>
49-
50-
<script>
51-
import Layout from './_components/Layout.html';
52-
53-
export default {
54-
components: {
55-
Layout
56-
}
57-
};
58-
</script>
46+
</style>

0 commit comments

Comments
 (0)