Add Black Friday 2022 banner script (#1789)

diff --git a/packages/docs/.vitepress/components/BannerTop.vue b/packages/docs/.vitepress/components/BannerTop.vue
deleted file mode 100644 (file)
index 7975f1a..0000000
--- a/packages/docs/.vitepress/components/BannerTop.vue
+++ /dev/null
@@ -1,397 +0,0 @@
-<template>
-  <a
-    id="vs-top"
-    v-if="isVisible"
-    :href="`https://vueschool.io${activeBanner.link}?friend=vuerouter&utm_source=vuerouter&utm_medium=website&utm_campaign=affiliate&utm_content=top_banner`"
-    :class="activeBanner.assets">
-    <div class="vs-background-wrapper">
-      <div class="vs-logo" />
-      <div class="vs-core">
-        <div class="vs-slogan-wrapper">
-          <div class="vs-slogan" v-html="activeBanner.title" />
-          <div class="vs-subline" v-html="activeBanner.subtitle" />
-          <BannerTopCountdownMobile
-            v-if="activePhase.hasCountdown"
-            v-bind="{ remaining: activePhase.remaining, countdownTransformDaysToHours }" />
-        </div>
-        <BannerTopCountdown
-          v-if="activePhase.hasCountdown"
-          v-bind="{ remaining: activePhase.remaining, countdownTransformDaysToHours }" />
-        <div class="vs-button-wrapper">
-          <div class="vs-button">
-            {{ activeBanner.cta }}
-          </div>
-        </div>
-      </div>
-      <div
-        class="vs-close"
-        @click.prevent.stop="close">
-        <img src="https://vueschool.io/images/close.svg" alt="Close">
-      </div>
-    </div>
-  </a>
-</template>
-
-<script>
-import BannerTopCountdown from './BannerTopCountdown.vue'
-import BannerTopCountdownMobile from './BannerTopCountdownMobile.vue'
-
-const phases = [
-  {
-    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",
-    hasCountdown: false,
-    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",
-    hasCountdown: false,
-    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: "<strong>Get 45%</strong> off at Vue School today"
-    },
-    ends: "2022-10-04T23:59:59+02:00",
-    hasCountdown: true,
-    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: "<strong>Get 45%</strong> off at Vue School today"
-    },
-    ends: "2022-10-06T23:59:59+02:00",
-    hasCountdown: true,
-    id: "LEVELUP2022_EXTENDED",
-    isExtended: true
-  }
-]
-
-export default {
-  components: {
-    BannerTopCountdown,
-    BannerTopCountdownMobile
-  },
-  data () {
-    const now = new Date()
-    return {
-      isVisible: false,
-      now
-    }
-  },
-  computed: {
-    phases () {
-      return phases.map(phase => ({ ...phase, remaining: new Date(phase.ends) - this.now }))
-    },
-    activePhase () {
-      return this.phases.find(phase => phase.remaining > 0)
-    },
-    activeBanner () {
-      return this.activePhase.banner
-    }
-  },
-  mounted () {
-    this.isVisible = !localStorage.getItem('VS_FREE_WEEKEND') && Boolean(this.activePhase)
-    if (this.isVisible) document.body.classList.add('has-top-banner')
-  },
-  methods: {
-    countdownTransformDaysToHours (props) {
-      if (props.days) {
-        props.hours = props.hours + (props.days * 24)
-        props.days = 0
-      }
-
-      Object.entries(props).forEach(([key, value]) => {
-        const digits = value < 10 ? `0${value}` : value
-        props[key] = digits
-      })
-      return props
-    },
-    close () {
-      this.isVisible = false
-      document.body.classList.remove('has-top-banner')
-      localStorage.setItem('VS_FREE_WEEKEND', 1)
-    }
-  }
-}
-</script>
-
-<style>
-#vs-top {
-  display: block;
-  box-sizing: border-box;
-  height: 72px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-}
-
-#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 {
-  border-radius: 60px;
-  color: #FFF;
-  padding: 8px 6px;
-  background-image: linear-gradient(to bottom, #5ccc45, #368c24), linear-gradient(to bottom, #388f26, #50b83b);
-  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: 268px;
-  }
-
-  #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: #48aa34;
-}
-
-#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;
-}
-
-@media (min-width: 680px) {
-  #vs-top.LEVELUP2022 .vs-background-wrapper {
-    background-image: url(https://vueschool.io/images/banners/assets/LEVELUP2022/bg-tablet.png);
-  }
-}
-
-@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;
-  }
-}
-</style>

