CTA improvments

electric-sql · Aug 12, 2024 · 286da56 · 286da56
1 parent 80e78ca
commit 286da56
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 9 deletions.
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -46,9 +46,12 @@ export default defineConfig({
       { text: 'Home', link: '/' },
       { text: 'About', link: '/docs/about' },
       { text: 'Docs', link: '/docs/' },
-      { text: 'Extensions', link: '/extensions/' },
       { text: 'REPL', link: '/repl/' },
       { text: 'ElectricSQL', link: 'https://www.electric-sql.com' },
+      {
+        text: 'Star on GitHub',
+        link: 'https://github.com/electric-sql/pglite',
+      },
     ],
     sidebar: [
       {

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -123,3 +123,26 @@ iframe {
 .VPButton.brand {
   color: var(--vp-c-gray-3) !important;
 }
+
+@media (min-width: 768px) {
+  .VPNav a.VPLink[href="https://github.com/electric-sql/pglite"]::after
+  {
+    display: none !important;
+  }
+  .VPNav a.VPLink[href="https://github.com/electric-sql/pglite"] span
+  {
+    border-radius: 20px;
+    padding: 0 15px;
+    line-height: 30px;
+    font-size: 14px;
+    color: var(--vp-c-gray-3) !important;
+    border-color: var(--vp-button-brand-border);
+    background-color: var(--vp-button-brand-bg);
+  }
+  .VPNav a.VPLink[href="https://github.com/electric-sql/pglite"] span:hover
+  {
+    border-color: var(--vp-button-brand-hover-border);
+    color: var(--vp-button-brand-hover-text);
+    background-color: var(--vp-button-brand-hover-bg);
+  }
+}
diff --git a/docs/index.md b/docs/index.md
@@ -8,17 +8,11 @@ hero:
   tagline: 'Run a full Postgres database locally in your app with reactivity and server sync'
   actions:
     - theme: brand
-      text: Getting Started
+      text: Get Started
       link: /docs/
     - theme: alt
-      text: About
-      link: /docs/about
-    - theme: alt
-      text: GitHub
+      text: Star on GitHub
       link: https://github.com/electric-sql/pglite
-    - theme: alt
-      text: Discord
-      link: https://discord.com/channels/933657521581858818/1212676471588520006
 
 features:
   - title: Lightweight
@@ -30,14 +24,65 @@ features:
 ---
 
 <script setup>
+import { onMounted } from 'vue'
 import { defineClientComponent } from 'vitepress'
 import { VPHomeHero } from 'vitepress/theme'
+import { starCount } from './components/starCount.ts'
 
 const Repl = defineClientComponent(() => {
   return import('./components/Repl.vue')
 })
+
+onMounted(async () => {
+  if (typeof window !== 'undefined' && document.querySelector) {
+    const count = await starCount()
+    const linkEl = document.querySelector('.action a[href="https://github.com/electric-sql/pglite"]')
+    let countEl = linkEl.querySelector('.count')
+
+    if (!countEl) {
+      countEl = document.createElement('span')
+      countEl.classList.add('count')
+
+      const icon = document.createElement('span')
+      icon.classList.add('vpi-social-github')
+      linkEl.prepend(icon)
+    }
+
+    linkEl.append(countEl)
+
+    let currentCount = Math.max(count - 15, 0)
+    const animateCount = () => {
+      currentCount += 1;
+      if (currentCount >= count) {
+        currentCount = count;
+        clearInterval(intervalId);
+      }
+      countEl.innerText = `( ${currentCount} )`;
+    };
+    const intervalId = setInterval(animateCount, 64);
+  }
+});
+
 </script>
 
+<style>
+  .actions a[href="https://github.com/electric-sql/pglite"] {
+    display: flex;
+    align-items: center;
+  }
+  .actions a[href="https://github.com/electric-sql/pglite"] .vpi-social-github {
+    display: block;
+    width: 1.42rem;
+    height: 1.42rem;
+    margin: 0 0.5rem 0 -10px;
+    position: relative;
+  }
+  .actions a[href="https://github.com/electric-sql/pglite"] .count {
+    margin-left: 0.5rem;
+    min-width: 55px;
+  }
+</style>
+
 <style scoped>
 
   .try-it-now,
@@ -108,6 +153,8 @@ const Repl = defineClientComponent(() => {
   }
 </style>
 
+<span class="vpi-social-github"></span>
+
 <div class="row">
   <div class="postgres-new">
     <div class="info">