docs: fetch initial star count at build time. (electric-sql#180)

* docs: fetch an initial star count at build time. * docs: fix supabase link. * docs: forgot to add data loader file. * docs: minor mobile formatting fixes. * docs: bump font-size on mobile to fix small safari. * docs: tagline copy tweak.
alantrrs · Aug 12, 2024 · b8c353f · b8c353f
1 parent 5115cd5
commit b8c353f
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 29 deletions.
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -23,6 +23,12 @@
   --vp-c-text-3: rgba(235, 235, 245, 0.55);
 }
 
+@media (max-width: 575px) {
+  .hide-xs {
+    display: none;
+  }
+}
+
 .img-row {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
@@ -100,6 +106,13 @@ iframe {
 .VPFeature .details {
   font-weight: 600 !important;
 }
+.VPFeature .details,
+.VPButton.medium,
+.link-btn,
+.message,
+.copywrite {
+  font-size: 14.5px !important;
+}
 
 .product-icon {
   width: 84px;
@@ -134,7 +147,7 @@ iframe {
     border-radius: 20px;
     padding: 0 15px;
     line-height: 30px;
-    font-size: 14px;
+    font-size: 14.5px;
     color: var(--vp-c-gray-3) !important;
     border-color: var(--vp-button-brand-border);
     background-color: var(--vp-button-brand-bg);

diff --git a/docs/components/HeroImage.vue b/docs/components/HeroImage.vue
@@ -98,7 +98,12 @@ onUnmounted(() => {
 
 @media (max-width: 959px) {
   .custom-hero-image-wrapper {
-    transform: scale(0.6);
+    transform: scale(0.55);
+  }
+}
+@media (max-width: 575px) {
+  .custom-hero-image-wrapper {
+    transform: scale(0.45);
   }
 }
 </style>
diff --git a/docs/components/Repl.vue b/docs/components/Repl.vue
@@ -56,7 +56,7 @@ watch(
       }
 
       const replRootEl = repl.value.shadowRoot.querySelector('.PGliteRepl-root')
-      replRootEl.setAttribute('style', `--PGliteRepl-font-size: 14px;`)
+      replRootEl.setAttribute('style', `--PGliteRepl-font-size: 14.5px;`)
 
       const styleEl = document.createElement('style')
       styleEl.innerHTML = `

diff --git a/docs/components/starCount.ts b/docs/components/starCount.ts
@@ -1,3 +1,5 @@
+const FALLBACK_INITIAL_COUNT = 5_000
+
 export async function localStorageCache(
   key: string,
   ttl: number,
@@ -23,11 +25,21 @@ export async function localStorageCache(
   return value
 }
 
-export async function starCount() {
+export async function starCount(currentCount) {
   const ttl = 3600 // 1 hour
   return localStorageCache('starCount', ttl, async () => {
-    const resp = await fetch('https://api.github.com/repos/electric-sql/pglite')
+    return await fetchStarCount(currentCount)
+  })
+}
+
+export async function fetchStarCount (currentCount) {
+  const resp = await fetch('https://api.github.com/repos/electric-sql/pglite')
+
+  if (resp.ok) {
     const data = await resp.json()
+
     return data.stargazers_count
-  })
+  }
+
+  return currentCount || FALLBACK_INITIAL_COUNT
 }
diff --git a/docs/count.data.ts b/docs/count.data.ts
@@ -0,0 +1,7 @@
+import { fetchStarCount } from './components/starCount.ts'
+
+export default {
+  async load() {
+    return await fetchStarCount()
+  }
+}
diff --git a/docs/extensions/index.md b/docs/extensions/index.md
@@ -56,7 +56,7 @@ const selectedTag = ref(null)
     border-radius: 20px;
     padding: 0 20px;
     line-height: 38px;
-    font-size: 14px;
+    font-size: 14.5px;
     display: inline-block;
     border: 1px solid transparent;
     text-align: center;
@@ -100,7 +100,7 @@ const selectedTag = ref(null)
     border-radius: 20px;
     padding: 5px 10px;
     line-height: 18px;
-    font-size: 14px;
+    font-size: 14.5px;
     display: inline-block;
     border: 1px solid transparent;
     text-align: center;

diff --git a/docs/index.md b/docs/index.md
@@ -5,7 +5,7 @@ layout: home
 hero:
   name: 'PGlite'
   text: 'Embeddable Postgres'
-  tagline: 'Run a full Postgres database locally in your app with reactivity and server sync'
+  tagline: 'Run a full Postgres database locally in WASM with reactivity and live sync.'
   actions:
     - theme: brand
       text: Get Started
@@ -27,6 +27,7 @@ features:
 import { onMounted } from 'vue'
 import { defineClientComponent } from 'vitepress'
 import { VPHomeHero } from 'vitepress/theme'
+import { data as initialStarCount } from './count.data.ts'
 import { starCount } from './components/starCount.ts'
 
 const Repl = defineClientComponent(() => {
@@ -35,13 +36,13 @@ const Repl = defineClientComponent(() => {
 
 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')
+      countEl.innerText = `( ${initialStarCount.toLocaleString()} )`;
 
       const icon = document.createElement('span')
       icon.classList.add('vpi-social-github')
@@ -50,7 +51,9 @@ onMounted(async () => {
 
     linkEl.append(countEl)
 
-    let currentCount = Math.max(count - 15, 0)
+    const count = await starCount(initialStarCount)
+
+    let currentCount = Math.max(count - 15, initialStarCount)
     const animateCount = () => {
       currentCount += 1;
       if (currentCount >= count) {
@@ -74,11 +77,11 @@ onMounted(async () => {
     display: block;
     width: 1.42rem;
     height: 1.42rem;
-    margin: 0 0.5rem 0 -10px;
+    margin: 0 0.5rem 0 0;
     position: relative;
   }
   .actions a[href="https://github.com/electric-sql/pglite"] .count {
-    margin-left: 0.5rem;
+    margin-left: 0.25rem;
     min-width: 55px;
   }
 </style>
@@ -118,7 +121,7 @@ onMounted(async () => {
     border-radius: 20px;
     padding: 0 20px;
     line-height: 38px;
-    font-size: 14px;
+    font-size: 14.5px;
     display: inline-block;
     border: 1px solid transparent;
     text-align: center;
@@ -160,25 +163,30 @@ onMounted(async () => {
     <div class="info">
       <h3>Experience PGlite with <a href="https://postgres.new">postgres.new</a></h3>
       <p>
-        Create and publish a Postgres database using AI<br>
-        build on PGlite by <a href="https://supabase.com">Supabase</a>
+        Create and publish a Postgres database using AI
+        <br class="hide-xs" />
+        built on PGlite by <a href="https://supabase.com">Supabase</a>:
       </p>
     </div>
     <video controls poster="https://static.pglite.dev/videos/postgres-new-showcase-loop.png">
       <source src="https://static.pglite.dev/videos/postgres-new-showcase-loop-1080p.mp4" type="video/mp4" />
     </video>
-    <a class="link-btn" href="https://postgres.new">What would you like to create?</a>
+    <a class="link-btn" href="https://postgres.new">
+      What would you like to create?</a>
   </div>
   <div class="try-it-now">
     <div class="info">
       <h3>Try PGlite Now</h3>
       <p>
-        This is a full PGlite Postgres running in your browser<br>
-        It even includes <a href="/extensions/#pgvector">pgvector</a>!</p>
+        This is a full PGlite Postgres running in your browser.
+        <br class="hide-xs" />
+        It even includes <a href="/extensions/#pgvector">pgvector</a>!
+      </p>
     </div>
     <ClientOnly>
       <Repl class="repl" />
     </ClientOnly>
-    <a class="link-btn" href="/repl">Try more extensions in the playground</a>
+    <a class="link-btn" href="/repl">
+      Try more extensions in the playground</a>
   </div>
 </div>
diff --git a/docs/repl/ReplPlayground.vue b/docs/repl/ReplPlayground.vue
@@ -92,7 +92,7 @@ watch(
       }
 
       const replRootEl = repl.value.shadowRoot.querySelector('.PGliteRepl-root')
-      replRootEl.setAttribute('style', `--PGliteRepl-font-size: 14px;`)
+      replRootEl.setAttribute('style', `--PGliteRepl-font-size: 14.5px;`)
 
       const styleEl = document.createElement('style')
       styleEl.innerHTML = `
@@ -265,7 +265,7 @@ async function clearDb() {
   display: flex;
   flex-direction: column;
   max-height: 100%;
-  font-size: 14px;
+  font-size: 14.5px;
 }
 
 .sidebar .top {
@@ -296,7 +296,7 @@ async function clearDb() {
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 14px;
+  font-size: 14.5px;
 }
 
 .info-msg button {
@@ -307,7 +307,7 @@ async function clearDb() {
   margin: 0 0.25rem;
   cursor: pointer;
   border-radius: 0.25rem;
-  font-size: 14px;
+  font-size: 14.5px;
   transition:
     color 0.25s,
     border-color 0.25s,
@@ -333,7 +333,7 @@ async function clearDb() {
     color 0.25s,
     border-color 0.25s,
     background-color 0.25s;
-  font-size: 14px;
+  font-size: 14.5px;
 }
 
 .btn-clear:hover {
@@ -344,7 +344,7 @@ async function clearDb() {
 h1,
 h2 {
   font-weight: bold;
-  font-size: 14px;
+  font-size: 14.5px;
 }
 
 h1 {
@@ -357,7 +357,7 @@ h2 {
 }
 
 p {
-  font-size: 14px;
+  font-size: 14.5px;
   margin: 0.5rem 0;
 }
 
@@ -396,7 +396,7 @@ p code {
   justify-content: center;
   align-items: center;
   flex: 1;
-  font-size: 14px;
+  font-size: 14.5px;
   opacity: 0.5;
 }
 
@@ -415,7 +415,7 @@ p code {
     align-items: center;
     padding: 0 12px;
     line-height: var(--vp-nav-height);
-    font-size: 14px;
+    font-size: 14.5px;
     font-weight: 500;
     color: var(--vp-c-text-1);
     transition: color 0.25s;