docs: adds banner for survey (#3566)

amir20 · Jan 21, 2025 · 84ec46c · 84ec46c
1 parent 0c4ca6d
commit 84ec46c
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 1 deletion.
diff --git a/docs/.vitepress/theme/components/Banner.vue b/docs/.vitepress/theme/components/Banner.vue
@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="banner fixed top-0 right-0 left-0 z-(--vp-z-index-layout-top) flex items-center overflow-hidden bg-[oklch(74%_0.16_232.661)] p-4 font-bold text-gray-800 dark:bg-[oklch(60%_0.126_221.723)] dark:text-white"
+  >
+    <div class="mx-auto flex items-center gap-4">
+      <span class="animate-bounce">👋🏼</span> Using Dozzle? I'd love to hear about your experience in this short survey
+      to shape the future of Dozzle.
+      <a href="https://tally.so/r/wLv4g2" target="_blank" class="btn btn-sm btn-primary text-white!">
+        Take a quick survey 🙏🏼
+      </a>
+    </div>
+    <button class="btn btn-circle btn-xs ml-auto" @click="dismiss">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <path
+          d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
+<script setup>
+import { onMounted } from "vue";
+const dismiss = () => {
+  localStorage.setItem("banner-dismissed", (Date.now() + 8.64e7 * 1).toString());
+  document.documentElement.classList.add("banner-dismissed");
+};
+
+onMounted(() => {
+  if (new Date(+localStorage.getItem("banner-dismissed")) > Date.now()) {
+    document.documentElement.classList.add("banner-dismissed");
+  }
+});
+</script>
+<style>
+.banner-dismissed {
+  --vp-layout-top-height: 0px !important;
+}
+@media (min-width: 375px) {
+  html {
+    --vp-layout-top-height: 100px;
+  }
+}
+@media (min-width: 768px) {
+  html {
+    --vp-layout-top-height: 63px;
+  }
+}
+</style>
+<style scoped>
+.banner-dismissed .banner {
+  display: none;
+}
+</style>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -7,6 +7,7 @@ import "./style.css";
 import HeroVideo from "./components/HeroVideo.vue";
 import BuyMeCoffee from "./components/BuyMeCoffee.vue";
 import Stats from "./components/Stats.vue";
+import Banner from "./components/Banner.vue";
 
 export default {
   ...DefaultTheme,
@@ -15,6 +16,7 @@ export default {
       "home-hero-image": () => h(HeroVideo),
       "sidebar-nav-after": () => h(BuyMeCoffee),
       "home-hero-actions-after": () => h(Stats),
+      "layout-top": () => h(Banner),
     });
   },
   enhanceApp(ctx) {

diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
@@ -1,6 +1,17 @@
 @import "tailwindcss";
+@variant dark (&:where(.dark, .dark *));
+
 @plugin "daisyui" {
-  include: stat;
+  include: stat, button;
+  themes: light --default;
+}
+@plugin "daisyui/theme" {
+  name: "light";
+  default: true;
+  --depth: 0;
+  --noise: 0;
+  --radius-field: 2rem;
+  --color-primary: var(--vp-button-brand-bg);
 }
 
 /**

diff --git a/docs/components.d.ts b/docs/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    Banner: typeof import('./.vitepress/theme/components/Banner.vue')['default']
     BuyMeCoffee: typeof import('./.vitepress/theme/components/BuyMeCoffee.vue')['default']
     Counter: typeof import('./.vitepress/theme/components/Counter.vue')['default']
     HeroVideo: typeof import('./.vitepress/theme/components/HeroVideo.vue')['default']