docs(en): merge docs-next/master into vue-docs-next/main @ 12071a76

src/.vuepress/components/community/team/partners.js

@@ -211,15 +211,14 @@ export default shuffle([
     github: 'rstoenescu',
     twitter: 'quasarframework',
     work: {
-      role: 'Developer',
+      role: 'Author',
       org: 'Quasar Framework',
-      orgUrl: 'http://quasar-framework.org/'
+      orgUrl: 'http://quasar.dev/'
     },
     reposPersonal: [
-      'quasarframework/quasar',
-      'quasarframework/quasar-cli',
-      'quasarframework/quasar-play'
-    ]
+      'quasarframework/quasar'
+    ],
+    links: ['https://quasar.dev']
   },
   {
     name: 'Jilson Thomas',

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

@@ -13,7 +13,7 @@ export const labels = {
 export const repos = [
   { 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: 'id', owner: 'vuejs-id', repo: 'docs-next', branch: 'indonesian', url: 'https://v3-vuejsid-docs.netlify.app/' },
   { lang: 'ja', owner: 'vuejs-jp', repo: 'ja.vuejs.org', branch: 'lang-ja', url: 'https://v3.ja.vuejs.org/' },
   { lang: 'ko', owner: 'vuejs-kr', repo: 'docs-next', branch: 'rootKoKr', url: 'https://v3.ko.vuejs.org/'  },
   { lang: 'pt-br', owner: 'vuejs-br', repo: 'docs-next', branch: 'master', url: 'https://vuejsbr-docs-next.netlify.app/' },

src/.vuepress/config.js

@@ -274,7 +274,7 @@ module.exports = {
       'link',
       {
         href:
-          'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
+          'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Archivo:400,600|Open+Sans:400,600;display=swap',
         rel: 'stylesheet'
       }
     ],
@@ -510,7 +510,7 @@ module.exports = {
       custom: 'CKYD62QM',
       placement: 'vuejsorg'
     },
-    topBanner: false
+    topBanner: true
   },
   plugins: [
     [

src/.vuepress/theme/components/BannerCoins.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    class="vs-blackfriday-coins">
+    <img
+      v-for="coin in coins"
+      :key="coin.id"
+      :alt="coin.id"
+      :src="`/images/vueschool/tech-coin-${coin.id}.png`"
+      :class="[coin.id, coin.inverse ? inverseDirection : direction]"
+      :style="coin.style"
+      class="vs-blackfriday-coin">
+  </div>
+</template>
+
+<script>
+const coins = [
+  { id: 'js', inverse: true },
+  { id: 'ts' },
+  { id: 'vue', inverse: true },
+  { id: 'vuex', inverse: true },
+  { id: 'nuxt' }
+]
+
+export default {
+  data () {
+    return {
+      coins,
+      xPosition: 0,
+      direction: 'left',
+      inverseDirection: 'right',
+      isAnimated: false
+    }
+  },
+  mounted () {
+    if (window.innerWidth < 1024) return
+    this.isAnimated = true
+    this.animationTarget = document.getElementById('vs')
+    this.animationTarget.addEventListener('mousemove', this.animate)
+  },
+  beforeDestroy () {
+    if (!this.isAnimated) return
+    this.animationTarget.removeEventListener('mousemove', this.animate)
+  },
+  methods: {
+    animate (e) {
+      this.direction = e.pageX > this.xPosition ? 'right' : 'left'
+      this.inverseDirection = this.direction === 'left' ? 'right' : 'left'
+      this.xPosition = e.pageX
+    }
+  }
+}
+</script>
+
+<style>
+.vs-blackfriday-coins {
+  overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.vs-blackfriday-coin {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .vs-blackfriday-coins {
+    background-image: url(/images/vueschool/vueschool_blackfriday_background_tablet_2.svg);
+    background-position: center;
+    background-size: cover;
+  }
+}
+
+@media (min-width: 1024px) {
+  .vs-blackfriday-coins {
+    background: transparent;
+  }
+
+  #vs:hover .vs-blackfriday-coin.left {
+    transform: translateX(-600px);
+    transition: transform 30s linear;
+  }
+
+  #vs:hover .vs-blackfriday-coin.right {
+    transform: translateX(600px);
+    transition: transform 30s linear;
+  }
+
+  .vs-blackfriday-coin {
+    display: inline-block;
+    position: absolute;
+    transition: transform 1000ms linear;
+    transform: translateX(0);
+  }
+
+  .vs-blackfriday-coin.js {
+    width: 43px;
+    top: 32px;
+    left: calc(50% - 436px);
+  }
+
+  .vs-blackfriday-coin.ts {
+    top: 0;
+    left: 0;
+    width: 54px;
+    left: calc(50% + 457px);
+  }
+
+  .vs-blackfriday-coin.vue {
+    top: 18px;
+    width: 60px;
+    left: calc(50% + 586px);
+  }
+
+  .vs-blackfriday-coin.vuex {
+    top: 23px;
+    left: 0;
+    width: 56px;
+    left: calc(50% - 620px);
+  }
+
+  .vs-blackfriday-coin.nuxt {
+    top: 10px;
+    width: 48px;
+    left: calc(50% - 494px);
+  }
+}
+</style>