[DNM] master -> lang-ja

README.md

@@ -6,8 +6,6 @@ This site is built with [VuePress](https://vuepress.vuejs.org/). Site content is
 
 See the [Vue Docs Writing Guide](https://v3.vuejs.org/guide/writing-guide.html) for our rules and recommendations on writing and maintaining documentation.
 
-> The docs are in beta: The team is currently in the midst of changes and we are not ready for additional contributions yet. All content is subject to change. If you see a problem that you would like to bring to our attention, please [create an issue](https://github.com/vuejs/docs-next/issues/new) and we will get to it when we can. You may want to wait until the content is finalized, though.
-
 ## Developing
 
 1. Clone repository

package.json

@@ -1,18 +1,20 @@
 {
   "devDependencies": {
-    "node-sass": "^4.13.1",
+    "@vuepress/plugin-pwa": "^1.5.4",
+    "sass": "^1.32.0",
     "sass-loader": "^8.0.2",
     "vuepress": "^1.5.4"
   },
   "scripts": {
+    "dev": "yarn serve",
     "serve": "vuepress dev src",
     "build": "vuepress build src"
   },
   "dependencies": {
     "@docsearch/css": "^1.0.0-alpha.27",
     "@docsearch/js": "^1.0.0-alpha.27",
     "algoliasearch": "^4.4.0",
-    "axios": "^0.19.1",
+    "axios": "^0.21.1",
     "intersection-observer": "^0.11.0",
     "showdown": "^1.9.1"
   }

src/.vuepress/components/MigrationBadges.vue

@@ -1,15 +1,25 @@
 <script>
-const validBadges = ['new', 'breaking', 'removed', 'updated']
+const validBadges = {
+  new: 'new',
+  breaking: 'breaking',
+  removed: 'removed',
+  updated: 'updated'
+}
 
 export default {
   props: {
     badges: {
       type: Array,
       default: () => [],
       validator(value) {
-        return value.every(badge => validBadges.includes(badge))
+        return value.every(badge => Object.keys(validBadges).includes(badge))
       }
     }
+  },
+  data() {
+    return {
+      validBadges
+    }
   }
 }
 </script>
@@ -21,7 +31,7 @@ export default {
       :class="`migration-badge is-${badgeType}`"
       :key="`badge-type-${badgeType}`"
     >
-      {{ badgeType }}
+      {{ validBadges[badgeType] }}
     </span>
   </div>
 </template>

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>