CI - Travisに対応(tests & deploy) (#17)

Now, You can use CI !(Tests and Deploy)

* 🐛 restore reload

* selected menu

* fix position, add event icon

* 🐛 upload firebase-message files

* fix save data

* return child path.

* fix marked

* strict path to manifest.json

* update cache config

* config for Android, iPhone home screen icons.

* @apply with parentheses is deprecated

* add tests

* resoleved #1. add CI(travis)

* deploy from master only.

* add docs.

* fix designs

.travis.yml

@@ -0,0 +1,33 @@
+language: node_js
+sudo: false
+node_js:
+  - 6.11.1
+addons:
+  firefox: latest
+  apt:
+    sources:
+    - google-chrome
+    packages:
+    - google-chrome-beta
+install:
+- |
+  npm install
+  (cd functions && npm install)
+  patch -p0 < polymer-cli-issue-701.patch
+  perl -pi -e 's/\/\/# sourceMappingURL.*//' components/firebase/firebase-auth.js
+script:
+- |
+  # WCTの正常終了がとれないので2分後に終了させる
+  (sleep 120 ; kill -TERM $(ps aux | grep 'selenium' | awk '{print $2}') 2>/dev/null) &
+  xvfb-run npm test && npm run build
+before_deploy:
+  - openssl aes-256-cbc -K $encrypted_0d130e7114ad_key -iv $encrypted_0d130e7114ad_iv -in functions/polymer-japan-firebase-adminsdk-a8xev-5e8e96bd69.key.json.enc -out functions/polymer-japan-firebase-adminsdk-a8xev-5e8e96bd69.key.json -d
+deploy:
+  skip_cleanup: true
+  provider: firebase
+  token:
+    secure: "ggfDYn7OO7WVnB3vShXlZ0bwth01QS9Cqv9RCMzZ6BYzod6KUoU+Rj73Q03T1osqvNi+CXBavsmcejVB7wjpUn+3PCriuTNnEkKwmuN8Zy3pMp3OVqkfgsEkSz5qkcOV2zxyIhziGtvJrzG2IEmC6IF4jt7Pg6km8WChoMIuepYuKltDXa/p+LerKItjFgp+zcRCW4oHWFgaOV/47bHCpMqSux2ff1jPjNs2b/AvGI2R1RYC65g1jSAcBKrip4oSX46SV5XtrOEyWEezRN5vFaI8WrxV9Bq106YE5bms28FANNeLktRtzyck+SotuAlYFNoJQFjZy+nST2Jp/IP3GEQbAqWX7kIzQ3WZUEc90W8As9ukjv0WrNU85bM67NYIHlGZ4+NKPy03OhARPDargog3gXb4xJopGDZK09nPfWnzzlwW+VhjKh4zaieWeEj6cJ7tL2wfb3JwlX5uGOkTs1XE5gG50yDgqDmxQxuFpNNRaE6bdX9u8qQM+VNaON1YdCP1noOqrrk6AIqwSQ44g4XhNmtI9PTSRp3BiFX733qz/CA7qyYoFVTs4L20GvVyRnZ9WqXF5QgUlyLC7iDNOiW4ziwYYF1C8wGPEE+kFsxFwiAhbVaqYxkY2S2++k0MrSISNuAa+yod4PjGQIWCUEbm63isipqWF4nMzcJDaNg="
+  project: "polymer-japan"
+  on:
+    branch: master
+    tags: true

README.md

@@ -1,3 +1,7 @@
+[![Build Status](https://travis-ci.org/Polymer-Japan/polymer-jp.org.svg?branch=master)](https://travis-ci.org/Polymer-Japan/polymer-jp.org)
+![Polymer2.0](https://img.shields.io/badge/Polymer-2.0-blue.svg)
+[![Firebase](https://img.shields.io/badge/server-Firebase-orange.svg)](https://firebase.google.com/)
+
 ## Check requirements
 
 - Node LTS, Current  
@@ -10,22 +14,23 @@ $ git clone https://github.com/Polymer-Japan/polymer-jp.org
 $ cd polymer-jp.org
 # - polymer-cli, bower, firebase-toolsはプロジェクト内のものを使用。
 $ npm install
-$ cd functions
-$ npm install
-$ cd ../
+# - functions のインストール
+$ (cd functions && npm install)
 # - firebase-auth minify のバグ回避 https://github.com/Polymer/polymer-cli/issues/701
 $ patch -p0 < polymer-cli-issue-701.patch
 # - (できれば) DevToolでWarningが表示されるのでソースマップを消す
-$ perl -pi -e 's/\/\/# sourceMappingURL.*//' components/firebase/firebase-auth.js
+$ perl -pi -e 's/\/\/# sourceMappingURL.*//' bower_components/firebase/firebase-auth.js
 $ npm start
 ```
+(travisと合わせておくこと)
 
 ## Develop
 
 ```bash
 $ npm serve
 ```
-### Customize
+
+### For Customize
 
 - src/polymer-jp.html  
   Tag Manager, firebase-appの設定を修正
@@ -37,6 +42,15 @@ $ npm serve
 - firebase-messaging-sw.js__
   messagingSenderIdを修正
 
+### To create images
+
+```bash
+# Android resize
+$ inkscape -f polymer-jp-logo.svg -e polymer-jp-logo-32.svg -w 32
+# iPhone Home screen
+$ convert polymer-jp-logo-192.png -background white -bordercolor white -border 12x20 -resize 192x192 polymer-jp-logo-iphone-192.png
+```
+
 ## Deploy
 
 - Node **v6.11.1** 限定
@@ -50,3 +64,17 @@ $ firebase login
 $ firebase use [project-id]
 $ npm deploy
 ```
+
+## CI
+
+```
+$ gem install travis
+$ travis login
+# - .travis.ymlが編集されて、open-sslのコマンドが挿入される
+$ travis encrypt-file [somewhere]/polymer-japan-firebase-adminsdk-a8xev-5e8e96bd69.key.json functions/polymer-japan-firebase-adminsdk-a8xev-5e8e96bd69.key.json.enc -a
+$ firebase login:ci
+# - .travis.ymlが編集され、secureのトークンが挿入される
+$ travis encrypt -r "FIREBASE_TOKEN" -a
+# - 崩れた内容を修正
+$ emacs .travis.yml
+```

bower.json

@@ -21,6 +21,10 @@
     "page-title": "zacharytamas/page-title#^3.0.0",
     "iron-form": "PolymerElements/iron-form#^2.0.1"
   },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0"
+  },
   "resolutions": {
     "polymerfire": "72a34a8a44"
   }

firebase.json

@@ -5,6 +5,9 @@
       {
         "source": "!/__/**",
         "function": "app"
+      },{
+        "source": "**/!(*.js|*.html|*.css|*.json|*.ico|*.svg|*.png|*.jpg|*.jpeg)",
+        "function": "app"
       }
     ]
   }

functions/index.js

@@ -22,14 +22,22 @@ exports.saveSpreadSheet = functions.firestore.document('/inquiries/{inqId}')
 
 exports.app = functions.https.onRequest((req, res) => {
 
-  const id = req.url.split("/")[1];
-  console.log(id);
+  if(req.url=="/favicon.ico"){
+    console.log("no favicon");
+    return;
+  }
+
+  // KLUDGE: 末尾/を削除
+  const url = req.url[req.url.length-1] == '/' ? req.url.slice(0,-1) : req.url;
+  const id = url.split('/').slice(1).join("/_childs/");
+
+  // const id = req.url.split("/")[1];
+  console.log(req.url, id);
 
   db.collection('docs').doc(id).get()
     .then( sn => {
 
       const doc = sn.data();
-      const meta = `<meta property="og:type" content="article">`;
 
       // KLUDGE: polymer-cliでbuildされたindex.htmlをそのまま使う
       const html = `<!doctype html>
@@ -42,7 +50,7 @@ exports.app = functions.https.onRequest((req, res) => {
     <title>Polymer Japan - ${doc.title}</title>
 
     <meta name="theme-color" content="#fff">
-     <link rel="manifest" href="manifest.json">
+     <link rel="manifest" href="/manifest.json">
 
     <meta name="description" content="${doc.desc}">
 
@@ -78,10 +86,10 @@ exports.app = functions.https.onRequest((req, res) => {
 
 
     <script>if (!window.customElements) { document.write('<!--'); }</script>
-    <script type="text/javascript" src="components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+    <script type="text/javascript" src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
     <!--! do not remove -->
 
-    <script src="components/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
     <link rel="import" href="src/polymer-jp.html">
 
     <script>

index.html

@@ -8,7 +8,7 @@
   <title>Polymer Japan</title>
 
   <meta name="theme-color" content="#fff">
-  <link rel="manifest" href="manifest.json">
+  <link rel="manifest" href="/manifest.json">
 
   <meta property="og:type" content="website">
   <meta property="og:title" content="Welcome - Polymer Japan">
@@ -21,10 +21,10 @@
   <meta name="twitter:site" content="@polymer_jp">
 
   <link rel="shortcut icon" href="/assets/logos/polymer-jp-logo-32.png">
-  <link rel="apple-touch-icon" sizes="192x192" href="/assets/logos/polymer-jp-logo-192.png">
+  <link rel="apple-touch-icon" sizes="192x192" href="/assets/logos/polymer-jp-logo-iphone-192.png">
   <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <meta name="apple-mobile-web-app-title" content="PolymerJP">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="Polymer JP">
 
 </head>
 <body>
@@ -37,7 +37,7 @@
     <noscript>Polymer Japan</noscript>
   </polymer-jp>
 
-  <script src="components/webcomponentsjs/webcomponents-loader.js"></script>
+  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
   <link rel="import" href="src/polymer-jp.html">
 
   <script>
@@ -48,9 +48,5 @@
     }
   </script>
 
-  <script>
-    window.performance && performance.mark && performance.mark('index.html');
-  </script>
-
 </body>
 </html>

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Polymer Japan",
   "version": "0.1.0",
-  "short_name": "PolymerJP",
+  "short_name": "Polymer JP",
   "start_url": "/",
   "display": "standalone",
   "background_color": "#fff",

package.json

@@ -3,7 +3,8 @@
   "scripts": {
     "install": "bower install",
     "build": "polymer build",
-    "serve": "polymer serve --component-dir=components",
+    "serve": "polymer serve",
+    "test": "polymer test",
     "start": "npm run build && firebase serve --only hosting,functions",
     "deploy:hosting": "npm run build && firebase deploy --only hosting",
     "deploy": "firebase deploy --only hosting,functions"

polymer.json

@@ -9,11 +9,12 @@
     "src/polymer-jp-inquery.html"
   ],
   "sources": [
-    "assets/**/*"
+    "assets/**/*",
+    "firebase-messaging-sw.js"
   ],
   "extraDependencies": [
     "manifest.json",
-    "components/webcomponentsjs/*.js"
+    "bower_components/webcomponentsjs/*.js"
   ],
   "builds": [{
     "name": "default",

src/polymer-jp-gtm.html

@@ -1,4 +1,4 @@
-<link rel="import" href="../components/polymer/polymer-element.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 
 <script>
   class PolymerJpGtm extends Polymer.Element {

src/polymer-jp-icons.html

@@ -1,5 +1,5 @@
-<link rel="import" href="../components/iron-icon/iron-icon.html">
-<link rel="import" href="../components/iron-iconset-svg/iron-iconset-svg.html">
+<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
 <iron-iconset-svg size="24" name="i">
   <svg><defs>
     <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></g>

src/polymer-jp-inquery.html

@@ -1,13 +1,13 @@
-<link rel="import" href="../components/polymer/polymer-element.html">
-<link rel="import" href="../components/paper-button/paper-button.html">
-<link rel="import" href="../components/paper-dialog/paper-dialog.html">
-<link rel="import" href="../components/neon-animation/web-animations.html">
-<link rel="import" href="../components/neon-animation/neon-animations.html">
-<link rel="import" href="../components/paper-input/paper-textarea.html">
-<link rel="import" href="../components/paper-input/paper-input.html">
-<link rel="import" href="../components/paper-button/paper-button.html">
-<link rel="import" href="../components/iron-form/iron-form.html">
-<link rel="import" href="../components/iron-media-query/iron-media-query.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="../bower_components/neon-animation/web-animations.html">
+<link rel="import" href="../bower_components/neon-animation/neon-animations.html">
+<link rel="import" href="../bower_components/paper-input/paper-textarea.html">
+<link rel="import" href="../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../bower_components/iron-form/iron-form.html">
+<link rel="import" href="../bower_components/iron-media-query/iron-media-query.html">
 
 <dom-module id="polymer-jp-inquery">
   <template>
@@ -38,7 +38,7 @@
       entry-animation="slide-from-bottom-animation"
       exit-animation="fade-out-animation"
       always-on-top>
-      <iron-form on-iron-form-presubmit="_sendInquery">
+      <iron-form>
         <form>
           <h3>お問い合わせ</h3>
           <paper-input always-float-label label="Subject" name="subject"

src/polymer-jp-marked-edit.html

@@ -1,13 +1,13 @@
-<link rel="import" href="../components/polymer/polymer-element.html">
-<link rel="import" href="../components/polymer/lib/elements/dom-if.html">
-<link rel="import" href="../components/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../components/paper-input/paper-input.html">
-<link rel="import" href="../components/paper-input/paper-textarea.html">
-<link rel="import" href="../components/paper-toggle-button/paper-toggle-button.html">
-<link rel="import" href="../components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../components/paper-button/paper-button.html">
-<link rel="import" href="../components/polymerfire/firebase-storage-multiupload.html">
-<link rel="import" href="../components/polymerfire/firebase-storage-upload-task.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../bower_components/polymer/lib/elements/dom-if.html">
+<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../bower_components/paper-input/paper-textarea.html">
+<link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
+<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../bower_components/polymerfire/firebase-storage-multiupload.html">
+<link rel="import" href="../bower_components/polymerfire/firebase-storage-upload-task.html">
 
 <dom-module id="polymer-jp-marked-edit">
   <template>
@@ -26,7 +26,7 @@
         }
       }
       .horizontal {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
       }
     </style>
 
@@ -37,6 +37,8 @@
       <firebase-storage-upload-task task="[[item]]" metadata="{{_metaData}}"></firebase-storage-upload-task>
     </template>
 
+    <h3>管理者用編集フォーム</h3>
+
     <paper-input always-float-label label="Title" value="{{doc.title}}"></paper-input>
     <paper-input always-float-label label="Description(SEO)" value="{{doc.desc}}"></paper-input>
     <div class="horizontal">