mathieu/personotes
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleaning old md

Browse Source
This commit is contained in:
Mathieu Aumont
2025-12-24 16:50:40 +01:00
parent 917a31d5a8
commit 5dd05a2495
14 changed files with 878 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

360
docs/EXPORT_GUIDE.md Normal file
View File

@ -0,0 +1,360 @@
# 📤 Export de Notes Publiques - Guide Complet
## 🎯 Concept
Les notes publiques sont **générées en fichiers HTML statiques** directement sur le serveur. Cela signifie que vous pouvez copier le dossier `public/` et le déployer sur n'importe quel serveur web (Apache, Nginx, GitHub Pages, Netlify, etc.) **sans avoir besoin de Go**.
## 🔍 Lister les notes publiques
Vous pouvez lister toutes les notes publiques avec la commande CLI intégrée :
```bash
./server list-public
```
**Sortie** :
```
📚 Notes publiques (4):
• Mon Guide
Source: personal/guide.md
Public: public/guide.html
Date: 2025-11-13 20:06:21
```
Cette commande lit le fichier `notes/.public.json` et affiche :
- Le titre de chaque note
- Son chemin source
- Son chemin public
- La date de publication
## 📁 Structure générée
Quand vous publiez une note, le système génère automatiquement :
```
public/
├── index.html # Liste de toutes les notes publiques
├── ma-note.html # Notes converties en HTML (structure plate)
├── autre.html
└── static/
├── theme.css # Styles CSS copiés
└── themes.css
```
**Note** : La structure est plate - toutes les notes publiques sont directement dans `public/`, peu importe leur emplacement d'origine dans vos dossiers personnels.
## 🔄 Génération automatique
### Quand une note est publiée
1. **L'utilisateur clique sur "🔒 Privé"** dans l'éditeur
2. Le système :
- Lit le fichier Markdown
- Extrait le front matter (titre, tags, date)
- Convertit le Markdown en HTML avec goldmark
- Génère un fichier HTML standalone complet
- Copie les CSS nécessaires
- Régénère `index.html` avec la nouvelle note
3. **Le bouton devient "🌐 Public"**
### Quand une note est retirée
1. **L'utilisateur clique sur "🌐 Public"**
2. Le système :
- Supprime le fichier HTML correspondant
- Régénère `index.html` sans cette note
3. **Le bouton redevient "🔒 Privé"**
## 📋 Emplacement des fichiers
- **Source** : `notes/` (vos fichiers Markdown originaux)
- **Export** : `public/` (fichiers HTML générés)
- **Index** : `.public.json` (liste des notes publiques)
## 🚀 Déploiement
### Option 1 : Copie manuelle sur serveur web
```bash
# Copier le dossier public/ sur votre serveur
scp -r public/ user@server.com:/var/www/html/notes/
# Ou avec rsync
rsync -av public/ user@server.com:/var/www/html/notes/
```
**Configuration Nginx** :
```nginx
server {
listen 80;
server_name notes.example.com;
root /var/www/html/notes;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
```
**Configuration Apache** :
```apache
<VirtualHost *:80>
ServerName notes.example.com
DocumentRoot /var/www/html/notes
<Directory /var/www/html/notes>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
```
### Option 2 : GitHub Pages (gratuit)
```bash
# 1. Créer un repo GitHub
git init public/
cd public/
git add .
git commit -m "Initial public notes"
# 2. Pousser vers GitHub
git remote add origin https://github.com/username/notes-public.git
git push -u origin main
# 3. Activer GitHub Pages
# Settings → Pages → Source: main branch → Save
```
Vos notes seront disponibles à : `https://username.github.io/notes-public/`
### Option 3 : Netlify Drop (ultra simple)
1. Allez sur https://app.netlify.com/drop
2. Glissez-déposez le dossier `public/`
3. Netlify génère automatiquement une URL
### Option 4 : Vercel
```bash
cd public/
npx vercel
```
## 🔄 Automatisation avec script
Créez un script pour synchroniser automatiquement :
```bash
#!/bin/bash
# sync-public.sh
# Serveur de destination
REMOTE_USER="user"
REMOTE_HOST="server.com"
REMOTE_PATH="/var/www/html/notes"
# Synchroniser
rsync -av --delete public/ ${REMOTE_USER}@${REMOTE_HOST}:${REMOTE_PATH}
echo "✅ Notes publiques synchronisées !"
```
Utilisation :
```bash
chmod +x sync-public.sh
./sync-public.sh
```
## 🔄 Automatisation avec Git Hook
Synchroniser automatiquement après chaque publication :
```bash
# .git/hooks/post-commit
#!/bin/bash
# Si le dossier public/ a changé, synchroniser
if git diff --name-only HEAD~1 | grep -q "^public/"; then
./sync-public.sh
fi
```
## 📊 Avantages de cette approche
### ✅ Performance
- HTML pré-généré = temps de chargement instantané
- Pas de backend requis = moins de latence
- Cacheable à 100% par CDN
### ✅ Sécurité
- Fichiers statiques = surface d'attaque minimale
- Pas de code serveur exécuté côté public
- Isolation complète du système d'édition
### ✅ Portabilité
- Fonctionne sur **n'importe quel serveur web**
- Hébergement gratuit possible (GitHub Pages, Netlify)
- Peut être mis sur un CDN (Cloudflare, etc.)
### ✅ Simplicité
- Pas besoin de Go sur le serveur de destination
- Pas de base de données
- Juste des fichiers HTML à copier
### ✅ SEO
- HTML pré-rendu = indexation optimale par Google
- Pas de JavaScript requis pour afficher le contenu
- Meta tags facilement ajoutables
## 🎨 Personnalisation
### Modifier les styles
Les fichiers CSS sont dans `public/static/`. Vous pouvez les modifier directement :
```bash
# Éditer le CSS
nano public/static/theme.css
# Ou copier vos propres CSS
cp my-custom.css public/static/custom.css
```
### Ajouter des meta tags
Modifiez `internal/api/public.go` dans la fonction `generateStandaloneHTML()` :
```go
<head>
<!-- Meta tags SEO -->
<meta name="description" content="%s">
<meta property="og:title" content="%s">
<meta property="og:type" content="article">
<!-- Votre titre existant -->
<title>%s - PersoNotes</title>
```
### Ajouter Google Analytics
Ajoutez dans `generateStandaloneHTML()` avant `</head>` :
```html
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
```
## 🐛 Dépannage
### Les notes ne s'affichent pas
**Problème** : `/public/` retourne 404
**Solutions** :
1. Vérifier que le dossier `public/` existe : `ls -la public/`
2. Publier au moins une note pour générer le dossier
3. Redémarrer le serveur Go
### Les styles ne s'appliquent pas
**Problème** : La page s'affiche sans CSS
**Solutions** :
1. Vérifier que `public/static/theme.css` existe
2. Les chemins CSS sont relatifs : `../static/theme.css`
3. Si vous copiez ailleurs, ajustez les chemins
### Le HTML contient du Markdown brut
**Problème** : Le Markdown n'est pas converti
**Solutions** :
1. Vérifier que goldmark est installé : `go mod tidy`
2. Republier la note (toggle Private → Public)
3. Vérifier les logs du serveur
## 📝 Workflow recommandé
### Workflow quotidien
1. **Écrire** vos notes en Markdown dans l'éditeur
2. **Publier** les notes que vous voulez partager (bouton Public)
3. **Synchroniser** le dossier `public/` vers votre serveur (manuel ou automatique)
### Workflow avec Git
```bash
# 1. Publier des notes via l'interface web
# 2. Commiter les changements
git add public/
git commit -m "Publish new notes"
git push
# 3. Sur le serveur de production
git pull
# Les nouvelles notes sont disponibles !
```
## 🔐 Sécurité
### Routes publiques (pas d'auth)
- ✅ `/public/*` - Fichiers HTML statiques accessibles à tous
### Routes privées (nécessitent auth)
- 🔒 `/` - Interface d'édition
- 🔒 `/api/*` - APIs de modification
- 🔒 `/api/public/toggle` - **Protéger cet endpoint !**
### Protection recommandée
Utilisez un reverse proxy avec authentification pour protéger l'édition :
```nginx
# Nginx
location /public {
# Pas d'auth - accessible à tous
proxy_pass http://localhost:8080;
}
location / {
# Auth requise pour édition
auth_basic "Personotes Admin";
auth_basic_user_file /etc/nginx/.htpasswd;
proxy_pass http://localhost:8080;
}
```
## 📚 Ressources
- **Goldmark** : https://github.com/yuin/goldmark
- **GitHub Pages** : https://pages.github.com
- **Netlify** : https://www.netlify.com
- **Vercel** : https://vercel.com
## ❓ FAQ
**Q: Puis-je personnaliser le design des pages publiques ?**
R: Oui ! Modifiez `public/static/theme.css` ou éditez la fonction `generateStandaloneHTML()` dans `internal/api/public.go`.
**Q: Les images dans mes notes fonctionnent-elles ?**
R: Oui, si vous utilisez des URLs absolues ou si vous copiez les images dans `public/static/images/`.
**Q: Puis-je exporter vers PDF ?**
R: Les fichiers HTML peuvent être convertis en PDF avec wkhtmltopdf ou un navigateur (Imprimer → PDF).
**Q: Comment supprimer toutes les notes publiques d'un coup ?**
R: Supprimez le dossier `public/` et le fichier `.public.json`, puis relancez le serveur.
**Q: Les modifications des notes sont-elles automatiquement republiées ?**
R: Non. Si vous modifiez une note Markdown qui est déjà publique, vous devez la republier (toggle Private puis Public) pour régénérer le HTML.