diff --git a/packages/docs/.vitepress/components/BannerTopCountdown.vue b/packages/docs/.vitepress/components/BannerTopCountdown.vue
deleted file mode 100644 (file)
index 99479a3..0000000
--- a/packages/docs/.vitepress/components/BannerTopCountdown.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <ClientOnly>
-    <VueCountdown
-      v-if="remaining && remaining > 0"
-      :time="remaining"
-      :transform="countdownTransformDaysToHours"
-      v-slot="data"
-      class="vs-countdown-wrapper"
-      :style="{ color }">
-      <div
-        v-for="part in ['days', 'hours', 'minutes', 'seconds'].filter(part => part !== 'days' || data[part] !== '00')"
-        :key="part"
-        class="vs-countdown-item">
-        <div
-          class="vs-countdown-part"
-          :style="{ background }">
-          <div class="vs-countdown-number">
-            {{ data[part] }}
-          </div>
-          <div class="vs-countdown-text">
-            {{ part }}
-          </div>
-        </div>
-        <div
-          v-if="part !== 'seconds'"
-          class="vs-countdown-colon">
-          :
-        </div>
-      </div>
-    </VueCountdown>
-  </ClientOnly>
-</template>
-
-<script>
-import VueCountdown from '@chenfengyuan/vue-countdown'
-
-export default {
-  components: {
-    VueCountdown
-  },
-  props: {
-    remaining: {
-      type: Number,
-      default: 0
-    },
-    color: {
-      type: String,
-      default: '#ff2556'
-    },
-    background: {
-      type: String,
-      default: 'rgba(255, 37, 86, 0.25)'
-    },
-    countdownTransformDaysToHours: {
-      type: Function,
-      required: true
-    }
-  }
-}
-</script>
-
-<style>
-.vs-countdown-wrapper {
-  font-family: 'Roboto', sans-serif;
-  align-items: center;
-  gap: 4px;
-  margin-right: 12px;
-  line-height: 1;
-  display: none;
-}
-
-.vs-countdown-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.vs-countdown-wrapper .vs-countdown-part {
-  border-radius: 2px;
-  padding: 4px 0;
-  text-align: center;
-  width: 42px;
-}
-
-.vs-countdown-wrapper .vs-countdown-part .vs-countdown-number {
-  font-size: 28px;
-  font-weight: 500;
-  line-height: 28px;
-}
-
-.vs-countdown-wrapper .vs-countdown-part .vs-countdown-text {
-  font-size: 8px;
-  text-transform: uppercase;
-}
-
-.vs-countdown-colon {
-  font-weight: bold;
-}
-
-@media (min-width: 680px) {
-  .vs-countdown-wrapper {
-    display: flex;
-  }
-}
-</style>

diff --git a/packages/docs/.vitepress/components/BannerTopCountdownMobile.vue b/packages/docs/.vitepress/components/BannerTopCountdownMobile.vue
deleted file mode 100644 (file)
index 3f82934..0000000
--- a/packages/docs/.vitepress/components/BannerTopCountdownMobile.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <ClientOnly>
-    <VueCountdown
-      v-if="remaining && remaining > 0"
-      :time="remaining"
-      :transform="countdownTransformDaysToHours"
-      v-slot="data"
-      class="vs-countdown-mobile-wrapper"
-      :style="{ color }">
-      <span
-        v-for="part in ['days', 'hours', 'minutes', 'seconds']"
-        :key="part">
-        {{ data[part] }}{{ part[0].toLowerCase() }}
-        <span
-          v-if="part !== 'seconds'">
-          :
-        </span>
-      </span>
-    </VueCountdown>
-  </ClientOnly>
-</template>
-
-<script>
-import VueCountdown from '@chenfengyuan/vue-countdown'
-
-export default {
-  components: {
-    VueCountdown
-  },
-  props: {
-    remaining: {
-      type: Number,
-      default: 0
-    },
-    color: {
-      type: String,
-      default: '#ff2556'
-    },
-    countdownTransformDaysToHours: {
-      type: Function,
-      required: true
-    }
-  }
-}
-</script>
-
-<style>
-.vs-countdown-mobile-wrapper {
-  font-family: 'Roboto', sans-serif;
-  display: block;
-  text-align: center;
-  font-weight: bold;
-  font-size: 12px;
-}
-
-@media (min-width: 680px) {
-  .vs-countdown-mobile-wrapper {
-    display: none;
-  }
-}
-</style>

diff --git a/packages/docs/.vitepress/config.js b/packages/docs/.vitepress/config.js
index 6c2467d4c66acde269038ecdbed4b0f100f8d56e..eb51ee459747602e3f8af1e8a664349858475ded 100644 (file)
--- a/packages/docs/.vitepress/config.js
+++ b/packages/docs/.vitepress/config.js
@@ -133,6 +133,15 @@ module.exports = {
       },
     ],
 
+    [
+      'script',
+      {
+        src: 'https://vueschool.io/banners/main.js',
+        async: true,
+        type: 'text/javascript',
+      },
+    ],
+
     ...(isProduction ? productionHead : []),
   ],
 

diff --git a/packages/docs/.vitepress/theme/Layout.ts b/packages/docs/.vitepress/theme/Layout.ts
index a6cfb3fca7662ebdceba8d59fe0320280a239fe7..7119ce840838457ef393e4da3fd2042538515857 100644 (file)
--- a/packages/docs/.vitepress/theme/Layout.ts
+++ b/packages/docs/.vitepress/theme/Layout.ts
@@ -4,9 +4,7 @@ import sponsors from '../components/sponsors.json'
 import './sponsors.css'
 import { darkStorageConfig } from '../theme/dark-theme'
 import { useDark } from '@vueuse/core'
-import BannerTop from '../components/BannerTop.vue'
 import VueMasteryHomeLink from '../components/VueMasteryHomeLink.vue'
-import './banner-top.css'
 
 export const Layout = defineComponent({
   name: 'CustomLayout',
@@ -21,7 +19,6 @@ export const Layout = defineComponent({
         {
           'home-hero': () =>
             h('div', {}, [
-              h(BannerTop),
               h(
                 'div',
                 {
@@ -41,7 +38,6 @@ export const Layout = defineComponent({
               ),
               h(VueMasteryHomeLink),
             ]),
-          'page-top': () => h(BannerTop),
           'sidebar-top': () =>
             h('div', { class: 'sponsors sponsors-top' }, [
               h('span', 'Platinum Sponsors'),

diff --git a/packages/docs/.vitepress/theme/banner-top.css b/packages/docs/.vitepress/theme/banner-top.css
deleted file mode 100644 (file)
index a1367b2..0000000
--- a/packages/docs/.vitepress/theme/banner-top.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.has-top-banner .theme,
-.has-top-banner .theme .nav-bar,
-.has-top-banner .theme .sidebar,
-.has-top-banner .theme .page {
-  margin-top: 72px;
-}