feat: EVENTS セクションを掲載する (vuejs-jp#171)

* renamed: src/assets/images/tickets/* -> src/assets/images/ticket/*

* 改行して問題ない箇所は改行した

* Events セクションに掲載する画像を追加した

* スロットの新しい構文に書き換えた

slot="([\w\-]+)" -> v-slot:$1

* renamed: src/components/TheStoreSection.vue -> src/components/TheEventSection.vue

* Jest 実行中に出る warning を修正した

* 各種イベントを表示させるようにした

* EVENTS セクションのスタイルを調整した（sm）

* EVENTS セクションのスタイルを調整した（md）

* EVENTS セクションのスタイルを調整した（lg）

* EVENTS セクションのスタイルの調整

* EVENTS セクションのスタイルの調整 2

* 画像を保存するディレクトリをコンポーネント名に合わせた

* .store-title と .store-description の上部を揃えた

* Update src/components/TheEventSection.vue

Co-Authored-By: rry <[email protected]>

* Item だと List の要素という意味合いもあるので、それと区別するために Product という単語を使うようにした

* スポンサーブースシールラリーの特製小物ケースを掲載した

* fix: 日本語のタイトルだと字間が間延びしてしまう

https://github.com/kazupon/vuefes-2019/pull/171/files#r322009001

* パーカーの価格を修正した

* 日本語の文脈なので半角ではなく全角コロンを使うようにした

* .event 間のガターが広く感じられるのでパーセンテージで指定した

* fix typo

* 画像サイズが小さかったので修正した

* letter-spacing について、あまり拘りすぎるとメンテナンス性が低下してしまう

* レイアウトグリッドの考え方を完全に理解したので .event 間のガターを計算し直した

* fix typo

* imagemin にオプションを渡して画像を最適化するためのスクリプトを作成した

* imagemin による圧縮をかける前の画像として、Figma からダウンロードしたオリジナルサイズの画像を保存した

* imageminMozjpeg({ quality: 90 }) で圧縮してみた

* imageminMozjpeg({ quality: 80 }) で圧縮してみた

* Event 画像について、シャギーが目立ったため、オリジナルサイズの画像を利用。そのため image2x を用意しない

vuejs-jp#171 (comment)

* imagemin-mozjpeg / quality: 90 で圧縮した画像に差し替えた

* 画像のダウンロード速度計測のために、一時的に Vue Lazyload をオフにした

* imagemin-mozjpeg / quality: 80 で圧縮した画像に差し替えた

* Revert "imagemin-mozjpeg / quality: 80 で圧縮した画像に差し替えた"

This reverts commit ab9da73.

* Revert "画像のダウンロード速度計測のために、一時的に Vue Lazyload をオフにした"

This reverts commit 9ee3a72.

* 自動で画像を圧縮する機能を復活させた

Author: inouetakuya

.gitignore

@@ -82,3 +82,5 @@ dist
 
 # Service worker
 sw.*
+
+/tmp/

bin/imagemin

@@ -10,12 +10,14 @@ for file in `git diff --cached --name-status | \
   awk '$1 ~ /[AM]/ && tolower($2) ~ /\.(jpe?g|png|gif|svg)$/ {print $2}'`
 do
   echo $file を最適化します
+
   cat $file | ./node_modules/.bin/imagemin \
     --plugin=mozjpeg \
     --plugin=gifsicle \
     --plugin=pngquant \
     --plugin=optipng \
     --plugin=svgo > ${file}.new
   mv -f ${file}.new $file
+
   git add $file
 done

scripts/imagemin.js

@@ -0,0 +1,43 @@
+'use strict'
+
+// imagemin にオプションを渡して画像を最適化するためのスクリプト
+//
+// 使い方: node scripts/imagemin.js で実行できる
+// スクリプト作成の経緯: https://github.com/kazupon/vuefes-2019/pull/171#issuecomment-530369690
+
+const imagemin = require('imagemin')
+const imageminMozjpeg = require('imagemin-mozjpeg')
+const imageminPngquant = require('imagemin-pngquant')
+
+;(async () => {
+  await imagemin(
+    [
+      'test/fixtures/assets/images/event/*.{jpg,png}' // 最適化したい画像
+    ],
+    {
+      // 最適化した画像の出力先
+      // NOTE: 例えば品質に応じてディレクトリ名を変えるなどしてください
+      destination: 'tmp/dist/imagemin/event/80',
+
+      plugins: [
+        imageminMozjpeg({
+          // 0 〜 100 の数字を入れる
+          // 数字が大きいほど品質が高い
+          // ソースを読んでもデフォルト値が分からなかった :sweat_smile:
+          quality: 80 // NOTE: JPEG 画像の品質調整はココで行います
+        }),
+        imageminPngquant({
+          // [min, max] で いずれも 0 〜 1 の数字を入れる
+          // 数字が大きいほど品質が高い
+          // ソースを読んでもデフォルト値が分からなかった :sweat_smile:
+          //
+          // https://github.com/imagemin/imagemin-pngquant に下記のように書かれているが、理解できていない :sweat_smile:
+          // Instructs pngquant to use the least amount of colors required to meet or exceed the max quality. If conversion results in quality below the min quality the image won't be saved.
+          quality: [0.3, 0.5] // NOTE: PNG 画像の品質調整はココで行います
+        })
+      ]
+    }
+  )
+
+  console.log('Images optimized')
+})()

src/assets/images/event/badges.png

@@ -3,6 +3,18 @@ $layout-breakpoint--is-small-up: 769px !default;
 $layout-breakpoint--is-medium: 980px !default;
 $layout-breakpoint--is-medium-up: 981px !default;
 
+$layout-column-length--is-small: 4;
+$layout-gutter-width--is-small: 20px;
+$layout-column-width--is-small: calc(
+  (100% - #{$layout-gutter-width--is-small} * (#{$layout-column-length--is-small} - 1)) / #{$layout-column-length--is-small}
+);
+
+$layout-column-length--is-small-up: 20;
+$layout-gutter-width--is-small-up: 20px;
+$layout-column-width--is-small-up: calc(
+  (100% - #{$layout-gutter-width--is-small-up} * (#{$layout-column-length--is-small-up} - 1)) / #{$layout-column-length--is-small-up}
+);
+
 $page-container-max-width: 1180px;
 
 // transition のイージング

src/assets/images/event/[email protected]

@@ -17,7 +17,7 @@
 
       <div class="access-content">
         <h3 class="title">
-          会場: TOC五反田メッセ
+          会場：TOC五反田メッセ
         </h3>
 
         <div class="description">