chore(website): 書影と書籍版との違いを追加 (#1148)

* feat(website): add cover link to front page

* feat(website): add page view count

* fix(intro): 書籍版との違いを追加

* fix(website): Update landing

* chore(website): update cover

* chore(website): use optimized image

* Update

* Update

* Update

Author: azu

source/_layouts/website/header.html

@@ -398,7 +398,7 @@ <h2 class="book-header-title-h" title="JavaScript Primer - 迷わないための
 </div>
 
 <script type="text/javascript">
-    document.querySelector('.searchbox [type="reset"]').addEventListener("click", function() {
+    document.querySelector(".searchbox [type=\"reset\"]").addEventListener("click", function() {
         this.parentNode.querySelector("input").focus();
     });
 </script>
@@ -416,6 +416,7 @@ <h2 class="book-header-title-h" title="JavaScript Primer - 迷わないための
         gitbook.events.on("page.change", function() {
             tracker.view();
         });
+
     });
 </script>
 {% endblock %}

source/intro/README.md

@@ -92,6 +92,31 @@ ECMAScript 2015と呼ばれる仕様の大きな更新が行われた際に、Ja
 
 ライセンスについての詳細は[ライセンスファイル][]を参照してください。
 
+## 書籍版について {#print-version}
+
+この書籍は[アスキードワンゴ](https://asciidwango.jp/)から書籍として出版されています。
+書籍版は、次のページから購入できます。
+
+- [JavaScript Primer 迷わないための入門書 | azu, Suguru Inatomi |本 | 通販 | Amazon](https://www.amazon.co.jp/dp/4048930737/)
+
+## ウェブ版と書籍版の違い {#diff-with-print-version}
+
+ウェブ版と書籍版は次の点は同じです。
+
+- ウェブ版と書籍版の内容は同じ
+
+ウェブ版と書籍版は次の点が異なります。
+
+- ウェブ版と書籍版はレイアウトが異なる
+- 書籍版には索引が追加されている
+
+書籍版の内容はウェブ版と同じですが、本として読めるように内容とレイアウトが最適化されています。
+書籍版は出版時点では基本的な内容は同じですが、ウェブ版は常にアップデートされています。
+
+この書籍は先頭から順番に読んでいくように書かれています。
+そのため、読み物としては書籍版の方が読みやすくなっています。
+ウェブ版では検索機能やサンプルコードを実行できる機能が組み込まれているため、必要に応じて併用してください。
+
 ## 謝辞 {#thanks}
 
 この書籍は次の方々にレビューをしていただきました。

source/landing/img/cover-optimized.jpg

@@ -1,5 +1,21 @@
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
 <link rel="stylesheet" type="text/css" href="./landing/css/style.css"/>
+<style>
+    .btn.btn-amazon {
+        color: #fff;
+        background-color: #ec971f;
+        border-color: #eea236;
+        margin: 12px 0;
+    }
+
+    .btn.btn-tatsujin {
+        color: #fff;
+        background-color: #540000;
+        border-color: #280000;
+        margin: 12px 0;
+    }
+</style>
+
 <!-- Main container -->
 <div class="page-container">
     <div class="row main" id="js-main">
@@ -15,6 +31,9 @@ <h3 class="mg-sm">
                 <a class="github-button" href="https://github.com/asciidwango/js-primer" data-size="large"
                    data-show-count="true" aria-label="Star asciidwango/js-primer on GitHub">Star</a>
             </p>
+            <p class="mg-lg">
+                Twitterのハッシュタグ: <a href="https://twitter.com/search?q=%23jsprimer&src=typed_query&f=live">#jsprimer</a>
+            </p>
             <p class="mg-lg">
                 これからJavaScriptに入門したい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる本です。<br/>
                 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、
@@ -23,6 +42,20 @@ <h3 class="mg-sm">
             <p class="mg-lg">
                 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「<a href="https://jsprimer.net/intro/">はじめに</a>」から読んでみてください。<br/>
             </p>
+            <h3 class="mg-sm">
+                <span class="fa fa-book"></span>書籍版
+            </h3>
+            <p class="mg-lg">
+                このウェブサイトはアスキードワンゴから書籍として出版されています。
+                書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。
+            </p>
+            <ul>
+                <li><a href="https://www.amazon.co.jp/dp/4048930737/">Amazon</a></li>
+                <!-- <li><a href="https://tatsu-zine.com/">達人出版（PDF）</a></li> -->
+            </ul>
+            <p class="mg-lg">
+                詳細については「<a href="https://jsprimer.net/intro/#diff-with-print-version">ウェブ版と書籍版の違い</a>」を参照してください。
+            </p>
             <form action="https://github.us13.list-manage.com/subscribe/post?u=fc41e11a2b9dc6f05350e0de0&amp;id=7ab1594ae8"
                   method="post" id="js_mail_form" novalidate class="mail-form" target="_blank">
                 <h3 class="mg-sm">
@@ -33,23 +66,21 @@ <h3 class="mg-sm">
                     この本の更新情報を受け取りたい方はメールアドレスを登録することで通知を受け取れます。<br/>
                     この本がリリースされるタイミングなどの情報を受け取れます。
                 </p>
-                <div class="form-group">
-                    <label>
-                        メールアドレス
-                    </label>
-                    <input id="email" class="form-control" name="EMAIL" type="email" required/>
+                <div class="form-group"><label for="email">メールアドレス</label><input id="email" class="form-control"
+                                                                                 name="EMAIL" type="email" required/>
                 </div>
-                <button class="bloc-button btn btn-d btn-lg btn-block" type="submit">
-                    登録
-                </button>
+                <button class="bloc-button btn btn-d btn-lg btn-block" type="submit">登録</button>
             </form>
         </div>
-        <div class="col-sm-4">
-            <img src="./landing/img/cover.png" alt="Cover Image" class="img-responsive hidden-xs"/>
+        <div class="col-sm-4 hidden-xs">
+            <img src="./landing/img/cover-optimized.jpg" alt="Cover Image" class="img-responsive"/>
+            <a href="https://www.amazon.co.jp/dp/4048930737/" class="btn btn-primary btn-lg btn-amazon" role="button">Amazon</a>
+            <!-- <a href="https://tatsu-zine.com/" class="btn btn-primary btn-lg btn-tatsujin" role="button">達人出版</a> -->
         </div>
     </div>
 </div>
 
+<!-- Script -->
 <script async defer src="https://buttons.github.io/buttons.js"></script>
 <script async defer>!function(d, s, id) {
     var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? "http" : "https";