Guide > Introduction の翻訳を追従

package.json

@@ -11,6 +11,7 @@
     "vuepress": "^1.5.4"
   },
   "scripts": {
+    "dev": "yarn serve",
     "serve": "vuepress dev src",
     "build": "vuepress build src",
     "test": "npm run lint",

src/.vuepress/components/VideoLesson.vue

@@ -0,0 +1,50 @@
+<script>
+export default {
+  props: {
+    href: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="video-lesson">
+    <a :href="href" target="_blank" rel="sponsored noopener" :title="title">
+      <slot></slot>
+    </a>
+  </section>
+</template>
+
+<style lang="scss">
+.video-lesson {
+  display: flex;
+  align-items: center;
+  background-color: #e7ecf3;
+  padding: 1em 1.25em;
+  border-radius: 2px;
+  color: #486491;
+  position: relative;
+  margin: 24px 0;
+
+  a {
+    color: #486491;
+    position: relative;
+    padding-left: 16px;
+  }
+
+  &::before {
+    content: '\f144';
+    font-family: 'FontAwesome';
+    font-size: 2em;
+    display: inline-block;
+    color: #73abfe;
+    vertical-align: middle;
+  }
+}
+</style>

src/.vuepress/components/common/codepen-snippet.vue

@@ -0,0 +1,104 @@
+<template>
+  <p
+    class="codepen"
+    :data-theme-id="theme"
+    :data-preview="preview || null"
+    :data-editable="editable || null"
+    :data-height="height"
+    :data-default-tab="tab"
+    :data-user="user"
+    :data-slug-hash="slug"
+    :data-pen-title="title"
+    :data-embed-version="version"
+    :style="`height: ${height}px`">
+    <span>See the Pen <a :href="href">{{ title }}</a>
+    by {{ name || user }} (<a :href="`https://codepen.io/${user}`">@{{user}}</a>)
+    on <a href="https://codepen.io">CodePen</a>.</span>
+  </p>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: null,
+      required: true,
+    },
+
+    slug: {
+      type: String,
+      default: null,
+      required: true,
+    },
+
+    tab: {
+      type: String,
+      default: 'result',
+    },
+
+    team: {
+      type: Boolean,
+      default: true,
+    },
+
+    user: {
+      type: String,
+      default: 'Vue',
+    },
+
+    name: {
+      type: String,
+      default: null,
+    },
+
+    height: {
+      type: Number,
+      default: 300,
+    },
+
+    theme: {
+      type: String,
+      default: '39028',
+    },
+
+    preview: {
+      type: Boolean,
+      default: true,
+    },
+
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+
+    version: {
+      type: String,
+      default: null,
+    }
+  },
+  mounted() {
+    const codepenScript = document.createElement('script')
+    codepenScript.setAttribute('src', 'https://static.codepen.io/assets/embed/ei.js')
+    codepenScript.async = true
+    this.$el.appendChild(codepenScript)
+  },
+  computed: {
+    href() {
+      return `https://codepen.io/${this.team ? 'team' : ''}${this.user}/pen/${this.slug}`
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.codepen {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid;
+  margin: 1em 0;
+  padding: 1em;
+}
+</style>

src/.vuepress/components/common/vuemastery-video-modal.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="overlay" v-show="isOpen">
     <div ref="modal" class="modal" :class="{ open: isOpen }">
-      <div class="video-space" style="padding: 56.25% 0 0 0; position: relative;">
+      <div
+        class="video-space"
+        style="padding: 56.25% 0 0 0; position: relative;"
+      >
         <iframe
           src="https://player.vimeo.com/video/247494684?dnt=1"
           style="height: 100%; left: 0; position: absolute; top: 0; width: 100%; margin: 0"
           frameborder="0"
           webkitallowfullscreen
           mozallowfullscreen
           allowfullscreen
+          allow="autoplay"
           ref="videoIframe"
         ></iframe>
       </div>
@@ -20,14 +24,15 @@
           target="_blank"
           rel="sponsored noopener"
           title="Vue.js Courses on Vue Mastery"
-        >Vue Mastery</a>.
-        Watch Vue Mastery’s free
+          >Vue Mastery</a
+        >. Watch Vue Mastery’s free
         <a
           href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/"
           target="_blank"
           rel="sponsored noopener"
           title="Vue.js Courses on Vue Mastery"
-        >Intro to Vue course</a>.
+          >Intro to Vue course</a
+        >.
       </p>
     </div>
   </div>
@@ -47,7 +52,7 @@ export default {
   }),
 
   methods: {
-    initVideoModal () {
+    initVideoModal() {
       const modalButton = document.querySelector(this.triggerSelector)
       const player = new Vimeo.Player(this.$refs.videoIframe)
 
@@ -59,7 +64,11 @@ export default {
       })
 
       document.body.addEventListener('click', event => {
-        if (this.isOpen && event.target !== modalButton && !this.$refs.modal.contains(event.target)) {
+        if (
+          this.isOpen &&
+          event.target !== modalButton &&
+          !this.$refs.modal.contains(event.target)
+        ) {
           this.isOpen = false
           document.body.classList.remove('stop-scroll')
           player.pause()
@@ -68,7 +77,7 @@ export default {
     }
   },
 
-  mounted () {
+  mounted() {
     if (typeof window !== 'undefined') {
       this.initVideoModal()
     }
@@ -77,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@theme/styles/_settings.scss";
+@import '@theme/styles/_settings.scss';
 
 .modal {
   box-sizing: border-box;

src/.vuepress/styles/index.styl

@@ -125,31 +125,6 @@
   }
 }
 
-.scrimba,
-.vueschool {
-  background-color: #e7ecf3;
-  padding: 1em 1.25em;
-  border-radius: 2px;
-  color: #486491;
-  position: relative;
-  margin: 24px 0;
-
-  a {
-    color: #486491;
-    position: relative;
-    padding-left :16px;
-  }
-
-  &::before {
-    content: "\f144";
-    font-family: 'FontAwesome';
-    font-size: 2em;
-    display: inline-block;
-    color: #73abfe;
-    vertical-align: middle;
-  }
-}
-
 .sidebar-group.is-sub-group > .sidebar-heading:not(.clickable) {
   font-size: inherit;
   cursor: pointer!important;

src/cookbook/editable-svg-icons.md

@@ -143,7 +143,7 @@ export default {
 
 We're applying `refs` to the groups of paths we need to move, and as both sides of the scissors have to move in tandem, we'll create a function we can reuse where we'll pass in the `refs`. The use of GreenSock helps resolve animation support and `transform-origin` issues across browser.
 
-<p data-height="300" data-theme-id="0" data-slug-hash="dJRpgY" data-default-tab="result" data-user="Vue" data-embed-version="2" data-pen-title="Editable SVG Icon System: Animated icon" class="codepen">See the Pen <a href="https://codepen.io/team/Vue/pen/dJRpgY/">Editable SVG Icon System: Animated icon</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>) on <a href="https://codepen.io">CodePen</a>.</p><script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Editable SVG Icon System: Animated icon" slug="dJRpgY" :preview="false" :editable="false" version="2" theme="0" />
 
 <p style="margin-top:-30px">Pretty easily accomplished! And easy to update on the fly.</p>
 

src/examples/commits.md

@@ -2,9 +2,4 @@
 
 > この例は最新の Vue.js コミットデータを GitHub API から取得し、そしてそれらをリストとして表示します。あなたは master ブランチと dev ブランチ間を切り替えることができます。
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="RwaWmzY" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Commits">
-  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/RwaWmzY">
-  Vue 3 Commits</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Commits" slug="RwaWmzY" tab="js,result" />

src/examples/elastic-header.md

@@ -1,8 +1,3 @@
 # 弾力のあるヘッダ
 
-<p class="codepen" data-height="474" data-theme-id="39028" data-default-tab="js,result" data-user="immarina" data-slug-hash="ZEWGmar" style="height: 474px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
-  <span>See the Pen <a href="https://codepen.io/immarina/pen/ZEWGmar">
-  Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Elastic Draggable Header Example" slug="ZEWGmar" :height="474" tab="js,result" :team="false" user="immarina" name="Vue" :preview="false" :editable="false" />

src/examples/grid-component.md

@@ -2,9 +2,4 @@
 
 > これは再利用可能なグリッドコンポーネントを作成して外部データでそれを利用した例です。
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="zYqvQgw" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Elastic Draggable Header Example">
-  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/zYqvQgw">
-  Vue 3 Elastic Draggable Header Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Grid Component Example" slug="BaKbowJ" tab="js,result" />

src/examples/markdown.md

@@ -2,9 +2,4 @@
 
 > すごくシンプルな Markdown エディタ。
 
-<p class="codepen" data-height="474" data-theme-id="39028" data-default-tab="js,result" data-user="immarina" data-slug-hash="oNxXzyB" style="height: 474px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
-  <span>See the Pen <a href="https://codepen.io/immarina/pen/oNxXzyB">
-  Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Markdown Editor" slug="oNxXzyB" :height="474" tab="js,result" :team="false" user="immarina" name="Vue" :preview="false" :editable="false" />

src/examples/modal.md

@@ -2,9 +2,4 @@
 
 > コンポーネント、プロパティの伝達、コンテンツ挿入、トランジションの機能が使われています。
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="css,result" data-user="Vue" data-slug-hash="BaKoeXe" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
-  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/BaKoeXe">
-  Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Modal Component" slug="mdPoyvv" tab="js,result" />

src/examples/select2.md

@@ -2,9 +2,4 @@
 
 > この例では、カスタムコンポーネント内部でラップすることによって、サードパーティの jQuery プラグイン (select2) を統合しています。
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="eYZpwOB" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Wrapper Component Example">
-  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/eYZpwOB">
-  Vue 3 Wrapper Component Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Wrapper Component Example" slug="eYZpwOB" tab="js,result" />

src/examples/svg.md

@@ -2,9 +2,4 @@
 
 > この例はカスタムコンポーネントの組み合わせ、算出プロパティ、双方向バインディング、そして SVG 対応を紹介します。
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="XWdmLWM" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 SVG Graph Example">
-  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/XWdmLWM">
-  Vue 3 SVG Graph Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 SVG Graph Example" slug="XWdmLWM" tab="js,result" />

src/examples/todomvc.md

@@ -8,9 +8,4 @@
 さらに、 CodePen の制約によってハッシュナビゲーションは動作しません。
 :::
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="Yzqyozj" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 TodoMVC">
-  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/Yzqyozj">
-  Vue 3 TodoMVC</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 TodoMVC" slug="Yzqyozj" tab="js,result" />

src/examples/tree-view.md

@@ -2,9 +2,4 @@
 
 > コンポーネントの再帰的な利用を紹介するシンプルなツリー表示実装の例。
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="WNwQqbN" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Tree View">
-  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/WNwQqbN">
-  Vue 3 Tree View</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Tree View" slug="WNwQqbN" tab="js,result" />

src/guide/a11y-basics.md

@@ -54,12 +54,7 @@ export default {
 </script>
 ```
 
-<p class="codepen" data-height="350" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="VwepxJa" style="height: 350px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Skip to Main">
-  <span>See the Pen <a href="https://codepen.io/mlama007/pen/VwepxJa">
-  Skip to Main</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Skip to Main" slug="VwepxJa" :height="350" tab="js,result" :team="false" user="mlama007" name="Maria" theme="light" :preview="false" :editable="false" />
 
 [メインコンテンツへのスキップリンクについてのドキュメントを読む](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html)