Cet article regroupe les patterns utiles pour rédiger sur le blog : paragraphes, emphases, liens (Next.js), et code inline.
Titres et table des matières
Un h2 et un h3 servent aussi à valider la table des matières latérale.
Sous-section technique
Tu peux enchaîner plusieurs h3 sous un même h2 pour structurer une longue section.
Listes
- puce simple avec gras ;
- deuxième item avec
pnpmen inline.
- première étape ordonnée ;
- deuxième étape ;
- troisième étape.
Citation
Un bloc blockquote pour isoler une remarque ou une citation. Le style suit les tokens surface et primary du thème.
Tableau
| Composant | Exemple dans cet article |
|---|---|
| CodeBlock | § TypeScript, shell, JSON |
| ArticleImage | § Images |
| ProjectStructure | § Arbre |
| TutorialStepsList | § Tutoriel dev |
| Tableau | cette table |
Images
Avec légende (syntaxe |caption= dans l’alt) :
Sans légende :
Blocs de code
TypeScript
export function greet(name: string): string {
return `Bonjour, ${name.trim() || "dev"} !`;
}
Shell (commandes projet)
# dépendances
pnpm install
# qualité
pnpm exec eslint .
pnpm exec tsc --noEmit
JSON
{
"name": "portfolio-lab",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build"
}
}
Arbre de fichiers (tree / structure)
Extraits
- app
- blog
- [slug]
- page.tsx
- components
- blog
- articleMarkdownComponents.tsx
- TutorialStepsList.tsx
- CodeBlock.tsx
- articles
- lab-composants-markdown-complet.md
Tutoriel dev : mise en route locale
Ci-dessous, un bloc steps : chaque section commence par ### ; le corps accepte le Markdown complet (code, images, listes).
Si tu mets des blocs de code classiques (trois backticks) dans le fence steps, entoure tout le bloc steps avec quatre backticks en ouverture et fermeture, sinon le parseur Markdown coupe le bloc trop tôt.
Prérequis
Vérifie que Node.js et pnpm sont disponibles :
node -v
pnpm -v
Si besoin, installe pnpm globalement :
npm install -g pnpm
Cloner et entrer dans le projet
git clone https://github.com/exemple/mon-app.git
cd mon-app
Installer les dépendances
À la racine du dépôt :
pnpm install
Cette commande lit le pnpm-lock.yaml et installe les packages listés dans package.json.
Variables d’environnement
Crée un fichier .env.local (non versionné) :
cp .env.example .env.local
Puis édite les clés nécessaires (API, URL, secrets).
Lancer le serveur de développement
pnpm dev
Ouvre ensuite http://localhost:3000 dans le navigateur. Tu devrais voir l’app en mode hot reload.
(Optionnel) Build de production
pnpm build
pnpm start
Résumé
Tu as vu : titres, paragraphes, liens, inline code, listes, blockquote, tableau, images (avec et sans légende), CodeBlock multi-langages, ProjectStructure et un tutoriel par étapes avec commandes d’installation et de run. Tu peux supprimer ce fichier du dossier articles/ quand tu n’en as plus besoin.