Merge branch 'lang-ja' into security

* lang-ja:
  fix: textlint
  fix: anchor links
  fix: corrections in migration-build.md, including broken links
  chore: replace Storyblok logo with a much smaller SVG version
  Update Laravel logo
  Correct vue.config.js example
  docs: improved attribute-coercion.md
  fix: textlint
  fix: update positioning in lifecycle diagram
  chore: add node version
  fix: yarn.lock
  fix: "< IE11"
  fix: add allowlist filter
  fix: disable strict mode of no-mix-dearu-desumasu
  fix: excute textlint --fix again
  fix: execute textlint --fix
  chore: update ci
  test: update textlint with preset vuejs-jp

Author: naokie

.github/workflows/ja.yaml

@@ -1,29 +1,18 @@
-name: Lint
+name: textlint
 
 on: [push]
 
-defaults:
-  run:
-    shell: bash
-
 jobs:
   textlint:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [12.x]
-
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
       with:
-        node-version: ${{ matrix.node-version }}
-    - name: Lint
-      run: |
-        yarn
-        yarn lint
-      env:
-        CI: true
+        node-version: '14'
+    - name: Install deps
+      run: yarn
+    - name: Run textlint
+      run: yarn lint

.node-version

@@ -0,0 +1 @@
+v14.17.1

.textlintrc

@@ -0,0 +1,16 @@
+{
+  "rules": {
+    "preset-vuejs-jp": {
+      "no-mix-dearu-desumasu": {
+        "strict": false
+      }
+    }
+  },
+  "filters": {
+    "allowlist": {
+      "allow": [
+        "->"
+      ]
+    }
+  }
+}

package.json

@@ -3,21 +3,17 @@
     "@vuepress/plugin-pwa": "^1.5.4",
     "sass": "^1.32.0",
     "sass-loader": "^8.0.2",
-    "shelljs": "^0.8.4",
-    "textlint": "^11.7.6",
-    "textlint-checker-for-vuejs-jp-docs": "git+https://github.com/vuejs-jp/textlint-checker-for-vuejs-jp-docs.git",
-    "textlint-plugin-jtf-style": "^1.0.1",
-    "textlint-rule-detect-bad-chars": "^1.0.2",
-    "textlint-rule-no-mix-dearu-desumasu": "^4.0.1",
+    "textlint": "^12.0.0",
+    "textlint-filter-rule-allowlist": "^2.0.1",
+    "textlint-rule-preset-vuejs-jp": "git+https://github.com/vuejs-jp/textlint-rule-preset-vuejs-jp.git",
     "vuepress": "^1.5.4"
   },
   "scripts": {
     "dev": "yarn serve",
     "serve": "vuepress dev src",
     "build": "vuepress build src",
     "test": "npm run lint",
-    "lint": "node -e \"var shell=require('shelljs');var files=shell.find(['./src/**/*.md']).filter(function(file){return !file.endsWith('/guide/team.md')}).join(' ');if(shell.exec('textlint --rulesdir ./node_modules/textlint-checker-for-vuejs-jp-docs/rules/textlint-rule-vue-jp-docs -f pretty-error '+files).code!==0){shell.exit(1)};\"",
-    "lint:single": "textlint --rulesdir ./node_modules/textlint-checker-for-vuejs-jp-docs/rules/textlint-rule-vue-jp-docs -f pretty-error"
+    "lint": "textlint --format pretty-error src/**"
   },
   "dependencies": {
     "@docsearch/css": "^1.0.0-alpha.27",

src/.textlintrc

@@ -36,7 +36,7 @@ export default {
     },
     {
       "url": "https://www.storyblok.com",
-      "img": "storyblok.png",
+      "img": "storyblok.svg",
       "name": "Storyblok"
     }
   ],

src/.vuepress/public/images/lifecycle.svg

