Skip to content

Commit 664991d

Browse files
axpnetaxpnet
committed
Add provider plan snapshots
1 parent aef0dce commit 664991d

59 files changed

Lines changed: 1107 additions & 17 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.vitepress/theme/components/ProviderPlanCard.vue‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue'
3+
import { providerPlans, type ProviderBadge } from '../data/providerPlans'
4+
5+
const props = defineProps<{
6+
id: string
7+
}>()
8+
9+
const plan = computed(() => providerPlans[props.id])
10+
11+
const badgeText: Record<ProviderBadge, string> = {
12+
FREE: 'FREE',
13+
PAY: 'PAY',
14+
TRIAL: 'TRIAL',
15+
CARD: 'CARD',
16+
BYO: 'BYO',
17+
'SELF-HOST': 'SELF-HOST',
18+
LOCAL: 'LOCAL',
19+
}
20+
</script>
21+
22+
<template>
23+
<section v-if="plan" class="provider-plan-card" aria-label="Provider plan snapshot">
24+
<div class="provider-plan-card__header">
25+
<div>
26+
<p class="provider-plan-card__eyebrow">Plan snapshot</p>
27+
<h2>{{ plan.name }}</h2>
28+
</div>
29+
<div class="provider-plan-card__badges" aria-label="Pricing badges">
30+
<span
31+
v-for="badge in plan.badges"
32+
:key="badge"
33+
class="provider-plan-card__badge"
34+
:class="`provider-plan-card__badge--${badge.toLowerCase().replace('-', '')}`"
35+
>
36+
{{ badgeText[badge] }}
37+
</span>
38+
</div>
39+
</div>
40+
41+
<dl class="provider-plan-card__grid">
42+
<div>
43+
<dt>Free storage / trial</dt>
44+
<dd>{{ plan.storage }}</dd>
45+
</div>
46+
<div>
47+
<dt>Separate limits</dt>
48+
<dd>{{ plan.limits }}</dd>
49+
</div>
50+
<div>
51+
<dt>Billing trigger</dt>
52+
<dd>{{ plan.billing }}</dd>
53+
</div>
54+
<div>
55+
<dt>Best fit</dt>
56+
<dd>{{ plan.bestFor }}</dd>
57+
</div>
58+
</dl>
59+
60+
<div class="provider-plan-card__tip">
61+
<strong>Cost hygiene:</strong>
62+
<span>{{ plan.costTip }}</span>
63+
</div>
64+
65+
<p class="provider-plan-card__source">
66+
Checked {{ plan.checked }}:
67+
<a :href="plan.sourceUrl" target="_blank" rel="noreferrer">{{ plan.sourceLabel }}</a>
68+
</p>
69+
</section>
70+
<section v-else class="provider-plan-card provider-plan-card--missing" aria-label="Missing provider plan snapshot">
71+
Missing provider plan data for <code>{{ id }}</code>.
72+
</section>
73+
</template>
74+

‎.vitepress/theme/custom.css‎

Lines changed: 180 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,14 +163,193 @@
163163

164164
/* Tables */
165165
.vp-doc table {
166+
display: block;
167+
max-width: 100%;
168+
overflow-x: auto;
166169
border-radius: 8px;
167-
overflow: hidden;
168170
}
169171

170172
.dark .vp-doc table th {
171173
background-color: var(--vp-c-bg-soft);
172174
}
173175

