Setup (#4)

* + srcDir: 'src/'

* テストを実行できるようにした

* Lint を実行できるようにした

* SCSS を使えるようにした

* + normalize.css@^8.0.1

* @nuxtjs/style-resources を導入した

* stylelint を導入した

* yarn stylelint:fix

* fix: stylelint と eslint（with prettier）が競合

* コメントを書きたかったため .stylelintrc.json -> stylelint.config.js

* new file: .circleci/config.yml

* new file: .node-version

* Git コミット前に Lint を実行するようにした

* imagemin で画像を圧縮できるようにした

* /2019/ 配下で配信するようにした

* README を更新した

* Netlify にて / -> /2019/ へリダイレクトさせるようにした

* Revert "Netlify にて / -> /2019/ へリダイレクトさせるようにした"

This reverts commit 516317d.

* CircleCI の Status Badge を表示させるようにした

* fix: ERROR  (node:22138) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

* + "description": "Vue Fes Japan 2019",

* 不要になったコメントを削除した

* fix typo

Author: inouetakuya

.circleci/config.yml

@@ -0,0 +1,37 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:10.15.3-browsers
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "package.json" }}
+          # fallback to using the latest cache if no exact match is found
+          - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      - run: yarn lint
+      - run: yarn test:ci

.eslintrc.js

@@ -12,9 +12,15 @@ module.exports = {
     'plugin:nuxt/recommended',
     'plugin:prettier/recommended'
   ],
-  plugins: [
-    'prettier'
-  ],
-  // add your custom rules here
-  rules: {}
+  plugins: ['prettier'],
+  rules: {
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always'
+        }
+      }
+    ]
+  }
 }

.node-version

@@ -0,0 +1 @@
+10.15.3

README.md

@@ -1,22 +1,43 @@
-# vuefes-2019
+# Vue Fes Japan 2019
 
