gueathub — livre de recettes et liste de courses

Ouvrir gueathub

À QUOI ÇA SERT

gueathub est un livre de recettes qui fait aussi la liste de courses. On choisit des recettes et un nombre de portions : l’app additionne les ingrédients de toutes les recettes, les range par rayon du magasin, et on coche au fur et à mesure dans les allées.

Elle sert aussi en cuisine : étapes à cocher, minuteurs, écran qui reste allumé.

COMMENT ON L’UTILISE

1. Dans « Recettes », on cherche une recette (par son nom ou un ingrédient), on filtre si besoin, puis on touche « Ajouter » et on règle les portions avec − et +.
2. Dans « Liste », tout est déjà additionné, converti et arrondi pour les courses (75 cl de lait d’une recette + 100 ml d’une autre = « 85 cl »), puis rangé par rayon. Les basiques qu’on a normalement chez soi (sel, huile, épices…) sont mis à part dans « À vérifier au placard ».
3. En magasin, on coche. Si on change ensuite les portions d’une recette, les articles concernés se décochent et affichent « quantité modifiée ».
4. On peut aussi ajouter des articles à la main (éponges, café…), copier la liste pour l’envoyer, et ranger les rayons dans l’ordre de son magasin (« Réglages »).
5. Sur la fiche d’une recette : quantités recalculées pour le nombre de portions, étapes à cocher, minuteurs et « Garder l’écran allumé ».

Rien n’est envoyé nulle part : pas de compte, la sélection et les coches restent dans le navigateur de l’appareil. L’app s’installe sur l’écran d’accueil du téléphone et fonctionne hors-ligne, pratique au fond d’un supermarché sans réseau.

SUR QUELLE TECHNO C’EST BÂTI

C’est une page web statique servie par GitHub Pages, comme le reste du site, mais sous forme de dossier (outils/gueathub/) plutôt qu’en un seul fichier :

• HTML + JavaScript « vanilla » en modules ES, sans framework ni bundler ;
• Tailwind CSS v4, compilé à l’avance et branché sur les couleurs et le mode clair/sombre du blog (les mêmes variables CSS, assets/css/tokens.css) ;
• la logique (portions, conversions d’unités, arrondis, addition des ingrédients) est faite de fonctions pures, testées à 100 % avec node --test ;
• un service worker garde l’app en cache pour le hors-ligne et propose « Recharger » quand une nouvelle version est publiée ;
• les icônes sont des SVG en ligne : aucune ressource chargée depuis un CDN.

Les recettes sont de simples fichiers JSON dans le repo. Au moment de la publication, Jekyll les rassemble en un seul recettes.json que l’app télécharge.

AJOUTER UNE RECETTE

Sans toucher au code :

1. Mettre la recette au format gueathub : un fichier JSON qui suit le schéma recette.schema.json. Je la fais convertir par Claude à partir de la recette d’origine, en lui donnant le schéma et la liste des ingrédients déjà utilisés (ingredients.txt), pour réutiliser les mêmes noms.
2. L’enregistrer dans _data/gueathub/recettes/ sous le nom de son identifiant (par exemple gratin-dauphinois.json), avec si on veut une photo assets/gueathub/recettes/gratin-dauphinois.webp.
3. Lancer npm run check : le script vérifie le format, les rayons et les unités, et repère les ingrédients presque en double (« tomate » et « tomates »).
4. Pousser : la recette apparaît dans l’app. La même vérification tourne dans GitHub Actions à chaque push.

← Retour à l'accueil