From 401ea0ce739a3b712485e9dbe6935bc808eb3a12 Mon Sep 17 00:00:00 2001
From: unnoq <contact@unnoq.com>
Date: Thu, 27 Mar 2025 15:06:19 +0700
Subject: [PATCH 1/6] docs: zuplo sponsor

---
 .../.vitepress/theme/components/Banner.vue    | 30 +++++++++----------
 apps/content/.vitepress/theme/index.ts        |  3 +-
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/apps/content/.vitepress/theme/components/Banner.vue b/apps/content/.vitepress/theme/components/Banner.vue
index ffacb5af7..d9408ce21 100644
--- a/apps/content/.vitepress/theme/components/Banner.vue
+++ b/apps/content/.vitepress/theme/components/Banner.vue
@@ -15,13 +15,9 @@ const show = ref(false)
 const bannerDismissed = useLocalStorage<string>(`banner-dismissed-at`, '')
 
 watchEffect(() => {
-  if (!bannerDismissed.value) {
+  if (!bannerDismissed.value || Number(bannerDismissed.value) + 60 * 60 * 24 * 3 * 1000 < Date.now()) {
     show.value = true
   }
-
-  if (Number(bannerDismissed.value) + 60 * 60 * 24 * 3 * 1000 > Date.now()) {
-    show.value = false
-  }
 })
 
 function dismissBanner() {
@@ -35,7 +31,7 @@ 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">
@@ -56,11 +52,12 @@ function dismissBanner() {
 
 <style scoped>
 .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: 0 24px;
   max-width: calc(var(--vp-layout-max-width) - 64px);
   position: relative;
   margin-right: auto;
@@ -83,9 +80,18 @@ function dismissBanner() {
   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 +101,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%);
 }
 
diff --git a/apps/content/.vitepress/theme/index.ts b/apps/content/.vitepress/theme/index.ts
index 0d2ec4ab5..30bac7eb9 100644
--- a/apps/content/.vitepress/theme/index.ts
+++ b/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),
     })
   },
 }

From ed633b3790ed60dc1b22ba3942f85a2632f75dd1 Mon Sep 17 00:00:00 2001
From: unnoq <contact@unnoq.com>
Date: Thu, 27 Mar 2025 15:17:17 +0700
Subject: [PATCH 2/6] hope fix layout

---
 .../.vitepress/theme/components/Banner.vue      | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/apps/content/.vitepress/theme/components/Banner.vue b/apps/content/.vitepress/theme/components/Banner.vue
index d9408ce21..903a7a6f5 100644
--- a/apps/content/.vitepress/theme/components/Banner.vue
+++ b/apps/content/.vitepress/theme/components/Banner.vue
@@ -1,5 +1,5 @@
 <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>()
@@ -11,18 +11,17 @@ watchEffect(() => {
   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 || Number(bannerDismissed.value) + 60 * 60 * 24 * 3 * 1000 < Date.now()) {
-    show.value = true
-  }
-})
+const show = ref(typeof window !== 'undefined' && (Number(window.localStorage.getItem(`banner-dismissed-at`)) || 0) + THREE_DAYS_MS < Date.now())
 
 function dismissBanner() {
-  bannerDismissed.value = Date.now().toString()
+  if (typeof window === 'undefined') {
+    return
+  }
+
   show.value = false
+  window.localStorage.setItem(`banner-dismissed-at`, Date.now().toString())
 }
 </script>
 

From b49859015bcd7f5b4a5dfdd97010639b7fd75299 Mon Sep 17 00:00:00 2001
From: unnoq <contact@unnoq.com>
Date: Thu, 27 Mar 2025 15:49:27 +0700
Subject: [PATCH 3/6] improve

---
 apps/content/.vitepress/theme/components/Banner.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/content/.vitepress/theme/components/Banner.vue b/apps/content/.vitepress/theme/components/Banner.vue
