312 lines
13 KiB
HTML
312 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Bienvenue dans PersoNotes - PersoNotes</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="static/theme.css" />
|
||
<link rel="stylesheet" href="static/themes.css" />
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css" />
|
||
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
|
||
<!-- Lucide Icons -->
|
||
<script src="https://unpkg.com/lucide@latest"></script>
|
||
<style>
|
||
body { margin: 0; padding: 0; background: var(--bg-primary, #1e1e1e); color: var(--text-primary, #e0e0e0); font-family: 'JetBrains Mono', monospace; }
|
||
.public-view-container { max-width: 800px; margin: 0 auto; padding: 2rem; }
|
||
.public-nav { margin-bottom: 2rem; }
|
||
.public-nav a { color: var(--accent-blue, #42a5f5); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
|
||
.public-nav a:hover { text-decoration: underline; }
|
||
.public-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--bg-tertiary, #2d2d2d); }
|
||
.public-title { font-size: 2.5rem; margin: 0 0 1rem 0; color: var(--text-primary, #e0e0e0); }
|
||
.public-meta { display: flex; gap: 1.5rem; color: var(--text-secondary, #b0b0b0); font-size: 0.95rem; }
|
||
.public-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
|
||
.tag { background: var(--bg-tertiary, #2d2d2d); color: var(--text-secondary, #b0b0b0); padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.85rem; }
|
||
.public-content { line-height: 1.8; color: var(--text-primary, #e0e0e0); font-size: 1.05rem; }
|
||
.public-content h1, .public-content h2, .public-content h3, .public-content h4, .public-content h5, .public-content h6 { color: var(--text-primary, #e0e0e0); margin-top: 2rem; margin-bottom: 1rem; }
|
||
.public-content h1 { font-size: 2rem; } .public-content h2 { font-size: 1.75rem; } .public-content h3 { font-size: 1.5rem; } .public-content h4 { font-size: 1.25rem; }
|
||
.public-content p { margin-bottom: 1rem; }
|
||
.public-content a { color: var(--accent-blue, #42a5f5); text-decoration: none; }
|
||
.public-content a:hover { text-decoration: underline; }
|
||
.public-content pre { background: var(--bg-secondary, #252525); border: 1px solid var(--bg-tertiary, #2d2d2d); border-radius: 6px; padding: 1rem; overflow-x: auto; margin: 1rem 0; }
|
||
.public-content code { font-family: 'JetBrains Mono', monospace; background: var(--bg-secondary, #252525); padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.9em; }
|
||
.public-content pre code { background: none; padding: 0; }
|
||
.public-content blockquote { border-left: 4px solid var(--accent-blue, #42a5f5); padding-left: 1rem; margin: 1rem 0; color: var(--text-secondary, #b0b0b0); font-style: italic; }
|
||
.public-content ul, .public-content ol { margin: 1rem 0; padding-left: 2rem; }
|
||
.public-content li { margin-bottom: 0.5rem; }
|
||
.public-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
|
||
.public-content th, .public-content td { border: 1px solid var(--bg-tertiary, #2d2d2d); padding: 0.75rem; text-align: left; }
|
||
.public-content th { background: var(--bg-secondary, #252525); font-weight: 600; }
|
||
.public-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1rem 0; }
|
||
.public-content hr { border: none; border-top: 2px solid var(--bg-tertiary, #2d2d2d); margin: 2rem 0; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="public-view-container">
|
||
<div class="public-nav">
|
||
<a href="index.html">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="19" y1="12" x2="5" y2="12"></line>
|
||
<polyline points="12 19 5 12 12 5"></polyline>
|
||
</svg>
|
||
Back to public notes
|
||
</a>
|
||
</div>
|
||
<article>
|
||
<div class="public-header">
|
||
<h1 class="public-title">Bienvenue dans PersoNotes</h1>
|
||
<div class="public-meta"><span><i data-lucide="calendar" class="icon-sm"></i> 08-11-2025</span></div>
|
||
<div class="public-tags"><span class="tag">#aide</span><span class="tag">#documentation</span><span class="tag">#tutorial</span></div>
|
||
</div>
|
||
<div class="public-content">
|
||
<p>08/11/2025 -</p>
|
||
<p>C’est mon application de prise de note</p>
|
||
<h2 id="jespre-quelle-va-bien-marcher">J’espére qu’elle va bien marcher</h2>
|
||
<h1 id="bienvenue-dans-personotes">Bienvenue dans PersoNotes</h1>
|
||
<p>Bienvenue dans votre application de prise de notes en Markdown ! Cette page vous explique comment utiliser l’application et le format front matter.</p>
|
||
<h2 id="quest-ce-que-le-front-matter-">Qu’est-ce que le Front Matter ?</h2>
|
||
<p>Le <strong>front matter</strong> est un bloc de métadonnées en YAML placé au début de chaque note, entre deux lignes <code>---</code>. Il permet d’ajouter des informations structurées à vos notes.</p>
|
||
<h3 id="format-du-front-matter">Format du Front Matter</h3>
|
||
<pre><code class="language-yaml">---
|
||
title: Titre de votre note
|
||
date: 08-11-2025
|
||
last_modified: 08-11-2025:14:10
|
||
tags: [projet, urgent, backend]
|
||
---
|
||
</code></pre>
|
||
<h3 id="champs-disponibles">Champs disponibles</h3>
|
||
<ul>
|
||
<li><strong>title</strong> : Le titre de votre note (généré automatiquement depuis le nom du fichier)</li>
|
||
<li><strong>date</strong> : Date de création (format: JJ-MM-AAAA)</li>
|
||
<li><strong>last_modified</strong> : Dernière modification (format: JJ-MM-AAAA:HH:MM) - mis à jour automatiquement</li>
|
||
<li><strong>tags</strong> : Liste de tags pour organiser et rechercher vos notes</li>
|
||
</ul>
|
||
<h3 id="exemples-de-tags">Exemples de tags</h3>
|
||
<p>Vous pouvez écrire vos tags de deux façons :</p>
|
||
<pre><code class="language-yaml"># Format inline
|
||
tags: [projet, urgent, backend, api]
|
||
|
||
# Format liste
|
||
tags:
|
||
- projet
|
||
- urgent
|
||
- backend
|
||
- api
|
||
</code></pre>
|
||
<p>Les tags sont indexés et permettent de rechercher vos notes via la barre de recherche.</p>
|
||
<h2 id="guide-markdown">Guide Markdown</h2>
|
||
<h3 id="titres">Titres</h3>
|
||
<pre><code class="language-markdown"># Titre niveau 1
|
||
## Titre niveau 2
|
||
### Titre niveau 3
|
||
</code></pre>
|
||
<h3 id="emphase">Emphase</h3>
|
||
<pre><code class="language-markdown">*italique* ou _italique_
|
||
**gras** ou __gras__
|
||
***gras et italique***
|
||
~~barré~~
|
||
</code></pre>
|
||
<p>Rendu : <em>italique</em>, <strong>gras</strong>, <em><strong>gras et italique</strong></em></p>
|
||
<h3 id="listes">Listes</h3>
|
||
<h4 id="liste-non-ordonne">Liste non ordonnée</h4>
|
||
<pre><code class="language-markdown">- Élément 1
|
||
- Élément 2
|
||
- Sous-élément 2.1
|
||
- Sous-élément 2.2
|
||
- Élément 3
|
||
</code></pre>
|
||
<p>Rendu :</p>
|
||
<ul>
|
||
<li>Élément 1</li>
|
||
<li>Élément 2
|
||
<ul>
|
||
<li>Sous-élément 2.1</li>
|
||
<li>Sous-élément 2.2</li>
|
||
</ul>
|
||
</li>
|
||
<li>Élément 3</li>
|
||
</ul>
|
||
<h4 id="liste-ordonne">Liste ordonnée</h4>
|
||
<pre><code class="language-markdown">1. Premier élément
|
||
2. Deuxième élément
|
||
3. Troisième élément
|
||
</code></pre>
|
||
<p>Rendu :</p>
|
||
<ol>
|
||
<li>Premier élément</li>
|
||
<li>Deuxième élément</li>
|
||
<li>Troisième élément</li>
|
||
</ol>
|
||
<h3 id="liens-et-images">Liens et Images</h3>
|
||
<pre><code class="language-markdown">[Texte du lien](https://example.com)
|
||
|
||
</code></pre>
|
||
<p>Exemple : <a href="https://www.markdownguide.org/">Documentation Markdown</a></p>
|
||
<h3 id="code">Code</h3>
|
||
<h4 id="code-inline">Code inline</h4>
|
||
<p>Utilisez des backticks : <code>code inline</code></p>
|
||
<h4 id="bloc-de-code">Bloc de code</h4>
|
||
<pre><code class="language-markdown">```javascript
|
||
function hello() {
|
||
console.log("Hello World!");
|
||
}
|
||
```
|
||
</code></pre>
|
||
<p>Rendu :</p>
|
||
<pre><code class="language-javascript">function hello() {
|
||
console.log("Hello World!");
|
||
}
|
||
</code></pre>
|
||
<h3 id="citations">Citations</h3>
|
||
<pre><code class="language-markdown">> Ceci est une citation
|
||
> sur plusieurs lignes
|
||
</code></pre>
|
||
<p>Rendu :</p>
|
||
<blockquote>
|
||
<p>Ceci est une citation<br />
|
||
sur plusieurs lignes</p>
|
||
</blockquote>
|
||
<h3 id="tableaux">Tableaux</h3>
|
||
<pre><code class="language-markdown">| Colonne 1 | Colonne 2 | Colonne 3 |
|
||
|-----------|-----------|-----------|
|
||
| Ligne 1 | Données | Données |
|
||
| Ligne 2 | Données | Données |
|
||
</code></pre>
|
||
<p>Rendu :</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Colonne 1</th>
|
||
<th>Colonne 2</th>
|
||
<th>Colonne 3</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Ligne 1</td>
|
||
<td>Données</td>
|
||
<td>Données</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Ligne 2</td>
|
||
<td>Données</td>
|
||
<td>Données</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h3 id="sparateurs">Séparateurs</h3>
|
||
<pre><code class="language-markdown">---
|
||
</code></pre>
|
||
<p>Rendu :</p>
|
||
<hr />
|
||
<h2 id="commandes-slash">Commandes Slash</h2>
|
||
<p>Utilisez le caractère <code>/</code> au début d’une ligne pour accéder aux commandes rapides :</p>
|
||
<ul>
|
||
<li><code>/h1</code>, <code>/h2</code>, <code>/h3</code> - Titres</li>
|
||
<li><code>/list</code> - Liste à puces</li>
|
||
<li><code>/date</code> - Insérer la date du jour</li>
|
||
<li><code>/link</code> - Créer un lien</li>
|
||
<li><code>/bold</code> - Texte en gras</li>
|
||
<li><code>/italic</code> - Texte en italique</li>
|
||
<li><code>/code</code> - Code inline</li>
|
||
<li><code>/codeblock</code> - Bloc de code</li>
|
||
<li><code>/quote</code> - Citation</li>
|
||
<li><code>/hr</code> - Ligne de séparation</li>
|
||
<li><code>/table</code> - Créer un tableau</li>
|
||
</ul>
|
||
<p><strong>Navigation</strong> : Utilisez les flèches ↑↓ pour naviguer, Entrée ou Tab pour insérer, Échap pour annuler.</p>
|
||
<h2 id="raccourcis-et-astuces">Raccourcis et Astuces</h2>
|
||
<h3 id="crer-une-note">Créer une note</h3>
|
||
<p>Cliquez sur le bouton <strong>✨ Nouvelle note</strong> dans l’en-tête. Si la note existe déjà, elle sera ouverte, sinon elle sera créée.</p>
|
||
<h3 id="rechercher-des-notes">Rechercher des notes</h3>
|
||
<p>Utilisez la barre de recherche en haut pour filtrer vos notes par tags. La recherche est mise à jour en temps réel.</p>
|
||
<h3 id="sauvegarder">Sauvegarder</h3>
|
||
<p>Cliquez sur le bouton <strong>💾 Enregistrer</strong> pour sauvegarder vos modifications. Le champ <code>last_modified</code> du front matter sera automatiquement mis à jour.</p>
|
||
<h3 id="supprimer-une-note">Supprimer une note</h3>
|
||
<p>Cliquez sur l’icône 🗑️ à côté du nom de la note dans la sidebar.</p>
|
||
<h2 id="organisation-avec-les-tags">Organisation avec les tags</h2>
|
||
<p>Les tags sont un excellent moyen d’organiser vos notes. Voici quelques suggestions :</p>
|
||
<ul>
|
||
<li><strong>Par projet</strong> : <code>projet-notes</code>, <code>projet-api</code>, <code>projet-frontend</code></li>
|
||
<li><strong>Par priorité</strong> : <code>urgent</code>, <code>important</code>, <code>backlog</code></li>
|
||
<li><strong>Par type</strong> : <code>documentation</code>, <code>tutorial</code>, <code>meeting</code>, <code>todo</code></li>
|
||
<li><strong>Par technologie</strong> : <code>javascript</code>, <code>go</code>, <code>python</code>, <code>docker</code></li>
|
||
<li><strong>Par statut</strong> : <code>en-cours</code>, <code>terminé</code>, <code>archive</code></li>
|
||
</ul>
|
||
<h2 id="exemple-complet">Exemple complet</h2>
|
||
<p>Voici un exemple de note complète :</p>
|
||
<pre><code class="language-markdown">---
|
||
title: Réunion API Backend
|
||
date: 08-11-2025
|
||
last_modified: 08-11-2025:15:30
|
||
tags: [meeting, backend, api, urgent]
|
||
---
|
||
|
||
# Réunion API Backend
|
||
|
||
## Participants
|
||
|
||
- Alice (Lead Dev)
|
||
- Bob (Backend)
|
||
- Charlie (Frontend)
|
||
|
||
## Points discutés
|
||
|
||
### 1. Architecture de l'API
|
||
|
||
Nous avons décidé d'utiliser une architecture REST avec les endpoints suivants :
|
||
|
||
- `GET /api/notes` - Liste toutes les notes
|
||
- `POST /api/notes` - Créer une note
|
||
- `PUT /api/notes/:id` - Modifier une note
|
||
- `DELETE /api/notes/:id` - Supprimer une note
|
||
|
||
### 2. Authentification
|
||
|
||
> Utilisation de JWT pour l'authentification
|
||
|
||
Code d'exemple :
|
||
|
||
```go
|
||
func generateToken(userID string) (string, error) {
|
||
// Implementation
|
||
}
|
||
```
|
||
|
||
### 3. Prochaines étapes
|
||
|
||
- [ ] Implémenter les endpoints
|
||
- [ ] Écrire les tests
|
||
- [ ] Documentation API
|
||
|
||
## Actions
|
||
|
||
| Qui | Action | Deadline |
|
||
|---------|---------------------|------------|
|
||
| Bob | Endpoints API | 15-11-2025 |
|
||
| Charlie | Interface Frontend | 20-11-2025 |
|
||
| Alice | Review & Deploy | 25-11-2025 |
|
||
</code></pre>
|
||
<hr />
|
||
<p>Bonne prise de notes ! 📝</p>
|
||
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
document.querySelectorAll('pre code').forEach((block) => {
|
||
hljs.highlightElement(block);
|
||
});
|
||
});
|
||
</script>
|
||
<script>
|
||
// Initialize Lucide icons
|
||
if (typeof lucide !== 'undefined') {
|
||
lucide.createIcons();
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |