geektionnerd-generator

Un ancien générateur de BD qui a bien vieilli.

Contraintes

Le lecteur doit être averti que cette bifurcation du projet ComicGen est développé dans une distribution de GNU/Linux. L’environnement de travail nécessite l’installation du paquetage imagemagick dont dépend tools/mkmini.sh.

Installation

Une fois le dépôt téléchargé les données doivent être construites avant le déploiement. Pour se faire toutes les images doivent être placées dans toons/. Chaque image ${IMG}.png doit être associée à une miniature ${IMG}_mini.png de 60×60 pixels.

Les miniatures sont générées via cette commande :

( cd tools/; bash mkmini.sh )

Reste la création des fichiers de donnée par cette commande :

( cd tools/; bash mkdata.sh )

Une dernière étape consiste à copier la charge utile dans un répertoire dist/ à déployer pour un site Web statique :

( cd tools/; bash mkdist.sh )

Quand on change le contenu de toons/ ces deux commandes doivent être éxécutées.

Démonstration

Site : https://bd.chapril.org/

Paternité

Auteurs : Willian Carvalho (willianpc) et Gee.

Dépôts des projets :

• Comicgen : https://github.com/willianpc/comicgen ;
• Ragaboom : https://github.com/willianpc/ragaboom.

Article : https://hacks.mozilla.org/2012/12/comic-gen-a-canvas-run-comic-generator/.

Gestion des caches

Initialement le cache était géré par l’API Application Cache. Cette API ayant été dépréciée puis obsolète, un service worker (sw.js) a pris le relai.

Pour les curieux un article sur l’Application Cache : https://web.dev/articles/appcache-beginner

Développement

Déploiement local

Via Lite Server

L’environnement de développement comprend le paquet Node lite-server. Ainsi la partie Node du projet n’est pas nécessaire au déploiement en production.

L’outil est installé comme suit :

( cd tools/ls/; npm install )

Pour essayer localement l’application on passe par cette commande :

( cd tools/ls/; npm run serve )

Un onglet nouveau apparaît alors dans le navigateur Web par défaut.

Le fichier tools/ls/bs-config.json se charge de paramétrer le serveur local selon les options de BrowserSync.

Via Static Web Server

Une solution alternative est Static Web Server. Ce petit serveur de site statique de 8 Mio peut être installé comme suit.

cd tools/sws/
cargo install --root ./ static-web-server
mv bin/static-web-server ./
rmdir bin/
cd ../../

L’installation de Rustup est recommandée pour compiler des applications en Rust.

Reste à lancer le serveur via ./tools/sws/static-web-server -w tools/sws/config.toml et à accéder à l’application Web via l’URL http://localhost:3000/index.html.

Déboguer avec JQuery

Pour ne pas alourdir le dépôt la forme développée de JQuery est à télécharger pour le déboguage. Pour ce faire deux fichiers peuvent être téléchargés dans lib/ pour une version VERSION donnée au format /\d\.\d\.\d/:

wget "https://code.jquery.com/jquery-${VERSION}.js" -o lib/jquery.js
wget "https://code.jquery.com/jquery-${VERSION}.min.js" -o lib/jquery.min.js
echo '//# sourceMappingURL=jquery.min.map' >> lib/jquery.min.js

Corriger avec ESLint et Prettier

À fin de corriger les fautes de syntaxe ESLint peut être installé via cette commande :

npm install --production=false

Pour vérifier le code de tous les fichiers on exécutera npx eslint. Pour cibler un fichier file.js spécifique ce sera npx eslint -- file.js.

Le formateur Prettier est inclus dans l’installation pour améliorer encore la visibilité du code. Il formate un fichier file.js ainsi :

npx prettier --write -- file.js