From 942e462ef8684ef484dffb1f95c950d1e6371b81 Mon Sep 17 00:00:00 2001
From: Jinjiang <zhaojinjiang@me.com>
Date: Sat, 14 Jan 2023 14:03:30 +0800
Subject: [PATCH] sync some extra updates from past

---
 _scripts/sync-sponsors.js                     |   1 -
 .../layout/partials/ecosystem_dropdown.ejs    |   1 -
 themes/vue/layout/partials/sidebar.ejs        |   2 +-
 themes/vue/source/css/_header.styl            |  14 +-
 themes/vue/source/css/_settings.styl          |   3 +-
 themes/vue/source/css/_vueschool.styl         | 381 +++++++++++++-----
 themes/vue/source/css/index.styl              |   2 +-
 themes/vue/source/js/common.js                |  70 +++-
 themes/vue/source/js/v3-notice.js             |  78 ++++
 9 files changed, 432 insertions(+), 120 deletions(-)
 create mode 100644 themes/vue/source/js/v3-notice.js

diff --git a/_scripts/sync-sponsors.js b/_scripts/sync-sponsors.js
index 5e6a85b01..60c726da6 100644
--- a/_scripts/sync-sponsors.js
+++ b/_scripts/sync-sponsors.js
@@ -8,7 +8,6 @@ const configPath = path.resolve(__dirname, '../themes/vue/_config.yml')
 
 ;(async () => {
   const { data } = await axios(`https://sponsors.vuejs.org/data.json`)
-
   const yml = yaml.dump(data)
   const config = fs.readFileSync(configPath, 'utf-8')
   const updated = config.replace(
diff --git a/themes/vue/layout/partials/ecosystem_dropdown.ejs b/themes/vue/layout/partials/ecosystem_dropdown.ejs
index 072cb1c7c..646d681e5 100644
--- a/themes/vue/layout/partials/ecosystem_dropdown.ejs
+++ b/themes/vue/layout/partials/ecosystem_dropdown.ejs
@@ -24,7 +24,6 @@
     <li><h4>信息</h4></li>
     <li><ul>
       <li><a href="https://news.vuejs.org" class="nav-link" target="_blank" rel="noopener">周刊</a></li>
-      <li><a href="https://github.com/vuejs/vue/projects/6" class="nav-link" target="_blank" rel="noopener">Roadmap</a></li>
       <li><a href="https://events.vuejs.org/" class="nav-link" target="_blank" rel="noopener">活动</a></li>
       <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank" rel="noopener">Twitter</a></li>
       <li><a href="https://blog.vuejs.org" class="nav-link" target="_blank" rel="noopener">博客</a></li>
diff --git a/themes/vue/layout/partials/sidebar.ejs b/themes/vue/layout/partials/sidebar.ejs
index 3eb0630b0..58f172394 100644
--- a/themes/vue/layout/partials/sidebar.ejs
+++ b/themes/vue/layout/partials/sidebar.ejs
@@ -16,7 +16,7 @@
             examples: '示例',
             guide: '教程',
             cookbook: 'Cookbook<sup class="beta">beta</sup>',
-            'style-guide': '风格指南'
+            'style-guide': '风格指南<sup class="beta">beta</sup>'
           } %>
           <%- titles[type] %>
           <% if (['cookbook', 'style-guide'].indexOf(type) === -1) { %>
diff --git a/themes/vue/source/css/_header.styl b/themes/vue/source/css/_header.styl
index b2bb8d464..dcc218f5c 100644
--- a/themes/vue/source/css/_header.styl
+++ b/themes/vue/source/css/_header.styl
@@ -21,17 +21,18 @@ red-dot-before(leftPos = -8px)
   box-sizing: border-box
 
 #v3-banner
-  background-color: $green
+  background-color: #4e6981
   min-height: 40px
   padding: $heading-padding-vertical 60px
   z-index: $z-header - 1
   box-sizing: border-box
   text-align: center
-  color: #d6ffec
-  display: none
+  color: #fff
+  display: block
+  // display: none
 
   a
-    color: #fff
+    color: #7adeb2
     font-weight: bold
   .only-sm
     display: none
@@ -45,6 +46,10 @@ red-dot-before(leftPos = -8px)
 
 body.docs
   #header
+    position: fixed
+    width: 100%
+    top: 40px
+  #v3-banner
     position: fixed
     width: 100%
     top: 0
@@ -163,6 +168,7 @@ body.docs
   display: none
   box-shadow: 0 0 2px rgba(0,0,0,.25)
   pointer-events: none
+  transition: background-color 0.25s ease-in
   > *
     pointer-events: auto
   .menu-button
diff --git a/themes/vue/source/css/_settings.styl b/themes/vue/source/css/_settings.styl
index 0ba9c05ab..aedbe2313 100644
--- a/themes/vue/source/css/_settings.styl
+++ b/themes/vue/source/css/_settings.styl
@@ -23,7 +23,8 @@ $content-padding-vertical = 35px
 // header settings
 $header-inner-height = 41px
 $heading-padding-vertical = 10px
-$header-height = $header-inner-height + $heading-padding-vertical * 2
+$v3-banner-height = 40px
+$header-height = $header-inner-height + $heading-padding-vertical * 2 + $v3-banner-height
 $mobile-header-height = 40px
 // prevent headers from being covered by the top nav upon navigation
 $heading-link-padding-top = $header-height + $content-padding-vertical
diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl
index 90072df14..2cfcb3042 100644
--- a/themes/vue/source/css/_vueschool.styl
+++ b/themes/vue/source/css/_vueschool.styl
@@ -1,17 +1,13 @@
 @import "_settings"
 $mobile-bar-height = 40px
-$vs-banner-height-desktop = 80px
-$vs-banner-height-mobile = 50px
+$vs-banner-height-desktop = 72px
+$vs-banner-height-mobile = 72px
 $menu-height = 63px
 
 body.has-vs-banner
-
-  #v3-banner
-    margin-top: $vs-banner-height-mobile
-    @media (min-width: 680px)
-      margin-top: $vs-banner-height-desktop
-    @media (min-width: 900px)
-      margin-top: 0
+  padding-top: $vs-banner-height-mobile
+  @media (min-width: 680px)
+    padding-top: $vs-banner-height-desktop
 
   #mobile-bar
     top: $vs-banner-height-mobile
@@ -36,7 +32,7 @@ body.has-vs-banner
     @media (min-width: 900px)
       padding-top: 144px
 
-    #vs
+    #vs-top
       position: fixed
 
     #header
@@ -48,104 +44,271 @@ body.has-vs-banner
       @media (min-width: 900px)
         top: 160px
 
-#vs
-  font-family "Roboto", sans-serif
-  z-index: 8
-  box-sizing: border-box
-  color: #FFF
-  background: #202A5A
-  display: flex
-  align-items: center
-  position: fixed
-  left: 0
-  right: 0
-  padding: 0 10px
-  min-height: $vs-banner-height-mobile
-  top: 0
-  @media (min-width: 680px)
-    justify-content: center
-    min-height: $vs-banner-height-desktop
-  @media (min-width: 900px)
-    position: static
-
-  &.vs-hidden
-    display: none
-
-  &:hover
-    .vs-core
-      .vs-button
-        background: #f22606
-
-  .vs-iso
-      display: none
-      position: absolute
-      left: 20px
-      height: 26px
-      img
-        height: 26px
-      @media (min-width: 680px)
-        display: inline-block
-        height: 40px
-        img
-          height: 40px
-      @media (min-width: 900px)
-        display: none
+#vs-top.vs-hidden {
+  display: none;
+}
 
-  .vs-logo
-    position: absolute
-    display: none
-    left: 40px
-    @media (min-width: 900px)
-      display: block
-
-  .vs-core
-    display: flex
-    align-items: center
-
-    .vs-backpack
-      margin-right: 14px
-      img
-        height: 50px
-        @media (min-width: 680px)
-          height: 74px
-
-    .vs-slogan
-      color: #FFF
-      font-weight: bold
-      font-size: 14px
-      width: 150px
-      text-align: center
-      margin-left: 40px
-      @media (min-width: 400px)
-        margin-left: 60px
-      @media (min-width: 680px)
-        margin-left: 0
-        width: auto
-        text-align: left
-        font-size: 18px
-      > .vs-slogan-light
-        color: #ff5338
-        text-align: left
-        @media (min-width: 900px)
-          text-align: center
-          display: inline
-
-    .vs-button
-      margin-left: 43px
-      color: #FFF
-      padding: 13px 24px
-      border-radius: 40px
-      display: none
-      background: #ff5338
-      font-weight: bold
-      @media (min-width: 680px)
-        display: inline-block
+/*******************************************************/
 
-  .vs-close
-      right: 10px
-      position: absolute
-      padding: 10px
-      @media (min-width: 680px)
-        right: 20px
-      &:hover
-        color: #56D8FF
\ No newline at end of file
+#vs-top {
+  display: block;
+  box-sizing: border-box;
+  height: 72px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  line-height: 1;
+}
+
+#vs-top .vs-background-wrapper {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  padding: 0 10px;
+  height: 100%;
+  width: 100%;
+}
+
+#vs-top:hover {
+  text-decoration: none;
+}
+
+#vs-top:hover .vs-core .vs-button {
+  background-image: linear-gradient(to bottom, #5ccc45, #419E2D), linear-gradient(to bottom, #388f26, #50b83b);
+}
+
+#vs-top .vs-logo {
+  position: absolute;
+  left: 10px;
+  width: 36px;
+  height: 42px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+#vs-top .vs-core {
+  display: flex;
+  align-items: center;
+  width: 288px;
+}
+
+#vs-top .vs-core .vs-slogan-wrapper {
+  text-align: center;
+  width: 184px;
+  margin: 0 auto;
+}
+
+#vs-top .vs-core .vs-slogan {
+  font-weight: bold;
+  font-size: 12px;
+  font-family: 'Roboto', Arial, sans-serif;
+}
+
+#vs-top .vs-core .vs-subline {
+  font-size: 10px;
+  font-family: 'Roboto', Arial, sans-serif;
+  text-align: center;
+}
+
+#vs-top .vs-core .vs-button-wrapper {
+  padding: 2px;
+  background-image: linear-gradient(to bottom, #388f26, #50b83b);
+  border-radius: 60px;
+  overflow: hidden;
+}
+
+#vs-top .vs-core .vs-button {
+  background-image: linear-gradient(to bottom, #5ccc45, #368c24), linear-gradient(to bottom, #388f26, #50b83b);
+  border-radius: 60px;
+  color: #FFF;
+  padding: 8px 6px;
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+  font-size: 10px;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
+}
+
+#vs-top .vs-close {
+  right: 0;
+  position: absolute;
+  padding: 10px;
+}
+
+#vs-top .vs-close:hover {
+  color: #56d8ff;
+}
+
+@media (min-width: 680px) {
+  #vs-top .vs-core {
+    width: auto;
+  }
+
+  #vs-top .vs-core .vs-slogan-wrapper {
+    margin: 0 12px 0 0;
+    width: 288px;
+  }
+
+  #vs-top .vs-core .vs-slogan {
+    font-size: 17px;
+  }
+
+  #vs-top .vs-core .vs-subline {
+    font-size: 12px;
+    margin-top: 4px;
+  }
+
+  #vs-top .vs-core .vs-button {
+    font-size: 13px;
+    padding: 8px 15px;
+  }
+}
+
+@media (min-width: 1280px) {
+  #vs-top .vs-logo {
+    left: 20px;
+    width: 104px;
+  }
+
+  #vs-top .vs-core {
+    margin-right: 0;
+  }
+
+  #vs-top .vs-core .vs-slogan-wrapper {
+    width: auto;
+  }
+
+  #vs-top .vs-core .vs-subline {
+    font-size: 15px;
+  }
+}
+
+/* FREE_WEEKEND
+******************************************/
+
+#vs-top.FREE_WEEKEND {
+  color: #FFF;
+  background: linear-gradient(to left, #161a35, #283065);
+}
+
+#vs-top.FREE_WEEKEND .vs-logo {
+  background-image: url('https://vueschool.io/images/mark-vueschool-white.svg');
+}
+
+#vs-top.FREE_WEEKEND .vs-core .vs-slogan {
+  color: #fff;
+}
+
+#vs-top.FREE_WEEKEND .vs-core .vs-slogan strong {
+  color: #ff2556;
+}
+
+#vs-top.FREE_WEEKEND .vs-core .vs-subline {
+  color: #c6cdf7;
+}
+
+#vs-top.FREE_WEEKEND .vs-background-wrapper {
+  background-image: url('https://vueschool.io/images/banners/assets/FREE_WEEKEND/bg-mobile.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: top right;
+}
+
+@media (min-width: 680px) {
+  #vs-top.FREE_WEEKEND .vs-background-wrapper {
+    background-image: url('https://vueschool.io/images/banners/assets/FREE_WEEKEND/bg-tablet.svg');
+  }
+}
+
+@media (min-width: 1280px) {
+  #vs-top.FREE_WEEKEND .vs-logo {
+    background-image: url('https://vueschool.io/images/icons/logo-white.svg');
+  }
+
+  #vs-top.FREE_WEEKEND .vs-background-wrapper {
+    background-image: url('https://vueschool.io/images/banners/assets/FREE_WEEKEND/bg-desktop.svg');
+    background-position: top right -60px;
+  }
+}
+
+/* LEVELUP2022
+******************************************/
+
+#vs-top.LEVELUP2022 {
+  color: #121733;
+  background: #EEF5FF;
+}
+
+#vs-top.LEVELUP2022 .vs-logo {
+  background-image: url('https://vueschool.io/images/mark-vueschool.svg');
+}
+
+#vs-top.LEVELUP2022 .vs-core .vs-slogan {
+  color: #121733;
+}
+
+#vs-top.LEVELUP2022 .vs-core .vs-slogan strong {
+  color: #ff2556;
+}
+
+#vs-top.LEVELUP2022 .vs-core .vs-subline {
+  color: #394170;
+}
+
+#vs-top.LEVELUP2022 .vs-core .vs-subline strong {
+  color: #48aa34;
+}
+
+#vs-top.LEVELUP2022 .vs-background-wrapper {
+  background-image: url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-mobile.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: top right;
+}
+
+#vs-top.LEVELUP2022 .vs-core .vs-button-wrapper {
+  background-image: linear-gradient(to bottom, #d71b46, #fd2455);
+}
+
+#vs-top.LEVELUP2022 .vs-core .vs-button {
+  background-image: linear-gradient(to bottom, #ff2556, #d51b44), linear-gradient(to bottom, #d71b46, #fd2455);
+}
+
+@media (min-width: 680px) {
+  #vs-top.LEVELUP2022 .vs-background-wrapper {
+    background-image: url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-tablet.png');
+  }
+
+  #vs-top.LEVELUP2022 .vs-core .vs-slogan-wrapper {
+    width: 458px;
+  }
+}
+
+@media (min-width: 1280px) {
+  #vs-top.LEVELUP2022 .vs-logo {
+    background-image: url('https://vueschool.io/images/icons/logo.svg');
+  }
+
+  #vs-top.LEVELUP2022 .vs-background-wrapper {
+    background-image:
+      url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-desktop-left.png'),
+      url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-desktop-right.png');
+    background-position:
+      top left -120px,
+      top right -120px;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+}
+
+@media (min-width: 1536px) {
+  #vs-top.LEVELUP2022 .vs-background-wrapper {
+    background-position:
+      top left,
+      top right;
+  }
+}
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
index 957645a05..5e081274c 100644
--- a/themes/vue/source/css/index.styl
+++ b/themes/vue/source/css/index.styl
@@ -123,7 +123,7 @@ body
     display: inline-block
     vertical-align: middle
   img
