Comment construire ce blog 🔹

published 27 avril 2022

Vous apprenez le code ? Voici le [repo Github de ce blog] (https://github.com/Ennoriel/machyme).

Dans cet article, nous verrons comment configurer un blog SvelteKit basĂ© sur le markdown avec l’aide de la bibliothĂšque mdsvex. Le blog que nous allons construire est :

  • compatible mobile
  • rapide et accessible
  • peut ĂȘtre hĂ©bergĂ© dans la plupart des services d’hĂ©bergement populaires
  • construit en tenant compte de l’optimisation pour les moteurs de recherche
  • et est facile Ă  entretenir. 😼‍💹

Init SvelteKit project

[SvelteKit] (https://kit.svelte.dev/) est un framework pour construire des applications web de toutes tailles, avec une belle expĂ©rience de dĂ©veloppement et un routage flexible basĂ© sur le systĂšme de fichiers. Contrairement aux applications Ă  page unique, SvelteKit ne fait aucun compromis sur le rĂ©fĂ©rencement, l’amĂ©lioration progressive ou l’expĂ©rience de chargement initial - mais contrairement aux applications traditionnelles avec rendu serveur, la navigation est instantanĂ©e pour donner l’impression d’ĂȘtre dans une application.

Vous pouvez initialiser un projet SvelteKit avec la commande suivante :

npm init svelte <app-name>

La commande va créer un nouveau projet dans le répertoire app-name en vous demandant si vous souhaitez mettre en place des outils de base tels que TypeScript. Choisissons le projet squelette et activons toutes les autres options (typescript, prettier, etc.)

Configurer mdsvex

mdsvex est un prĂ©processeur markdown pour les composants Svelte. Ce prĂ©processeur vous permet d’utiliser du markdown dans vos composants Svelte et des composants Svelte dans votre markdown. Mdsvex supporte toute la syntaxe Svelte et presque toute la syntaxe markdown.

En plus de mdsvex, nous installerons Ă©galement 2 autres bibliothĂšques afin de gĂ©nĂ©rer automatiquement des liens d’en-tĂȘte :

pnpm i -D mdsvex rehype-autolink-headings rehype-slug

Configurez ensuite le fichier svelte.config.js :

const config = {
	preprocess: [
		preprocess(),
		mdsvex({
			extensions: ['.md'],
			layout: './src/lib/layout/blog.layout.svelte',
			rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings]
		})
	],

	extensions: ['.svelte', '.md'],

	kit: {
		// whatever
	}
};

Enfin, crĂ©ez le fichier blog.layout.svelte avec ce balisage minimum requis. Il permet d’utiliser la configuration markdown comme accessoire :

<script>
	const { title } = $$restProps;
</script>

{title}

<slot />

Et c’est tout ! Tout fichier markdown sera converti en HTML puis rendu avec la mise en page. La configuration markdown sera passĂ©e aux props $$restProps.

Vous pouvez alors crĂ©er un fichier markdown sous /routes/blog/url-de-votre-article. Les propriĂ©tĂ© de mise en page sont Ă©crits dans la section supĂ©rieure sous la forme d’un document yaml et l’article se trouve en dessous :

---
title: It works!
---

Yes, it does!

Affichage de la liste d’articles

Pour récupérer la liste des articles, nous devons la faire passer par le mécanisme de données de SvelteKit. Pour ce faire, nous définissons un +layout.server.ts avec :

import type { LayoutServerLoad } from './$types';

type BlogPost = {
	title: string;
};

export const load = (async () => {
	const posts = await Promise.all(
		Object.entries(import.meta.glob('/src/routes/blog/**/*.md')).map(async ([path, page]) => {
			const { metadata } = (await page()) as { metadata: BlogPost };
			const filename = path.split('/').pop();
			return {
				...metadata,
				filename
			};
		})
	);

	return { posts };
}) satisfies LayoutServerLoad;

Le fait d’ajouter la logique dans le fichier +layout.svelte principal permettra d’obtenir les donnĂ©es n’importe oĂč dans le site. En particulier, dans le fichier de la liste des blogs : /blog/+page.svelte :

<script lang="ts">import ArticleList from '$lib/components/blog/ArticleList.svelte';
export let data;
</script>

<h1>Publications</h1>

<ArticleList posts={data.posts} />

Pour aller plus loin