Summary of changes for the 5th week of June

README.md

@@ -11,7 +11,7 @@
 1. リポジトリをクローンします
 
 ```bash
-git clone git@github.com:vuejs/docs-next.git
+git clone git@github.com:vuejs/docs.git
 ```
 
 2. 依存ファイルをインストールします

src/.vuepress/components/community/themes/theme-data.js

@@ -127,51 +127,79 @@ export default [
   },
   {
     name: 'PrimeVue',
-    description: `オープンソースの UI コンポーネントライブラリ [PrimeVue](https://www.primefaces.org/primevue/#/?af_id=4218) は、アプリケーションを開発するための 50 を超えるフレキシブルなコンポーネントを提供しています。その中には様々なコンポーネントテーマと、 Vue CLI のアプリケーションテンプレートが用意されており、あなたがベストだと考えるルック&フィールのものを利用できます。`,
+    description: `オープンソースの UI コンポーネントライブラリ [PrimeVue](https://www.primefaces.org/primevue/#/?af_id=4218) は、アプリケーションを開発するための 80 を超えるフレキシブルなコンポーネントを提供しています。その中には様々なコンポーネントテーマと、 Vue CLI のアプリケーションテンプレートが用意されており、あなたがベストだと考えるルック&フィールのものを利用できます。`,
     seeMoreUrl: 'https://www.primefaces.org/primevue/#/?af_id=4218',
     products: [
       {
-        name: 'Sapphire',
+        name: 'Freya',
+        price: 59,
+        description: 'Premium Admin Template',
+        url: 'https://www.primefaces.org/layouts/freya-vue?af_id=4218',
+        image: 'https://www.primefaces.org/vue-templates/freya.jpg'
+      },
+      {
+        name: 'Diamond',
+        price: 59,
+        description: 'PrimeOne Design Admin Template',
+        url: 'https://www.primefaces.org/layouts/diamond-vue?af_id=4218',
+        image: 'https://www.primefaces.org/vue-templates/diamond.jpg'
+      },
+      {
+        name: 'Ultima',
         price: 79,
         description: 'Material Design Admin Template',
+        url: 'https://www.primefaces.org/layouts/ultima-vue?af_id=4218',
+        image: 'https://www.primefaces.org/vue-templates/ultima.jpg'
+      },
+      {
+        name: 'Sapphire',
+        price: 49,
+        description: 'Material Design Admin Template',
         url: 'https://www.primefaces.org/layouts/sapphire-vue?af_id=4218',
         image: 'https://www.primefaces.org/vue-templates/sapphire.jpg'
       },
       {
         name: 'Avalon',
-        price: 79,
+        price: 49,
         description: 'Bootstrap Inspired Admin Template',
         url: 'https://www.primefaces.org/layouts/avalon-vue?af_id=4218',
         image: 'https://www.primefaces.org/vue-templates/avalon.jpg'
       },
       {
         name: 'Serenity',
-        price: 79,
+        price: 49,
         description: 'Material Design Admin Template',
         url: 'https://www.primefaces.org/layouts/serenity-vue?af_id=4218',
         image: 'https://www.primefaces.org/vue-templates/serenity.jpg'
       },
       {
         name: 'Apollo',
-        price: 79,
+        price: 49,
         description: 'Admin Template with a Dark Mode',
         url: 'https://www.primefaces.org/layouts/apollo-vue?af_id=4218',
         image: 'https://www.primefaces.org/vue-templates/apollo.jpg'
       },
       {
         name: 'Babylon',
-        price: 79,
+        price: 49,
         description: 'Admin Template with Extensive Options',
         url: 'https://www.primefaces.org/layouts/babylon-vue?af_id=4218',
         image: 'https://www.primefaces.org/vue-templates/babylon.jpg'
       },
       {
         name: 'Roma',
-        price: 59,
+        price: 39,
         description: 'Admin Template with a Clean Design System',
         url: 'https://www.primefaces.org/layouts/roma-vue?af_id=4218',
         image: 'https://www.primefaces.org/vue-templates/roma.jpg'
       },
+      {
+        name: 'Prestige',
+        price: 39,
+        description: 'Highly Customizable Admin Template',
+        url: 'https://www.primefaces.org/layouts/prestige-vue?af_id=4218',
+        image: 'https://www.primefaces.org/vue-templates/prestige.jpg'
+      },
       {
         name: 'Sigma',
         price: 0,

src/.vuepress/components/guide/contributing/translations-data.js

@@ -11,7 +11,7 @@ export const labels = {
 // Repos are in alphabetical order by the language code
 // You may need to clear your sessionStorage when adding a new item to this list
 export const repos = [
-  { lang: 'en-us', owner: 'vuejs', repo: 'docs-next', branch: 'master', url: 'https://v3.vuejs.org/' },
+  { lang: 'en-us', owner: 'vuejs', repo: 'docs', branch: 'master', url: 'https://v3.vuejs.org/' },
   { lang: 'fr', owner: 'demahom18', repo: 'docs-next', branch: 'master', url: 'https://vue3-fr.netlify.app' },
   { lang: 'id', owner: 'vuejs-id', repo: 'docs-next', branch: 'indonesian' },
   { lang: 'ja', owner: 'vuejs-jp', repo: 'ja.vuejs.org', branch: 'lang-ja', url: 'https://v3.ja.vuejs.org/' },

src/.vuepress/config.js

@@ -384,7 +384,7 @@ module.exports = {
               },
               {
                 text: 'Devtools',
-                link: 'https://github.com/vuejs/vue-devtools'
+                link: 'https://devtools.vuejs.org'
               },
               {
                 text: 'ウィークリーニュース',
@@ -433,6 +433,10 @@ module.exports = {
             text: '한국어',
             link: 'https://v3.ko.vuejs.org/'
           },
+          // {
+          //  text: '日本語',
+          //  link: 'https://v3.ja.vuejs.org/'
+          // },
           {
             text: 'Русский',
             link: 'https://v3.ru.vuejs.org/'
@@ -471,7 +475,8 @@ module.exports = {
       carbon: 'CEBDT27Y',
       custom: 'CKYD62QM',
       placement: 'vuejsorg'
-    }
+    },
+    topBanner: false
   },
   plugins: [
     [

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

@@ -38,6 +38,11 @@ export default {
       "url": "https://www.storyblok.com",
       "img": "storyblok.svg",
       "name": "Storyblok"
+    },
+    {
+      "url": "https://ionicframework.com/vue?utm_source=partner&utm_medium=referral&utm_campaign=vuesponsorship&utm_content=vuedocs",
+      "img": "ionic.png",
+      "name": "Ionic"
     }
   ],
   "gold_sponsors": [

src/cookbook/debugging-in-vscode.md

@@ -41,7 +41,7 @@ module.exports = {
 
 アクティビティバーのデバッグアイコンをクリックして、デバッグ表示に切り替え、歯車アイコンをクリックして launch.json ファイルを設定したら、環境として **Chrome/Firefox: Launch** を選択します。生成された launch.json の内容を対応する設定に置き換えます:
 
-![Add Chrome Configuration](/images/config_add.png)
+<div style="padding: 10px 25px 30px"><img src="/images/config_add.png" alt="Add Chrome Configuration" style="width: 690px; border-radius: 3px; box-shadow: 0 10px 15px rgb(0 0 0 / 50%)"></div>
 
 ```json
 {
@@ -74,7 +74,8 @@ module.exports = {
 
 1.  **src/components/HelloWorld.vue** の `line 90` にある `data` 関数が文字列を返す部分にブレークポイントを設定します。.
 
-![Breakpoint Renderer](/images/breakpoint_set.png)
+<div style="padding: 10px 25px 30px"><img src="/images/breakpoint_set.png" alt="Breakpoint Renderer" style="width: 690px; border-radius: 3px; box-shadow: 0 10px 15px rgb(0 0 0 / 50%)"></div>
+
 
 2.  ルートフォルダでお気に入りのターミナルを開き、Vue CLI を使ってアプリケーションを配信します:
 
@@ -86,7 +87,7 @@ npm run serve
 
 4.  ブレークポイントに到達すると、新しいブラウザのインスタンスが `http://localhost:8080` を開きます。
 
-![Breakpoint Hit](/images/breakpoint_hit.png)
+<div style="padding: 10px 25px 30px"><img src="/images/breakpoint_hit.png" alt="Breakpoint Hit" style="width: 690px; border-radius: 3px; box-shadow: 0 10px 15px rgb(0 0 0 / 50%)"></div>
 
 ## 代替パターン
 

src/guide/composition-api-template-refs.md

@@ -133,7 +133,7 @@ Composition API のテンプレート参照を `v-for` 内部で使う場合、
       const root = ref(null)
 
       watchEffect(() => {
-        console.log(root.value) // => <div></div>
+        console.log(root.value) // => <div>This is a root element</div>
       }, 
       {
         flush: 'post'

src/guide/contributing/translations.md

@@ -16,7 +16,7 @@ Thank you to everyone who has contributed to these translations. Your hard work
 
 ## How can I get involved with translations?
 
-The first step is to check whether there is an existing translation for the relevant language. In addition to the table above, a good place to start is [this pinned issue](https://github.com/vuejs/docs-next/issues/478), which is used to keep track of the various translation initiatives happening in the community.
+The first step is to check whether there is an existing translation for the relevant language. In addition to the table above, a good place to start is [this pinned issue](https://github.com/vuejs/docs/issues/478), which is used to keep track of the various translation initiatives happening in the community.
 
 If there's already an active translation then there are various ways you can help out. The GitHub repository should be a good place to start gathering information about how a particular translation is managed and who does what. All translation repositories should allow you to file issues and open Pull Requests if you have suggestions for improving the translation.
 
@@ -32,7 +32,7 @@ The documentation is constantly being updated. Many changes are small and don't
 
 When you first start a translation, you may want to use a personal GitHub repository. That's fine, so long as it's publicly accessible and open to contributions from others. Make sure the *Issues* tab is enabled in the repository's settings. You can migrate the repository to a shared organization at a later stage.
 
-Once you start a translation, be sure to add it to [the pinned issue](https://github.com/vuejs/docs-next/issues/478) so that the rest of the community can find it.
+Once you start a translation, be sure to add it to [the pinned issue](https://github.com/vuejs/docs/issues/478) so that the rest of the community can find it.
 
 We also encourage you to update the root-level `README.md` at an early stage. Most translations add extra information to help potential contributors get involved.
 

src/guide/single-file-component.md

@@ -15,7 +15,7 @@
 
 こちらが `Hello.vue` と呼ばれたファイルの例です:
 
-<a href="https://codepen.io/team/Vue/pen/3de13b5cd0133df4ecf307b6cf2c5f94" target="_blank" rel="noopener noreferrer"><img src="/images/sfc.png" width="403" alt="Single-file component example (click for code as text)" style="display: block; margin: 15px auto; max-width: 100%"></a>
+<div style="padding: 10px 0 30px"><a href="https://codepen.io/team/Vue/pen/3de13b5cd0133df4ecf307b6cf2c5f94" target="_blank" rel="noopener noreferrer" title="Click for code as text"><img src="/images/sfc.png" width="292" alt="Single-file component example (click for code as text)" style="border-radius: 5px; box-shadow: 0 13px 20px rgb(0 0 0 / 50%); margin: 0 auto; display: block;"></a></div>
 
 さて次にこちらに入ります:
 
@@ -25,7 +25,7 @@
 
 約束した通り、Pug、Babel (ES2015 モジュールと一緒に) や Stylus など綺麗で機能が豊富なコンポーネントもプリプロセッサとして利用することができます。
 
-<a href="https://codesandbox.io/s/vue-single-file-component-with-pre-processors-mr3ik?file=/src/App.vue" target="_blank" rel="noopener noreferrer"><img src="/images/sfc-with-preprocessors.png" width="563" alt="Single-file component with pre-processors example (click for code as text)" style="display: block; margin: 15px auto; max-width: 100%"></a>
+<div style="padding: 10px 0 30px"><a href="https://codesandbox.io/s/vue-single-file-component-with-pre-processors-mr3ik?file=/src/App.vue" target="_blank" rel="noopener noreferrer" title="Click for code as text"><img src="/images/sfc-with-preprocessors.png" width="452" alt="Single-file component with pre-processors example (click for code as text)" style="border-radius: 5px; box-shadow: 0 13px 20px rgb(0 0 0 / 50%); margin: 0 auto; display: block;"></a></div>
 
 これらの特定の言語は単なる一例です。TypeScript、SCSS、PostCSS などの生産的なプリプロセッサも簡単に使うことができます。もし `vue-loader` で Webpack を使用しているならば、CSS Modules 向けに素晴らしいサポートがあります。