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

create blog posts from markdown files

Browse Source
This commit is contained in:
Rich Harris
2018-07-27 14:28:32 -04:00
parent 29e6481559
commit 0fa6c9f7d7
10 changed files with 129 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -13,6 +13,7 @@
}, },
"dependencies": { "dependencies": {
"compression": "^1.7.1", "compression": "^1.7.1",
"marked": "^0.4.0",
"polka": "^0.4.0", "polka": "^0.4.0",
"sapper": "^0.15.0", "sapper": "^0.15.0",
"sirv": "^0.1.1" "sirv": "^0.1.1"

6
posts/how-can-i-get-involved.md Normal file
View File

@@ -0,0 +1,6 @@
---
title: How can I get involved?
pubdate: 2018-07-18
---
We're so glad you asked! Come on over to the [Svelte](https://github.com/sveltejs/svelte) and [Sapper](https://github.com/sveltejs/sapper) repos, and join us in the [Gitter chatroom](https://gitter.im/sveltejs/svelte). Everyone is welcome, especially you!

11
posts/how-is-sapper-different-from-next.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: How is Sapper different from Next.js?
pubdate: 2018-07-19
---
[Next.js](https://github.com/zeit/next.js/) is a React framework from [Zeit](https://zeit.co), and is the inspiration for Sapper. There are a few notable differences, however:
* It's powered by [Svelte](https://svelte.technology) instead of React, so it's faster and your apps are smaller
* Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is `routes/blog/[slug].html`
* As well as pages (Svelte components, which render on server or client), you can create *server routes* in your `routes` directory. These are just `.js` files that export functions corresponding to HTTP methods, and receive Express `request` and `response` objects as arguments. This makes it very easy to, for example, add a JSON API such as the one [powering this very page](blog/how-is-sapper-different-from-next.json)
* Links are just `<a>` elements, rather than framework-specific `<Link>` components. That means, for example, that [this link right here](blog/how-can-i-get-involved), despite being inside a blob of HTML, works with the router as you'd expect.

27
posts/how-to-use-sapper.md Normal file
View File

@@ -0,0 +1,27 @@
---
title: How to use Sapper
pubdate: 2018-07-21
---
## Step one
Create a new project, using [degit](https://github.com/Rich-Harris/degit):
```
npx degit sveltejs/sapper-template my-app
cd my-app
npm install # or yarn!
npm run dev
```
## Step two
Go to [localhost:3000](http://localhost:3000). Open `my-app` in your editor. Edit the files in the `routes` directory or add new ones.
## Step three
...
## Step four
Resist overdone joke formats.

15
posts/what-is-sapper.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: What is Sapper?
pubdate: 2018-07-22
---
First, you have to know what [Svelte](https://svelte.technology) 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 [introductory blog post](https://svelte.technology/blog/frameworks-without-the-framework), you should!
Sapper is a Next.js-style framework ([more on that here](blog/how-is-sapper-different-from-next)) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:
* Code-splitting, dynamic imports and hot module replacement, powered by webpack
* Server-side rendering (SSR) with client-side hydration
* Service worker for offline support, and all the PWA bells and whistles
* The nicest development experience you've ever had, or your money back
It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.

8
posts/why-the-name.md Normal file
View File

@@ -0,0 +1,8 @@
---
title: Why the name?
pubdate: 2018-07-20
---
In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as *sappers*.
For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.

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

@@ -1,8 +1,8 @@
<svelte:head> <svelte:head>
<title>{post.title}</title> <title>{post.metadata.title}</title>
</svelte:head> </svelte:head>
<h1>{post.title}</h1> <h1>{post.metadata.title}</h1>
<div class='content'> <div class='content'>
{@html post.html} {@html post.html}

18
routes/blog/[slug].json.js
View File

@@ -1,21 +1,23 @@
import posts from './_posts.js'; import { getPost } from './_posts.js';
const lookup = new Map(); const lookup = new Map();
posts.forEach(post => {
lookup.set(post.slug, JSON.stringify(post));
});
export function get(req, res, next) { export function get(req, res, next) {
// the `slug` parameter is available because
// this file is called [slug].json.js
const { slug } = req.params; const { slug } = req.params;
if (lookup.has(slug)) { if (process.env.NODE_ENV !== 'production' || !lookup.has(slug)) {
const post = getPost(slug);
lookup.set(slug, JSON.stringify(post));
}
const json = lookup.get(slug);
if (json) {
res.writeHead(200, { res.writeHead(200, {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}); });
res.end(lookup.get(slug)); res.end(json);
} else { } else {
res.writeHead(404, { res.writeHead(404, {
'Content-Type': 'application/json' 'Content-Type': 'application/json'

119
routes/blog/_posts.js
View File

@@ -1,92 +1,49 @@
// Ordinarily, you'd generate this data from markdown files in your import fs from 'fs';
// repo, or fetch them from a database of some kind. But in order to import path from 'path';
// avoid unnecessary dependencies in the starter template, and in the import marked from 'marked';
// service of obviousness, we're just going to leave it here.
// This file is called `_posts.js` rather than `posts.js`, because export function getPosts () {
// we don't want to create an `/blog/posts` route — the leading const slugs = fs.readdirSync('posts')
// underscore tells Sapper not to do that. .filter(file => path.extname(file) === '.md')
.map(file => file.slice(0, -3));
const posts = [ return slugs.map(getPost).sort((a, b) => {
{ return a.metadata.pubdate < b.metadata.pubdate ? 1 : -1;
title: 'What is Sapper?', });
slug: 'what-is-sapper', }
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> export function getPost(slug) {
const file = `posts/${slug}.md`;
if (!fs.existsSync(file)) return null;
<ul> const markdown = fs.readFileSync(file, 'utf-8');
<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
<li>Server-side rendering (SSR) with client-side hydration</li>
<li>Service worker for offline support, and all the PWA bells and whistles</li>
<li>The nicest development experience you've ever had, or your money back</li>
</ul>
<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p> const { content, metadata } = process_markdown(markdown);
`
},
{ const date = new Date(`${metadata.pubdate} EDT`); // cheeky hack
title: 'How to use Sapper', metadata.dateString = date.toDateString();
slug: 'how-to-use-sapper',
html: `
<h2>Step one</h2>
<p>Create a new project, using <a href='https://github.com/Rich-Harris/degit'>degit</a>:</p>
<pre><code>npx degit sveltejs/sapper-template my-app const html = marked(content);
cd my-app
npm install # or yarn!
npm run dev
</code></pre>
<h2>Step two</h2> return {
<p>Go to <a href='http://localhost:3000'>localhost:3000</a>. Open <code>my-app</code> in your editor. Edit the files in the <code>routes</code> directory or add new ones.</p> slug,
metadata,
html
};
}
<h2>Step three</h2> function process_markdown(markdown) {
<p>...</p> const match = /---\n([\s\S]+?)\n---/.exec(markdown);
const frontMatter = match[1];
const content = markdown.slice(match[0].length);
<h2>Step four</h2> const metadata = {};
<p>Resist overdone joke formats.</p> frontMatter.split('\n').forEach(pair => {
` const colonIndex = pair.indexOf(':');
}, metadata[pair.slice(0, colonIndex).trim()] = pair
.slice(colonIndex + 1)
.trim();
});
{ return { metadata, content };
title: 'Why the name?', }
slug: 'why-the-name',
html: `
<p>In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as <em>sappers</em>.</p>
<p>For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.</p>
`
},
{
title: 'How is Sapper different from Next.js?',
slug: 'how-is-sapper-different-from-next',
html: `
<p><a href='https://github.com/zeit/next.js/'>Next.js</a> is a React framework from <a href='https://zeit.co'>Zeit</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p>
<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>
</ul>
`
},
{
title: 'How can I get involved?',
slug: 'how-can-i-get-involved',
html: `
<p>We're so glad you asked! Come on over to the <a href='https://github.com/sveltejs/svelte'>Svelte</a> and <a href='https://github.com/sveltejs/sapper'>Sapper</a> repos, and join us in the <a href='https://gitter.im/sveltejs/svelte'>Gitter chatroom</a>. Everyone is welcome, especially you!</p>
`
}
];
posts.forEach(post => {
post.html = post.html.replace(/^\t{3}/gm, '');
});
export default posts;

18
routes/blog/index.json.js
View File

@@ -1,13 +1,17 @@
import posts from './_posts.js'; import { getPosts } from './_posts.js';
const contents = JSON.stringify(posts.map(post => { let contents;
return {
title: post.title,
slug: post.slug
};
}));
export function get(req, res) { export function get(req, res) {
if (!contents || process.env.NODE_ENV !== 'production') {
const posts = getPosts().map(post => ({
title: post.metadata.title,
slug: post.slug
}));
contents = JSON.stringify(posts);
}
res.writeHead(200, { res.writeHead(200, {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}); });