docs: zuplo sponsor

apps/content/.vitepress/theme/components/Banner.vue

@@ -1,32 +1,31 @@
 <script setup lang="ts">
-import { useElementSize, useLocalStorage, useWindowScroll } from '@vueuse/core'
+import { useElementSize, useWindowScroll } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 
 const container = ref<HTMLElement>()
 const { y } = useWindowScroll()
-const { height } = useElementSize(container)
+const { height, width } = useElementSize(container)
 const layoutTopHeight = computed(() => Math.max(0, height.value - y.value))
 
 watchEffect(() => {
+  if (typeof window === 'undefined' || width.value < 960) {
+    return
+  }
+
   document.documentElement.style.setProperty('--vp-layout-top-height', `${layoutTopHeight.value}px`)
 })
 
-const show = ref(false)
-const bannerDismissed = useLocalStorage<string>(`banner-dismissed-at`, '')
+const THREE_DAYS_MS = 1000 * 60 * 60 * 24 * 3
 
-watchEffect(() => {
-  if (!bannerDismissed.value) {
-    show.value = true
-  }
+const show = ref(typeof window === 'undefined' || (Number(window.localStorage.getItem(`banner-dismissed-at`)) || 0) + THREE_DAYS_MS < Date.now())
 
-  if (Number(bannerDismissed.value) + 60 * 60 * 24 * 3 * 1000 > Date.now()) {
-    show.value = false
+function dismissBanner() {
+  if (typeof window === 'undefined') {
+    return
   }
-})
 
-function dismissBanner() {
-  bannerDismissed.value = Date.now().toString()
   show.value = false
+  window.localStorage.setItem(`banner-dismissed-at`, Date.now().toString())
 }
 </script>
 
@@ -35,10 +34,10 @@ function dismissBanner() {
     <div class="banner">
       <div class="banner-content">
         <div class="banner-text">
-          Serverless API Gateway, designed for developers -
+          Serverless API Gateway<span class="banner-helper">, designed for developers</span> -
         </div>
 
-        <a class="banner-action" href="https://zuplo.com/" target="_blank" rel="noopener">
+        <a class="banner-action" href="https://zuplo.link/orpc" target="_blank" rel="noopener">
           Try Zuplo
         </a>
       </div>
@@ -54,13 +53,20 @@ function dismissBanner() {
   </div>
 </template>
 
-<style scoped>
+<style>
+@media (min-width: 960px) {
+  html {
+    --vp-layout-top-height: 26px;
+  }
+}
+
 .banner-container {
-  background: linear-gradient(to right, var(--vp-c-brand-2), var(--vp-c-brand-3));
+  background: rgba(255, 0, 189, 0.8);
   color: var(--vp-c-white);
 }
 
 .banner {
+  padding: 1px 24px;
   max-width: calc(var(--vp-layout-max-width) - 64px);
   position: relative;
   margin-right: auto;
@@ -76,16 +82,26 @@ function dismissBanner() {
   display: flex;
   justify-content: center;
   align-items: center;
+
+  font-size: 14px;
 }
 
 .banner-text {
-  font-size: 16px;
   font-weight: 600;
 }
 
+.banner-helper {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .banner-helper {
+    display: inline;
+  }
+}
+
 .banner-action {
   margin-left: 2px;
-  color: #ff2da0;
   font-weight: 700;
   text-decoration: underline;
 }
@@ -95,16 +111,10 @@ function dismissBanner() {
   filter: brightness(1.1);
 }
 
-.banner-action svg {
-  margin-left: 8px;
-  height: 20px;
-  width: 20px;
-}
-
 .banner-close {
   position: absolute;
   top: 50%;
-  right: 18px;
+  right: 4px;
   transform: translateY(-50%);
 }
 

apps/content/.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import Theme from 'vitepress/theme'
 import { h } from 'vue'
 import AsideSponsors from './components/AsideSponsors.vue'
+import Banner from './components/Banner.vue'
 
 import 'virtual:group-icons.css'
 import '@shikijs/vitepress-twoslash/style.css'
@@ -16,7 +17,7 @@ export default {
   Layout() {
     return h(Theme.Layout, null, {
       'aside-outline-after': () => h(AsideSponsors),
-      // 'layout-top': () => h(Banner),
+      'layout-top': () => h(Banner),
     })
   },
 }