7
notes/.favorites.json
View File

@ -62,6 +62,13 @@
"title": "projets", "title": "projets",
"added_at": "2025-12-24T15:59:24.938636283+01:00", "added_at": "2025-12-24T15:59:24.938636283+01:00",
"order": 8 "order": 8
},
{
"path": "documentation/bienvenue.md",
"is_dir": false,
"title": "bienvenue",
"added_at": "2025-12-24T16:30:46.322365652+01:00",
"order": 9
} }
] ]
} }

10
notes/.public.json
View File

@ -1,5 +1,15 @@
{ {
"notes": [ "notes": [
{
"path": "documentation/bienvenue.md",
"title": "Bienvenue dans PersoNotes",
"published_at": "2025-12-24T16:28:26.173656053+01:00"
},
{
"path": "documentation/authentication.md",
"title": "Authentication Guide",
"published_at": "2025-12-24T16:26:46.9731494+01:00"
},
{ {
"path": "ideas/collaboration.md", "path": "ideas/collaboration.md",
"title": "Real-time Collaboration", "title": "Real-time Collaboration",

2
notes/documentation/bienvenue.md
View File

@ -1,7 +1,7 @@
--- ---
title: Bienvenue dans PersoNotes title: Bienvenue dans PersoNotes
date: 08-11-2025 date: 08-11-2025
last_modified: 09-11-2025:01:13 last_modified: 24-12-2025:16:28
tags: tags:
- aide - aide
- documentation - documentation

6
notes/documentation/client-feedback.md
View File

@ -1,7 +1,7 @@
--- ---
title: Client Feedback Session title: Client Feedback Session
date: 10-11-2025 date: 10-11-2025
last_modified: 11-11-2025:11:12 last_modified: 24-12-2025:16:45
tags: tags:
- meeting - meeting
- client - client
@ -28,3 +28,7 @@ Focus sur l'export PDF pour la v1.1
# DERNIER EDIT # DERNIER EDIT
[Progressive Web App](projets/mobile/pwa.md)
`This is a `

0
notes/ideas/collaboration.md → notes/documentation/collaboration.md
View File

0
notes/documentation/api/endpoints.md → notes/ideas/endpoints.md
View File

2
notes/projets/backend/codemirror-integration.md
View File

@ -1,7 +1,7 @@
--- ---
title: CodeMirror Integration title: CodeMirror Integration
date: 10-11-2025 date: 10-11-2025
last_modified: 12-11-2025:09:37 last_modified: 24-12-2025:16:46
tags: tags:
- projet - projet
- frontend - frontend

11
notes/projets/frontend/vite-build.md
View File

@ -1,8 +1,11 @@
--- ---
title: "Vite Build Process" title: Vite Build Process
date: "10-11-2025" date: 10-11-2025
last_modified: "10-11-2025:19:21" last_modified: 24-12-2025:16:41
tags: ["projet", "frontend", "build"] tags:
- projet
- frontend
- build
--- ---
# Vite Build Process # Vite Build Process

59
public/11.html → public/authentication.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daily Note - 2025-11-11 - PersoNotes</title> <title>Authentication Guide - PersoNotes</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
@ -11,6 +11,8 @@
<link rel="stylesheet" href="static/themes.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" /> <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> <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> <style>
body { margin: 0; padding: 0; background: var(--bg-primary, #1e1e1e); color: var(--text-primary, #e0e0e0); font-family: 'JetBrains Mono', monospace; } 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-view-container { max-width: 800px; margin: 0 auto; padding: 2rem; }
@ -54,32 +56,37 @@
</div> </div>
<article> <article>
<div class="public-header"> <div class="public-header">
<h1 class="public-title">Daily Note - 2025-11-11</h1> <h1 class="public-title">Authentication Guide</h1>
<div class="public-meta"><span>📅 11-11-2025</span></div> <div class="public-meta"><span><i data-lucide="calendar" class="icon-sm"></i> 10-11-2025</span></div>
<div class="public-tags"><span class="tag">#daily</span></div> <div class="public-tags"><span class="tag">#documentation</span><span class="tag">#api</span><span class="tag">#security</span></div>
</div> </div>
<div class="public-content"> <div class="public-content">
<h1 id="-mardi-11-novembre-2025">📅 Mardi 11 novembre 2025</h1> <h1 id="authentication">Authentication</h1>
<h2 id="-objectifs-du-jour">🎯 Objectifs du jour</h2> <h2 id="current-status">Current Status</h2>
<p>⚠️ No authentication currently implemented.</p>
<h2 id="future-implementation">Future Implementation</h2>
<h3 id="jwt-tokens">JWT Tokens</h3>
<pre><code>POST /api/auth/login
{
&quot;username&quot;: &quot;user&quot;,
&quot;password&quot;: &quot;pass&quot;
}
Response:
{
&quot;token&quot;: &quot;eyJhbGc...&quot;
}
</code></pre>
<h3 id="bearer-token">Bearer Token</h3>
<pre><code>Authorization: Bearer eyJhbGc...
</code></pre>
<h2 id="security">Security</h2>
<ul> <ul>
<li></li> <li>HTTPS only in production</li>
</ul> <li>Reverse proxy with nginx</li>
<h2 id="-notes">📝 Notes</h2> <li>Rate limiting</li>
<ul>
<li></li>
</ul>
<h2 id="-accompli">✅ Accompli</h2>
<ul>
<li></li>
</ul>
<h2 id="-rflexions">💭 Réflexions</h2>
<ul>
<li></li>
</ul>
<h2 id="-liens">🔗 Liens</h2>
<ul>
<li></li>
</ul> </ul>
<p><!-- raw HTML omitted -->Test Delete 1<!-- raw HTML omitted --></p>
</div> </div>
</article> </article>
@ -91,5 +98,11 @@
}); });
}); });
</script> </script>
<script>
// Initialize Lucide icons
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
</script>
</body> </body>
</html> </html>

