your pokemon for today

Votre Pokémon du jour

Il s'agit d'une jolie petite galerie présentant les illustrations géniales de Votre Pokémon pour aujourd'hui que le génial KC Green a publiées sur son Twitter et ses Tumblrs.

Cela n’a pas vraiment besoin d’exister, et pourtant ça existe !!

Du côté du Web, il utilise lightgallery.js pour les éléments lightboxy.

Du côté de la construction, il utilise GraphicsMagick pour Node pour générer des vignettes pour chaque illustration, Nunjucks pour les modèles et gulp (et toute une série de plugins gulp) pour relier le tout ensemble.

Le site lui-même est disponible pour votre plaisir de navigation sur https://yourpokemonfor.today/.

Le référentiel est un peu bêtement énorme car il contient beaucoup de données d'images (à la fois présentes et passées). Désolé pour ça.

Pour le construire soi-même

Alors tu veux être un maître Digimon, hein ???? Voici comment créer une version de ce site sur votre propre ordinateur (si vous utilisez Mac OS X) :

1. Obtenez une copie de ce référentiel (soit en le clonant, soit en téléchargeant une copie ZIP et en la décompressant)

2. Assurez-vous que Node.js et Yarn sont installés (vérifiez dans package.json sous engines pour les versions requises), ainsi que Homebrew.

3. Installez GraphicsMagick : ouvrez une interface de ligne de commande et exécutez brew install graphicsmagick

4. Installez les dépendances du projet : dans votre interface de ligne de commande, accédez au dossier du projet et exécutez yarn

5. Construisez le site à partir des fichiers sources : Dans le même dossier, exécutez yarn build . La construction du site est terminée lorsque vous voyez Finished 'default' et que vous récupérez votre invite de commande.

   • Cette commande crée le site et traite toutes les images du site, cela peut donc prendre un certain temps (jusqu'à dix minutes) la première fois qu'elle s'exécute. Les versions ultérieures seront plus rapides.

6. Regardez dans le dossier « build » – voilà votre site ! OUAH!

7. Pour ouvrir le site dans un navigateur Web, vous devrez exécuter un serveur Web dans le dossier "build" - voici ma façon simple préférée de le faire sur un Mac.

C'est ça ! Si vous apportez des modifications, exécutez à nouveau l'étape 5 pour créer une nouvelle version du site. Alors n'hésitez pas à soumettre une pull request avec vos modifications ! La collaboration est amusante.

Faire

Peut-être que tu veux m'aider à faire ces choses ???

• Ajoutez une option de filtrage pour afficher uniquement les images de KC (et peut-être une pour afficher uniquement celles qu'il n'a pas faites ? Quelqu'un voudrait-il un jour cela ?)

• Ajouter une option pour trier par date

• Ajoutez une tâche "watch" à la configuration de gulp, pour reconstruire automatiquement les fichiers de build pertinents lorsque les fichiers sources changent