@@ -124,7 +124,7 @@ const myDirective = app.directive('my-directive')
 このオブジェクトは、以下のプロパティを持ちます。
 
 - `instance`: ディレクティブが使われているコンポーネントのインスタンス。
-- `value`: ディレクティブの値。例えば `v-my-directive="1 + 1"` の場合、 value は `2`となります。
+- `value`: ディレクティブの値。例えば `v-my-directive="1 + 1"` の場合、 value は `2` となります。
 - `oldValue`: 以前の値であり、 `beforeUpdate` および `updated` でのみ利用できます。値が変更されているかを判別できます。
 - `arg`: 引数がある場合はそれを含むオブジェクト。例えば `v-my-directive:foo` の場合、 arg は `"foo"` となります。
 - `modifiers`: 修飾子がある場合はそれを含むオブジェクト。例えば `v-my-directive.foo.bar` の場合、 modifiers オブジェクトは `{ foo: true, bar: true }` となります。
@@ -299,7 +299,7 @@ setTimeout(() => app.unmount(), 5000)
 
   Vue.js プラグインをインストールします。プラグインが Object の場合は `install` メソッドが必要となります。関数の場合は、それ自体をインストールメソッドとして適用します。
 
-  インストールメソッドはアプリケーションを第一引数に受け取って実行されます。`use` に渡されたあらゆるy `options` は、第二引数以降に渡されます。
+  インストールメソッドはアプリケーションを第一引数に受け取って実行されます。`use` に渡されたあらゆる y `options` は、第二引数以降に渡されます。
 
   同じプラグインに対してこのメソッドが複数回呼び出された場合、プラグインは一度だけインストールされます。
 

src/.vuepress/public/images/sponsors/laravel.png

