From ced02429e92b4313140f46e8c2eba15e4180a73f Mon Sep 17 00:00:00 2001
From: Nico Devs <3766839+nicodevs@users.noreply.github.com>
Date: Wed, 9 Jun 2021 12:07:37 -0300
Subject: [PATCH] docs: Add VueSchool Summer Sale banner (#991)

* docs(docs): Add VueSchool Summer Sale banner

* docs(docs): Update VueSchool Summer Sale banner

* docs(docs): Make BannerTop async
---
 docs/.vitepress/components/BannerTop.vue     | 222 +++++++++++++++++++
 docs/.vitepress/theme/Layout.vue             |  73 +++---
 docs/public/images/vueschool/close.svg       |   7 +
 docs/public/images/vueschool/vs-backpack.png | Bin 0 -> 6234 bytes
 docs/public/images/vueschool/vs-iso.svg      |  13 ++
 docs/public/images/vueschool/vs-logo.svg     |  16 ++
 6 files changed, 306 insertions(+), 25 deletions(-)
 create mode 100644 docs/.vitepress/components/BannerTop.vue
 create mode 100644 docs/public/images/vueschool/close.svg
 create mode 100644 docs/public/images/vueschool/vs-backpack.png
 create mode 100644 docs/public/images/vueschool/vs-iso.svg
 create mode 100644 docs/public/images/vueschool/vs-logo.svg

diff --git a/docs/.vitepress/components/BannerTop.vue b/docs/.vitepress/components/BannerTop.vue
new file mode 100644
index 00000000..a06098f4
--- /dev/null
+++ b/docs/.vitepress/components/BannerTop.vue
@@ -0,0 +1,222 @@
+<template>
+  <a id="vs" href="https://vueschool.io/sales/summer-vue/?friend=vuerouter" target="_blank" rel="noreferrer">
+    <div class="vs-iso">
+      <img src="/images/vueschool/vs-iso.svg" alt="Vue School Logo">
+    </div>
+    <div class="vs-logo">
+      <img src="/images/vueschool/vs-logo.svg" alt="Vue School Logo">
+    </div>
+    <div class="vs-core">
+      <div class="vs-backpack">
+        <img src="/images/vueschool/vs-backpack.png" alt="Backpack">
+      </div>
+      <div class="vs-slogan">
+        3-months Vue School for only $49 <span style="text-decoration: line-through">$75</span>!
+        <span class="vs-slogan-light">
+          Limited Time Offer
+        </span>
+      </div>
+      <div class="vs-button">
+        GET ACCESS
+      </div>
+    </div>
+    <div
+      id="vs-close"
+      class="vs-close"
+      @click.stop.prevent="$emit('close')">
+      <img src="/images/vueschool/close.svg" alt="Close">
+    </div>
+  </a>
+</template>
+
+<style>
+#vs {
+  align-items: center;
+  background-color: #202A5A;
+  box-sizing: border-box;
+  color: #fff;
+  font-family: 'Roboto', Oxygen, Fira Sans, Helvetica Neue, sans-serif;
+  justify-content: center;
+  position: fixed;
+  padding: 0 10px;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 100;
+  height: 3.125rem;
+  display: flex;
+}
+
+#vs:hover {
+  text-decoration: none;
+}
+
+@media (min-width: 680px) {
+  #vs {
+    height: 5rem;
+  }
+}
+
+#vs:hover .vs-core .vs-button {
+  background: #f22606;
+}
+
+#vs .vs-iso {
+  position: absolute;
+  left: 20px;
+  height: 26px;
+  display: none;
+}
+
+#vs .vs-iso img {
+  height: 26px;
+}
+
+@media (min-width: 680px) {
+  #vs .vs-iso {
+    left: 40px;
+    height: 40px;
+    display: inline-block;
+  }
+
+  #vs .vs-iso img {
+    height: 40px;
+  }
+}
+
+@media (min-width: 900px) {
+  #vs .vs-iso {
+    display: none;
+  }
+}
+
+#vs .vs-logo {
+  position: absolute;
+  display: none;
+  left: 40px;
+}
+
+@media (min-width: 900px) {
+  #vs .vs-logo {
+    display: block;
+  }
+}
+
+#vs .vs-core {
+  display: flex;
+  align-items: center;
+}
+
+#vs .vs-core .vs-backpack {
+  margin-right: 14px;
+}
+
+#vs .vs-core .vs-backpack img {
+  height: 50px;
+}
+
+@media (min-width: 680px) {
+  #vs .vs-core .vs-backpack img {
+    height: 74px;
+  }
+}
+
+#vs .vs-core .vs-slogan {
+  color: #FFF;
+  font-weight: bold;
+  font-size: 14px;
+  margin-right: 26px;
+}
+
+@media (min-width: 680px) {
+  #vs .vs-core .vs-slogan {
+    margin-right: 0;
+    font-size: 18px;
+  }
+}
+
+#vs .vs-core .vs-slogan > .vs-slogan-light {
+  color: #ff5338;
+  display: block;
+  text-align: left;
+}
+
+@media (min-width: 900px) {
+  #vs .vs-core .vs-slogan > .vs-slogan-light {
+    text-align: center;
+    display: inline;
+  }
+}
+
+#vs .vs-core .vs-button {
+  margin-left: 43px;
+  color: #fff;
+  padding: 13px 24px;
+  border-radius: 40px;
+  display: none;
+  background: #ff5338;
+  font-weight: bold;
+}
+
+@media (min-width: 680px) {
+  #vs .vs-core .vs-button {
+    display: inline-block;
+  }
+}
+
+#vs .vs-close {
+  right: 10px;
+  position: absolute;
+  padding: 10px;
+}
+
+@media (min-width: 680px) {
+  #vs .vs-close {
+    right: 20px;
+  }
+}
+
+#vs .vs-close:hover {
+  color: #56d8ff;
+}
+
+/************************************/
+
+.main-container.has-top-banner #vs {
+  display: flex;
+}
+
+.main-container.has-top-banner {
+  margin-top: 3.125rem;
+}
+
+.main-container.has-top-banner .nav-bar {
+  margin-top: 3.125rem;
+}
+
+.main-container.has-top-banner .sidebar {
+  margin-top: 3.125rem;
+}
+
+.main-container.has-top-banner .page {
+  margin-top: 3.125rem;
+}
+
+@media (min-width: 680px) {
+  .main-container.has-top-banner {
+    margin-top: 5rem;
+  }
+
+  .main-container.has-top-banner .nav-bar {
+    margin-top: 5rem;
+  }
+
+  .main-container.has-top-banner .sidebar {
+    margin-top: 5rem;
+  }
+
+  .main-container.has-top-banner .page {
+    margin-top: 5rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index 082a80a3..b2196ffb 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -1,42 +1,65 @@
 <template>
-  <ParentLayout>
-    <template #sidebar-bottom>
-      <div class="sponsors">
-        <a
-          href="https://github.com/sponsors/posva"
-          target="_blank"
-          rel="noopener"
-          >Sponsors</a
-        >
+  <div
+    class="main-container"
+    :class="{ 'has-top-banner': showTopBanner }"
+  >
+    <BannerTop
+      v-if="showTopBanner"
+      @close="closeBannerTop"
+    />
+    <ParentLayout>
+      <template #sidebar-bottom>
+        <div class="sponsors">
+          <a
+            href="https://github.com/sponsors/posva"
+            target="_blank"
+            rel="noopener"
+            >Sponsors</a
+          >
 
-        <a
-          v-for="sponsor in sponsors.gold"
-          :href="sponsor.href"
-          :key="sponsor.href"
-          target="_blank"
-          rel="noopener"
-        >
-          <img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
-        </a>
-      </div>
-    </template>
-  </ParentLayout>
+          <a
+            v-for="sponsor in sponsors.gold"
+            :href="sponsor.href"
+            :key="sponsor.href"
+            target="_blank"
+            rel="noopener"
+          >
+            <img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
+          </a>
+        </div>
+      </template>
+    </ParentLayout>
+  </div>
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue'
 import DefaultTheme from 'vitepress/dist/client/theme-default'
 import sponsors from '../components/sponsors.json'
 
+const BannerTop = defineAsyncComponent(() => import('../components/BannerTop.vue'))
+
 export default {
   name: 'Layout',
-
   components: {
     ParentLayout: DefaultTheme.Layout,
+    BannerTop
   },
-
-  setup() {
-    return { sponsors }
+  data () {
+    return {
+      sponsors,
+      showTopBanner: false
+    }
+  },
+  mounted () {
+    this.showTopBanner = !localStorage.getItem('VS_SUMMER_BANNER_CLOSED')
   },
+  methods: {
+    closeBannerTop () {
+      this.showTopBanner = false
+      localStorage.setItem('VS_SUMMER_BANNER_CLOSED', 1)
+    }
+  }
 }
 </script>
 
diff --git a/docs/public/images/vueschool/close.svg b/docs/public/images/vueschool/close.svg
new file mode 100644
index 00000000..a9d51d1d
--- /dev/null
+++ b/docs/public/images/vueschool/close.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <g fill="none" fill-rule="evenodd">
+        <g fill="#FFF" fill-rule="nonzero">
+            <path d="M1569.69 33.321c-.415-.414-1.084-.414-1.498 0L1563 38.503l-5.192-5.192c-.414-.415-1.083-.415-1.497 0-.415.414-.415 1.083 0 1.497l5.192 5.192-5.192 5.192c-.415.414-.415 1.083 0 1.497.414.415 1.083.415 1.497 0l5.192-5.192 5.192 5.192c.414.415 1.083.415 1.497 0 .415-.414.415-1.083 0-1.497L1564.497 40l5.192-5.192c.404-.404.404-1.083 0-1.487z" transform="translate(-1556.000000, -33.000000)"/>
+        </g>
+    </g>
+</svg>
diff --git a/docs/public/images/vueschool/vs-backpack.png b/docs/public/images/vueschool/vs-backpack.png
new file mode 100644
index 0000000000000000000000000000000000000000..43807ff60d253f86445b638697960cf25a11c2e8
GIT binary patch
literal 6234
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

literal 0
Hc-jL100001

diff --git a/docs/public/images/vueschool/vs-iso.svg b/docs/public/images/vueschool/vs-iso.svg
new file mode 100644
index 00000000..873f0bcd
--- /dev/null
+++ b/docs/public/images/vueschool/vs-iso.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="42" viewBox="0 0 37 42">
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <g>
+                    <path fill="#364FDE" d="M10.648 25.558C7.883 11.884 10.503 2.91 10.503 2.91s-.701 5.463 4.81 14.267c-.07 10.915 2.078 16.609 2.078 16.609l.442-.325-.442.385s-3.267-2.667-6.743-8.288zM23.674 23.622c1.322 1.332 2.555 2.254 3.447 2.692l-.016-.008s1 .36 1.177.12c1.22-1.292 1.519-3.699.705-8.223-4.65-2.656-5.238-6.796-5.238-6.796s-.838 5.748-.075 12.215z" transform="translate(-20 -19) translate(20 19)"/>
+                    <path fill="#56D8FF" d="M10.503 2.91s-3.827 13.104 2.65 31.773c.176.539 0 1.137-.472 1.496l-6.829 4.787c-.648.479-1.59.18-1.884-.598C2.143 35.4-2.86 18.946 2.202.935c.235-.718 1-1.137 1.707-.837l6.594 2.812z" transform="translate(-20 -19) translate(20 19)"/>
+                    <path fill="#667DFF" d="M23.573 29.238l-6.182 4.548s-3.297-8.736-1.59-25.311c.118-.958 1.119-1.436 1.943-.958l6.005 3.89s-1.177 8.078.53 15.857c.177.777-.118 1.555-.706 1.974zM34.994 19.126l-5.711-3.77c-.353-.24-.883.12-.765.539 1.354 6.043 1.177 9.035-.236 10.53-.176.24-1.177-.119-1.177-.119.942.479 1.177.24 1.177.24.942-.719 4.474-3.292 6.712-4.847.883-.658.883-1.975 0-2.573z" transform="translate(-20 -19) translate(20 19)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/docs/public/images/vueschool/vs-logo.svg b/docs/public/images/vueschool/vs-logo.svg
new file mode 100644
index 00000000..01f7ae05
--- /dev/null
+++ b/docs/public/images/vueschool/vs-logo.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40">
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <g opacity=".9">
+                    <g>
+                        <path fill="#364FDE" d="M9.936 24.365C7.355 11.329 9.8 2.775 9.8 2.775s-.654 5.207 4.488 13.6c-.066 10.405 1.939 15.833 1.939 15.833l.412-.31-.412.367s-3.049-2.543-6.291-7.9zM22.09 22.519c1.233 1.27 2.384 2.148 3.215 2.566l-.014-.007s.933.342 1.098.114c1.139-1.232 1.417-3.526.658-7.84-4.34-2.531-4.887-6.478-4.887-6.478s-.782 5.48-.07 11.645z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+                        <path fill="#56D8FF" d="M9.8 2.774s-3.57 12.492 2.472 30.29c.165.513 0 1.083-.44 1.426L5.46 39.053c-.604.456-1.483.171-1.757-.57C2 33.748-2.67 18.06 2.055.892c.22-.685.933-1.084 1.593-.799L9.8 2.774z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+                        <path fill="#667DFF" d="M21.995 27.873l-5.768 4.335S13.15 23.88 14.744 8.079c.11-.913 1.043-1.369 1.813-.913l5.602 3.708s-1.098 7.7.495 15.116c.165.742-.11 1.483-.66 1.883zM32.651 18.233l-5.328-3.594c-.33-.228-.824.114-.714.513 1.263 5.762 1.099 8.614-.22 10.04-.165.228-1.098-.114-1.098-.114.878.456 1.098.228 1.098.228.88-.685 4.175-3.138 6.262-4.62.824-.628.824-1.883 0-2.453z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+                    </g>
+                </g>
+                <path fill="#FFF" d="M54.753 13.93l-3.028-8.623h-2.47l4.287 11.602h2.323L60.17 5.307H57.78l-3.027 8.624zm11.29 2.98h2.079l-.016-.148c-.028-.276-.06-.697-.065-1.167l-.001-6.737h-2.176v4.68c0 .933-.557 1.587-1.522 1.587-1.015 0-1.473-.72-1.473-1.62V8.858h-2.176v5.09c0 1.75 1.112 3.174 3.06 3.174.85 0 1.783-.327 2.225-1.08 0 .327.033.703.066.867zm5.875-4.943c.05-.736.671-1.587 1.8-1.587 1.244 0 1.767.785 1.8 1.587h-3.6zm3.813 2.095c-.262.72-.818 1.227-1.833 1.227-1.08 0-1.98-.769-2.029-1.833h5.76l.024-.366c.005-.095.009-.2.009-.305 0-2.585-1.49-4.172-3.977-4.172-2.061 0-3.96 1.669-3.96 4.238 0 2.716 1.948 4.304 4.157 4.304 1.98 0 3.256-1.162 3.665-2.553l-1.816-.54zM58.22 25.255c-.261-1.31-1.341-3.011-4.156-3.011-2.192 0-4.041 1.57-4.041 3.632 0 1.751 1.194 2.946 3.043 3.322l1.62.327c.9.18 1.408.704 1.408 1.375 0 .818-.671 1.424-1.882 1.424-1.637 0-2.438-1.031-2.537-2.177l-2.094.557c.18 1.652 1.538 3.632 4.614 3.632 2.7 0 4.19-1.8 4.19-3.583 0-1.637-1.13-3.011-3.24-3.42l-1.62-.311c-.851-.164-1.26-.671-1.26-1.31 0-.768.72-1.472 1.816-1.472 1.473 0 1.996.998 2.11 1.636l2.03-.621zm5.466 2.552c1.08 0 1.588.688 1.784 1.358l1.947-.654c-.343-1.358-1.587-2.716-3.78-2.716-2.34 0-4.173 1.783-4.173 4.27 0 2.471 1.866 4.271 4.239 4.271 2.143 0 3.403-1.374 3.763-2.716l-1.914-.638c-.18.622-.737 1.358-1.85 1.358-1.112 0-2.061-.818-2.061-2.275 0-1.456.933-2.258 2.045-2.258zm7.56 1.555c.05-.884.59-1.571 1.506-1.571 1.047 0 1.489.704 1.489 1.604v4.696h2.176v-5.073c0-1.767-.949-3.19-2.994-3.19-.77 0-1.653.261-2.177.883v-4.467h-2.176V34.09h2.176v-4.73zm10.997 2.994c-1.064 0-2.046-.785-2.046-2.29 0-1.522.982-2.291 2.046-2.291 1.063 0 2.045.769 2.045 2.29 0 1.522-.982 2.291-2.045 2.291zm0-6.561c-2.406 0-4.222 1.783-4.222 4.27 0 2.471 1.816 4.271 4.222 4.271 2.405 0 4.221-1.8 4.221-4.27 0-2.488-1.816-4.271-4.221-4.271zm9.556 6.561c-1.064 0-2.045-.785-2.045-2.29 0-1.522.981-2.291 2.045-2.291s2.045.769 2.045 2.29c0 1.522-.981 2.291-2.045 2.291zm0-6.561c-2.405 0-4.222 1.783-4.222 4.27 0 2.471 1.817 4.271 4.222 4.271 2.405 0 4.222-1.8 4.222-4.27 0-2.488-1.817-4.271-4.222-4.271zm8.116 8.296V22.244H97.74V34.09h2.176zm15.339-1.735c-1.064 0-2.046-.785-2.046-2.29 0-1.522.982-2.291 2.046-2.291 1.063 0 2.045.769 2.045 2.29 0 1.522-.982 2.291-2.045 2.291zm0-6.561c-2.406 0-4.222 1.783-4.222 4.27 0 2.471 1.816 4.271 4.222 4.271 2.405 0 4.221-1.8 4.221-4.27 0-2.488-1.816-4.271-4.221-4.271zm-6.066 8.296v-8.182h-2.176v8.182h2.176zm-2.28-10.386c0-.599.489-1.09 1.085-1.09.608 0 1.097.491 1.097 1.09 0 .6-.489 1.091-1.097 1.091-.596 0-1.085-.491-1.085-1.09zm-4.882 9.011c0-.818.671-1.489 1.49-1.489.834 0 1.505.671 1.505 1.49 0 .818-.671 1.488-1.506 1.488-.818 0-1.489-.67-1.489-1.489z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+            </g>
+        </g>
+    </g>
+</svg>
-- 
2.39.5