# Shaarli Professional Theme > Thème moderne et professionnel pour [Shaarli](https://github.com/shaarli/Shaarli), pensé pour une expérience utilisateur premium, responsive et performante. ## Présentation | | | |---|---| | **Nom interne** | Professional (`shaarli-pro`) | | **Version** | 1.0.0 | | **Compatibilité** | Shaarli ≥ 0.9, PHP ≥ 7.4 | | **Licence** | MIT | | **Dossier** | `tpl/shaarli-pro` | Le thème offre un layout de type application avec barre latérale fixe, navigation fluide, mode clair/sombre natif, et une couche JavaScript riche dédiée à l'interactivité. --- ## Fonctionnalités ### 🎨 Design & Interface - **Mode clair / sombre** avec bascule instantanée, mémorisation dans `localStorage`, et support de `prefers-color-scheme` du système. - **Anti-FOUC** : un script inline dans `` applique le thème *avant* le chargement du CSS pour éviter le flash de contenu non stylé. - **Variables CSS centralisées** (`--primary`, `--bg-body`, `--text-main`, etc.) pour une personnalisation aisée de la palette, des ombres et de la typographie. - **Police Inter** (Google Fonts) pour une typographie moderne et lisible. - **Icônes Material Design Icons** (MDI Webfont v7.2) pour une iconographie cohérente et riche. - **Animations fluides** : transitions sur les cartes, menus, modales, filtres, et effets de hover. ### 📐 Layout Sidebar + Header - **Sidebar fixe** sur desktop (230px) avec : - Logo et titre de l'instance - Navigation : Bookmarks, Tag Cloud, Picture Wall, Daily - Section Admin (si connecté) : Tools, Settings - Bouton « New Bookmark » (si connecté) - Toggle clair/sombre intégré - **Header sticky** avec : - Navigation principale (HOME, TAG CLOUD, PICTURE WALL, DAILY, SEARCH) - Actions rapides : filtres, multi-sélection, RSS, outils, login/logout - Support des boutons de plugins (`plugins_header.buttons_toolbar`) - **Responsive** : la sidebar se transforme en menu escamotable (hamburger) sous 1024px. ### 🔍 Recherche « Spotlight » - Modale de recherche en surimpression inspirée de macOS Spotlight. - **Raccourci clavier** : touche `S` pour ouvrir, `ESC` pour fermer. - **Deux modes** : recherche par texte libre ou filtrage par tags. - **Résultats en temps réel** avec défilement au clavier (↑ / ↓) et sélection via `Enter`. - **Surlignage** (highlight) des termes correspondants dans les résultats. - **Debounce** (150ms) pour optimiser les performances lors de la saisie. ### 🎛️ Filtres Rapides - **Panneau de filtres** en dropdown depuis le header : - Nombre de liens par page (20, 50, 100, ou valeur personnalisée) - Filtrage par visibilité : liens privés, publics, ou tous (si connecté) - Filtrage par tags : liens non tagués uniquement - **Bannière d'information** dynamique indiquant les filtres actifs avec compteur de résultats. - **Indicateur visuel** (badge pulsant) sur le bouton filtre lorsque des filtres sont actifs. - **Bouton "Clear"** pour réinitialiser tous les filtres en un clic. ### 📄 Trois Vues de Liens | Vue | Description | |-----|-------------| | **Grille** | Cartes avec miniatures, description tronquée (3 lignes), tags et actions. Idéal pour le parcours visuel. | | **Liste** | Disposition horizontale avec miniature latérale en fondu, description (2 lignes), footer avec tags et actions. | | **Compact** | Mode dense style tableau : titre + URL sur une ligne, tags et actions alignés à droite. Parfait pour les grandes collections. | - Le choix de vue est persisté dans `localStorage`. - Chaque vue a son propre positionnement pour : badges de visibilité, cases de sélection, boutons d'action. ### ✅ Multi-Sélection & Actions Groupées - **Mode sélection** activable via le bouton dans le header. - Cases à cocher sur chaque bookmark (apparaissent au survol ou en mode sélection). - **Barre d'actions groupées** fixe en bas avec : - Compteur de sélection - « Select all » pour sélectionner tous les liens visibles - Actions : DELETE, SET PUBLIC, SET PRIVATE - Bouton CANCEL pour quitter le mode ### 🖼️ Picture Wall (Mur d'Images) - **Grille responsive** avec taille d'image configurable via un slider (120px–400px). - **Boutons +/−** pour ajuster rapidement la taille. - **Persistance** de la taille choisie dans `localStorage`. - **Overlay au survol** avec titre et URL du bookmark. - **Animations** : zoom léger de l'image au survol, apparition de l'overlay en slide. - **Indicateur de lien externe** (icône en haut à droite au survol). ### 📅 Page Daily - Navigation jour / semaine / mois avec boutons de sélection. - Affichage chronologique des bookmarks avec : - Titre cliquable vers l'URL originale - Miniature (si disponible) - Description formatée - Horodatage et tags - Navigation précédent / suivant entre les périodes. - Support des zones de plugins. ### 🎵 Lecteur Multimédia Persistant - **Détection automatique** des URLs audio/streaming dans les bookmarks. - Bouton ▶ injecté dans la barre d'actions des bookmarks contenant des médias. - **Barre de lecture fixe** en bas de page avec : - Lecture / Pause - Barre de progression interactive - Affichage du temps (ou « LIVE » pour les flux en continu) - Contrôle de volume avec bouton mute - Bouton de fermeture - **Persistance entre pages** : le lecteur reprend la lecture au même point lors de la navigation. - Formats supportés : MP3, OGG, FLAC, WAV, AAC, M4A, OPUS, WMA, WEBM, M3U8, M3U, PLS. ### 🔌 Intégration des Plugins - **QR Code** : remplacement de l'image inline par une icône MDI + modale élégante avec animation. - **ReadItLater** : - Icônes MDI (œil ouvert/fermé) au lieu du texte brut - Badge « To Read » positionné sur les bookmarks non lus - Bordure rouge sur les bookmarks à lire - Masquage du bouton « Mark as Read » dans la zone de pagination - **Zones de plugins** : toutes les zones Shaarli standard sont supportées (`plugin_start_zone`, `plugin_end_zone`, `link_plugin`, `edit_link_plugin`, `buttons_toolbar`, etc.). ### 📄 Pages d'Administration - **Outils** : liste moderne avec icônes, labels, sous-labels et chevrons de navigation. - **Configuration** : formulaires stylés avec le design system du thème. - **Gestion des tags** : renommage et suppression avec interface claire. - **Import / Export** : pages de gestion des bookmarks Netscape. - **Plugins Admin** : configuration et activation/désactivation des plugins. - **Statistiques** : affichage du nombre total de liens et liens privés. - **Bookmarklets** : boutons « Shaare link » et « Add Note » prêts à glisser. - **Apps tierces** : liens rapides vers les extensions Firefox, Chrome, et apps Android/iOS. ### ♿ Accessibilité & Performance - `:focus-visible` pour les éléments interactifs (clavier uniquement). - `content-visibility: auto` sur les cartes de bookmarks pour un rendu optimisé. - `loading="lazy"` sur les images et miniatures. - Support `@media print` : masquage automatique de la sidebar, header et actions. - Markup sémantique HTML5. - Attributs `title` sur tous les boutons et liens d'action. ### 📱 Responsive Design | Breakpoint | Adaptations | |------------|-------------| | `> 1024px` | Layout complet sidebar + contenu | | `≤ 1024px` | Sidebar escamotable, menu mobile, textes de nav masqués | | `≤ 768px` | Grille en colonne unique, toolbar empilé, header nav masqué | | `≤ 480px` | Paddings réduits, vue liste en colonne, miniatures pleine largeur | --- ## Installation ### 1. Téléchargement ```bash git clone https://github.com/votre-utilisateur/shaarli_bc_theme.git ``` ### 2. Copie dans Shaarli Copier le dossier `shaarli-pro/` dans le répertoire `tpl/` de votre instance Shaarli, à côté du dossier `default/` : ```bash # Via Docker docker cp "./shaarli-pro" shaarli_bookmarks:/var/www/shaarli/tpl/ # Ou manuellement cp -r shaarli-pro/ /path/to/shaarli/tpl/ ``` ### 3. Permissions ```bash # Docker docker exec -it shaarli_bookmarks chown -R nginx:nginx /var/www/shaarli/tpl/shaarli-pro # Manuel chown -R www-data:www-data /path/to/shaarli/tpl/shaarli-pro/ ``` --- ## Activation ### Via l'interface (recommandé) 1. Connectez-vous à Shaarli en tant qu'administrateur. 2. Ouvrez **Tools > Configure your Shaarli**. 3. Choisissez **Professional (shaarli-pro)** dans la liste des thèmes. 4. Sauvegardez, puis rafraîchissez la page d'accueil. ### Activation manuelle (Shaarli < 0.9) Modifiez `data/config.json.php` : ```json { "resource": { "theme": "shaarli-pro" } } ``` Ou via Docker : ```bash docker exec -it myshaarli sed -i 's/"theme": "default"/"theme": "shaarli-pro"/' /var/www/shaarli/data/config.json.php ``` Redémarrez PHP si nécessaire et videz le cache navigateur. --- ## Configuration & Personnalisation ### Palette et Typographies Modifiez les variables CSS dans `shaarli-pro/css/style.css` section `:root` et `[data-theme="dark"]`, ou surchargez-les proprement via `data/user.css` : ```css /* data/user.css */ :root { --primary: #8b5cf6; /* Violet au lieu de bleu */ --primary-hover: #7c3aed; --bg-body: #fafaf9; } ``` ### Comportements JavaScript Adaptez `shaarli-pro/js/script.js` pour personnaliser : - Le mode de recherche par défaut (tags vs texte) - Les extensions audio reconnues par le lecteur - Le comportement des filtres ### Templates additionnels Créez un fichier `tpl/shaarli-pro/extra.html` pour injecter du CSS/JS supplémentaire — il sera automatiquement inclus s'il existe. --- ## Structure du Projet ``` shaarli-pro/ ├── css/ │ └── style.css # Styles principaux + variables CSS (light/dark) ├── js/ │ └── script.js # Interactions (thème, recherche, filtres, sélection, lecteur) ├── theme_info.php # Métadonnées du thème ├── includes.html # Head commun (meta, CSS, JS, config Shaarli) ├── page.header.html # Sidebar + Header + Search overlay + Filtres ├── page.footer.html # Footer + Bulk actions bar + Media player ├── linklist.html # Page principale des bookmarks ├── linklist.paging.html # Composant de pagination ├── daily.html # Vue quotidienne / hebdomadaire / mensuelle ├── editlink.html # Formulaire d'ajout/édition de bookmark ├── picwall.html # Mur d'images avec contrôle de taille ├── tag.cloud.html # Nuage de tags avec filtre alphabétique ├── tag.list.html # Liste de tags avec recherche dynamique ├── tag.sort.html # Navigation entre vues tag ├── tools.html # Page d'administration ├── loginform.html # Formulaire de connexion ├── configure.html # Page de configuration ├── changepassword.html # Changement de mot de passe ├── changetag.html # Gestion des tags ├── pluginsadmin.html # Administration des plugins ├── server.html # Informations serveur ├── server.requirements.html # Prérequis serveur ├── import.html # Import de bookmarks ├── export.html # Export de bookmarks ├── export.bookmarks.html # Template d'export Netscape ├── addlink.html # Ajout rapide de lien ├── editlink.batch.html # Édition par lot ├── thumbnails.html # Synchronisation des miniatures ├── opensearch.html # Descripteur OpenSearch ├── feed.rss.html # Template de flux RSS ├── feed.atom.html # Template de flux Atom ├── dailyrss.html # Template RSS quotidien ├── 404.html # Page d'erreur 404 ├── error.html # Page d'erreur générique └── page.html # Page wrapper ``` --- ## Raccourcis Clavier | Touche | Action | |--------|--------| | `S` | Ouvrir la recherche Spotlight | | `ESC` | Fermer la recherche / les filtres / les modales | | `↑` / `↓` | Naviguer dans les résultats de recherche | | `Enter` | Sélectionner le résultat courant | --- ## Mise à Jour 1. Sauvegardez vos personnalisations (`data/user.css`, `extra.html`). 2. Remplacez le dossier `tpl/shaarli-pro/` par la nouvelle version. 3. Purgez les caches navigateur et OPcache. 4. Vérifiez le bon fonctionnement de vos plugins. --- ## Support - Ouvrez une issue en joignant captures d'écran et logs. - Indiquez vos versions : Shaarli, PHP, thème et plugins activés. --- Bon partage de liens ! 🔖