-> My tiptop Nuxt.js project
+[![CircleCI](https://circleci.com/gh/kazupon/vuefes-2019.svg?style=svg&circle-token=2e5a81f10b558c9aa99c38a2acc9bc862b20c860)](https://circleci.com/gh/kazupon/vuefes-2019)
 
-## Build Setup
+このリポジトリは Vue Fes Japan 2019 の Web サイトのソースコードです。
 
-``` bash
-# install dependencies
-$ yarn install
+## Setup
 
-# serve with hot reload at localhost:3000
-$ yarn run dev
+```shell
+yarn install
+```
+
+## Development
+
+下記コマンドを実行すると Web サーバーがホットリロードで起動して `http://localhost:3000/2019/` で確認できます。
+
+```shell
+yarn dev
+```
+
+### 画像の最適化
 
-# build for production and launch server
-$ yarn run build
-$ yarn start
+画像ファイルを追加または変更した場合には、コミット時に imagemin により自動で最適化されます。
 
-# generate static project
-$ yarn run generate
+ただし Windows を使っている場合にエラーが発生するという報告を受けています。画像の最適化をスキップする場合はコミット時に `--no-verify` オプションを使ってください。
+
+```shell
+git commit --no-verify
+``` 
+
+## Testing
+
+```shell
+yarn test
 ```
 
-For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).
+## Generate
+
+下記コマンドを実行すると、静的ファイルを `dist/2019/` 配下に生成できます。
+
+```shell
+yarn generate
+```

bin/imagemin

@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+
+# Fail on unset variables and command errors
+set -ue -o pipefail
+
+# Prevent commands misbehaving due to locale differences
+export LC_ALL=C
+
+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

jest.config.js

@@ -1,7 +1,10 @@
 module.exports = {
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/$1',
-    '^~/(.*)$': '<rootDir>/$1',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/test/unit/__mocks__/fileMock.js',
+    '\\.(css|scss)$': '<rootDir>/test/unit/__mocks__/styleMock.js',
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^~/(.*)$': '<rootDir>/src/$1',
     '^vue$': 'vue/dist/vue.common.js'
   },
   moduleFileExtensions: ['js', 'vue', 'json'],

nuxt.config.js

@@ -1,11 +1,12 @@
-const pkg = require('./package')
+import StylelintPlugin from 'stylelint-webpack-plugin'
+import pkg from './package'
 
-module.exports = {
+export default {
   mode: 'universal',
-
-  /*
-  ** Headers of the page
-  */
+  srcDir: 'src/',
+  router: {
+    base: '/2019/'
+  },
   head: {
     title: pkg.name,
     meta: [
@@ -15,44 +16,44 @@ module.exports = {
     ],
     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
   },
-
-  /*
-  ** Customize the progress-bar color
-  */
   loading: { color: '#fff' },
-
-  /*
-  ** Global CSS
-  */
-  css: [],
-
-  /*
-  ** Plugins to load before mounting the App
-  */
+  css: [{ src: '~/assets/stylesheets/main.scss', lang: 'scss' }],
   plugins: [],
-
-  /*
-  ** Nuxt.js modules
-  */
-  modules: ['@nuxtjs/pwa'],
-
-  /*
-  ** Build configuration
-  */
+  modules: [
+    '@nuxtjs/style-resources',
+    [
+      '@nuxtjs/pwa',
+      {
+        icon: {
+          iconSrc: 'src/static/apple-touch-icon.png'
+        }
+      }
+    ]
+  ],
   build: {
-    /*
-    ** You can extend webpack config here
-    */
     extend(config, ctx) {
-      // Run ESLint on save
       if (ctx.isDev && ctx.isClient) {
         config.module.rules.push({
           enforce: 'pre',
           test: /\.(js|vue)$/,
           loader: 'eslint-loader',
           exclude: /(node_modules)/
         })
+        config.plugins.push(
+          new StylelintPlugin({
+            files: ['**/*.vue', '**/*.scss']
+          })
+        )
       }
     }
+  },
+  generate: {
+    dir: 'dist/2019'
+  },
+  styleResources: {
+    scss: [
+      '~/assets/stylesheets/foundation/variables.scss',
+      '~/assets/stylesheets/foundation/colors.scss'
+    ]
   }
 }

package.json

@@ -1,44 +1,70 @@
 {
   "name": "vuefes-2019",
   "version": "1.0.0",
-  "description": "My tiptop Nuxt.js project",
-  "author": "INOUE Takuya",
+  "description": "Vue Fes Japan 2019",
+  "author": "INOUE Takuya <[email protected]>",
   "private": true,
   "scripts": {
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
-    "precommit": "npm run lint",
-    "test": "jest"
+    "imagemin": "imagemin --plugin=mozjpeg --plugin=gifsicle --plugin=pngquant --plugin=optipng --plugin=svgo",
+    "lint": "yarn eslint && yarn stylelint",
+    "lint:fix": "yarn eslint:fix && yarn stylelint:fix",
+    "eslint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "eslint:fix": "yarn eslint --fix",
+    "stylelint": "stylelint 'src/**/*.vue' 'src/**/*.scss'",
+    "stylelint:fix": "yarn stylelint --fix",
+    "test": "jest --verbose",
+    "test:ci": "jest --ci --coverage --no-cache"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn lint && ./bin/imagemin"
+    }
   },
   "dependencies": {
+    "@nuxtjs/pwa": "^3.0.0-beta.12",
     "cross-env": "^5.2.0",
-    "nuxt": "^2.4.0",
-    "@nuxtjs/pwa": "^2.6.0"
+    "normalize.css": "^8.0.1",
+    "nuxt": "^2.4.0"
   },
   "devDependencies": {
-    "nodemon": "^1.18.9",
     "@nuxtjs/eslint-config": "^0.0.1",
+    "@nuxtjs/style-resources": "^0.1.2",
+    "@vue/test-utils": "^1.0.0-beta.27",
+    "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^8.2.1",
+    "babel-jest": "^24.1.0",
     "eslint": "^5.0.1",
+    "eslint-config-prettier": "^3.1.0",
     "eslint-config-standard": ">=12.0.0",
+    "eslint-loader": "^2.0.0",
     "eslint-plugin-import": ">=2.14.0",
     "eslint-plugin-jest": ">=21.24.1",
     "eslint-plugin-node": ">=7.0.1",
     "eslint-plugin-nuxt": ">=0.4.2",
+    "eslint-plugin-prettier": "2.6.2",
     "eslint-plugin-promise": ">=4.0.1",
     "eslint-plugin-standard": ">=4.0.0",
-    "eslint-loader": "^2.0.0",
     "eslint-plugin-vue": "^5.0.0",
-    "eslint-config-prettier": "^3.1.0",
-    "eslint-plugin-prettier": "2.6.2",
-    "prettier": "1.14.3",
-    "@vue/test-utils": "^1.0.0-beta.27",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^24.1.0",
+    "husky": "^1.3.1",
+    "imagemin-cli": "^4.0.1",
+    "imagemin-gifsicle": "^6.0.1",
+    "imagemin-mozjpeg": "^8.0.0",
+    "imagemin-optipng": "^6.0.0",
+    "imagemin-pngquant": "^7.0.0",
+    "imagemin-svgo": "^7.0.0",
     "jest": "^24.1.0",
+    "node-sass": "^4.11.0",
+    "nodemon": "^1.18.9",
+    "prettier": "1.14.3",
+    "sass-loader": "^7.1.0",
+    "stylelint": "^9.10.1",
+    "stylelint-config-standard": "^18.2.0",
+    "stylelint-scss": "^3.5.4",
+    "stylelint-webpack-plugin": "^0.10.5",
     "vue-jest": "^3.0.3"
   }
 }

assets/README.md src/assets/README.md

@@ -0,0 +1,16 @@
+$vue-dark-blue: #34495e;
+$vue-green: #42b983;
+
+$white: #fff;
+$gray: #d4d4d4;
+$black: #000;
+
+// Primary color
+
+$primary-color: $vue-dark-blue;
+
+// Text color
+
+$primary-text-color: $black;
+$primary-text-color--inverse: $white;
+$haze-text-color: $gray;