Skip to content

Commit ba11211

Browse files
cpojercpojer
committed
chore: Update website with latest feature set + download stats.
1 parent 29e1646 commit ba11211

35 files changed

Lines changed: 736 additions & 1124 deletions

‎docs/.vitepress/theme/components/home/CoreFeature3Col.vue‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
<script setup lang="ts">
2-
import bunIcon from '@local-assets/icons/bun.png';
3-
import denoIcon from '@local-assets/icons/deno.png';
42
import nodeIcon from '@local-assets/icons/node.png';
53
import reactIcon from '@local-assets/icons/react.png';
64
import solidIcon from '@local-assets/icons/solid.png';
75
import svelteIcon from '@local-assets/icons/svelte.png';
86
import vueIcon from '@local-assets/icons/vue.png';
9-
import superSetImage from '@local-assets/superset.png';
107
118
import StackedBlock from './StackedBlock.vue';
129
</script>
@@ -17,19 +14,40 @@ import StackedBlock from './StackedBlock.vue';
1714
>
1815
<div class="p-5 lg:p-10 flex flex-col justify-between">
1916
<div class="flex flex-col gap-3 h-30 lg:h-auto">
20-
<h5>Runtime Agnostic</h5>
17+
<h5>Manages your runtime and package manager</h5>
2118
<p>
22-
<span class="pr-1">Works with</span> <code>node</code> <code>bun</code> <code>deno</code>
19+
<span class="pr-1">Use</span> <code>node</code> automatically, with the right package
20+
manager selected for every project.
2321
</p>
2422
</div>
25-
<ul class="stacked-blocks">
23+
<div class="flex items-center gap-4 flex-wrap">
2624
<StackedBlock :src="nodeIcon" alt="node" href="https://nodejs.org" />
27-
<StackedBlock :src="bunIcon" alt="bun" href="https://bun.sh" />
28-
<StackedBlock :src="denoIcon" alt="deno" href="https://deno.com" />
29-
</ul>
25+
<div class="flex flex-wrap gap-2">
26+
<code>pnpm</code>
27+
<code>npm</code>
28+
<code>yarn</code>
29+
</div>
30+
</div>
3031
</div>
3132
<div class="p-5 lg:p-10 flex flex-col justify-between">
32-
<h5>Powering your favorite frameworks</h5>
33+
<div class="flex flex-col gap-3 h-30 lg:h-auto">
34+
<h5>Simplifies everyday development</h5>
35+
<p>One configuration file and one consistent flow of commands across your whole stack.</p>
36+
</div>
37+
<div class="flex flex-wrap gap-2">
38+
<code>vp env</code>
39+
<code>vp install</code>
40+
<code>vp dev</code>
41+
<code>vp check</code>
42+
<code>vp build</code>
43+
<code>vp run</code>
44+
</div>
45+
</div>
46+
<div class="p-5 lg:p-10 flex flex-col justify-between">
47+
<div class="flex flex-col gap-3 h-30 lg:h-auto">
48+
<h5>Powering your favorite frameworks</h5>
49+
<p>Supports every framework built on Vite.</p>
50+
</div>
3351
<div class="flex gap-3 items-center">
3452
<ul class="stacked-blocks">
3553
<StackedBlock :src="reactIcon" alt="react" href="https://react.dev" />
@@ -40,16 +58,6 @@ import StackedBlock from './StackedBlock.vue';
4058
<p class="text-base text-primary">+ 20 more</p>
4159
</div>
4260
</div>
43-
<div class="p-5 lg:p-10 flex flex-col gap-3 relative">
44-
<h5>Drop-in superset of Vite</h5>
45-
<p class="text-balance">Smooth, incremental adoption if you are already using Vite</p>
46-
<img
47-
loading="lazy"
48-
:src="superSetImage"
49-
alt="Vite+ is a superset of Vite"
50-
class="w-24 lg:w-36 absolute right-5 bottom-5"
51-
/>
52-
</div>
5361
</section>
5462
</template>
5563

