From: Nico Devs <3766839+nicodevs@users.noreply.github.com>
Date: Wed, 9 Jun 2021 15:07:37 +0000 (-0300)
Subject: docs: Add VueSchool Summer Sale banner (#991)
X-Git-Tag: v4.0.9~15
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ced02429e92b4313140f46e8c2eba15e4180a73f;p=thirdparty%2Fvuejs%2Frouter.git

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
---

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 00000000..43807ff6
Binary files /dev/null and b/docs/public/images/vueschool/vs-backpack.png differ
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>