Skip to content

Commit 31a0c97

Browse files
posvaposva
committed
docs: add rulekit
1 parent 5e95790 commit 31a0c97

Some content is hidden

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

45 files changed

+320
-0
lines changed

‎packages/docs/.vitepress/theme/components/RuleKitLink.vue

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
<script setup lang="ts">
2+
import { useData } from 'vitepress'
3+
4+
const { site } = useData()
5+
6+
const translations = {
7+
'en-US': 'Vibe code Vue apps with confidence',
8+
'zh-CN': '自信地编写 Vue 应用的 Vibe 代码',
9+
}
10+
</script>
11+
12+
<template>
13+
<div class="rulekit">
14+
<a
15+
href="https://rulekit.dev?from=vuerouter"
16+
target="_blank"
17+
rel="sponsored noopener"
18+
aria-label="Visit RuleKit - curated rules for Cursor, Claude Code, and more (opens in new tab)"
19+
class="rulekit-link"
20+
>
21+
<div class="rulekit-content">
22+
<div class="rulekit-left">
23+
<span class="rulekit-sparkles" aria-hidden="true">✨</span>
24+
<span class="rulekit-text">
25+
<slot>{{ translations[site.lang] || translations['en-US'] }}</slot>
26+
</span>
27+
</div>
28+
<div class="rulekit-right">
29+
<svg
30+
width="1024"
31+
height="1024"
32+
viewBox="0 0 1024 1024"
33+
fill="none"
34+
xmlns="http://www.w3.org/2000/svg"
35+
role="img"
36+
alt="RuleKit logo"
37+
class="rulekit-logo"
38+
>
39+
<path
40+
d="M335 694L353.947 697.225V737L335 733.775V694Z"
41+
fill="currentColor"
42+
/>
43+
<path
44+
d="M355 538.234V673L335 669.766V536.078L355 538.234Z"
45+
fill="currentColor"
46+
/>
47+
<path
48+
d="M259.255 329.5L313.424 338.585V414.78L374.576 425.512V350.39L422.5 359.457L422.529 391.816L399.251 388.374V443.756L375.649 440.537V460.314L313.424 449.576V430.878L287.675 426.585L286.602 367.561L259.255 364V329.5Z"
49+
fill="currentColor"
50+
/>
51+
<path
52+
d="M398.897 113.5L647.031 158.597V199L676.034 205.5V276L836.085 304.623L896.239 362.605V498.968L873.681 516.147V778.5L914.5 792.095L755.522 914.5L180.84 802.832L130.354 738.409V472.125L103.5 457.092V336.835L164.728 270.264L291.48 205.5L321.557 211V176.85L350.56 165.5V139L398.897 113.5ZM379.562 148.933V184L350.56 182.218L349.485 259.527L379.562 263.822V184L582.581 218.725V300.328L622.325 307V224.094L598.693 220.873V188.661L379.562 148.933ZM433.271 218.725V234.831L561.097 257.379V240.2L433.271 218.725ZM291.48 234.831L223.807 272.412L740.484 364.752L802.786 325.024L673.885 302.476L622.325 330L561.097 319V282L433.271 259.527L389.23 285.296L321.557 275V240.2L291.48 234.831ZM180.84 288.517L128.206 343.277V440.537L233.475 461.387L232.401 360.457L259.255 364V446L284.103 449.576V476.42L311.889 480.714V750L373.117 762L374.191 691.165V493.599L399.251 497V472.125L422.5 476.42L422.529 391.816L449.383 396.964V500L543.911 516V414.143L571.839 418.438V388.374L624.474 396.964V423.807L652.402 428V534.5L778.08 551.5V443.756L731 392.244L180.84 288.517ZM831.789 336.835L757.671 383.005L796.341 423.807L871.533 374.416L831.789 336.835ZM807.083 445.281V529.032L871.533 486.083V404.48L807.083 445.281ZM571.839 449.576V521.516L587 524.5V592L606.213 595.603V527.5L624.474 531V458.5L571.839 449.576ZM155.06 472.125V729.5L191.5 778.5L713 880.5L754.448 853.298V579.497L635.215 560.17V601L682.479 609.562V649.29L663.144 647V682.575L682.479 684.723L683.5 814.5L652.402 808.201V839L543.911 819.5V788.874L511.685 783.505V654.5L532.095 658.5V623.52L511.685 620.299V578.424L557.875 585.94V545.138L422.5 521.516L402.12 538.234V654.658V766.326L373.117 762V791.021L311.889 778.5V750L285.035 744.851V512.926L264.5 493.599L155.06 472.125ZM778.08 579.497L780.228 833.971L847.901 781.358V538.234L778.08 579.497ZM561.097 627.5V664.5L543.911 661V788.874L565.394 793.169L567 669L584.729 672V632.5L561.097 627.5ZM611.583 639.626V676.5L628.77 679V802.832L652.402 808.201V682.575L635.215 680.428V643L611.583 639.626Z"
53+
fill="currentColor"
54+
/>
55+
</svg>
56+
<span class="rulekit-title">RuleKit</span>
57+
</div>
58+
</div>
59+
</a>
60+
</div>
61+
</template>
62+
63+
<style scoped>
64+
.rulekit {
65+
margin: 1rem 0;
66+
}
67+
68+
.rulekit-title {
69+
font-family:
70+
'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
71+
'Liberation Mono', 'Courier New', monospace;
72+
}
73+
74+
.rulekit-link {
75+
display: block;
76+
padding: 1rem 1.5rem;
77+
border-radius: 12px;
78+
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
79+
border: 1px solid #dee2e6;
80+
text-decoration: none;
81+
color: #212529;
82+
transition: all 0.3s ease;
83+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
84+
position: relative;
85+
overflow: hidden;
86+
}
87+
88+
.rulekit-link:visited {
89+
color: #212529;
90+
}
91+
92+
.rulekit-link:focus {
93+
outline: 2px solid #0066cc;
94+
outline-offset: 2px;
95+
}
96+
97+
.rulekit-link:focus:not(:focus-visible) {
98+
outline: none;
99+
}
100+
101+
.rulekit-link::before {
102+
content: '';
103+
position: absolute;
104+
top: 0;
105+
left: -100%;
106+
width: 100%;
107+
height: 100%;
108+
background: linear-gradient(
109+
90deg,
110+
transparent,
111+
rgba(255, 255, 255, 0.4),
112+
transparent
113+
);
114+
transition: left 0.6s ease;
115+
}
116+
117+
.rulekit-link:hover::before {
118+
left: 100%;
119+
}
120+
121+
.rulekit-link:hover {
122+
text-decoration: none !important;
123+
transform: translateY(-2px);
124+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
125+
background: linear-gradient(135deg, #f1f3f4 0%, #e2e6ea 100%);
126+
}
127+
128+
.rulekit-content {
129+
display: flex;
130+
align-items: center;
131+
justify-content: space-between;
132+
gap: 1rem;
133+
position: relative;
134+
z-index: 2;
135+
}
136+
137+
.rulekit-left {
138+
display: flex;
139+
align-items: center;
140+
gap: 1rem;
141+
}
142+
143+
.rulekit-right {
144+
display: flex;
145+
align-items: center;
146+
gap: 0.5rem;
147+
}
148+
149+
.rulekit-sparkles {
150+
font-size: 1.5rem;
151+
}
152+
153+
.rulekit-logo {
154+
width: 2rem;
155+
height: 2rem;
156+
flex-shrink: 0;
157+
color: #495057;
158+
}
159+
160+
.rulekit-text {
161+
font-weight: 500;
162+
font-family:
163+
'Spectral', ui-serif, system-ui, sans-serif, 'Apple Color Emoji',
164+
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
165+
font-size: 0.95rem;
166+
line-height: 1.4;
167+
}
168+
169+
/* Dark mode styles */
170+
.dark .rulekit-link {
171+
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
172+
border-color: #404040;
173+
color: #e5e5e5;
174+
}
175+
176+
.dark .rulekit-link::before {
177+
background: linear-gradient(
178+
90deg,
179+
transparent,
180+
rgba(255, 255, 255, 0.15),
181+
transparent
182+
);
183+
}
184+
185+
.dark .rulekit-link:hover {
186+
text-decoration: none !important;
187+
background: linear-gradient(135deg, #262626 0%, #363636 100%);
188+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
189+
}
190+
191+
.dark .rulekit-logo {
192+
color: #ffffff;
193+
}
194+
195+
.dark .rulekit-text {
196+
color: #e5e5e5;
197+
}
198+
199+
.dark .rulekit-link:visited {
200+
color: #e5e5e5;
201+
}
202+
203+
.dark .rulekit-link:focus {
204+
outline-color: #66b3ff;
205+
}
206+
</style>

‎packages/docs/.vitepress/theme/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import './styles/playground-links.css'
1111
import VueSchoolLink from './components/VueSchoolLink.vue'
1212
import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
1313
import MasteringPiniaLink from './components/MasteringPiniaLink.vue'
14+
import RuleKitLink from './components/RuleKitLink.vue'
1415
import status from '../translation-status.json'
1516

1617
const i18nLabels = {
@@ -33,6 +34,7 @@ const theme: Theme = {
3334
app.component('VueSchoolLink', VueSchoolLink)
3435
app.component('VueMasteryLogoLink', VueMasteryLogoLink)
3536
app.component('MasteringPiniaLink', MasteringPiniaLink)
37+
app.component('RuleKitLink', RuleKitLink)
3638
},
3739
}
3840

‎packages/docs/.vitepress/theme/styles/home-links.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,28 @@ a.cta.vueschool::after {
9999
border-left: 7px solid currentColor;
100100
}
101101

102+
a.cta.rulekit {
103+
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
104+
}
105+
106+
a.cta.rulekit::before {
107+
content: '';
108+
display: inline-block;
109+
width: 16px;
110+
height: 16px;
111+
background-image: url('/rulekit-logo.svg');
112+
background-size: 16px;
113+
background-repeat: no-repeat;
114+
background-position: center;
115+
margin-right: 0.5em;
116+
vertical-align: middle;
117+
filter: brightness(0); /* Make it black by default */
118+
}
119+
120+
html.dark a.cta.rulekit::before {
121+
filter: brightness(0) invert(1); /* Make it white in dark mode */
122+
}
123+
102124
@media (max-width: 420px) {
103125
a.cta.cta.vue-mastery {
104126
max-width: 320px;

‎packages/docs/cookbook/composables.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ export const useAuthStore = defineStore('auth', {
2121

2222
Keep in mind that **you can only return writable state** (e.g. a `ref()`). Here are some examples of composables that you can use:
2323

24+
<RuleKitLink />
25+
2426
- [useLocalStorage](https://vueuse.org/core/useLocalStorage/)
2527
- [useAsyncState](https://vueuse.org/core/useAsyncState/)
2628

‎packages/docs/cookbook/composing-stores.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Composing Stores
22

3+
<RuleKitLink />
4+
35
Composing stores is about having stores that use each other, and this is supported in Pinia. There is one rule to follow:
46

57
If **two or more stores use each other**, they cannot create an infinite loop through _getters_ or _actions_. They cannot **both** directly read each other state in their setup function:

‎packages/docs/cookbook/hot-module-replacement.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# HMR (Hot Module Replacement)
22

3+
<RuleKitLink />
4+
35
Pinia supports Hot Module replacement so you can edit your stores and interact with them directly in your app without reloading the page, allowing you to keep the existing state, add, or even remove state, actions, and getters.
46

57
At the moment, only [Vite](https://vitejs.dev/guide/api-hmr.html#hmr-api) is officially supported but any bundler implementing the `import.meta.hot` spec should work (e.g. [webpack](https://webpack.js.org/api/module-variables/#importmetawebpackhot) seems to use `import.meta.webpackHot` instead of `import.meta.hot`).

‎packages/docs/cookbook/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Cookbook
22

3+
<RuleKitLink />
4+
35
- [Migrating from Vuex ≤4](./migration-vuex.md): A migration guide for converting Vuex ≤4 projects.
46
- [HMR](./hot-module-replacement.md): How to activate hot module replacement and improve the developer experience.
57
- [Testing Stores (WIP)](./testing.md): How to unit test Stores and mock them in component unit tests.

‎packages/docs/cookbook/migration-v1-v2.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Migrating from 0.x (v1) to v2
22

3+
<RuleKitLink />
4+
35
Starting at version `2.0.0-rc.4`, pinia supports both Vue 2 and Vue 3! This means, all new updates will be applied to this version 2 so both Vue 2 and Vue 3 users can benefit from it. If you are using Vue 3, this doesn't change anything for you as you were already using the rc and you can check [the CHANGELOG](https://github.com/vuejs/pinia/blob/v2/packages/pinia/CHANGELOG.md) for a detailed explanation of everything that changed. Otherwise, **this guide is for you**!
46

57
## Deprecations

‎packages/docs/cookbook/migration-v2-v3.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Migrating from v2 to v3
22

3+
<RuleKitLink />
4+
35
Pinia v3 is a _boring_ major release with no new features. It drops deprecated APIs and updates major dependencies. It only supports Vue 3. If you are using Vue 2, you can keep using v2. If you need help, [book help with Pinia's author](https://cal.com/posva/consultancy).
46

57
For most users, the migration should require **no change**. This guide is here to help you in case you encounter any issues.

‎packages/docs/cookbook/migration-vuex.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ The easiest way to transition that concept to be used with Pinia is that each mo
1414

1515
How you choose to restructure your Vuex modules into Pinia stores is entirely up to you, but here is one suggestion:
1616

17+
<RuleKitLink />
18+
1719
```bash
1820
# Vuex example (assuming namespaced modules)
1921
src

0 commit comments

Comments
 (0)