‎docs/.vitepress/theme/components/home/FeatureCheck.vue‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<script setup lang="ts">
2+
import oxcIcon from '@assets/icons/oxc-light.svg';
3+
</script>
4+
5+
<template>
6+
<section id="feature-check" class="wrapper border-t grid md:grid-cols-2 divide-x divide-nickel">
7+
<div class="px-5 py-6 md:p-10 flex flex-col justify-between gap-15">
8+
<div class="flex flex-col gap-5">
9+
<span class="text-grey text-xs font-mono uppercase tracking-wide">Vite+ check</span>
10+
<h4 class="text-white">Format, lint, and type-check in one pass</h4>
11+
<p class="text-white/70 text-base max-w-[25rem] text-pretty">
12+
Keep every repo consistent with one command powered by Oxlint, Oxfmt, and
13+
<code class="mx-1 outline-none bg-nickel/50 text-aqua">tsgo</code>.
14+
</p>
15+
<ul class="checkmark-list">
16+
<li>
17+
<code class="mx-1 outline-none bg-nickel/50 text-aqua">Prettier</code> compatible
18+
formatting
19+
</li>
20+
<li>
21+
600+ <code class="mx-1 outline-none bg-nickel/50 text-aqua">ESLint</code> compatible
22+
rules
23+
</li>
24+
<li>
25+
Type-aware linting and fast type checks with
26+
<code class="mx-1 outline-none bg-nickel/50 text-aqua">tsgo</code>
27+
</li>
28+
<li>
29+
<code class="mx-1 outline-none bg-nickel/50 text-aqua">vp check --fix</code> auto-fixes
30+
where possible
31+
</li>
32+
</ul>
33+
</div>
34+
<div class="flex flex-wrap gap-3">
35+
<div class="px-3 py-1.5 bg-slate rounded w-fit flex gap-2 items-center">
36+
<span class="text-grey text-sm font-mono hidden md:inline">Powered by</span>
37+
<a href="https://oxc.rs/" target="_blank">
38+
<figure class="project-icon">
39+
<img loading="lazy" :src="oxcIcon" alt="Oxc" class="w-[20px] h-[12px]" />
40+
<figcaption>Oxc / Oxlint</figcaption>
41+
</figure>
42+
</a>
43+
</div>
44+
<div class="px-3 py-1.5 bg-slate rounded w-fit flex gap-2 items-center">
45+
<span class="text-grey text-sm font-mono hidden md:inline">Powered by</span>
46+
<a href="https://oxc.rs/docs/guide/usage/formatter" target="_blank">
47+
<figure class="project-icon">
48+
<img loading="lazy" :src="oxcIcon" alt="Oxc" class="w-[20px] h-[12px]" />
49+
<figcaption>Oxc / Oxfmt</figcaption>
50+
</figure>
51+
</a>
52+
</div>
53+
</div>
54+
</div>
55+
<div class="flex flex-col min-h-[22rem] sm:min-h-[30rem]">
56+
<div class="bg-oxc pl-10 h-full flex flex-col justify-center overflow-clip">
57+
<div
58+
class="mr-5 sm:mr-10 px-5 py-6 relative bg-slate rounded-tl rounded-bl outline-1 outline-offset-[2px] outline-white/20 font-mono text-sm leading-[1.5rem] text-white"
59+
>
60+
<div class="text-white">$ vp check</div>
61+
<div class="h-4" />
62+
<div class="text-grey">info: <span class="terminal-blue">vp fmt --check</span></div>
63+
<div>
64+
Checked <span class="terminal-blue">42 files</span>.
65+
<span class="text-zest">0 issues</span>.
66+
</div>
67+
<div class="h-4" />
68+
<div class="text-grey">
69+
info: <span class="terminal-blue">vp lint --type-aware --type-check</span>
70+
</div>
71+
<div class="text-grey">
72+
Found <span class="text-white">0 warnings</span> and
73+
<span class="text-white">0 errors</span>.
74+
</div>
75+
<div class="text-grey">
76+
<span class="text-zest">✓</span> Finished in <span class="text-white">184ms</span> on
77+
<span class="text-white">42 files</span>.
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
</section>
83+
</template>
84+
85+
<style scoped>
86+
.bg-oxc {
87+
background-image: url('@local-assets/backgrounds/oxc.jpg');
88+
background-size: cover;
89+
background-position: center;
90+
}
91+
</style>

‎docs/.vitepress/theme/components/home/FeatureDevBuild.vue‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup lang="ts">
22
import rolldownIcon from '@assets/icons/rolldown-light.svg';
33
import viteIcon from '@assets/icons/vite-light.svg';
4-
import devTerminal from '@local-assets/terminal-features/dev.svg';
54
</script>
65

76
<template>
@@ -51,9 +50,35 @@ import devTerminal from '@local-assets/terminal-features/dev.svg';
5150
<div class="flex flex-col min-h-[22rem] sm:min-h-[30rem]">
5251
<div class="bg-vite pl-10 h-full flex flex-col justify-center overflow-clip">
5352
<div
54-
class="block px-5 py-6 relative bg-slate rounded-tl rounded-bl outline-1 outline-offset-[2px] outline-white/20"
53+
class="mr-5 sm:mr-10 px-5 py-6 relative bg-slate rounded-tl rounded-bl outline-1 outline-offset-[2px] outline-white/20 font-mono text-sm leading-[1.5rem] text-white"
5554
>
56-
<img loading="lazy" :src="devTerminal" alt="vp build terminal command" />
55+
<div class="text-white">$ vp build</div>
56+
<div class="h-4" />
57+
<div class="text-grey">
58+
VITE+ <span class="terminal-blue">building for production</span>
59+
</div>
60+
<div class="text-grey">
61+
<span class="text-zest">✓</span> Transformed <span class="text-white">128 modules</span>
62+
</div>
63+
<div class="h-4" />
64+
<div class="text-grey">
65+
<span class="text-white">dist/index.html</span>
66+
<span class="inline-block w-2" aria-hidden="true"></span>
67+
<span class="terminal-blue">0.42 kB</span>
68+
</div>
69+
<div class="text-grey">
70+
<span class="text-white">dist/assets/index.css</span>
71+
<span class="inline-block w-2" aria-hidden="true"></span>
72+
<span class="terminal-blue">5.1 kB</span>
73+
</div>
74+
<div class="text-grey">
75+
<span class="text-white">dist/assets/index.js</span>
76+
<span class="inline-block w-2" aria-hidden="true"></span>
77+
<span class="terminal-blue">46.2 kB</span>
78+
</div>
79+
<div class="text-grey">
80+
<span class="text-zest">✓</span> Built in <span class="text-white">421ms</span>
81+
</div>
5782
</div>
5883
</div>
5984
</div>

‎docs/.vitepress/theme/components/home/FeatureFormat.vue‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎docs/.vitepress/theme/components/home/FeatureLib.vue‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎docs/.vitepress/theme/components/home/FeatureLint.vue‎

Lines changed: 0 additions & 51 deletions
This file was deleted.

0 commit comments

Comments
 (0)