176+
/* Provider plan snapshots */
177+
.provider-plan-card {
178+
margin: 1.25rem 0 2rem;
179+
padding: 1rem;
180+
border: 1px solid var(--vp-c-divider);
181+
border-radius: 8px;
182+
background: var(--vp-c-bg-soft);
183+
}
184+
185+
.provider-plan-card__header {
186+
display: flex;
187+
align-items: flex-start;
188+
justify-content: space-between;
189+
gap: 1rem;
190+
margin-bottom: 0.9rem;
191+
}
192+
193+
.provider-plan-card__eyebrow {
194+
margin: 0 0 0.15rem;
195+
color: var(--vp-c-text-2);
196+
font-size: 0.78rem;
197+
font-weight: 700;
198+
text-transform: uppercase;
199+
letter-spacing: 0.04em;
200+
}
201+
202+
.provider-plan-card h2 {
203+
margin: 0;
204+
padding: 0;
205+
border: 0;
206+
font-size: 1.15rem;
207+
line-height: 1.25;
208+
}
209+
210+
.provider-plan-card__badges {
211+
display: flex;
212+
flex-wrap: wrap;
213+
justify-content: flex-end;
214+
gap: 0.35rem;
215+
}
216+
217+
.provider-plan-card__badge {
218+
display: inline-flex;
219+
align-items: center;
220+
min-height: 24px;
221+
padding: 0.18rem 0.55rem;
222+
border-radius: 999px;
223+
font-size: 0.72rem;
224+
font-weight: 800;
225+
letter-spacing: 0.03em;
226+
border: 1px solid transparent;
227+
}
228+
229+
.provider-plan-card__badge--free {
230+
color: #166534;
231+
background: #dcfce7;
232+
border-color: #86efac;
233+
}
234+
235+
.provider-plan-card__badge--pay,
236+
.provider-plan-card__badge--card {
237+
color: #9a3412;
238+
background: #ffedd5;
239+
border-color: #fdba74;
240+
}
241+
242+
.provider-plan-card__badge--trial {
243+
color: #075985;
244+
background: #e0f2fe;
245+
border-color: #7dd3fc;
246+
}
247+
248+
.provider-plan-card__badge--byo,
249+
.provider-plan-card__badge--selfhost,
250+
.provider-plan-card__badge--local {
251+
color: #374151;
252+
background: #f3f4f6;
253+
border-color: #d1d5db;
254+
}
255+
256+
.dark .provider-plan-card__badge--free {
257+
color: #bbf7d0;
258+
background: rgba(22, 101, 52, 0.32);
259+
border-color: rgba(134, 239, 172, 0.35);
260+
}
261+
262+
.dark .provider-plan-card__badge--pay,
263+
.dark .provider-plan-card__badge--card {
264+
color: #fed7aa;
265+
background: rgba(154, 52, 18, 0.32);
266+
border-color: rgba(253, 186, 116, 0.35);
267+
}
268+
269+
.dark .provider-plan-card__badge--trial {
270+
color: #bae6fd;
271+
background: rgba(7, 89, 133, 0.32);
272+
border-color: rgba(125, 211, 252, 0.35);
273+
}
274+
275+
.dark .provider-plan-card__badge--byo,
276+
.dark .provider-plan-card__badge--selfhost,
277+
.dark .provider-plan-card__badge--local {
278+
color: #e5e7eb;
279+
background: rgba(75, 85, 99, 0.32);
280+
border-color: rgba(156, 163, 175, 0.35);
281+
}
282+
283+
.provider-plan-card__grid {
284+
display: grid;
285+
grid-template-columns: repeat(2, minmax(0, 1fr));
286+
gap: 0.75rem;
287+
margin: 0;
288+
}
289+
290+
.provider-plan-card__grid div {
291+
min-width: 0;
292+
padding: 0.75rem;
293+
border: 1px solid var(--vp-c-divider);
294+
border-radius: 6px;
295+
background: var(--vp-c-bg);
296+
}
297+
298+
.provider-plan-card__grid dt {
299+
margin-bottom: 0.25rem;
300+
color: var(--vp-c-text-2);
301+
font-size: 0.78rem;
302+
font-weight: 700;
303+
}
304+
305+
.provider-plan-card__grid dd {
306+
margin: 0;
307+
color: var(--vp-c-text-1);
308+
font-size: 0.9rem;
309+
line-height: 1.45;
310+
}
311+
312+
.provider-plan-card__tip {
313+
display: flex;
314+
gap: 0.35rem;
315+
margin-top: 0.85rem;
316+
padding: 0.7rem 0.8rem;
317+
border-left: 3px solid var(--vp-c-brand-1);
318+
border-radius: 6px;
319+
background: var(--vp-c-bg);
320+
font-size: 0.9rem;
321+
line-height: 1.45;
322+
}
323+
324+
.provider-plan-card__source {
325+
margin: 0.75rem 0 0;
326+
color: var(--vp-c-text-2);
327+
font-size: 0.8rem;
328+
}
329+
330+
.provider-plan-card--missing {
331+
color: var(--vp-c-danger-1);
332+
}
333+
334+
@media (max-width: 720px) {
335+
.provider-plan-card__header {
336+
display: block;
337+
}
338+
339+
.provider-plan-card__badges {
340+
justify-content: flex-start;
341+
margin-top: 0.75rem;
342+
}
343+
344+
.provider-plan-card__grid {
345+
grid-template-columns: 1fr;
346+
}
347+
348+
.provider-plan-card__tip {
349+
display: block;
350+
}
351+
}
352+
174353
/* Code blocks */
175354
.vp-doc div[class*="language-"] {
176355
border-radius: 8px !important;

0 commit comments

Comments
 (0)