add: プロダクトページをマークアップ（コンポーネント化）

public/index.html

@@ -434,6 +434,7 @@
               <div></div><div></div><div></div><div></div>
               <h2>作ったもの</h2>
             </section>
+            <product-box />
           </section>
           
           <!--**** memories ****-->

src/scripts/app.js

@@ -3,9 +3,11 @@ import route from 'riot-route'
 import * as util from './lib/util'
 import preload_json from './config/preload'
 import history_json from './config/history'
+import product_json from './config/product'
 
 // components
 import './components/history-box.tag'
+import './components/product-box.tag'
 
 // init
 util.setRingSize()
@@ -19,4 +21,6 @@ util.startLoading(() => {
   }, data => {})
 })
 
+// render
 riot.mount('history-box', { historys: history_json })
+riot.mount('product-box', { products: product_json })

src/scripts/components/product-box.tag

@@ -0,0 +1,43 @@
+<product-box>
+  <div class="product-box">
+    <h3 class="sub-title">アプリ・サービス</h3>
+    <section>
+      <a each={ app, key in opts.products.app } href={ app.link } target="_blank">
+        <img src={ app.thumb } alt={ app.name } />
+        <h4 class="name">{ app.name }</h4>
+        <p class="description">{ app.description }</p>
+        <small class="date">{ app.date }</small>
+      </a>
+    </section>
+
+    <h3 class="sub-title">ライブラリ</h3>
+    <section>
+      <a each={ lib, key in opts.products.lib } href={ lib.link } target="_blank">
+        <img src={ lib.thumb } alt={ lib.name } />
+        <h4 class="name">{ lib.name }</h4>
+        <p class="description">{ lib.description }</p>
+        <small class="date">{ lib.date }</small>
+      </a>
+    </section>
+
+    <h3 class="sub-title">デザイン</h3>
+    <section>
+      <a each={ design, key in opts.products.design } href={ design.link } target="_blank">
+        <img src={ design.thumb } alt={ design.name } />
+        <h4 class="name">{ design.name }</h4>
+        <p class="description">{ design.description }</p>
+        <small class="date">{ design.date }</small>
+      </a>
+    </section>
+
+    <h3 class="sub-title">動画</h3>
+    <section>
+      <a each={ movie, key in opts.products.movie } href={ movie.link } target="_blank">
+        <img src={ movie.thumb } alt={ movie.name } />
+        <h4 class="name">{ movie.name }</h4>
+        <p class="description">{ movie.description }</p>
+        <small class="date">{ movie.date }</small>
+      </a>
+    </section>
+  </div>
+</product-box>

src/scripts/config/product.js

@@ -0,0 +1,87 @@
+export default {
+  "app": [
+    {
+      "name": "satella.io",
+      "link": "https://github.com/yuki540net/satella.io",
+      "thumb": "./images/product/satella.io.png",
+      "description": "イラストに「命」を吹き込むソフトウェア",
+      "date": "2017/02/05"
+    },
+    {
+      "name": "Shuvi",
+      "link": "https://github.com/yuki540net/Shuvi",
+      "thumb": "./images/product/shuvi.png",
+      "description": "フレームレスなYouTubeプレイヤー",
+      "date": "2017/05/13"
+    },
+    {
+      "name": "若葉",
+      "link": "https://github.com/yuki540net/wakaba",
+      "thumb": "./images/product/wakaba.png",
+      "description": "PC画面上にコメントが流せるデスクトップアプリ",
+      "date": "2017/03/19"
+    },
+    {
+      "name": "兎亜",
+      "link": "https://github.com/yuki540net/toa",
+      "thumb": "./images/product/toa.png",
+      "description": "シンプルで可愛いミュージックプレイヤー",
+      "date": "2017/04/08"
+    },
+    {
+      "name": "音卵",
+      "link": "https://github.com/yuki540net/ontama",
+      "thumb": "./images/product/ontama.png",
+      "description": "声優ラジオ音泉をダウンロードするAndroidアプリ",
+      "date": "2017/04/15"
+    }
+  ],
+  "lib": [
+    {
+      "name": "shuvi-lib",
+      "link": "https://github.com/yuki540net/shuvi-lib",
+      "thumb": "./images/product/shuvi-lib.jpg",
+      "description": "YouTube IFrame Player APIをゆるふわラッピングしたライブラリ",
+      "date": "2017/05/14"
+    },
+    {
+      "name": "onsen-node",
+      "link": "https://github.com/yuki540net/onsen-node",
+      "thumb": "./images/product/onsen-node.png",
+      "description": "声優ラジオ音泉APIライブラリ for Node",
+      "date": "2017/02/25"
+    },
+    {
+      "name": "nicoJS",
+      "link": "https://github.com/yuki540net/nicoJS",
+      "thumb": "./images/product/nicoJS.png",
+      "description": "ニコニコ風コメントを実装するライブラリ",
+      "date": "2016/09/25"
+    }
+  ],
+  "design": [
+    {
+      "name": "ChocolateCake",
+      "link": "https://chocolate-cake.yuki540.com/",
+      "thumb": "./images/product/chocolate-cake.png",
+      "description": "僕が作ったCSS Animation作品をまとめたサイト",
+      "date": "2018/03/22"
+    },
+    {
+      "name": "俺ガイル非公式サイト",
+      "link": "http://oregairu.yuki540.com",
+      "thumb": "./images/product/oregairu.png",
+      "description": "『俺は、本物が欲しい。』",
+      "date": "2016/03/20"
+    }
+  ],
+  "movie": [
+    {
+      "name": "COLORFUL_STEP",
+      "link": "http://www.nicovideo.jp/watch/sm26374280",
+      "thumb": "./images/product/colorful_step.png",
+      "description": "待ち望んだ全ては------そこにあるの。",
+      "date": "2015/05/30"
+    }
+  ]
+}