Skip to content

Commit dab31d4

Browse files
posvaposva
committed
docs: rulekit link
1 parent 1126acd commit dab31d4

File tree

4 files changed

+215
-15
lines changed

4 files changed

+215
-15
lines changed

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

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
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+
transform: translateY(-2px);
123+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
124+
background: linear-gradient(135deg, #f1f3f4 0%, #e2e6ea 100%);
125+
}
126+
127+
.rulekit-content {
128+
display: flex;
129+
align-items: center;
130+
justify-content: space-between;
131+
gap: 1rem;
132+
position: relative;
133+
z-index: 2;
134+
}
135+
136+
.rulekit-left {
137+
display: flex;
138+
align-items: center;
139+
gap: 1rem;
140+
}
141+
142+
.rulekit-right {
143+
display: flex;
144+
align-items: center;
145+
gap: 0.5rem;
146+
}
147+
148+
.rulekit-sparkles {
149+
font-size: 1.5rem;
150+
}
151+
152+
.rulekit-logo {
153+
width: 2rem;
154+
height: 2rem;
155+
flex-shrink: 0;
156+
color: #495057;
157+
}
158+
159+
.rulekit-text {
160+
font-weight: 500;
161+
font-family:
162+
'Spectral', ui-serif, system-ui, sans-serif, 'Apple Color Emoji',
163+
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
164+
font-size: 0.95rem;
165+
line-height: 1.4;
166+
}
167+
168+
/* Dark mode styles */
169+
.dark .rulekit-link {
170+
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
171+
border-color: #404040;
172+
color: #e5e5e5;
173+
}
174+
175+
.dark .rulekit-link::before {
176+
background: linear-gradient(
177+
90deg,
178+
transparent,
179+
rgba(255, 255, 255, 0.15),
180+
transparent
181+
);
182+
}
183+
184+
.dark .rulekit-link:hover {
185+
background: linear-gradient(135deg, #262626 0%, #363636 100%);
186+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
187+
}
188+
189+
.dark .rulekit-logo {
190+
color: #ffffff;
191+
}
192+
193+
.dark .rulekit-text {
194+
color: #e5e5e5;
195+
}
196+
197+
.dark .rulekit-link:visited {
198+
color: #e5e5e5;
199+
}
200+
201+
.dark .rulekit-link:focus {
202+
outline-color: #66b3ff;
203+
}
204+
</style>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import './styles/vars.css'
88
import VueSchoolLink from './components/VueSchoolLink.vue'
99
import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
1010
import status from '../translation-status.json'
11+
import RuleKitLink from './components/RuleKitLink.vue'
1112

1213
const i18nLabels = {
1314
zh: '该翻译已同步到了 ${date} 的版本，其对应的 commit hash 是 <code>${hash}</code>。',
@@ -25,6 +26,7 @@ const theme: Theme = {
2526

2627
enhanceApp({ app }) {
2728
app.component('VueSchoolLink', VueSchoolLink)
29+
app.component('RuleKitLink', RuleKitLink)
2830
app.component('VueMasteryLogoLink', VueMasteryLogoLink)
2931
},
3032

‎packages/docs/guide/index.md‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ Vue Router is built on Vue's component system. You configure **routes** to tell
1414
This guide will assume that you are already familiar with Vue itself. You don't need to be a Vue expert, but you may occasionally need to refer back to [the core Vue documentation](https://vuejs.org/) for more information about certain features.
1515
:::
1616

17+
<RuleKitLink />
18+
1719
## An example
1820

1921
To introduce some of the main ideas, we're going to consider this example:
@@ -27,9 +29,7 @@ Let's start by looking at the root component, `App.vue`.
2729
```vue
2830
<template>
2931
<h1>Hello App!</h1>
30-
<p>
31-
<strong>Current route path:</strong> {{ $route.fullPath }}
32-
</p>
32+
<p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
3333
<nav>
3434
<RouterLink to="/">Go to Home</RouterLink>
3535
<RouterLink to="/about">Go to About</RouterLink>
@@ -91,9 +91,7 @@ The `history` option controls how routes are mapped onto URLs and vice versa. Fo
9191
Once we've created our router instance, we need to register it as a plugin by calling `use()` on our application:
9292

9393
```js
94-
createApp(App)
95-
.use(router)
96-
.mount('#app')
94+
createApp(App).use(router).mount('#app')
9795
```
9896

9997
Or, equivalently:
@@ -212,4 +210,3 @@ The components `RouterView` and `RouterLink` are both [registered globally](http
212210
In templates, component names can be written in either PascalCase or kebab-case. Vue's template compiler supports either format, so `<RouterView>` and `<router-view>` are usually equivalent. You should follow whatever convention is used within your project.
213211

214212
If you're using in-DOM templates then [the usual caveats](https://vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats) apply: component names must be written in kebab-case and self-closing tags are not supported. So rather than writing `<RouterView />`, you would need to use `<router-view></router-view>` instead.
215-

‎packages/docs/zh/guide/index.md‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ Vue Router 基于 Vue 的组件系统构建，你可以通过配置**路由**来
1414
这份指南假设你已经对 Vue 有了一定的了解。你不必是 Vue 的专家，但你也许偶尔需要查看 [Vue 的文档](https://cn.vuejs.org/)来了解某些特性。
1515
:::
1616

17+
<RuleKitLink />
18+
1719
## 示例
1820

1921
为了引入一些核心概念，我们将使用如下的示例：
@@ -27,9 +29,7 @@ Vue Router 基于 Vue 的组件系统构建，你可以通过配置**路由**来
2729
```vue
2830
<template>
2931
<h1>Hello App!</h1>
30-
<p>
31-
<strong>Current route path:</strong> {{ $route.fullPath }}
32-
</p>
32+
<p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
3333
<nav>
3434
<RouterLink to="/">Go to Home</RouterLink>
3535
<RouterLink to="/about">Go to About</RouterLink>
@@ -82,9 +82,7 @@ const router = createRouter({
8282
一旦创建了我们的路由器实例，我们就需要将其注册为插件，这一步骤可以通过调用 `use()` 来完成。
8383

8484
```js
85-
createApp(App)
86-
.use(router)
87-
.mount('#app')
85+
createApp(App).use(router).mount('#app')
8886
```
8987

9088
或等价地：
@@ -126,7 +124,6 @@ export default {
126124

127125
这里调用了 `push()`，这是用于[编程式导航](./essentials/navigation)的方法。我们会在后面详细了解。
128126

129-
130127
对于组合式 API，我们不能通过 `this` 访问组件实例，所以 Vue Router 给我们提供了一些组合式函数。演练场示例中的 `AboutView.vue` 组件使用了这种方法：
131128

132129
```vue
@@ -143,7 +140,7 @@ const search = computed({
143140
},
144141
set(search) {
145142
router.replace({ query: { search } })
146-
}
143+
},
147144
})
148145
</script>
149146
```

0 commit comments

Comments
 (0)