312
public/bienvenue.html Normal file
View File

@ -0,0 +1,312 @@
<!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&rsquo;est mon application de prise de note</p>
<h2 id="jespre-quelle-va-bien-marcher">J&rsquo;espére qu&rsquo;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&rsquo;application et le format front matter.</p>
<h2 id="quest-ce-que-le-front-matter-">Qu&rsquo;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&rsquo;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)
![Texte alternatif](url-de-image.jpg)
</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(&quot;Hello World!&quot;);
}
​```
</code></pre>
<p>Rendu :</p>
<pre><code class="language-javascript">function hello() {
console.log(&quot;Hello World!&quot;);
}
</code></pre>
<h3 id="citations">Citations</h3>
<pre><code class="language-markdown">&gt; Ceci est une citation
&gt; 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&rsquo;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&rsquo;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&rsquo;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&rsquo;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
&gt; 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 &amp; 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>

18
public/index.html
View File

@ -36,6 +36,24 @@
<p>Discover my shared notes</p> <p>Discover my shared notes</p>
</div> </div>
<ul class="notes-list"> <ul class="notes-list">
<li class="note-item">
<a href="bienvenue.html">
<h2 class="note-title">Bienvenue dans PersoNotes</h2>
<div class="note-meta">
<span><i data-lucide="calendar" class="icon-sm"></i> Published on 24/12/2025</span>
</div>
</a>
</li>
<li class="note-item">
<a href="authentication.html">
<h2 class="note-title">Authentication Guide</h2>
<div class="note-meta">
<span><i data-lucide="calendar" class="icon-sm"></i> Published on 24/12/2025</span>
</div>
</a>
</li>
<li class="note-item"> <li class="note-item">
<a href="collaboration.html"> <a href="collaboration.html">
<h2 class="note-title">Real-time Collaboration</h2> <h2 class="note-title">Real-time Collaboration</h2>

206
public/static/theme.css
View File

@ -17,35 +17,33 @@
--text-secondary: #b0b0b0; --text-secondary: #b0b0b0;
--text-muted: #6e6e6e; --text-muted: #6e6e6e;
/* Accent colors - Blue focused */ /* Accent color - Single blue accent for consistency */
--accent-primary: #42a5f5; --accent-primary: #42a5f5;
--accent-primary-hover: #64b5f6; --accent-hover: #64b5f6;
--accent-secondary: #29b6f6;
--accent-secondary-hover: #4fc3f7;
/* Semantic colors */ /* Semantic colors */
--success: #66bb6a; --success: #66bb6a;
--warning: #ffa726; --warning: #ffa726;
--error: #ef5350; --error: #ef5350;
/* Spacing */ /* Spacing - 8px base unit system */
--spacing-xs: 0.25rem; --spacing-xs: 0.5rem; /* 8px - 1 unit */
--spacing-sm: 0.5rem; --spacing-sm: 1rem; /* 16px - 2 units */
--spacing-md: 1rem; --spacing-md: 1.5rem; /* 24px - 3 units */
--spacing-lg: 1.5rem; --spacing-lg: 2rem; /* 32px - 4 units */
--spacing-xl: 2rem; --spacing-xl: 3rem; /* 48px - 6 units */
/* Sidebar compact spacing */
--sidebar-item-gap: 0.05rem;
--sidebar-padding-v: 0.3rem;
--sidebar-padding-h: 0.75rem;
--sidebar-indent: 1rem;
/* Shadows */ /* Sidebar spacing - aligned to 8px grid */
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4); --sidebar-item-gap: 0.125rem; /* 2px - minimal spacing between items */
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --sidebar-padding-v: 0.25rem; /* 4px - compact vertical padding */
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --sidebar-padding-h: 1rem; /* 16px */
--shadow-glow: 0 0 20px rgba(66, 165, 245, 0.2); --sidebar-indent: 1.5rem; /* 24px */
/* Shadows - reduced opacity for minimal look */
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-glow: 0 0 20px rgba(66, 165, 245, 0.1);
/* Border radius */ /* Border radius */
--radius-sm: 4px; --radius-sm: 4px;
@ -55,8 +53,59 @@
/* Transitions */ /* Transitions */
--transition-fast: 150ms ease; --transition-fast: 150ms ease;
--transition-normal: 250ms ease; --transition-normal: 250ms ease;
/* Typography scale - consistent font sizes */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px - default */
--text-md: 1.125rem; /* 18px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 2rem; /* 32px */
--text-3xl: 3rem; /* 48px */
/* Touch targets - minimum sizes for accessibility */
--touch-sm: 2rem; /* 32px - compact */
--touch-md: 2.75rem; /* 44px - standard mobile minimum */
--touch-lg: 3rem; /* 48px - comfortable */
/* Lucide Icons - Professional SVG icons */
--icon-xs: 14px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
} }
/* Lucide Icons Styling */
.lucide {
display: inline-block;
vertical-align: middle;
stroke-width: 2;
stroke: currentColor;
fill: none;
}
/* Icon size variants */
.icon-xs { width: var(--icon-xs); height: var(--icon-xs); }
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon-md { width: var(--icon-md); height: var(--icon-md); }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon-xl { width: var(--icon-xl); height: var(--icon-xl); }
/* Icon with text alignment */
.icon-text {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* Icon color variants */
.icon-primary { color: var(--text-primary); }
.icon-secondary { color: var(--text-secondary); }
.icon-muted { color: var(--text-muted); }
.icon-accent { color: var(--accent-primary); }
/* Base styles */ /* Base styles */
html { html {
font-size: 16px; font-size: 16px;
@ -90,7 +139,7 @@ header h1 {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); background: var(--accent-primary);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
@ -257,25 +306,7 @@ aside hr {
margin: var(--spacing-sm) 0; margin: var(--spacing-sm) 0;
} }
/* File tree and search results */ /* File tree and search results - styles now handled by .file-item class */
#file-tree a,
#search-results a {
display: block;
padding: var(--spacing-sm) var(--spacing-md);
color: var(--text-primary);
text-decoration: none;
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
font-size: 0.9rem;
margin-bottom: var(--spacing-xs);
}
#file-tree a:hover,
#search-results a:hover {
background: var(--bg-tertiary);
color: var(--accent-primary);
transform: translateX(2px);
}
/* Search results header */ /* Search results header */
.search-results-header { .search-results-header {
@ -411,7 +442,7 @@ aside hr {
} }
.search-no-results-text strong { .search-no-results-text strong {
color: var(--accent-secondary); color: var(--accent-primary);
} }
.search-no-results-hint { .search-no-results-hint {
@ -455,7 +486,7 @@ aside hr {
.search-help-example code { .search-help-example code {
background: var(--bg-primary); background: var(--bg-primary);
color: var(--accent-secondary); color: var(--accent-primary);
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-size: 0.8rem; font-size: 0.8rem;
@ -720,7 +751,7 @@ main::-webkit-scrollbar-thumb:hover {
.preview h2 { .preview h2 {
font-size: 1.5em; font-size: 1.5em;
color: var(--accent-secondary); color: var(--accent-primary);
margin-bottom: 0.9em; margin-bottom: 0.9em;
} }
@ -771,7 +802,7 @@ main::-webkit-scrollbar-thumb:hover {
} }
.preview ol > li::marker { .preview ol > li::marker {
color: var(--accent-secondary); color: var(--accent-primary);
font-weight: 600; font-weight: 600;
} }
@ -797,7 +828,7 @@ main::-webkit-scrollbar-thumb:hover {
.preview a:hover { .preview a:hover {
text-decoration: underline; text-decoration: underline;
color: var(--accent-primary-hover); color: var(--accent-hover);
} }
.preview strong, .preview b { .preview strong, .preview b {
@ -815,7 +846,7 @@ main::-webkit-scrollbar-thumb:hover {
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-size: 0.85em; font-size: 0.85em;
color: var(--accent-secondary); color: var(--accent-primary);
font-weight: 500; font-weight: 500;
} }
@ -853,7 +884,7 @@ main::-webkit-scrollbar-thumb:hover {
} }
.preview table thead { .preview table thead {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); background: var(--accent-primary);
} }
.preview table thead th { .preview table thead th {
@ -895,7 +926,7 @@ main::-webkit-scrollbar-thumb:hover {
button, button,
[type="submit"], [type="submit"],
[type="button"] { [type="button"] {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); background: var(--accent-primary);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
@ -984,7 +1015,7 @@ button.secondary:hover {
} }
#slash-commands-palette li[style*="background-color"] { #slash-commands-palette li[style*="background-color"] {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important; background: var(--accent-primary) !important;
color: white !important; color: white !important;
font-weight: 500; font-weight: 500;
transform: translateX(2px); transform: translateX(2px);
@ -1016,7 +1047,7 @@ progress::-webkit-progress-bar {
} }
progress::-webkit-progress-value { progress::-webkit-progress-value {
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); background: var(--accent-primary);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
@ -1236,39 +1267,26 @@ body, html {
} }
.folder-item.drag-over .folder-header { .folder-item.drag-over .folder-header {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); background: var(--accent-primary);
color: white; color: white;
box-shadow: var(--shadow-glow); box-shadow: var(--shadow-glow);
border: 2px solid var(--accent-primary); border: 2px solid var(--accent-primary);
border-radius: var(--radius-md); border-radius: var(--radius-md);
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
box-shadow: var(--shadow-glow);
}
50% {
transform: scale(1.02);
box-shadow: 0 0 30px rgba(88, 166, 255, 0.4);
}
} }
.file-item.drag-over { .file-item.drag-over {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); background: var(--accent-primary);
color: white; color: white;
box-shadow: var(--shadow-glow); box-shadow: var(--shadow-glow);
} }
/* Style pour la racine en drag-over */ /* Style pour la racine en drag-over */
.sidebar-section-header.drag-over { .sidebar-section-header.drag-over {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important; background: var(--accent-primary) !important;
color: white !important; color: white !important;
box-shadow: var(--shadow-glow); box-shadow: var(--shadow-glow);
border: 2px solid var(--accent-primary); border: 2px solid var(--accent-primary);
border-radius: var(--radius-md); border-radius: var(--radius-md);
animation: pulse 1s ease-in-out infinite;
} }
.sidebar-section-header.drag-over .folder-name, .sidebar-section-header.drag-over .folder-name,
@ -1401,11 +1419,10 @@ body, html {
/* Quand on drag au-dessus de la racine */ /* Quand on drag au-dessus de la racine */
.root-drop-zone.drag-over .root-folder-header { .root-drop-zone.drag-over .root-folder-header {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); background: var(--accent-primary);
color: white; color: white;
border-color: var(--accent-primary); border-color: var(--accent-primary);
box-shadow: var(--shadow-glow); box-shadow: var(--shadow-glow);
animation: pulse 1s ease-in-out infinite;
} }
.root-drop-zone.drag-over .root-folder-header .folder-name, .root-drop-zone.drag-over .root-folder-header .folder-name,
@ -2053,7 +2070,7 @@ body, html {
} }
.search-modal-result-item.selected { .search-modal-result-item.selected {
background: linear-gradient(135deg, rgba(130, 170, 255, 0.15), rgba(199, 146, 234, 0.15)); background: var(--bg-secondary);
border-color: var(--accent-primary); border-color: var(--accent-primary);
} }
@ -2074,7 +2091,7 @@ body, html {
} }
.search-modal-result-title mark { .search-modal-result-title mark {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); background: var(--accent-primary);
color: white; color: white;
padding: 2px 4px; padding: 2px 4px;
border-radius: 3px; border-radius: 3px;
@ -2200,11 +2217,6 @@ body, html {
border: 3px solid var(--border-primary); border: 3px solid var(--border-primary);
border-top-color: var(--accent-primary); border-top-color: var(--accent-primary);
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
} }
.search-modal-loading p { .search-modal-loading p {
@ -2566,12 +2578,12 @@ body, html {
/* Today */ /* Today */
.calendar-day-today { .calendar-day-today {
border-color: var(--accent-secondary); border-color: var(--accent-primary);
background: linear-gradient(135deg, rgba(130, 170, 255, 0.1), rgba(199, 146, 234, 0.1)); background: var(--bg-secondary);
} }
.calendar-day-today .calendar-day-number { .calendar-day-today .calendar-day-number {
color: var(--accent-secondary); color: var(--accent-primary);
font-weight: 700; font-weight: 700;
} }
@ -2596,7 +2608,7 @@ body, html {
width: 100%; width: 100%;
margin-top: var(--spacing-sm); margin-top: var(--spacing-sm);
padding: var(--spacing-sm); padding: var(--spacing-sm);
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); background: var(--accent-primary);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
@ -2681,11 +2693,12 @@ body, html {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0; padding: 0;
margin: var(--sidebar-item-gap) 0; margin: 0; /* No margin on wrapper - use same spacing as folders */
} }
.file-item-wrapper .file-item { .file-item-wrapper .file-item {
flex: 1; flex: 1;
margin: 0 !important; /* Force remove margin to avoid double spacing */
} }
/* Bouton de mode sélection */ /* Bouton de mode sélection */
@ -2715,8 +2728,8 @@ body, html {
} }
.icon-button.active:hover { .icon-button.active:hover {
background: var(--accent-primary-hover); background: var(--accent-hover);
border-color: var(--accent-primary-hover); border-color: var(--accent-hover);
} }
/* Toolbar de sélection flottante */ /* Toolbar de sélection flottante */
@ -2784,7 +2797,7 @@ body, html {
background: #ff5370; background: #ff5370;
border-color: #ff5370; border-color: #ff5370;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(240, 113, 120, 0.4); box-shadow: 0 4px 12px rgba(240, 113, 120, 0.15);
} }
.danger-button:active { .danger-button:active {
@ -2974,30 +2987,38 @@ body, html {
/* Bouton d'ajout aux favoris (dans le file tree) */ /* Bouton d'ajout aux favoris (dans le file tree) */
.add-to-favorites { .add-to-favorites {
opacity: 0; opacity: 0.4; /* Always slightly visible */
background: transparent; background: transparent;
border: none; border: none;
color: var(--text-muted); color: var(--text-muted);
cursor: pointer; cursor: pointer;
font-size: 0.9rem; font-size: 1rem;
padding: 0 0.2rem; padding: 0.25rem;
transition: all var(--transition-fast); transition: all var(--transition-fast);
margin-left: auto; margin-left: auto;
border-radius: var(--radius-sm);
} }
.folder-header:hover .add-to-favorites, .folder-header:hover .add-to-favorites,
.file-item:hover .add-to-favorites { .file-item:hover .add-to-favorites {
opacity: 1; opacity: 1;
background: var(--bg-tertiary);
} }
.add-to-favorites:hover { .add-to-favorites:hover {
color: var(--warning); color: var(--warning);
transform: scale(1.2); transform: scale(1.15);
background: rgba(255, 193, 7, 0.1); /* Subtle yellow background */
} }
.add-to-favorites.is-favorite { .add-to-favorites.is-favorite {
opacity: 1; opacity: 1 !important; /* Always fully visible when favorited */
color: var(--warning); color: var(--warning);
background: rgba(255, 193, 7, 0.15);
}
.add-to-favorites.is-favorite:hover {
background: rgba(255, 193, 7, 0.2);
} }
/* Responsive - Hauteurs adaptatives pour #favorites-list */ /* Responsive - Hauteurs adaptatives pour #favorites-list */
@ -3162,7 +3183,7 @@ body, html {
} }
.link-inserter-result-item.selected { .link-inserter-result-item.selected {
background: linear-gradient(135deg, rgba(130, 170, 255, 0.15), rgba(199, 146, 234, 0.15)); background: var(--bg-secondary);
border-color: var(--accent-primary); border-color: var(--accent-primary);
} }
@ -3184,7 +3205,7 @@ body, html {
} }
.link-inserter-result-title mark { .link-inserter-result-title mark {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); background: var(--accent-primary);
color: white; color: white;
padding: 2px 4px; padding: 2px 4px;
border-radius: 3px; border-radius: 3px;
@ -3241,7 +3262,6 @@ body, html {
border: 3px solid var(--bg-tertiary); border: 3px solid var(--bg-tertiary);
border-top-color: var(--accent-primary); border-top-color: var(--accent-primary);
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite;
} }
.link-inserter-loading p { .link-inserter-loading p {
@ -3575,7 +3595,7 @@ body, html {
.breadcrumb-link:hover { .breadcrumb-link:hover {
background: var(--bg-tertiary); background: var(--bg-tertiary);
color: var(--accent-secondary); color: var(--accent-primary);
} }
.breadcrumb-separator { .breadcrumb-separator {

32
public/static/themes.css
View File

@ -21,9 +21,7 @@
--text-muted: #6e6e6e; --text-muted: #6e6e6e;
--accent-primary: #42a5f5; --accent-primary: #42a5f5;
--accent-primary-hover: #5ab3f7; --accent-hover: #5ab3f7;
--accent-secondary: #29b6f6;
--accent-secondary-hover: #4fc3f7;
--success: #66bb6a; --success: #66bb6a;
--warning: #ffa726; --warning: #ffa726;
@ -47,9 +45,7 @@
--text-muted: #75715e; --text-muted: #75715e;
--accent-primary: #66d9ef; --accent-primary: #66d9ef;
--accent-primary-hover: #7ee5f7; --accent-hover: #7ee5f7;
--accent-secondary: #88c070;
--accent-secondary-hover: #9acc84;
--success: #88c070; --success: #88c070;
--warning: #e6db74; --warning: #e6db74;
@ -73,9 +69,7 @@
--text-muted: #6272a4; --text-muted: #6272a4;
--accent-primary: #8be9fd; --accent-primary: #8be9fd;
--accent-primary-hover: #9ff3ff; --accent-hover: #9ff3ff;
--accent-secondary: #bd93f9;
--accent-secondary-hover: #cba6ff;
--success: #50fa7b; --success: #50fa7b;
--warning: #f1fa8c; --warning: #f1fa8c;
@ -99,9 +93,7 @@
--text-muted: #5c6370; --text-muted: #5c6370;
--accent-primary: #61afef; --accent-primary: #61afef;
--accent-primary-hover: #75bdf5; --accent-hover: #75bdf5;
--accent-secondary: #c678dd;
--accent-secondary-hover: #d48ae9;
--success: #98c379; --success: #98c379;
--warning: #e5c07b; --warning: #e5c07b;
@ -125,9 +117,7 @@
--text-muted: #586e75; --text-muted: #586e75;
--accent-primary: #268bd2; --accent-primary: #268bd2;
--accent-primary-hover: #4098d9; --accent-hover: #4098d9;
--accent-secondary: #2aa198;
--accent-secondary-hover: #3eb3a8;
--success: #859900; --success: #859900;
--warning: #b58900; --warning: #b58900;
@ -151,9 +141,7 @@
--text-muted: #616e88; --text-muted: #616e88;
--accent-primary: #88c0d0; --accent-primary: #88c0d0;
--accent-primary-hover: #9dcadb; --accent-hover: #9dcadb;
--accent-secondary: #81a1c1;
--accent-secondary-hover: #94b0cc;
--success: #a3be8c; --success: #a3be8c;
--warning: #ebcb8b; --warning: #ebcb8b;
@ -177,9 +165,7 @@
--text-muted: #6c7086; --text-muted: #6c7086;
--accent-primary: #89b4fa; --accent-primary: #89b4fa;
--accent-primary-hover: #a6c8ff; --accent-hover: #a6c8ff;
--accent-secondary: #f5c2e7;
--accent-secondary-hover: #f9d5ee;
--success: #a6e3a1; --success: #a6e3a1;
--warning: #f9e2af; --warning: #f9e2af;
@ -203,9 +189,7 @@
--text-muted: #7a8478; --text-muted: #7a8478;
--accent-primary: #7fbbb3; --accent-primary: #7fbbb3;
--accent-primary-hover: #93c9c1; --accent-hover: #93c9c1;
--accent-secondary: #a7c080;
--accent-secondary-hover: #b8cc94;
--success: #a7c080; --success: #a7c080;
--warning: #dbbc7f; --warning: #dbbc7f;