Skip to content

Commit 16bd20d

Browse files
tdrztdrz
authored
NPM CTA on website (#955)
* CTA npm
1 parent b7ba707 commit 16bd20d

File tree

4 files changed

+170
-33
lines changed

4 files changed

+170
-33
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,9 +82,13 @@ export default defineConfig({
8282
{ text: 'REPL', link: '/repl/' },
8383
{ text: 'ElectricSQL', link: 'https://www.electric-sql.com' },
8484
{
85-
text: 'Star on GitHub',
85+
text: 'GitHub',
8686
link: 'https://github.com/electric-sql/pglite',
8787
},
88+
{
89+
text: 'NPM',
90+
link: 'https://www.npmjs.com/package/@electric-sql/pglite',
91+
},
8892
],
8993
sidebar: [
9094
{

‎docs/components/starCount.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,25 @@ export async function fetchStarCount(currentCount) {
4343

4444
return currentCount || FALLBACK_INITIAL_COUNT
4545
}
46+
47+
const FALLBACK_NPMJS_DWN_INITIAL_COUNT = 6842562
48+
49+
export async function downloadCount(currentDownloadCount) {
50+
const ttl = 3600 // 1 hour
51+
return localStorageCache('downloadCount', ttl, async () => {
52+
return await fetchNpmJsDownloadCount(currentDownloadCount)
53+
})
54+
}
55+
56+
export async function fetchNpmJsDownloadCount(currentCount) {
57+
const resp = await fetch(
58+
'https://api.npmjs.org/downloads/point/last-week/@electric-sql/pglite',
59+
)
60+
61+
if (resp.ok) {
62+
const data = await resp.json()
63+
return data.downloads
64+
}
65+
66+
return currentCount || FALLBACK_NPMJS_DWN_INITIAL_COUNT
67+
}

‎docs/downloadCount.data.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { fetchNpmJsDownloadCount } from './components/starCount.ts'
2+
3+
export default {
4+
async load() {
5+
return await fetchNpmJsDownloadCount()
6+
},
7+
}

‎docs/index.md‎

Lines changed: 136 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@ hero:
1111
text: Get Started
1212
link: /docs/
1313
- theme: alt
14-
text: Star on GitHub
14+
text: GitHub
1515
link: https://github.com/electric-sql/pglite
16+
- theme: alt
17+
text: NPM
18+
link: https://www.npmjs.com/package/@electric-sql/pglite
1619

1720
features:
1821
- title: Lightweight
@@ -28,41 +31,108 @@ import { onMounted } from 'vue'
2831
import { defineClientComponent } from 'vitepress'
2932
import { VPHomeHero } from 'vitepress/theme'
3033
import { data as initialStarCount } from './count.data.ts'
31-
import { starCount } from './components/starCount.ts'
34+
import { data as initialDownloadCount } from './downloadCount.data.ts'
35+
import { starCount, downloadCount } from './components/starCount.ts'
3236

3337
const Repl = defineClientComponent(() => {
3438
return import('./components/Repl.vue')
3539
})
3640

37-
onMounted(async () => {
38-
if (typeof window !== 'undefined' && document.querySelector) {
39-
const linkEl = document.querySelector('.action a[href="https://github.com/electric-sql/pglite"]')
40-
let countEl = linkEl.querySelector('.count')
41+
function toShortDecimal(x) {
42+
return x.toLocaleString('en-US', {
43+
// add suffixes for thousands, millions, and billions
44+
// the maximum number of decimal places to use
45+
maximumFractionDigits: 1,
46+
// specify the abbreviations to use for the suffixes
47+
notation: 'compact',
48+
compactDisplay: 'short'
49+
});
50+
}
51+
52+
async function renderGitHub() {
53+
const linkEl = document.querySelector('.action a[href="https://github.com/electric-sql/pglite"]')
54+
let countEl = linkEl.querySelector('.count')
4155

42-
if (!countEl) {
43-
countEl = document.createElement('span')
44-
countEl.classList.add('count')
45-
countEl.innerText = `( ${initialStarCount.toLocaleString()} )`;
46-
47-
const icon = document.createElement('span')
48-
icon.classList.add('vpi-social-github')
49-
linkEl.prepend(icon)
56+
if (!countEl) {
57+
countEl = document.createElement('span')
58+
countEl.classList.add('count')
59+
countEl.innerText = `(${toShortDecimal(initialStarCount)})`;
60+
61+
const icon = document.createElement('span')
62+
icon.classList.add('vpi-social-github')
63+
linkEl.prepend(icon)
64+
65+
Array.from(linkEl.childNodes)
66+
.filter(n => n.nodeType === Node.TEXT_NODE && n.textContent.trim())
67+
.forEach(n => {
68+
const span = document.createElement('span')
69+
span.classList.add('action-text')
70+
span.textContent = n.textContent
71+
n.replaceWith(span)
72+
})
73+
}
74+
75+
linkEl.append(countEl)
76+
77+
const count = await starCount(initialStarCount)
78+
79+
let currentCount = Math.max(count - 15, initialStarCount)
80+
const animateCount = () => {
81+
currentCount += 1;
82+
if (currentCount >= count) {
83+
currentCount = count;
84+
clearInterval(intervalId);
5085
}
86+
87+
countEl.innerText = `(${toShortDecimal(currentCount)})`;
88+
};
89+
const intervalId = setInterval(animateCount, 64);
90+
}
91+
92+
async function renderNpmJs() {
93+
const linkEl = document.querySelector('.action a[href="https://www.npmjs.com/package/@electric-sql/pglite"]')
94+
let countEl = linkEl.querySelector('.count')
5195

52-
linkEl.append(countEl)
53-
54-
const count = await starCount(initialStarCount)
55-
56-
let currentCount = Math.max(count - 15, initialStarCount)
57-
const animateCount = () => {
58-
currentCount += 1;
59-
if (currentCount >= count) {
60-
currentCount = count;
61-
clearInterval(intervalId);
62-
}
63-
countEl.innerText = `( ${currentCount.toLocaleString()} )`;
64-
};
65-
const intervalId = setInterval(animateCount, 64);
96+
if (!countEl) {
97+
countEl = document.createElement('span')
98+
countEl.classList.add('count')
99+
countEl.innerText = `(${toShortDecimal(initialDownloadCount)})`;
100+
101+
const icon = document.createElement('span')
102+
icon.classList.add('vpi-social-npm')
103+
linkEl.prepend(icon)
104+
105+
Array.from(linkEl.childNodes)
106+
.filter(n => n.nodeType === Node.TEXT_NODE && n.textContent.trim())
107+
.forEach(n => {
108+
const span = document.createElement('span')
109+
span.classList.add('action-text')
110+
span.textContent = n.textContent
111+
n.replaceWith(span)
112+
})
113+
}
114+
115+
linkEl.append(countEl)
116+
117+
const count = await downloadCount(initialDownloadCount)
118+
119+
let currentCount = Math.max(count - 15, initialDownloadCount)
120+
const animateCount = () => {
121+
currentCount += 1;
122+
if (currentCount >= count) {
123+
currentCount = count;
124+
clearInterval(intervalId);
125+
}
126+
127+
countEl.innerText = `(${toShortDecimal(currentCount)}/wk)`;
128+
};
129+
const intervalId = setInterval(animateCount, 64);
130+
}
131+
132+
onMounted(async () => {
133+
if (typeof window !== 'undefined' && document.querySelector) {
134+
renderGitHub()
135+
renderNpmJs()
66136
}
67137
});
68138

@@ -73,16 +143,50 @@ onMounted(async () => {
73143
display: flex;
74144
align-items: center;
75145
}
146+
.actions a[href="https://www.npmjs.com/package/@electric-sql/pglite"] {
147+
display: flex;
148+
align-items: center;
149+
}
76150
.actions a[href="https://github.com/electric-sql/pglite"] .vpi-social-github {
77151
display: block;
78-
width: 1.42rem;
79-
height: 1.42rem;
80-
margin: 0 0.5rem 0 0;
152+
width: 1.22rem;
153+
height: 1.22rem;
154+
margin: 0 0.3rem 0 0;
81155
position: relative;
82156
}
157+
.actions a[href="https://www.npmjs.com/package/@electric-sql/pglite"] .vpi-social-npm {
158+
display: block;
159+
width: 1.22rem;
160+
height: 1.22rem;
161+
margin: 0 0.3rem 0 0;
162+
position: relative;
163+
}
83164
.actions a[href="https://github.com/electric-sql/pglite"] .count {
84165
margin-left: 0.25rem;
85-
min-width: 55px;
166+
min-width: 45px;
167+
}
168+
.actions a[href="https://www.npmjs.com/package/@electric-sql/pglite"] .count {
169+
margin-left: 0.25rem;
170+
min-width: 45px;
171+
}
172+
173+
@media (max-width: 575px) {
174+
.actions .action-text {
175+
display: none;
176+
}
177+
.actions {
178+
flex-wrap: nowrap !important;
179+
gap: 6px !important;
180+
}
181+
.actions .action .VPButton {
182+
padding: 0 12px !important;
183+
font-size: 13px !important;
184+
}
185+
.actions a[href="https://github.com/electric-sql/pglite"] .count,
186+
.actions a[href="https://www.npmjs.com/package/@electric-sql/pglite"] .count {
187+
margin-left: 0.15rem;
188+
min-width: auto;
189+
}
86190
}
87191
</style>
88192

0 commit comments

Comments
 (0)