# Shizendo site (Pelican)



```sh
C:\Users\ryckelynckg\AppData\Local\Programs\Python\Python313\python.exe -m venv venv
venv\Scripts\activate
python -m pip install "pelican[markdown]"
python -m pip install typogrify
python.exe -m pip install --upgrade pip
pelican-quickstart
#...


pygmentize -S monokai -f html -a .highlight > theme/static/css/pygments.css


# Dev
npx tailwindcss -i ./theme/static/src/input.css -o ./theme/static/css/style.css --watch
pelican --listen --autoreload


# Build
pelican content -s publishconf.py
```

Pour travailler efficacement, ouvre deux terminaux :

1.  **Terminal CSS :** `npx tailwindcss -i ./mon-theme/static/src/input.css -o ./mon-theme/static/css/style.css --watch` *(Il surveille tes classes Tailwind).*
    
2. Le générateur de site en mode watch ou reload




----
Je souhaite utiliser tailwind 4 et remixicons pour mon theme. Comment faire ?

## Gemini a dit

C'est un excellent choix. **Tailwind CSS v4** est une révolution en termes de simplicité (plus de fichier de config JavaScript complexe, tout se passe dans le CSS) et **Remix Icon** est l'une des bibliothèques d'icônes les plus complètes et élégantes.

Puisque Pelican est un générateur statique, nous allons utiliser l'approche la plus moderne : le **CLI de Tailwind** pour compiler ton style.

---

### 1\. Installation de Tailwind 4

Place-toi à la racine de ton projet (là où se trouve ton dossier `mon-theme`) et installe Tailwind via npm :

Bash

```
npm install tailwindcss @tailwindcss/cli
```

### 2\. Configuration du CSS source

Crée ton fichier CSS source dans `mon-theme/static/src/input.css`. Avec la v4, il suffit d'importer Tailwind :

CSS

```
/* mon-theme/static/src/input.css */
@import "tailwindcss";

/* Optionnel : Personnalisation de ton thème directement en CSS */
@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui;
  --color-brand: #3b82f6;
}
```

### 3\. Intégration de Remix Icon

Le plus simple est d'utiliser le CDN dans ton fichier `base.html`, ou de l'importer dans ton CSS.

**Option CSS (recommandée pour la v4) :** Ajoute ceci au début de ton `input.css` :

CSS

```
@import url('https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css');
```

### 4\. Mise à jour de `base.html` pour Tailwind

Modifie ton template pour utiliser les classes Tailwind et les icônes. Voici un exemple pour ton menu et tes catégories :

HTML

```
<!DOCTYPE html>
<html lang="fr" class="bg-gray-50 text-gray-900">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ SITENAME }}{% endblock %}</title>
    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/style.css">
</head>
<body>
    <header class="bg-white shadow-sm border-b border-gray-200">
        <div class="max-w-5xl mx-auto px-4 py-6 flex justify-between items-center">
            <h1 class="text-2xl font-bold text-brand">
                <a href="{{ SITEURL }}/"><i class="ri-terminal-box-line leading-none mr-2"></i>{{ SITENAME }}</a>
            </h1>
            <nav class="space-x-6 flex items-center">
                <a href="{{ SITEURL }}/pages/presentation.html" class="hover:text-brand transition"><i class="ri-user-3-line mr-1"></i>Présentation</a>
                
                <div class="h-4 w-px bg-gray-300"></div> {% for cat, articles in categories %}
                    <a href="{{ SITEURL }}/{{ cat.url }}" class="capitalize hover:text-brand">{{ cat }}</a>
                {% endfor %}
            </nav>
        </div>
    </header>

    <main class="max-w-5xl mx-auto px-4 py-12 min-h-screen">
        {% block content %}{% endblock %}
    </main>

    <footer class="bg-gray-900 text-gray-400 py-12 mt-12">
        <div class="max-w-5xl mx-auto px-4 text-center">
            <p>&copy; 2026 - <a href="{{ SITEURL }}/pages/mentions-legales.html" class="underline">Mentions Légales</a></p>
            <div class="mt-4 space-x-4 text-xl">
                <i class="ri-github-fill hover:text-white cursor-pointer"></i>
                <i class="ri-twitter-x-fill hover:text-white cursor-pointer"></i>
            </div>
        </div>
    </footer>
</body>
</html>
```

### 5\. Compiler ton CSS

C'est l'étape cruciale. Tailwind v4 doit scanner tes fichiers `.html` pour générer uniquement le CSS nécessaire.

Lance cette commande dans ton terminal :

Bash

```
npx tailwindcss -i ./mon-theme/static/src/input.css -o ./mon-theme/static/css/style.css --watch
```

*   `-i` : ton fichier source.
    
*   `-o` : le fichier final que Pelican va utiliser.
    
*   `--watch` : surveille tes modifications et recompile instantanément.
    

### 6\. Le flux de travail (Workflow) final