index 903a7a6f5..b117d5da9 100644
--- a/apps/content/.vitepress/theme/components/Banner.vue
+++ b/apps/content/.vitepress/theme/components/Banner.vue
@@ -8,12 +8,16 @@ const { height } = useElementSize(container)
 const layoutTopHeight = computed(() => Math.max(0, height.value - y.value))
 
 watchEffect(() => {
+  if (typeof window === 'undefined') {
+    return
+  }
+
   document.documentElement.style.setProperty('--vp-layout-top-height', `${layoutTopHeight.value}px`)
 })
 
 const THREE_DAYS_MS = 1000 * 60 * 60 * 24 * 3
 
-const show = ref(typeof window !== 'undefined' && (Number(window.localStorage.getItem(`banner-dismissed-at`)) || 0) + THREE_DAYS_MS < Date.now())
+const show = ref(typeof window === 'undefined' || (Number(window.localStorage.getItem(`banner-dismissed-at`)) || 0) + THREE_DAYS_MS < Date.now())
 
 function dismissBanner() {
   if (typeof window === 'undefined') {
@@ -49,7 +53,11 @@ function dismissBanner() {
   </div>
 </template>
 
-<style scoped>
+<style>
+html {
+  --vp-layout-top-height: 24px;
+}
+
 .banner-container {
   background: rgba(255, 0, 189, 0.8);
   color: var(--vp-c-white);

From de4f864672c41c6c7ae5c40678fbdc7aaeaaa7d7 Mon Sep 17 00:00:00 2001
From: unnoq <contact@unnoq.com>
Date: Thu, 27 Mar 2025 16:03:31 +0700
Subject: [PATCH 4/6] improve

---
 apps/content/.vitepress/theme/components/Banner.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/content/.vitepress/theme/components/Banner.vue b/apps/content/.vitepress/theme/components/Banner.vue
index b117d5da9..aa4149273 100644
--- a/apps/content/.vitepress/theme/components/Banner.vue
+++ b/apps/content/.vitepress/theme/components/Banner.vue
@@ -55,7 +55,7 @@ function dismissBanner() {
 
 <style>
 html {
-  --vp-layout-top-height: 24px;
+  --vp-layout-top-height: 26px;
 }
 
 .banner-container {
@@ -64,7 +64,7 @@ html {
 }
 
 .banner {
-  padding: 0 24px;
+  padding: 1px 24px;
   max-width: calc(var(--vp-layout-max-width) - 64px);
   position: relative;
   margin-right: auto;
@@ -80,10 +80,11 @@ html {
   display: flex;
   justify-content: center;
   align-items: center;
+
+  font-size: 14px;
 }
 
 .banner-text {
-  font-size: 16px;
   font-weight: 600;
 }
 

From 451d8ef88959ee420d96acbd4ed4181b40acf6e8 Mon Sep 17 00:00:00 2001
From: unnoq <contact@unnoq.com>
Date: Thu, 27 Mar 2025 18:40:09 +0700
Subject: [PATCH 5/6] fix mobile

---
 apps/content/.vitepress/theme/components/Banner.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/content/.vitepress/theme/components/Banner.vue b/apps/content/.vitepress/theme/components/Banner.vue
index aa4149273..55dbb119b 100644
--- a/apps/content/.vitepress/theme/components/Banner.vue
+++ b/apps/content/.vitepress/theme/components/Banner.vue
@@ -4,11 +4,11 @@ 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') {
+  if (typeof window === 'undefined' || width.value < 960) {
     return
   }
 
@@ -54,8 +54,10 @@ function dismissBanner() {
 </template>
 
 <style>
-html {
-  --vp-layout-top-height: 26px;
+@media (min-width: 960px) {
+  html {
+    --vp-layout-top-height: 26px;
+  }
 }
 
 .banner-container {

From cc01f149860531216668732279190b968730644e Mon Sep 17 00:00:00 2001
From: unnoq <contact@unnoq.com>
Date: Sat, 5 Apr 2025 09:05:24 +0700
Subject: [PATCH 6/6] update link

---
 apps/content/.vitepress/theme/components/Banner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/content/.vitepress/theme/components/Banner.vue b/apps/content/.vitepress/theme/components/Banner.vue
index 55dbb119b..041a42af7 100644
--- a/apps/content/.vitepress/theme/components/Banner.vue
+++ b/apps/content/.vitepress/theme/components/Banner.vue
@@ -37,7 +37,7 @@ function dismissBanner() {
           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>