@@ -67,7 +67,7 @@ export default {
 }
 ```
 
-塗りつぶし色のデフォルト `currentColor` プロパティは、アイコンの周囲のテキスト色を継承します。必要なら、別の色をプロパティとして渡すこともできます。
+塗りつぶし色のデフォルト `currentColor` プロパティは、アイコンの周囲のテキスト色を継承します。必要なら、別の色をプロパティとして渡すこともできます。
 
 アイコンのパスを内包する `IconWrite.vue` だけを内容にすると、このように使えます:
 

src/.vuepress/public/images/sponsors/storyblok.png

@@ -27,7 +27,7 @@
 
 - 特定の一般的な問題を解決しましょう。
 - できるだけシンプルな例から始めましょう。
-- 複雑なことは1つずつ紹介しましょう。
+- 複雑なことは 1 つずつ紹介しましょう。
 - 概念を再説明するのではなく、他のドキュメントにリンクしましょう。
 - その問題に精通していると前提とするのではなく、問題点を説明しましょう。
 - 最終的な結果だけではなく、プロセスを説明しましょう。
@@ -38,8 +38,8 @@
 
 ### 基本的な例 <Badge text="必須" type="error" />
 
-1.  問題を1文か2文で明確にしましょう。
-2.  最も簡単な問題に対しての解答を1文か2文で説明しましょう。
+1.  問題を 1 文か 2 文で明確にしましょう。
+2.  最も簡単な問題に対しての解答を 1 文か 2 文で説明しましょう。
 3.  小さなコードサンプルを表示しましょう。
 4.  これが何を達成しているのかを文章で説明しましょう。
 
@@ -69,7 +69,7 @@
 
 ### 代替パターン <Badge text="必須 回避のセクションに付随する" type="warning" />
 
-このセクションは、上記の回避についてのセクションを提供した場合に必要となります。特定の状況で何かがアンチパターンだと言われても、疑問を残さないように、他の方法を模索することが重要です。その際には、ウェブは大きなテントであり、多くの人が異なるコードベースの構造を持ち、異なる目標を解決していることを考慮してください。アプリの規模は大きいのか小さいのか？既存のプロジェクトに Vue を統合しているのか、それともゼロから構築しているのか。ユーザーは1つの目標だけを達成しようとしているのか、それとも多くの目標を達成しようとしているのか？非同期データが多いのか？これらの懸念事項はすべて、代替の実装に影響を与えます。良いクックブックのレシピは、開発者にこのような状況を提供します。
+このセクションは、上記の回避についてのセクションを提供した場合に必要となります。特定の状況で何かがアンチパターンだと言われても、疑問を残さないように、他の方法を模索することが重要です。その際には、ウェブは大きなテントであり、多くの人が異なるコードベースの構造を持ち、異なる目標を解決していることを考慮してください。アプリの規模は大きいのか小さいのか？既存のプロジェクトに Vue を統合しているのか、それともゼロから構築しているのか。ユーザーは 1 つの目標だけを達成しようとしているのか、それとも多くの目標を達成しようとしているのか？非同期データが多いのか？これらの懸念事項はすべて、代替の実装に影響を与えます。良いクックブックのレシピは、開発者にこのような状況を提供します。
 
 ## 謝辞
 

src/.vuepress/public/images/sponsors/storyblok.svg

@@ -60,7 +60,7 @@ export default {
 
 ## コンテンツの構造
 
-アクセシビリティの最も重要な部分の1つは、デザインがアクセシブルな実装をサポートできることを確認することです。デザインは、色のコントラスト、フォントの選択、テキストのサイズ、言語だけでなく、アプリケーション内でのコンテンツの構造も考慮する必要があります。
+アクセシビリティの最も重要な部分の 1 つは、デザインがアクセシブルな実装をサポートできることを確認することです。デザインは、色のコントラスト、フォントの選択、テキストのサイズ、言語だけでなく、アプリケーション内でのコンテンツの構造も考慮する必要があります。
 
 ### 見出し
 

src/.vuepress/theme/data/patreon-sponsors.js

@@ -35,9 +35,9 @@
 
 ## ユーザー
 
-世界保健機関は、世界人口の15％が何らかの障害を持っており、そのうち2～4％が重度の障害を持っていると推定しています。これは全世界で推定10億人の人々であり、障害者は世界最大のマイノリティグループとなっています。
+世界保健機関は、世界人口の 15％が何らかの障害を持っており、そのうち 2～4％が重度の障害を持っていると推定しています。これは全世界で推定 10 億人の人々であり、障害者は世界最大のマイノリティグループとなっています。
 
-障害の種類は多岐にわたりますが、大きく分けて4つのカテゴリーに分けられます:
+障害の種類は多岐にわたりますが、大きく分けて 4 つのカテゴリーに分けられます:
 
 - _[視覚](https://webaim.org/articles/visual/)_ - このようなユーザーは、スクリーンリーダー、スクリーン拡大、スクリーンコントラストの制御、または点字表示を使用することで恩恵を受けることができます。
 - _[聴覚](https://webaim.org/articles/auditory/)_ - このようなユーザーは、キャプション、トランスクリプト、手話ビデオの恩恵を受けることができます。

src/api/application-api.md

@@ -142,7 +142,7 @@ Chrome DevTools で検出することで Description を確認することがで
 
 多くのユーザが混乱する可能性があるため、プレースホルダの使用は避けてください。
 
-プレースホルダによる問題の１つは初期状態で [color contrast criteria](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) を満たしていないことです。色のコントラストを修正するとプレースホルダが入力欄に事前入力されたデータのように見えます。以下の例を見ると、color contrast criteria を満たしている Last Name プレースホルダが事前入力されたデータのように見えることが確認できます:
+プレースホルダによる問題の 1 つは初期状態で [color contrast criteria](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) を満たしていないことです。色のコントラストを修正するとプレースホルダが入力欄に事前入力されたデータのように見えます。以下の例を見ると、color contrast criteria を満たしている Last Name プレースホルダが事前入力されたデータのように見えることが確認できます:
 
 <common-codepen-snippet title="Form Placeholder" slug="ExZvvMw" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" />