Add Black Friday 2022 banner script (#1607)

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 322ed2d..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', Arial, 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.ts b/packages/docs/.vitepress/config.ts
index d53f3bac169be9d265dfb3fae96f98357ed1aed4..398659b78a19e76ae623d05760ebf9e295713f62 100644 (file)
--- a/packages/docs/.vitepress/config.ts
+++ b/packages/docs/.vitepress/config.ts
@@ -6,6 +6,14 @@ const head: UserConfig['head'] = [
     'meta',
     { name: 'wwads-cn-verify', content: '7e7757b1e12abcb736ab9a754ffb617a' },
   ],
+  [
+    'script',
+    {
+      src: 'https://vueschool.io/banners/main.js',
+      async: true,
+      type: 'text/javascript',
+    },
+  ],
 ]
 
 if (process.env.NODE_ENV === 'production') {

diff --git a/packages/docs/.vitepress/theme/Layout.vue b/packages/docs/.vitepress/theme/Layout.vue
index 560ece73521531c80a6c1bbb2247a6c5c9826767..66dd099c9fa6ed15933adcd1b7af4ad35e182ce8 100644 (file)
--- a/packages/docs/.vitepress/theme/Layout.vue
+++ b/packages/docs/.vitepress/theme/Layout.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="main-container">
-    <BannerTop />
     <ParentLayout>
       <template #home-hero>
         <VueMasteryHomeLink></VueMasteryHomeLink>
@@ -55,15 +54,11 @@ import { defineAsyncComponent } from 'vue'
 import DefaultTheme from 'vitepress/dist/client/theme-default'
 import VueMasteryHomeLink from '../components/VueMasteryHomeLink.vue'
 import sponsors from '../components/sponsors.json'
-import './banner-top.css'
-
-const BannerTop = defineAsyncComponent(() => import('../components/BannerTop.vue'))
 
 export default {
   name: 'Layout',
   components: {
     ParentLayout: DefaultTheme.Layout,
-    BannerTop,
     VueMasteryHomeLink
   },
   data() {