Merge pull request #424 from codeforjapan/feature/upgrade-version

Feature/upgrade-version

.eslintrc.js

@@ -2,30 +2,48 @@ module.exports = {
   root: true,
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   parser: 'vue-eslint-parser',
   parserOptions: {
     ecmaVersion: 2016,
-    parser: 'babel-eslint'
+    parser: 'babel-eslint',
   },
   extends: [
     '@nuxtjs',
     'plugin:nuxt/recommended',
-    'plugin:vue/recommended'
-  ],
-  plugins: [
-    'vue',
-    'html'
+    'plugin:vue/recommended',
+    'prettier',
   ],
+  plugins: ['html', 'vue'],
   // add your custom rules here
   rules: {
-    quotes: ['error', 'single'],
-    camelcase: 'warn',
-    'vue/no-mutating-props': 'warn',
-    'brace-style': 'warn',
-    'eqeqeq': 'warn',
-    'quotes': 'warn',
-    semi: 'error'
-  }
+    // タグの最後で改行しないで
+    'vue/html-closing-bracket-newline': [2, { multiline: 'never' }],
+    // 不要なカッコは消す
+    'no-extra-parens': 1,
+    // 無駄なスペースは削除
+    'no-multi-spaces': 2,
+    // 不要な空白行は削除。2行開けてたらエラー
+    'no-multiple-empty-lines': [2, { max: 1 }],
+    // 関数とカッコはあけない(function hoge() {/** */})
+    'func-call-spacing': [2, 'never'],
+    // true/falseを無駄に使うな
+    'no-unneeded-ternary': 2,
+    // varは禁止
+    'no-var': 2,
+    // かっこの中はスペースなし！違和感
+    'space-in-parens': [2, 'never'],
+    // コンソールは許可
+    'no-console': 0,
+    // カンマの前後にスペース入れる？
+    'comma-spacing': 2,
+    // 配列のindexには空白入れるな(hogehoge[ x ])
+    'computed-property-spacing': 2,
+    // キー
+    'key-spacing': 2,
+    // キーワードの前後には適切なスペースを
+    'keyword-spacing': 2,
+    'camelcase': 0,
+  },
 }

.github/workflows/generate-pages.yml

@@ -9,9 +9,9 @@ jobs:
     - uses: actions/checkout@v2
 
     - name: setup node
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
-        node-version: '14.x'
+        node-version: '20.10.0'
 
     - name: Cache dependencies
       uses: actions/cache@v1

.github/workflows/gh-pages.yml

@@ -12,9 +12,9 @@ jobs:
     - uses: actions/checkout@v2
 
     - name: setup node
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
-        node-version: '14.x'
+        node-version: '20.10.0'
 
     - name: Cache dependencies
       uses: actions/cache@v1

.github/workflows/lint.yml

@@ -6,8 +6,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - name: setup node
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: '20.10.0'
       - run: yarn install
       - run: yarn run lint

.node-version

@@ -1 +1 @@
-14.17.2
+20.10.0

.prettierrc.yaml

@@ -0,0 +1,17 @@
+tabWidth: 2
+useTabs: false
+semi: true
+singleQuote: false
+quoteProps: "as-needed"
+trailingComma: "es5"
+bracketSpacing: true
+bracketSameLine: false
+arrowParens: "always"
+requirePragma: false
+insertPragma: false
+htmlWhitespaceSensitivity: "css"
+vueIndentScriptAndStyle: true
+endOfLine: "lf"
+embeddedLanguageFormatting: "off"
+singleAttributePerLine: false
+

.settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": false
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "eslint.validate": []
+}

components/Logo.vue

@@ -1,13 +1,13 @@
-<template>
-  <div class="VueToNuxtLogo">
-    <div class="Triangle Triangle--two" />
-    <div class="Triangle Triangle--one" />
-    <div class="Triangle Triangle--three" />
-    <div class="Triangle Triangle--four" />
-  </div>
+<template lang="pug">
+<div class="VueToNuxtLogo">
+  <div class="Triangle Triangle--two" />
+  <div class="Triangle Triangle--one" />
+  <div class="Triangle Triangle--three" />
+  <div class="Triangle Triangle--four" />
+</div>
 </template>
 
-<style>
+<style lang="js">
 .VueToNuxtLogo {
   display: inline-block;
   animation: turn 2s linear forwards 1s;

components/Modal.vue

@@ -1,28 +1,33 @@
 <template lang="pug">
-  div
-    .modal(v-bind:class='{open: isOpen}')
-      p(v-if="map_config") {{map_config.map_description}}
-      p
-        | このサイトのソースコードはオープンに公開しております。開発にご協力いただける方は、
-        a(href="https://github.com/codeforjapan/mapprint") Code for Japan の Github リポジトリ
-        | から、開発にご参加ください。JavaScript や Leaflet などの経験がある方、大歓迎です。
-      div
-        span.modal-close(@click='handleClick')
-          | × close
-    .modal-background(@click='handleClick' :class='{open: isOpen}')
+div
+  .modal(v-bind:class='{open: isOpen}')
+    p(v-if="mapConfig") {{mapConfig.map_description}}
+    p
+      | このサイトのソースコードはオープンに公開しております。開発にご協力いただける方は、
+      a(href="https://github.com/codeforjapan/mapprint") Code for Japan の Github リポジトリ
+      | から、開発にご参加ください。JavaScript や Leaflet などの経験がある方、大歓迎です。
+    div
+      span.modal-close(@click='handleClick')
+        | × close
+  .modal-background(@click='handleClick' :class='{open: isOpen}')
 </template>
 
-<script>
+<script lang="js">
 export default {
-  props: ['isOpen'],
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
-      map_config: this.$nuxt.$route.params.map ? require('~/assets/config/' + (this.$nuxt.$route.params.map)) : ''
+      mapConfig: this.$nuxt.$route.params.map ? require('~/assets/config/' + (this.$nuxt.$route.params.map)) : ''
     }
   },
   methods: {
     handleClick () {
-      this.isOpen = false
+      this.$emit('update:isOpen', false)
       this.$emit('closeModal')
     }
   }