Add help modal navigation with table of contents, scroll spy, vault context indicator, and new window button for file viewing
This commit is contained in:
parent
b40fcae62f
commit
d8e5d0ef57
@ -879,8 +879,15 @@
|
||||
function syncVaultSelectors() {
|
||||
const filter = document.getElementById("vault-filter");
|
||||
const quickSelect = document.getElementById("vault-quick-select");
|
||||
const contextText = document.getElementById("vault-context-text");
|
||||
|
||||
if (filter) filter.value = selectedContextVault;
|
||||
if (quickSelect) quickSelect.value = selectedContextVault;
|
||||
|
||||
// Update vault context indicator
|
||||
if (contextText) {
|
||||
contextText.textContent = selectedContextVault === "all" ? "All" : selectedContextVault;
|
||||
}
|
||||
}
|
||||
|
||||
function scrollTreeItemIntoView(element, alignToTop) {
|
||||
@ -1677,6 +1684,16 @@
|
||||
openEditor(data.vault, data.path);
|
||||
});
|
||||
|
||||
const openNewWindowBtn = el("button", { class: "btn-action", title: "Ouvrir dans une nouvelle fenêtre" }, [
|
||||
icon("external-link", 14),
|
||||
document.createTextNode("Nouvelle fenêtre"),
|
||||
]);
|
||||
openNewWindowBtn.addEventListener("click", () => {
|
||||
const currentUrl = window.location.origin + window.location.pathname;
|
||||
const fileUrl = `${currentUrl}#file=${encodeURIComponent(data.vault)}:${encodeURIComponent(data.path)}`;
|
||||
window.open(fileUrl, '_blank');
|
||||
});
|
||||
|
||||
// Frontmatter
|
||||
let fmSection = null;
|
||||
if (data.frontmatter && Object.keys(data.frontmatter).length > 0) {
|
||||
@ -1730,7 +1747,7 @@
|
||||
area.appendChild(el("div", { class: "file-header" }, [
|
||||
el("div", { class: "file-title" }, [document.createTextNode(data.title)]),
|
||||
tagsDiv,
|
||||
el("div", { class: "file-actions" }, [copyBtn, sourceBtn, downloadBtn, editBtn]),
|
||||
el("div", { class: "file-actions" }, [copyBtn, sourceBtn, downloadBtn, editBtn, openNewWindowBtn]),
|
||||
]));
|
||||
if (fmSection) area.appendChild(fmSection);
|
||||
area.appendChild(mdDiv);
|
||||
@ -1798,6 +1815,7 @@
|
||||
modal.classList.add("active");
|
||||
closeHeaderMenu();
|
||||
safeCreateIcons();
|
||||
initHelpNavigation();
|
||||
});
|
||||
|
||||
closeBtn.addEventListener("click", closeHelpModal);
|
||||
@ -1814,6 +1832,49 @@
|
||||
});
|
||||
}
|
||||
|
||||
function initHelpNavigation() {
|
||||
const helpContent = document.querySelector(".help-content");
|
||||
const navLinks = document.querySelectorAll(".help-nav-link");
|
||||
|
||||
if (!helpContent || !navLinks.length) return;
|
||||
|
||||
// Handle nav link clicks
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
const targetId = link.getAttribute("href").substring(1);
|
||||
const targetSection = document.getElementById(targetId);
|
||||
if (targetSection) {
|
||||
targetSection.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Scroll spy - update active nav link based on scroll position
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const id = entry.target.getAttribute("id");
|
||||
navLinks.forEach(link => {
|
||||
if (link.getAttribute("href") === `#${id}`) {
|
||||
navLinks.forEach(l => l.classList.remove("active"));
|
||||
link.classList.add("active");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}, {
|
||||
root: helpContent,
|
||||
rootMargin: "-20% 0px -70% 0px",
|
||||
threshold: 0
|
||||
});
|
||||
|
||||
// Observe all sections
|
||||
document.querySelectorAll(".help-section").forEach(section => {
|
||||
observer.observe(section);
|
||||
});
|
||||
}
|
||||
|
||||
function closeHelpModal() {
|
||||
const modal = document.getElementById("help-modal");
|
||||
if (modal) modal.classList.remove("active");
|
||||
|
||||
@ -133,6 +133,10 @@
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="vault-context-indicator" id="vault-context-indicator" title="Contexte vault actif">
|
||||
<i data-lucide="database" style="width:14px;height:14px"></i>
|
||||
<span id="vault-context-text">All</span>
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<button class="header-menu-btn" id="header-menu-btn" title="Options">
|
||||
<i data-lucide="settings" style="width:18px;height:18px"></i>
|
||||
@ -402,7 +406,7 @@
|
||||
<div class="editor-modal" id="help-modal">
|
||||
<div class="editor-container help-container">
|
||||
<div class="editor-header">
|
||||
<div class="editor-title" id="help-title">Aide ObsiGate</div>
|
||||
<div class="editor-title" id="help-title">Guide d'utilisation ObsiGate</div>
|
||||
<div class="editor-actions">
|
||||
<button class="editor-btn" id="help-close" title="Fermer l'aide" aria-label="Fermer l'aide">
|
||||
<i data-lucide="x" style="width:16px;height:16px"></i>
|
||||
@ -410,142 +414,340 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-body help-body" id="help-body">
|
||||
<nav class="help-nav" id="help-nav">
|
||||
<div class="help-nav-title">Sommaire</div>
|
||||
<ul class="help-nav-list">
|
||||
<li><a href="#help-intro" class="help-nav-link">Introduction</a></li>
|
||||
<li><a href="#help-interface" class="help-nav-link">Interface</a></li>
|
||||
<li><a href="#help-navigation" class="help-nav-link">Navigation</a></li>
|
||||
<li><a href="#help-recherche" class="help-nav-link">Recherche</a></li>
|
||||
<li><a href="#help-tags" class="help-nav-link">Tags</a></li>
|
||||
<li><a href="#help-fichiers" class="help-nav-link">Fichiers</a></li>
|
||||
<li><a href="#help-personnalisation" class="help-nav-link">Personnalisation</a></li>
|
||||
<li><a href="#help-raccourcis" class="help-nav-link">Raccourcis</a></li>
|
||||
<li><a href="#help-astuces" class="help-nav-link">Astuces</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="help-content">
|
||||
<section class="help-hero">
|
||||
<div class="help-hero-copy">
|
||||
<div class="help-kicker">📘 Guide d'utilisation</div>
|
||||
<h1>Bienvenue dans ObsiGate</h1>
|
||||
<p>Explorez vos notes, changez de vault en un clic, filtrez avec les tags et retrouvez immédiatement le bon document grâce à une navigation pensée pour aller vite.</p>
|
||||
<section class="help-section" id="help-intro">
|
||||
<h1>📘 Bienvenue dans ObsiGate</h1>
|
||||
<p class="help-lead">ObsiGate est votre porte d'entrée web vers vos vaults Obsidian. Accédez, naviguez et recherchez dans toutes vos notes depuis n'importe quel appareil via une interface moderne et responsive.</p>
|
||||
<div class="help-badges">
|
||||
<span class="help-badge">⚡ Navigation rapide</span>
|
||||
<span class="help-badge">🗂️ Multi-vault</span>
|
||||
<span class="help-badge">🏷️ Tags intelligents</span>
|
||||
<span class="help-badge">📝 Lecture et édition</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-hero-visual" aria-hidden="true">
|
||||
<div class="help-mini-window">
|
||||
<div class="help-mini-window-bar">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="help-mini-window-body">
|
||||
<div class="help-mini-sidebar"></div>
|
||||
<div class="help-mini-content">
|
||||
<div class="help-mini-line short"></div>
|
||||
<div class="help-mini-line"></div>
|
||||
<div class="help-mini-tags">
|
||||
<span>#docker</span>
|
||||
<span>#infra</span>
|
||||
<span>#linux</span>
|
||||
</div>
|
||||
<div class="help-mini-card"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="help-badge">🔍 Recherche TF-IDF</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="help-grid">
|
||||
<article class="help-card">
|
||||
<div class="help-card-icon">🔎</div>
|
||||
<h2>Rechercher vite</h2>
|
||||
<p>Utilisez la barre de recherche en haut pour retrouver un mot, un titre ou un contenu dans vos notes.</p>
|
||||
</article>
|
||||
<article class="help-card">
|
||||
<div class="help-card-icon">🗃️</div>
|
||||
<h2>Changer de vault</h2>
|
||||
<p>Le sélecteur de vault vous permet de rester sur <code>Tous les vaults</code> ou de vous concentrer sur un espace précis.</p>
|
||||
</article>
|
||||
<article class="help-card">
|
||||
<div class="help-card-icon">🏷️</div>
|
||||
<h2>Filtrer par tags</h2>
|
||||
<p>Cliquez sur un tag pour affiner les résultats et retrouver rapidement les notes associées.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="help-section" id="help-interface">
|
||||
<h2>🧭 Interface utilisateur</h2>
|
||||
|
||||
<section class="help-section">
|
||||
<h2>🧭 Comprendre l’interface</h2>
|
||||
<div class="help-feature-list">
|
||||
<div class="help-feature-item">
|
||||
<div class="help-feature-emoji">🧱</div>
|
||||
<div>
|
||||
<h3>En-tête</h3>
|
||||
<p>Il regroupe la recherche globale, le bouton menu des options et l’accès rapide à l’identité de l’application.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-feature-item">
|
||||
<div class="help-feature-emoji">🌲</div>
|
||||
<div>
|
||||
<h3>Sidebar</h3>
|
||||
<p>La barre latérale affiche les vaults, les dossiers, les fichiers et les tags. Elle peut être redimensionnée sur desktop.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-feature-item">
|
||||
<div class="help-feature-emoji">📄</div>
|
||||
<div>
|
||||
<h3>Zone centrale</h3>
|
||||
<p>Elle sert à lire la note, afficher son chemin, voir ses tags et déclencher les actions comme copier, source, télécharger ou éditer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>La barre supérieure contient les éléments essentiels :</p>
|
||||
<ul>
|
||||
<li><strong>Bouton menu hamburger</strong> (mobile) : Affiche/masque la sidebar</li>
|
||||
<li><strong>Bouton toggle sidebar</strong> (desktop) : Masque la sidebar pour plus d'espace</li>
|
||||
<li><strong>Logo ObsiGate</strong> : Retour à l'accueil</li>
|
||||
<li><strong>Barre de recherche</strong> : Recherche globale avec autocomplétion</li>
|
||||
<li><strong>Indicateur de vault</strong> : Affiche le contexte actif (All, vault1, etc.)</li>
|
||||
<li><strong>Menu Options</strong> : Accès aux paramètres, thème, aide</li>
|
||||
</ul>
|
||||
|
||||
<h3>Sidebar (barre latérale)</h3>
|
||||
<p>La sidebar est divisée en deux onglets :</p>
|
||||
<ul>
|
||||
<li><strong>Vaults</strong> : Arborescence des fichiers et dossiers</li>
|
||||
<li><strong>Tags</strong> : Nuage de tags cliquables</li>
|
||||
</ul>
|
||||
<p>Fonctionnalités de la sidebar :</p>
|
||||
<ul>
|
||||
<li><strong>Filtrage</strong> : Barre de recherche pour filtrer fichiers/tags</li>
|
||||
<li><strong>Sélection rapide</strong> : Dropdown pour changer de vault</li>
|
||||
<li><strong>Redimensionnement</strong> : Glissez le bord droit pour ajuster la largeur</li>
|
||||
<li><strong>Masquage</strong> : Cliquez sur l'icône sidebar dans le header</li>
|
||||
</ul>
|
||||
|
||||
<h3>Zone de contenu</h3>
|
||||
<p>La zone centrale affiche :</p>
|
||||
<ul>
|
||||
<li><strong>Breadcrumb</strong> : Chemin du fichier (cliquable pour repositionner la sidebar)</li>
|
||||
<li><strong>Titre et tags</strong> : Métadonnées du fichier</li>
|
||||
<li><strong>Boutons d'action</strong> : Copier, Source, Télécharger, Éditer, Ouvrir dans nouvelle fenêtre</li>
|
||||
<li><strong>Contenu rendu</strong> : Markdown avec wikilinks et images</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section">
|
||||
<h2>🚀 Parcours recommandé</h2>
|
||||
<div class="help-steps">
|
||||
<div class="help-step">
|
||||
<div class="help-step-number">1</div>
|
||||
<div>
|
||||
<h3>Choisissez un contexte</h3>
|
||||
<p>Sélectionnez un vault dans le menu du haut ou dans la sidebar pour réduire le bruit et cibler votre navigation.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-step">
|
||||
<div class="help-step-number">2</div>
|
||||
<div>
|
||||
<h3>Explorez l’arborescence</h3>
|
||||
<p>Dépliez les dossiers, ouvrez une note et utilisez le chemin en haut de page pour revenir visuellement au bon endroit dans la sidebar.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-step">
|
||||
<div class="help-step-number">3</div>
|
||||
<div>
|
||||
<h3>Affinez avec les tags</h3>
|
||||
<p>Ajoutez un ou plusieurs tags pour filtrer vos contenus de façon plus fine et faire émerger les notes pertinentes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="help-section" id="help-navigation">
|
||||
<h2>🗺️ Navigation</h2>
|
||||
|
||||
<h3>Arborescence des vaults</h3>
|
||||
<p>Cliquez sur un vault pour l'ouvrir et voir son contenu. Les dossiers affichent un chevron et un badge avec le nombre d'éléments.</p>
|
||||
<ul>
|
||||
<li><strong>Développer/Réduire</strong> : Cliquez sur un dossier</li>
|
||||
<li><strong>Ouvrir un fichier</strong> : Cliquez sur le nom du fichier</li>
|
||||
<li><strong>Icônes</strong> : Chaque type de fichier a son icône (markdown, code, etc.)</li>
|
||||
</ul>
|
||||
|
||||
<h3>Filtrage de la sidebar</h3>
|
||||
<p>Utilisez la barre de filtrage en haut de la sidebar pour rechercher rapidement :</p>
|
||||
<ul>
|
||||
<li><strong>Recherche instantanée</strong> : Tapez pour filtrer fichiers et dossiers</li>
|
||||
<li><strong>Case-sensitive</strong> : Bouton "Aa" pour respecter la casse</li>
|
||||
<li><strong>Effacer</strong> : Bouton "×" pour réinitialiser le filtre</li>
|
||||
<li><strong>Résultats groupés</strong> : Affichage par vault avec chemins complets</li>
|
||||
</ul>
|
||||
|
||||
<h3>Breadcrumb et repositionnement</h3>
|
||||
<p>Le chemin affiché au-dessus du contenu est interactif :</p>
|
||||
<ul>
|
||||
<li><strong>Cliquez sur le vault</strong> : Focus sur le vault dans la sidebar</li>
|
||||
<li><strong>Cliquez sur un segment</strong> : Navigation vers ce dossier</li>
|
||||
<li><strong>Auto-scroll</strong> : La sidebar se positionne automatiquement</li>
|
||||
</ul>
|
||||
|
||||
<h3>Sélection de vault</h3>
|
||||
<p>Changez de contexte pour filtrer l'affichage :</p>
|
||||
<ul>
|
||||
<li><strong>Menu header</strong> : Dropdown "Vault" dans le menu Options</li>
|
||||
<li><strong>Sidebar dropdown</strong> : Sélection rapide en haut de l'onglet Vaults</li>
|
||||
<li><strong>Tous les vaults</strong> : Vue globale de tous vos contenus</li>
|
||||
<li><strong>Vault spécifique</strong> : Focus sur un seul vault</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section">
|
||||
<h2>✨ Actions utiles au quotidien</h2>
|
||||
<div class="help-checklist">
|
||||
<div class="help-check-item"><span>✅</span><p>Basculer entre thème <strong>clair</strong> et <strong>sombre</strong> depuis le menu Options.</p></div>
|
||||
<div class="help-check-item"><span>✅</span><p>Utiliser <code>Tous les vaults</code> pour une vue globale ou cibler un seul vault pour une navigation plus nette.</p></div>
|
||||
<div class="help-check-item"><span>✅</span><p>Cliquer sur un tag dans la note ou dans la sidebar pour lancer un filtrage rapide.</p></div>
|
||||
<div class="help-check-item"><span>✅</span><p>Ouvrir une note puis utiliser <strong>Copier</strong>, <strong>Source</strong>, <strong>Télécharger</strong> ou <strong>Éditer</strong>.</p></div>
|
||||
</div>
|
||||
<section class="help-section" id="help-recherche">
|
||||
<h2>🔍 Recherche</h2>
|
||||
|
||||
<h3>Recherche simple</h3>
|
||||
<p>Tapez dans la barre de recherche en haut pour lancer une recherche fulltext :</p>
|
||||
<ul>
|
||||
<li><strong>Recherche dans tout</strong> : Titre, contenu, tags, chemins</li>
|
||||
<li><strong>Scoring intelligent</strong> : Résultats classés par pertinence TF-IDF</li>
|
||||
<li><strong>Snippets surlignés</strong> : Extraits avec termes en surbrillance</li>
|
||||
<li><strong>Pagination</strong> : Navigation par pages de 50 résultats</li>
|
||||
</ul>
|
||||
|
||||
<h3>Opérateurs avancés</h3>
|
||||
<p>Utilisez des opérateurs pour affiner votre recherche :</p>
|
||||
<ul>
|
||||
<li><code>tag:docker</code> ou <code>#docker</code> : Filtrer par tag</li>
|
||||
<li><code>vault:IT</code> : Rechercher dans un vault spécifique</li>
|
||||
<li><code>title:kubernetes</code> : Chercher dans les titres uniquement</li>
|
||||
<li><code>path:recettes/soupes</code> : Filtrer par chemin</li>
|
||||
<li><code>"phrase exacte"</code> : Recherche de phrase entre guillemets</li>
|
||||
</ul>
|
||||
<p><strong>Exemple</strong> : <code>tag:linux vault:IT serveur web</code> recherche "serveur web" dans le vault IT avec le tag linux.</p>
|
||||
|
||||
<h3>Autocomplétion</h3>
|
||||
<p>L'autocomplétion vous aide à trouver rapidement :</p>
|
||||
<ul>
|
||||
<li><strong>Historique</strong> : Les 50 dernières recherches (localStorage)</li>
|
||||
<li><strong>Fichiers</strong> : Suggestions de titres de fichiers</li>
|
||||
<li><strong>Tags</strong> : Suggestions de tags avec compteurs</li>
|
||||
<li><strong>Navigation clavier</strong> : ↑/↓ pour naviguer, Enter pour sélectionner</li>
|
||||
</ul>
|
||||
|
||||
<h3>Chips de filtres actifs</h3>
|
||||
<p>Les opérateurs utilisés s'affichent sous forme de chips colorés :</p>
|
||||
<ul>
|
||||
<li><strong>Visualisation</strong> : Voir d'un coup d'œil les filtres actifs</li>
|
||||
<li><strong>Suppression</strong> : Cliquez sur "×" pour retirer un filtre</li>
|
||||
<li><strong>Couleurs</strong> : Chaque type d'opérateur a sa couleur</li>
|
||||
</ul>
|
||||
|
||||
<h3>Facettes et tri</h3>
|
||||
<p>Les résultats incluent des facettes pour affiner :</p>
|
||||
<ul>
|
||||
<li><strong>Facettes tags</strong> : Compteurs par tag dans les résultats</li>
|
||||
<li><strong>Facettes vaults</strong> : Compteurs par vault</li>
|
||||
<li><strong>Tri par pertinence</strong> : Score TF-IDF (défaut)</li>
|
||||
<li><strong>Tri par date</strong> : Dernière modification</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section help-tip-panel">
|
||||
<h2>💡 Astuces</h2>
|
||||
<div class="help-tip-grid">
|
||||
<div class="help-tip-card">
|
||||
<h3>Navigation visuelle</h3>
|
||||
<p>Quand vous cliquez sur le chemin d’une note, la sidebar se repositionne automatiquement pour montrer l’élément correspondant.</p>
|
||||
</div>
|
||||
<div class="help-tip-card">
|
||||
<h3>Gestion de l’espace</h3>
|
||||
<p>Réduisez <code>VAULTS</code> ou <code>TAGS</code> pour donner plus d’espace à la section qui vous intéresse le plus.</p>
|
||||
</div>
|
||||
<div class="help-tip-card">
|
||||
<h3>Confort de lecture</h3>
|
||||
<p>Adaptez la largeur de la sidebar et la hauteur de la zone tags sur desktop pour un affichage plus confortable.</p>
|
||||
</div>
|
||||
</div>
|
||||
<section class="help-section" id="help-tags">
|
||||
<h2>🏷️ Tags</h2>
|
||||
|
||||
<h3>Tag cloud</h3>
|
||||
<p>L'onglet Tags de la sidebar affiche un nuage de tags :</p>
|
||||
<ul>
|
||||
<li><strong>Tous les tags</strong> : Extraits des frontmatters YAML et inline (#tag)</li>
|
||||
<li><strong>Cliquable</strong> : Cliquez pour filtrer les résultats</li>
|
||||
<li><strong>Filtrage</strong> : Utilisez la barre de filtrage pour chercher un tag</li>
|
||||
<li><strong>Contexte vault</strong> : Les tags s'adaptent au vault sélectionné</li>
|
||||
</ul>
|
||||
|
||||
<h3>Tags inline vs frontmatter</h3>
|
||||
<p>ObsiGate supporte deux types de tags :</p>
|
||||
<ul>
|
||||
<li><strong>Frontmatter YAML</strong> : <code>tags: [docker, linux]</code> ou <code>tags: docker, linux</code></li>
|
||||
<li><strong>Inline</strong> : <code>#docker</code> dans le contenu markdown</li>
|
||||
<li><strong>Fusion automatique</strong> : Les deux types sont combinés</li>
|
||||
</ul>
|
||||
|
||||
<h3>Filtrage de tags template</h3>
|
||||
<p>Dans les Configurations, vous pouvez masquer les tags de template :</p>
|
||||
<ul>
|
||||
<li><strong>Patterns wildcards</strong> : Ex: <code>#<% ... %></code> ou <code>#{{ ... }}</code></li>
|
||||
<li><strong>Regex générée</strong> : Aperçu de la regex appliquée</li>
|
||||
<li><strong>Ajout/Suppression</strong> : Gérez vos patterns de filtrage</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section" id="help-fichiers">
|
||||
<h2>📄 Fichiers</h2>
|
||||
|
||||
<h3>Visualisation</h3>
|
||||
<p>Les fichiers markdown sont rendus avec :</p>
|
||||
<ul>
|
||||
<li><strong>Wikilinks cliquables</strong> : <code>[[lien]]</code> et <code>[[lien|texte]]</code></li>
|
||||
<li><strong>Images Obsidian</strong> : Support de <code>![[image.png]]</code></li>
|
||||
<li><strong>Syntax highlighting</strong> : Coloration des blocs de code</li>
|
||||
<li><strong>Tables, listes, quotes</strong> : Rendu complet du markdown</li>
|
||||
</ul>
|
||||
|
||||
<h3>Actions sur fichiers</h3>
|
||||
<p>Boutons disponibles au-dessus du contenu :</p>
|
||||
<ul>
|
||||
<li><strong>Copier</strong> : Copie le contenu source dans le presse-papiers</li>
|
||||
<li><strong>Source</strong> : Affiche/masque le markdown brut</li>
|
||||
<li><strong>Télécharger</strong> : Télécharge le fichier</li>
|
||||
<li><strong>Éditer</strong> : Ouvre l'éditeur CodeMirror</li>
|
||||
<li><strong>Ouvrir dans nouvelle fenêtre</strong> : Ouvre le fichier dans un nouvel onglet</li>
|
||||
</ul>
|
||||
|
||||
<h3>Édition avec CodeMirror 6</h3>
|
||||
<p>L'éditeur intégré offre :</p>
|
||||
<ul>
|
||||
<li><strong>Coloration syntaxique</strong> : Support de nombreux langages</li>
|
||||
<li><strong>Numéros de ligne</strong> : Navigation facile</li>
|
||||
<li><strong>Autocomplétion</strong> : Suggestions contextuelles</li>
|
||||
<li><strong>Recherche</strong> : Ctrl+F pour chercher dans le fichier</li>
|
||||
<li><strong>Sauvegarde</strong> : Bouton ✓ pour enregistrer</li>
|
||||
<li><strong>Suppression</strong> : Bouton corbeille pour supprimer</li>
|
||||
</ul>
|
||||
|
||||
<h3>Types de fichiers supportés</h3>
|
||||
<p>ObsiGate indexe et affiche :</p>
|
||||
<ul>
|
||||
<li><strong>Markdown</strong> : .md (rendu complet)</li>
|
||||
<li><strong>Code</strong> : .py, .js, .ts, .jsx, .tsx, .java, .c, .cpp, .rs, .go, etc.</li>
|
||||
<li><strong>Config</strong> : .json, .yaml, .yml, .toml, .xml, .ini, .env</li>
|
||||
<li><strong>Scripts</strong> : .sh, .bash, .ps1, .bat</li>
|
||||
<li><strong>Web</strong> : .html, .css, .scss</li>
|
||||
<li><strong>Autres</strong> : .txt, .log, .sql, .csv</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section" id="help-personnalisation">
|
||||
<h2>🎨 Personnalisation</h2>
|
||||
|
||||
<h3>Thème clair/sombre</h3>
|
||||
<p>Basculez entre les thèmes :</p>
|
||||
<ul>
|
||||
<li><strong>Menu Options</strong> : Cliquez sur "Thème" dans le menu</li>
|
||||
<li><strong>Raccourci</strong> : <code>Ctrl+T</code></li>
|
||||
<li><strong>Persistance</strong> : Votre choix est sauvegardé en localStorage</li>
|
||||
<li><strong>Highlight.js</strong> : Les blocs de code s'adaptent au thème</li>
|
||||
</ul>
|
||||
|
||||
<h3>Redimensionnement de la sidebar</h3>
|
||||
<p>Sur desktop, ajustez la largeur de la sidebar :</p>
|
||||
<ul>
|
||||
<li><strong>Handle de redimensionnement</strong> : Bordure droite de la sidebar</li>
|
||||
<li><strong>Glisser-déposer</strong> : Cliquez et glissez pour ajuster</li>
|
||||
<li><strong>Limites</strong> : Min 200px, Max 500px</li>
|
||||
<li><strong>Persistance</strong> : La largeur est sauvegardée</li>
|
||||
</ul>
|
||||
|
||||
<h3>Configuration avancée</h3>
|
||||
<p>Le modal Configurations (menu Options) permet de :</p>
|
||||
<ul>
|
||||
<li><strong>Paramètres de recherche</strong> : Délai debounce, résultats par page, timeout</li>
|
||||
<li><strong>Paramètres backend</strong> : Workers, boosts TF-IDF, expansions préfixe</li>
|
||||
<li><strong>Filtrage de tags</strong> : Patterns pour masquer les tags template</li>
|
||||
<li><strong>Diagnostics</strong> : Stats index, mémoire, moteur de recherche</li>
|
||||
<li><strong>Réindexation</strong> : Forcer un rescan des vaults</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section" id="help-raccourcis">
|
||||
<h2>⌨️ Raccourcis clavier</h2>
|
||||
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li><code>Ctrl+K</code> ou <code>Cmd+K</code> : Focaliser la barre de recherche</li>
|
||||
<li><code>/</code> : Focaliser la recherche (hors champ texte)</li>
|
||||
<li><code>Escape</code> : Fermer les suggestions / quitter la recherche</li>
|
||||
</ul>
|
||||
|
||||
<h3>Recherche et autocomplétion</h3>
|
||||
<ul>
|
||||
<li><code>↑</code> / <code>↓</code> : Naviguer dans les suggestions</li>
|
||||
<li><code>Enter</code> : Sélectionner la suggestion active ou lancer la recherche</li>
|
||||
<li><code>Escape</code> : Fermer le dropdown de suggestions</li>
|
||||
</ul>
|
||||
|
||||
<h3>Interface</h3>
|
||||
<ul>
|
||||
<li><code>Ctrl+T</code> : Basculer le thème clair/sombre</li>
|
||||
</ul>
|
||||
|
||||
<h3>Éditeur CodeMirror</h3>
|
||||
<ul>
|
||||
<li><code>Ctrl+F</code> : Rechercher dans le fichier</li>
|
||||
<li><code>Ctrl+Z</code> : Annuler</li>
|
||||
<li><code>Ctrl+Y</code> : Refaire</li>
|
||||
<li><code>Ctrl+S</code> : Sauvegarder (si configuré)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section" id="help-astuces">
|
||||
<h2>💡 Astuces et bonnes pratiques</h2>
|
||||
|
||||
<h3>Workflow recommandé</h3>
|
||||
<ol>
|
||||
<li><strong>Sélectionnez un contexte</strong> : Choisissez un vault pour réduire le bruit</li>
|
||||
<li><strong>Explorez l'arborescence</strong> : Naviguez dans les dossiers</li>
|
||||
<li><strong>Utilisez les tags</strong> : Filtrez par tags pour affiner</li>
|
||||
<li><strong>Recherchez intelligemment</strong> : Combinez opérateurs et texte libre</li>
|
||||
<li><strong>Profitez de l'historique</strong> : Réutilisez vos recherches fréquentes</li>
|
||||
</ol>
|
||||
|
||||
<h3>Optimisations</h3>
|
||||
<ul>
|
||||
<li><strong>Masquez la sidebar</strong> : Plus d'espace pour le contenu</li>
|
||||
<li><strong>Utilisez le filtrage sidebar</strong> : Plus rapide que la recherche globale pour trouver un fichier</li>
|
||||
<li><strong>Favorisez les opérateurs</strong> : <code>tag:</code> et <code>vault:</code> accélèrent la recherche</li>
|
||||
<li><strong>Breadcrumb cliquable</strong> : Repositionnez rapidement la sidebar</li>
|
||||
</ul>
|
||||
|
||||
<h3>Trucs et astuces</h3>
|
||||
<ul>
|
||||
<li><strong>Navigation visuelle</strong> : Le breadcrumb repositionne automatiquement la sidebar</li>
|
||||
<li><strong>Gestion de l'espace</strong> : Réduisez les sections Vaults/Tags selon vos besoins</li>
|
||||
<li><strong>Confort de lecture</strong> : Ajustez la largeur de la sidebar</li>
|
||||
<li><strong>Mobile-friendly</strong> : Utilisez le bouton hamburger sur mobile</li>
|
||||
<li><strong>Wikilinks</strong> : Naviguez entre notes comme dans Obsidian</li>
|
||||
<li><strong>Images</strong> : Support complet des syntaxes Obsidian</li>
|
||||
</ul>
|
||||
|
||||
<h3>Cas d'usage avancés</h3>
|
||||
<ul>
|
||||
<li><strong>Recherche multi-critères</strong> : <code>tag:docker tag:linux vault:IT nginx</code></li>
|
||||
<li><strong>Exploration par tags</strong> : Cliquez sur un tag dans une note pour voir toutes les notes similaires</li>
|
||||
<li><strong>Édition rapide</strong> : Ouvrez l'éditeur, modifiez, sauvegardez</li>
|
||||
<li><strong>Export</strong> : Téléchargez des fichiers pour backup ou partage</li>
|
||||
<li><strong>Multi-fenêtres</strong> : Ouvrez plusieurs notes dans des onglets séparés</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="help-footer">
|
||||
<p><strong>ObsiGate v1.2.0</strong> — Porte d'entrée web pour vos vaults Obsidian</p>
|
||||
<p>Pour plus d'informations, consultez le <a href="https://git.dracodev.net/Projets/ObsiGate" target="_blank">dépôt du projet</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -118,10 +118,35 @@ a:hover {
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.vault-context-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
|
||||
border-radius: 8px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
cursor: default;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
.vault-context-indicator:hover {
|
||||
background: color-mix(in srgb, var(--accent) 18%, transparent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.vault-context-indicator i {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.hamburger-btn {
|
||||
display: none;
|
||||
background: none;
|
||||
@ -907,9 +932,15 @@ select {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: clamp(16px, 3vw, 40px) clamp(16px, 4vw, 40px) 60px;
|
||||
transition: background 200ms ease;
|
||||
transition: background 200ms ease, margin 300ms ease;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Center content when sidebar is hidden */
|
||||
.sidebar.hidden ~ .content-area {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
.content-area::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
@ -1475,11 +1506,91 @@ select {
|
||||
.help-body {
|
||||
padding: 0;
|
||||
background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 30%), var(--bg-primary);
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* Help Navigation Menu */
|
||||
.help-nav {
|
||||
width: 220px;
|
||||
min-width: 220px;
|
||||
background: var(--bg-secondary);
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 20px 0;
|
||||
overflow-y: auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: calc(90vh - 60px);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.help-nav-title {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
padding: 0 20px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.help-nav-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.help-nav-list li {
|
||||
margin: 0;
|
||||
}
|
||||
.help-nav-link {
|
||||
display: block;
|
||||
padding: 8px 20px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: all 150ms ease;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.help-nav-link:hover {
|
||||
color: var(--accent);
|
||||
background: var(--bg-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
.help-nav-link.active {
|
||||
color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
||||
border-left-color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.help-content {
|
||||
flex: 1;
|
||||
max-width: 920px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 24px 40px;
|
||||
padding: 28px 32px 40px;
|
||||
overflow-y: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.help-lead {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.help-footer {
|
||||
margin-top: 48px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.help-footer a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
.help-footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.help-content h1,
|
||||
.help-content h2,
|
||||
@ -1504,6 +1615,17 @@ select {
|
||||
margin: 0 0 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.help-content ul,
|
||||
.help-content ol {
|
||||
margin: 8px 0 16px;
|
||||
padding-left: 24px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.help-content ul li,
|
||||
.help-content ol li {
|
||||
margin: 6px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.help-content code {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
background: var(--code-bg);
|
||||
@ -1511,6 +1633,11 @@ select {
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.88em;
|
||||
}
|
||||
.help-content strong {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.help-hero {
|
||||
@ -1784,6 +1911,19 @@ select {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Mobile help navigation */
|
||||
@media (max-width: 768px) {
|
||||
.help-nav {
|
||||
display: none;
|
||||
}
|
||||
.help-content {
|
||||
padding: 20px 16px 32px;
|
||||
}
|
||||
.vault-context-indicator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile editor */
|
||||
@media (max-width: 768px) {
|
||||
.editor-modal {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user