Désormais, pour travailler sur ton site, tu devras avoir **deux terminaux** ouverts :

1.  **Terminal 1 (Pelican) :** `pelican --listen --autoreload` (pour régénérer le HTML).
    
2.  **Terminal 2 (Tailwind) :** La commande `npx tailwindcss...` ci-dessus (pour régénérer le CSS).
    

---

### Petit bonus : Affichage des articles

Dans ton fichier `article.html`, tu peux utiliser la classe `prose` de Tailwind (via le plugin `@tailwindcss/typography`) pour que ton Markdown soit automatiquement magnifique :

HTML

```
{% extends "base.html" %}
{% block content %}
<article class="prose prose-slate max-w-none">
    <header class="mb-8">
        <h1 class="text-4xl font-extrabold mb-2">{{ article.title }}</h1>
        <p class="text-gray-500 flex items-center gap-2">
            <i class="ri-calendar-line"></i> {{ article.locale_date }}
            <span class="mx-2">|</span>
            <i class="ri-price-tag-3-line"></i> {{ article.category }}
        </p>
    </header>
    {{ article.content }}
</article>
{% endblock %}
```

Veux-tu que je t'aide à configurer le plugin **Typography** de Tailwind pour que tes articles Markdown soient parfaitement mis en page sans effort ?

Vous avez dit

oui, comment configurer le module Typography avec Tailwind 4

## Gemini a dit

Avec **Tailwind CSS v4**, la gestion des plugins a été simplifiée. Contrairement à la v3 où il fallait modifier un fichier `tailwind.config.js`, tout se passe désormais directement dans ton fichier CSS principal.

Voici comment transformer ton contenu Markdown brut en une mise en page typographique digne d'un magazine professionnel.

---

### 1\. Installation du plugin

Dans ton terminal, à la racine de ton projet, installe le module officiel :

Bash

```
npm install @tailwindcss/typography
```

### 2\. Activation dans ton CSS

Ouvre ton fichier `mon-theme/static/src/input.css` et importe le plugin juste après Tailwind. C'est l'une des grandes nouveautés de la v4 : les plugins sont traités comme des imports CSS.

CSS

```
/* mon-theme/static/src/input.css */
@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui;
  /* Tes autres personnalisations ici */
}
```

### 3\. Utilisation dans ton template `article.html`

Le plugin Typography fonctionne avec une classe "ombrelle" appelée `prose`. Elle applique automatiquement des styles élégants à toutes les balises HTML générées par ton Markdown (`<h1>`, `<p>`, `<ul>`, `<blockquote>`, etc.).

Modifie ton fichier `article.html` comme ceci :

HTML

```
{% extends "base.html" %}
{% block content %}
<article class="max-w-3xl mx-auto"> <header class="mb-10 pb-8 border-b border-gray-200">
        <h1 class="text-4xl font-black text-gray-900 mb-4">{{ article.title }}</h1>
        <div class="flex items-center text-sm text-gray-500 gap-4">
            <span class="flex items-center gap-1"><i class="ri-calendar-line"></i> {{ article.locale_date }}</span>
            <span class="flex items-center gap-1"><i class="ri-folder-line"></i> {{ article.category }}</span>
        </div>
    </header>

    <div class="prose prose-slate prose-lg lg:prose-xl max-w-none">
        {{ article.content }}
    </div>

</article>
{% endblock %}
```

### 4\. Personnalisation avancée

La force de `prose` avec Tailwind 4 est que tu peux le personnaliser très finement. Par exemple, si tu veux que tes liens soient de ta couleur "brand" et que tes citations soient en italique bleu :

CSS

```
/* Dans ton input.css */
@layer base {
  .prose a {
    @apply text-brand no-underline hover:underline;
  }
  .prose blockquote {
    @apply border-l-brand bg-blue-50 py-1 px-4 italic;
  }
}
```

---

### Pourquoi utiliser les variantes `prose-lg` ou `prose-xl` ?

En typographie, la **longueur de ligne** est cruciale pour le confort de lecture.

*   La classe `prose` seule est optimisée pour environ 65 caractères par ligne.
    
*   `prose-lg` (Large) ou `prose-xl` (Extra Large) augmente la taille de la police et l'espacement pour les écrans plus larges.
    

### Résultat attendu

Tes articles Markdown ne ressembleront plus à du texte brut mais à un contenu structuré :

*   Les titres auront des marges généreuses.
    
*   Les listes à puces seront correctement indentées.
    
*   Les images prendront toute la largeur avec des coins arrondis si tu le souhaites.
    

### Petite astuce pour Pelican

Pelican génère parfois des classes spécifiques sur les images. Pour qu'elles s'intègrent bien dans ton flux Tailwind, tu peux ajouter cette petite règle dans ton CSS :

CSS

```
.prose img {
  @apply rounded-xl shadow-md mx-auto;
}
```