Introduce a Node build system for minified CSS/JS with content hashes, add PWA support, i18n helpers, accessibility improvements, and more translatable strings. Move theme configuration from bookmarks to localStorage, add Playwright tests, and set up CI workflows.
This commit is contained in:
@@ -7,10 +7,11 @@
|
||||
| | |
|
||||
|---|---|
|
||||
| **Nom interne** | Professional (`shaarli-pro`) |
|
||||
| **Version** | 1.0.0 |
|
||||
| **Version** | 1.1.0 |
|
||||
| **Compatibilité** | Shaarli ≥ 0.9, PHP ≥ 7.4 |
|
||||
| **Licence** | MIT |
|
||||
| **Dossier** | `tpl/shaarli-pro` |
|
||||
| **Build** | Node.js ≥ 18, `npm run build` |
|
||||
|
||||
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é.
|
||||
|
||||
@@ -155,6 +156,55 @@ Le thème offre un layout de type application avec barre latérale fixe, navigat
|
||||
|
||||
---
|
||||
|
||||
## Build & Développement
|
||||
|
||||
Le thème inclut un pipeline de build frontend pour minifier les assets et ajouter du cache-busting.
|
||||
|
||||
```bash
|
||||
cd shaarli-pro
|
||||
npm install # installer les dépendances
|
||||
npm run build # minifier CSS/JS et générer dist/
|
||||
npm run build:css # CSS uniquement
|
||||
npm run build:js # JS uniquement
|
||||
npm run clean # supprimer dist/
|
||||
```
|
||||
|
||||
Les templates chargent les fichiers minifiés depuis `dist/` avec le hash de version Shaarli (`{$version_hash}`).
|
||||
Les sources (`css/`, `js/`) restent les fichiers de référence : **ne modifiez jamais `dist/` à la main**.
|
||||
|
||||
Après chaque build, pensez à committer `dist/` pour que le thème reste utilisable sans Node.js côté production.
|
||||
|
||||
## Tests
|
||||
|
||||
### Tests E2E (Playwright)
|
||||
|
||||
Un socle de tests E2E est fourni pour valider les parcours critiques :
|
||||
|
||||
```bash
|
||||
cd shaarli-pro
|
||||
npm run test:e2e:install # installer les navigateurs Playwright (une fois)
|
||||
SHAARLI_URL=http://localhost:8080 npm run test:e2e
|
||||
```
|
||||
|
||||
Les tests couvrent actuellement :
|
||||
|
||||
- chargement de la page d'accueil,
|
||||
- ouverture de la recherche au clavier (`S`),
|
||||
- bascule clair/sombre,
|
||||
- présence du skip-link,
|
||||
- présence du bouton de multi-sélection.
|
||||
|
||||
Un workflow GitHub Actions dédié (`.github/workflows/e2e.yml`) permet de les exécuter manuellement ou via cron une fois configuré avec `SHAARLI_URL`.
|
||||
|
||||
## PWA (Progressive Web App)
|
||||
|
||||
Le thème fournit un manifeste et un service worker de base :
|
||||
|
||||
- `manifest.json` : icônes, theme-color, mode standalone.
|
||||
- `service-worker.js` : cache les assets statiques du thème (CSS/JS/icônes) pour un fonctionnement dégradé offline.
|
||||
|
||||
Le service worker intercepte uniquement les requêtes situées dans son scope (le dossier du thème). Les pages Shaarli dynamiques continuent d'être servies par le réseau.
|
||||
|
||||
## Installation
|
||||
|
||||
### 1. Téléchargement
|
||||
@@ -163,7 +213,7 @@ Le thème offre un layout de type application avec barre latérale fixe, navigat
|
||||
git clone https://git.dracodev.net/Projets/Shaarli_bm_theme.git
|
||||
```
|
||||
|
||||
### 3. Supprimer le thème en place
|
||||
### 2. Supprimer le thème en place
|
||||
|
||||
```bash
|
||||
# Via Docker
|
||||
@@ -173,7 +223,9 @@ docker exec -it shaarli_bookmarks rm -rf /var/www/shaarli/tpl/shaarli-pro
|
||||
rm -rf /path/to/shaarli/tpl/shaarli-pro
|
||||
```
|
||||
|
||||
### 2. Copie dans Shaarli
|
||||
### 3. Copie dans Shaarli
|
||||
|
||||
Le dossier `dist/` contient les assets CSS/JS déjà minifiés et est versionné. Vous n'avez **pas besoin de lancer `npm install`** si vous utilisez le thème tel quel.
|
||||
|
||||
Copier le dossier `shaarli-pro/` dans le répertoire `tpl/` de votre instance Shaarli, à côté du dossier `default/` :
|
||||
|
||||
@@ -185,7 +237,7 @@ docker cp "./shaarli-pro" shaarli_bookmarks:/var/www/shaarli/tpl/
|
||||
cp -r shaarli-pro/ /path/to/shaarli/tpl/
|
||||
```
|
||||
|
||||
### 3. Permissions
|
||||
### 4. Permissions
|
||||
|
||||
```bash
|
||||
# Docker
|
||||
@@ -226,6 +278,19 @@ docker exec -it myshaarli sed -i 's/"theme": "default"/"theme": "shaarli-pro"/'
|
||||
|
||||
Redémarrez PHP si nécessaire et videz le cache navigateur.
|
||||
|
||||
### Notes importantes
|
||||
|
||||
- Le dossier `dist/` (assets minifiés) est versionné. Si vous clonez/pull le dépôt tel quel, le thème fonctionne immédiatement sans Node.js.
|
||||
- Si vous modifiez `css/` ou `js/`, vous devez relancer le build et committer le nouveau `dist/` :
|
||||
|
||||
```bash
|
||||
cd shaarli-pro
|
||||
npm install
|
||||
npm run build
|
||||
git add dist/
|
||||
git commit -m "rebuild assets"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Configuration & Personnalisation
|
||||
@@ -261,22 +326,48 @@ Créez un fichier `tpl/shaarli-pro/extra.html` pour injecter du CSS/JS suppléme
|
||||
```
|
||||
shaarli-pro/
|
||||
├── css/
|
||||
│ └── style.css # Styles principaux + variables CSS (light/dark)
|
||||
│ ├── style.css # Styles principaux + variables CSS (light/dark)
|
||||
│ ├── themes.css # 16 palettes de couleurs
|
||||
│ ├── custom_views.css # Styles des vues Notes / Todos / Archive
|
||||
│ └── awesomplete.css # Autocomplete des tags
|
||||
├── js/
|
||||
│ └── script.js # Interactions (thème, recherche, filtres, sélection, lecteur)
|
||||
│ ├── script.js # Thème, recherche, filtres, multi-sélection, lecteur média
|
||||
│ ├── custom_views.js # Vues Notes, Todos, Archive, Background Studio, Color Picker
|
||||
│ ├── i18n.js # Système d'internationalisation côté client
|
||||
│ ├── shaarit-rules.js # Détection notes/todos/pins et règles métier ShaarIt
|
||||
│ ├── modules/ # Modules JS thématiques (theme, search, navigation, bulk-actions, a11y)
|
||||
│ ├── awesomplete.min.js # Autocomplete des tags
|
||||
│ ├── metadata.min.js # Récupération asynchrone des métadonnées de lien
|
||||
│ ├── backgrounds-manifest.js # Manifest des fonds d'écran notes
|
||||
│ └── backgrounds-manifest.json # Données des fonds d'écran
|
||||
├── dist/ # Assets minifiés générés par le build (CSS + JS)
|
||||
├── img/
|
||||
│ ├── favicon.png
|
||||
│ ├── note-bg-light/ # Fonds d'écran clairs pour les notes
|
||||
│ └── note-bg-dark/ # Fonds d'écran sombres pour les notes
|
||||
├── theme_info.php # Métadonnées du thème
|
||||
├── manifest.json # Manifest PWA
|
||||
├── service-worker.js # Service Worker pour le cache offline
|
||||
├── package.json # Dépendances et scripts de build
|
||||
├── build.js # Pipeline de minification CSS/JS
|
||||
├── 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
|
||||
├── dailyrss.html # Template RSS quotidien
|
||||
├── editlink.html # Formulaire d'ajout/édition de bookmark
|
||||
├── editlink.batch.html # Édition par lot
|
||||
├── 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
|
||||
├── tools.html # Page d'administration + gestion des thèmes et tags cachés
|
||||
├── hidden-tags.html # Gestion des tags système cachés
|
||||
├── player.html # Lecteur média popup (template autonome)
|
||||
├── pluginscontent.html # Zone de contenu injectée par les plugins
|
||||
├── install.html # Page d'installation Shaarli
|
||||
├── loginform.html # Formulaire de connexion
|
||||
├── configure.html # Page de configuration
|
||||
├── changepassword.html # Changement de mot de passe
|
||||
@@ -288,12 +379,10 @@ shaarli-pro/
|
||||
├── 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
|
||||
|
||||
Reference in New Issue
Block a user