これは、素晴らしい KC Green が Twitter や Tumblr に投稿した、今日のポケモンの素晴らしいイラストを紹介する素敵な小さなギャラリー サイトです。
本当は存在する必要はないのに、存在しているのです!!
Web 側では、lightboxy のものに lightgallery.js を使用します。
ビルド側では、GraphicsMagick for Node を使用して各イラストのサムネイルを生成し、Nunjuck をテンプレートとして生成し、gulp (および多数の gulp プラグイン) を使用して全体を結び付けます。
サイト自体は https://yourpokemonfor.today/ で閲覧できます。
リポジトリには大量の画像データ (現在と過去の両方) が含まれているため、バカみたいに巨大です。ごめんなさい。
それでデジモンマスターになりたいんですよね??自分のコンピュータ上にこのサイトのバージョンを構築する方法は次のとおりです (Mac OS X を実行している場合)。
このリポジトリのコピーを取得します (クローンを作成するか、ZIP コピーをダウンロードして解凍します)。
Node.js と Yarn がインストールされていることを確認してください (必要なバージョンについては、 engines
の下のpackage.json
をチェックインしてください)。また、Homebrew もインストールしてください。
GraphicsMagick をインストールする:コマンドライン インターフェイスを開き、 brew install graphicsmagick
実行します。
プロジェクトの依存関係をインストールします。コマンドライン インターフェイスで、プロジェクト フォルダーに移動し、 yarn
を実行します。
ソース ファイルからサイトを構築します。同じフォルダーで、 yarn build
実行します。 Finished 'default'
と表示され、コマンド プロンプトが表示されたら、サイトの構築は完了です。
「build」フォルダーを見てください - そこにあなたのサイトがあります。おお!
Web ブラウザでサイトを開くには、「build」フォルダで Web サーバーを実行する必要があります。これは、Mac でこれを行うための私のお気に入りの簡単な方法です。
それはそうだ!変更を行った場合は、ステップ 5 を再度実行して、サイトの新しいバージョンを構築します。変更を加えたプル リクエストを遠慮なく送信してください。コラボは楽しいですね。
たぶん、これらのことをするのを手伝ってほしいですか?
KC の画像のみを表示するフィルタリング オプションを追加します (おそらく、KC が作成していない画像のみを表示することもできます。そんなことを望む人はいるでしょうか?)
日付順に並べ替えるオプションを追加する
gulp 構成に「watch」タスクを追加して、ソース ファイルが変更されたときに関連するビルド ファイルを自動的に再構築します。