totole/sapper-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper-template.git synced 2026-01-19 13:05:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

make basepath-friendly

Browse Source
This commit is contained in:
Rich Harris
2018-03-16 20:25:15 -04:00
parent 1a5f69c593
commit d5e1c99ef6
8 changed files with 25 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
routes/_components/Nav.html
View File

@@ -1,11 +1,11 @@
<nav>
<ul>
<li><a class='{{page === "home" ? "selected" : ""}}' href='/'>home</a></li>
<li><a class='{{page === "about" ? "selected" : ""}}' href='/about'>about</a></li>
<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>
<li><a rel=prefetch class='{{page === "blog" ? "selected" : ""}}' href='blog'>blog</a></li>
</ul>
</nav>

2
routes/blog/[slug].html
View File

@@ -59,7 +59,7 @@
// is called [slug].html
const { slug } = params;
return fetch(`/blog/${slug}.json`).then(r => r.json()).then(post => {
return fetch(`blog/${slug}.json`).then(r => r.json()).then(post => {
return { post };
});
}

6
routes/blog/_posts.js
View File

@@ -14,7 +14,7 @@ const posts = [
html: `
<p>First, you have to know what <a href='https://svelte.technology'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.technology/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
<p>Sapper is a Next.js-style framework (<a href='/blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
<ul>
<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
@@ -70,8 +70,8 @@ const posts = [
<ul>
<li>It's powered by <a href='https://svelte.technology'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>routes/blog/[slug].html</code></li>
<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='/blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='/blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
</ul>
`
},

4
routes/blog/index.html
View File

@@ -11,7 +11,7 @@
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>
<li><a rel='prefetch' href='blog/{{post.slug}}'>{{post.title}}</a></li>
{{/each}}
</ul>
</Layout>
@@ -32,7 +32,7 @@
},
preload({ params, query }) {
return fetch(`/blog.json`).then(r => r.json()).then(posts => {
return fetch(`blog.json`).then(r => r.json()).then(posts => {
return { posts };
});
}

2
routes/index.html
View File

@@ -6,7 +6,7 @@
<h1>Great success!</h1>
<figure>
<img alt='Borat' src='/great-success.png'>
<img alt='Borat' src='great-success.png'>
<figcaption>HIGH FIVE!</figcaption>
</figure>