Cómo crear un blog con Sapper (Svelte) y Markdown

¿Qué es Sapper?

¿Por qué hacer un blog con markdown?

Vamos a empezar

Instalar Sapper y arrancar el proyecto

npx degit "sveltejs/sapper-template#rollup" NOMBRE_DE_TU_APP
cd NOMBRE_DE_TU_APP
npm install
npm run dev & open http://localhost:3000

Contenido

---
date: 2021-01-18
summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies congue erat, ut tempor felis euismod imperdiet.
title: ¡Hola Alex Tomás!
---
Este es mi primer documento con formato Markdown. Lo guardamos con el nombre que quieras, por ejemplo `primera-prueba.md`

Plugins

import post1 from 'posts/example1.md'
import post2 from 'posts/example2.md'
// ...
npm i -D @jackfranklin/rollup-plugin-markdown rollup-plugin-glob
// Importamos los paquetes
import markdown from '@jackfranklin/rollup-plugin-markdown'
import glob from 'rollup-plugin-glob'
// Recuerda que rollup crea multiples builds, así que fíjate de
// añadir los dos plugins tanto en `server` como en `client`
export {
client: {
plugins: [
markdown(),
glob(),
...
],
...
},
server: {
plugins: [
markdown(),
glob(),
...
],
...
}
}

Centralizamos los posts

import all from './contents/*.md';export const posts = all;
[
{
"metadata": {
"title": "¡Hola Alex Tomás!",
"summary": "Lorem ipsum dolor sit amet...",
"date": "2021-01-18"
},
"html": "Este es mi primer documento con formato Markdown",
"filename": "primera-prueba.md"
}
]
import _ from 'lodash';
import all from '../posts/*.md';
export const posts = _.chain(all)
.map(transform)
.orderBy('date', 'desc') // ordenamos los posts por fecha
.value();
// función para formatear cada post
function transform({ filename, html, metadata }) {
// el permalink es el nombre del archivo '.md'
const permalink = filename.replace(/\.md$/, '');
// convertimos la fecha en un Date
const date = new Date(metadata.date);
// devolvemos el post con el nuevo formato
return { ...metadata, filename, html, permalink, date };
}
// función para buscar un post
export function findPost(permalink) {
// usamos lodash para encontrar un post por su permalink (nombre de fichero):
return _.find(posts, { permalink });
}
npm i lodash --save

Listado de posts

<script>
// Importamos los posts desde el fichero src/posts.js
import { posts } from '../../posts';
</script>
<svelte:head>
<title>Blog</title>
</svelte:head>
<h1>Recent posts</h1>{#each posts as post}
<article>
<a href={`blog/${post.permalink}`}>
<h2>{post.title}</h2>
<p>{post.summary}</p>
</a>
</article>
{/each}

Detalle de un post

<script context="module">
import { findPost } from '../../posts';
export async function preload(page, session) {
const { slug } = page.params;
const post = findPost(slug);
return { post };
}
</script>
<script>
export let post;
</script>
<svelte:head>
<title>{post.title}</title>
</svelte:head>
<h1>{post.title}</h1><div class="content">{@html post.html}</div>

Conclusiones

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store