Sapper/Svelte: How do I add markdown files?

Question

I am creating a blog using Sapper using the default sapper-template-rollup.

In the blog folder, it does mention about generating data from markdown files. But I can't find how to do it?

Answer 1

I published https://github.com/mikenikles/sapper-template-with-markdown which shows how to use the default Sapper template, but uses *.md files for the blog post content.

The main change was in src/routes/blog/_posts.js where I replaced the content with:

const fs = require('fs');
const frontMatter = require('front-matter');
const marked = require('marked');

const posts = fs.readdirSync('./src/posts').map(postFilename => {
  const postContent = fs.readFileSync(`./src/posts/${postFilename}`, {
    encoding: 'utf8'
  });
  const postFrontMatter = frontMatter(postContent);
  return {
    title: postFrontMatter.attributes.title,
    slug: postFrontMatter.attributes.slug,
    html: marked(postFrontMatter.body)
  }
});

posts.forEach(post => {
    post.html = post.html.replace(/^\t{3}/gm, '');
});

export default posts;

Then, each blog post is stored in src/posts as a Markdown file with the following format:

---
title: 'What is Sapper?'
slug: 'what-is-sapper'
---

Your markdown content.

Answer 2

Update 2020-06-14:

There is a GitHub version as well now (since 2019-11-11) that publishes with Netlify and has a custom domain added. So unlike the GitLab version, it does not use Sapper's base URL to alter the base path that is necessary with GitLab and GitHub pages unless you add a custom domain.

Original answer 2019-10-24:

You may find this repo helpful. I also have an open PR on the Sapper Template repo, first revising the old Markdown branch in Jan. 2019 and then adding Svelte 3 support in May 2019, but it is probably easier to look at and clone my repo on GitLab, plus it has more current dependency updates I have not added to the PR yet.