-    margin: 15px 10px 0
+    margin: 15px 0 0
 
 #highlights
   background-color: #fff
diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js
index 18d487442..810d77fb5 100644
--- a/themes/vue/source/js/common.js
+++ b/themes/vue/source/js/common.js
@@ -263,8 +263,68 @@
    * Banner closing
    */
   function initVueSchoolBanner () {
-    const banner = document.getElementById('vs')
-    if (banner && !localStorage.getItem('VS_SUMMER_BANNER_CLOSED')) {
+    const banner = document.getElementById('vs-top')
+
+    const items = [
+      {
+        banner: {
+          assets: "FREE_WEEKEND",
+          cta: "JOIN FOR FREE",
+          link: "/free-weekend",
+          static: "FREE_WEEKEND",
+          subtitle: "Get Access to ALL Vue School premium courses",
+          title: "Free Weekend 1st & 2nd of October"
+        },
+        ends: "2022-09-30T23:59:59+02:00",
+        id: "FREE_WEEKEND_LOBBY",
+        isExtended: false
+      },
+      {
+        banner: {
+          assets: "FREE_WEEKEND",
+          cta: "WATCH FOR FREE",
+          link: "/free-weekend",
+          static: "FREE_WEEKEND_LIVE",
+          subtitle: "Get Access to ALL Vue School premium courses",
+          title: "Free Weekend <strong>NOW LIVE</strong>"
+        },
+        ends: "2022-10-02T23:59:59+02:00",
+        id: "FREE_WEEKEND_LIVE",
+        isExtended: false
+      },
+      {
+        banner: {
+          assets: "LEVELUP2022",
+          cta: "GET OFFER",
+          link: "/sales/levelup2022",
+          static: "LEVELUP2022",
+          subtitle: "Access 800+ lessons including the Vue.js 3 Masterclass",
+          title: "Less than <strong>48 hours</strong> to get 45% off at Vue School"
+        },
+        ends: "2022-10-04T23:59:59+02:00",
+        id: "LEVELUP2022",
+        isExtended: false
+      },
+      {
+        banner: {
+          assets: "LEVELUP2022",
+          cta: "GET OFFER",
+          link: "/sales/levelup2022",
+          static: "LEVELUP2022",
+          subtitle: "Extended! Access 800+ lessons including the Vue.js 3 Masterclass",
+          title: "Less than <strong>48 hours</strong> to get 45% off at Vue School"
+        },
+        ends: "2022-10-06T23:59:59+02:00",
+        id: "LEVELUP2022_EXTENDED",
+        isExtended: true
+      }
+    ]
+
+    const now = new Date()
+    const phases = items.map(phase => ({ ...phase, remaining: new Date(phase.ends) - now }))
+    const activePhase = phases.find(phase => phase.remaining > 0)
+
+    if (banner && (activePhase) && !localStorage.getItem('VS_FW_OCTOBER')) {
       banner.classList.remove('vs-hidden')
       document.body.classList.add('has-vs-banner')
       document.getElementById('vs-close').addEventListener('click', function (e) {
@@ -274,6 +334,12 @@
         document.body.classList.remove('has-vs-banner')
         localStorage.setItem('VS_SUMMER_BANNER_CLOSED', 1)
       })
+
+      document.getElementById('vs-top').classList.add(activePhase.banner.assets)
+      document.getElementById('vs-top').href = `https://vueschool.io${activePhase.banner.link}?friend=vuejs&utm_source=vuejs&utm_medium=website&utm_campaign=affiliate&utm_content=top_banner`
+      document.getElementById('vs-slogan').innerHTML = activePhase.banner.title
+      document.getElementById('vs-subline').innerHTML = activePhase.banner.subtitle
+      document.getElementById('vs-button').innerHTML = activePhase.banner.cta
     }
   }
 
diff --git a/themes/vue/source/js/v3-notice.js b/themes/vue/source/js/v3-notice.js
new file mode 100644
index 000000000..85f2ee0c9
--- /dev/null
+++ b/themes/vue/source/js/v3-notice.js
@@ -0,0 +1,78 @@
+;(() => {
+  if (!location.search.includes(`redirect=true`)) {
+    return
+  }
+
+  const v3Url = document.body.dataset.v3Url
+  if (!v3Url) {
+    return
+  }
+
+  const hashRedirect =
+    typeof __pageRedirects !== 'undefined' && __pageRedirects[location.hash]
+  const finalUrl = hashRedirect || v3Url
+
+  const el = document.createElement('div')
+  el.className = `v3-notice`
+  el.innerHTML = `
+<h3>Heads Up!</h3>
+<p>
+This page contains documentation for Vue 2. The Vue 3 version of the URL you are visiting is: <a id="v3-url" target="_blank"></a>.
+</p>
+<p>
+You can learn more about the Vue 2 -> Vue 3 default version switch in
+<a target="_blank" href="https://blog.vuejs.org/posts/vue-3-as-the-new-default.html">this blog post</a>.
+</p>
+<p>
+  <a class="stay">Stay on Vue 2 docs</a>
+</p>
+  `.trim()
+
+  const style = document.createElement('style')
+  style.textContent = `
+.v3-notice {
+  position: fixed;
+  top: 20px;
+  --width: min(calc(100vw - 20px), 500px);
+  left: calc(50vw - var(--width) / 2);
+  width: var(--width);
+  z-index: 9999;
+  background-color: #f8f8f8;
+  border: 2px solid #ffa500;
+  border-radius: 8px;
+  padding: 0 20px;
+  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
+}
+.v3-notice a {
+  color: #42b983;
+  font-weight: bold;
+}
+.v3-notice .go, .v3-notice .stay {
+  display: inline-block;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.v3-notice .go {
+  background-color: #42b983;
+  color: #fff;
+}
+.v3-notice .stay {
+  background-color: #ddd;
+  color: #666;
+}
+.v3-notice code {
+  background-color: transparent;
+}
+  `
+
+  document.body.appendChild(style)
+  document.body.appendChild(el)
+
+  el.querySelector('.stay').addEventListener('click', () => {
+    document.body.removeChild(el)
+  })
+
+  const v3Link = el.querySelector('#v3-url')
+  v3Link.textContent = v3Link.href = `https://vuejs.org${finalUrl}`
+})()