onixbyte/homepage
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add skills

Browse Source
This commit is contained in:
siujamo
2026-05-20 01:04:37 -05:00
parent 60093fa3bb
commit fa330947b9
8 changed files with 793 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/rspress-custom-theme/references/css-variables.md
+143
View File
@@ -0,0 +1,143 @@
# CSS Variables Reference
Complete list of CSS variables exposed by Rspress for theme customization. Override these in `theme/index.css` or via `globalStyles` in `rspress.config.ts`.
For dark mode overrides, wrap variables in `.dark { ... }`.
Official reference: <https://rspress.rs/ui/vars>
---
## Brand Colors
| Variable | Light Default | Dark Default |
| ---------------------- | --------------------------- | ------------ |
| `--rp-c-brand` | `#0095ff` | (same) |
| `--rp-c-brand-light` | `#33adff` | (same) |
| `--rp-c-brand-lighter` | `#c6e0fd` | (same) |
| `--rp-c-brand-dark` | `#0077ff` | (same) |
| `--rp-c-brand-darker` | `#005fcc` | (same) |
| `--rp-c-brand-tint` | `rgba(127, 163, 255, 0.16)` | (same) |
## Background
| Variable | Light Default | Dark Default |
| ---------------- | ------------- | ------------ |
| `--rp-c-bg` | `#ffffff` | `#121212` |
| `--rp-c-bg-soft` | `#f8f8f9` | `#292e37` |
| `--rp-c-bg-mute` | `#f1f1f1` | `#343a46` |
| `--rp-c-bg-alt` | `#fff` | `#000` |
## Text
| Variable | Light Default | Dark Default |
| ------------------------- | --------------------------- | --------------------------- |
| `--rp-c-text-0` | `#000000` | `#ffffff` |
| `--rp-c-text-1` | `#242424` | `rgba(255, 255, 245, 0.93)` |
| `--rp-c-text-2` | `rgba(0, 0, 0, 0.7)` | `rgba(255, 255, 245, 0.65)` |
| `--rp-c-text-3` | `rgba(60, 60, 60, 0.33)` | `rgba(235, 235, 235, 0.38)` |
| `--rp-c-text-4` | `rgba(60, 60, 60, 0.18)` | `rgba(235, 235, 235, 0.18)` |
| `--rp-c-text-code` | `#476582` | `#c9def1` |
| `--rp-c-text-code-bg` | `rgba(153, 161, 179, 0.08)` | `rgba(255, 255, 255, 0.08)` |
| `--rp-c-text-code-border` | `rgba(0, 0, 0, 0.05)` | `rgba(255, 255, 255, 0.05)` |
| `--rp-c-link` | `var(--rp-c-brand-dark)` | `var(--rp-c-brand-light)` |
## Dividers
| Variable | Light Default | Dark Default |
| ---------------------- | --------------------- | ------------------------ |
| `--rp-c-divider` | `rgba(0, 0, 0, 0.25)` | `rgba(84, 84, 84, 0.65)` |
| `--rp-c-divider-light` | `rgba(0, 0, 0, 0.12)` | `rgba(84, 84, 84, 0.48)` |
## Gray Scale
| Variable | Default |
| --------------------- | --------- |
| `--rp-c-gray` | `#8e8e8e` |
| `--rp-c-gray-light-1` | `#aeaeae` |
| `--rp-c-gray-light-2` | `#c7c7c7` |
| `--rp-c-gray-light-3` | `#d1d1d1` |
| `--rp-c-gray-light-4` | `#e5e5e5` |
| `--rp-c-gray-light-5` | `#f2f2f2` |
## Layout (Radius & Shadows)
| Variable | Default |
| --------------------------------------- | ---------------------- |
| `--rp-radius` | `1rem` |
| `--rp-radius-small` | `0.5rem` |
| `--rp-radius-large` | `1.5rem` |
| `--rp-shadow-1` through `--rp-shadow-5` | 5 levels of box-shadow |
## Code Block
| Variable | Light Default | Dark Default |
| ------------------------ | ------------------------------------- | -------------------- |
| `--rp-code-font-size` | `0.875rem` | (same) |
| `--rp-code-title-bg` | `#f8f8f9` | `#191919` |
| `--rp-code-block-color` | `rgb(46, 52, 64)` | `rgb(229, 231, 235)` |
| `--rp-code-block-bg` | `var(--rp-c-bg)` | (same) |
| `--rp-code-block-border` | `1px solid var(--rp-c-divider-light)` | (same) |
| `--rp-code-block-shadow` | `none` | (same) |
## Shiki Syntax Highlighting
### Light Mode
| Variable | Default |
| --------------------------------- | -------------------- |
| `--shiki-foreground` | `inherit` |
| `--shiki-background` | `transparent` |
| `--shiki-token-constant` | `#1976d2` |
| `--shiki-token-string` | `#31a94d` |
| `--shiki-token-comment` | `rgb(182, 180, 180)` |
| `--shiki-token-keyword` | `#cf2727` |
| `--shiki-token-parameter` | `#f59403` |
| `--shiki-token-function` | `#7041c8` |
| `--shiki-token-string-expression` | `#218438` |
| `--shiki-token-punctuation` | `#242323` |
| `--shiki-token-link` | `#22863a` |
| `--shiki-token-deleted` | `#d32828` |
| `--shiki-token-inserted` | `#22863a` |
### Dark Mode
| Variable | Default |
| --------------------------------- | --------- |
| `--shiki-token-constant` | `#6fb0fa` |
| `--shiki-token-string` | `#f9a86e` |
| `--shiki-token-comment` | `#6a727b` |
| `--shiki-token-keyword` | `#f47481` |
| `--shiki-token-parameter` | `#ff9800` |
| `--shiki-token-function` | `#ae8eeb` |
| `--shiki-token-string-expression` | `#4fb74d` |
| `--shiki-token-punctuation` | `#bbbbbb` |
| `--shiki-token-link` | `#f9a76d` |
| `--shiki-token-deleted` | `#ee6d7a` |
| `--shiki-token-inserted` | `#36c47f` |
## Home Page
| Variable | Light Default | Dark Default |
| -------------------------------- | ------------------------------------------ | ----------------------------------------------- |
| `--rp-home-hero-secondary-color` | `#a673ff` | (same) |
| `--rp-home-hero-title-color` | `transparent` | (same) |
| `--rp-home-hero-title-bg` | gradient (90deg) | (same) |
| `--rp-home-background-bg` | radial gradients | dark radial gradients |
| `--rp-home-feature-bg` | `linear-gradient(135deg, #fff, #f9f9f980)` | `linear-gradient(135deg, #ffffff00, #ffffff08)` |
## Quick Start Example
```css
/* theme/index.css */
:root {
--rp-c-brand: #7c3aed;
--rp-c-brand-light: #8b5cf6;
--rp-c-brand-dark: #6d28d9;
}
.dark {
--rp-c-brand: #a78bfa;
--rp-c-brand-light: #c4b5fd;
--rp-c-brand-dark: #8b5cf6;
}
```
.agents/skills/rspress-custom-theme/references/eject-components.md
+154
View File
@@ -0,0 +1,154 @@
# Eject Components Reference
Eject copies a built-in component's source code into your project for full customization. This is the heaviest approach — ejected components do not receive automatic updates when Rspress upgrades. Prefer CSS variables, BEM overrides, or Layout slots whenever possible.
Official reference: <https://rspress.rs/api/commands>
---
## Eject Command
```bash
# List all available components
rspress eject
# Eject a specific component
rspress eject <ComponentName>
```
Ejected source is placed in `theme/components/<ComponentName>/`.
## Available Components
| Component | Description | Consider wrapping first? |
| ---------------- | ----------------------------------------- | ------------------------------------------------ |
| `Layout` | Main layout container with all slot props | Yes — use Layout slots instead |
| `Root` | Application root wrapper | Only eject for global providers |
| `Banner` | Notification banner at top of page | Check `top` slot first |
| `NavTitle` | Navigation logo and title | Check `navTitle` / `beforeNavTitle` slots |
| `HomeLayout` | Complete home page layout | Check home page slots first |
| `HomeHero` | Hero section on home page | Check `beforeHero` / `afterHero` slots |
| `HomeFeature` | Feature grid cards | Check `beforeFeatures` / `afterFeatures` slots |
| `HomeBackground` | Home page background effects | Try CSS variables first |
| `HomeFooter` | Home page footer | Check `bottom` slot first |
| `DocFooter` | Documentation page footer | Check `beforeDocFooter` / `afterDocFooter` slots |
| `EditLink` | "Edit this page" link | Configure via `themeConfig.editLink` |
| `LastUpdated` | Last updated timestamp | Usually config is enough |
| `PrevNextPage` | Previous/next page navigation | Check `beforeDocFooter` slot |
| `OverviewGroup` | Overview page group cards | — |
| `Tag` | Tag/label component | — |
## Step-by-Step Eject Workflow
1. **Eject the component:**
```bash
rspress eject DocFooter
```
2. **Re-export in theme/index.tsx:**
```tsx
// theme/index.tsx
export * from '@rspress/core/theme-original';
export { DocFooter } from './components/DocFooter';
```
The named export takes precedence over the wildcard re-export, so Rspress uses your custom version.
3. **Modify the ejected source** in `theme/components/DocFooter/`.
## Common Pattern: Root for Global Providers
The most common eject use case is wrapping the entire app in a context provider (state management, analytics, auth, etc.):
```tsx
// theme/components/Root/index.tsx
import type { RootProps } from '@rspress/core/theme';
export function Root({ children }: RootProps) {
return (
<ThemeProvider>
<AnalyticsProvider>{children}</AnalyticsProvider>
</ThemeProvider>
);
}
```
```tsx
// theme/index.tsx
export * from '@rspress/core/theme-original';
export { Root } from './components/Root';
```
## Common Pattern: Custom Home Page (HomeLayout)
When the default home page structure (Hero + Features) doesn't meet the design requirements — for example, you need a completely different landing page with custom sections, animations, or a non-standard layout — write a custom `HomeLayout` component and re-export it directly:
```tsx
// theme/components/HomeLayout/index.tsx
import { useSite, useLang } from '@rspress/core/runtime';
export function HomeLayout() {
const site = useSite();
const lang = useLang();
const { title, description } = site.siteData;
return (
<div className="custom-home">
<section className="hero">
<h1>{title}</h1>
<p>{description}</p>
<div className="hero-actions">
<a
href={lang === 'zh' ? '/zh/guide/start' : '/guide/start'}
className="primary-btn"
>
Get Started
</a>
<a href="https://github.com/..." className="secondary-btn">
GitHub
</a>
</div>
</section>
<section className="showcase">
{/* Custom content: testimonials, stats, demos, etc. */}
</section>
</div>
);
}
```
```tsx
// theme/index.tsx
export * from '@rspress/core/theme-original';
export { HomeLayout } from './components/HomeLayout';
```
The named export overrides the built-in `HomeLayout` from the wildcard re-export — no need to eject first.
If you only need to add content before/after the Hero or Features sections (without replacing the entire home page), prefer Layout slots (`beforeHero`, `afterHero`, `beforeFeatures`, `afterFeatures`) instead — see `references/layout-slots.md`.
## Common Pattern: Custom Doc Footer
```tsx
// theme/components/DocFooter/index.tsx
import { useFrontmatter } from '@rspress/core/runtime';
export function DocFooter() {
const frontmatter = useFrontmatter();
return (
<footer className="custom-doc-footer">
{frontmatter.author && <span>Author: {frontmatter.author}</span>}
<a href="https://github.com/...">Edit this page</a>
</footer>
);
}
```
## Important Notes
- Always import from `@rspress/core/theme-original` in `theme/` files, never from `@rspress/core/theme` (the latter resolves to your own `theme/index.tsx`, causing circular imports).
- After ejecting, you own that component. Track Rspress changelogs for upstream changes you might want to incorporate manually.
- Run `rspress eject` (no args) to see the up-to-date list of available components — the list above may change between Rspress versions.
.agents/skills/rspress-custom-theme/references/layout-slots.md
+153
View File
@@ -0,0 +1,153 @@
# Layout Slots Reference
The `Layout` component accepts slot props (`React.ReactNode`) for injecting content at specific positions without replacing built-in components. This is the recommended way to extend Rspress before considering eject.
Official reference: <https://rspress.rs/ui/layout-components/layout>
---
## All Available Slots
### Navigation Bar
| Slot | Position |
| ---------------- | ------------------------------------ |
| `beforeNav` | Before the entire navigation bar |
| `afterNav` | After the entire navigation bar |
| `beforeNavTitle` | Before the nav title/logo (top-left) |
| `navTitle` | Replaces the nav title content |
| `afterNavTitle` | After the nav title/logo |
| `beforeNavMenu` | Before the nav menu items |
| `afterNavMenu` | After the nav menu items |
### Sidebar & Outline
| Slot | Position |
| --------------- | ----------------------------------- |
| `beforeSidebar` | Above the left sidebar |
| `afterSidebar` | Below the left sidebar |
| `beforeOutline` | Above the right outline (TOC) panel |
| `afterOutline` | Below the right outline panel |
### Home Page
| Slot | Position |
| ---------------- | ------------------------ |
| `beforeHero` | Before the Hero section |
| `afterHero` | After the Hero section |
| `beforeFeatures` | Before the Features grid |
| `afterFeatures` | After the Features grid |
### Doc Page
| Slot | Position |
| ------------------ | ------------------------------------- |
| `beforeDoc` | At the very beginning of the doc page |
| `afterDoc` | At the very end of the doc page |
| `beforeDocContent` | Before the document content area |
| `afterDocContent` | After the document content area |
| `beforeDocFooter` | Before the doc footer (prev/next nav) |
| `afterDocFooter` | After the doc footer |
### Global
| Slot | Position |
| ------------ | ---------------------------------------------------------------------- |
| `top` | At the very top of the entire page |
| `bottom` | At the very bottom of the entire page |
| `components` | Custom MDX component overrides (`Record<string, React.ComponentType>`) |
---
## Usage Pattern
All examples below follow the same structure in `theme/index.tsx`. The key parts:
- Import `Layout` from `@rspress/core/theme-original` (not `@rspress/core/theme` — that causes circular imports)
- Re-export everything: `export * from '@rspress/core/theme-original'`
- Export your custom `Layout` that wraps the original with slot props
### Basic — Single Slot
```tsx
// theme/index.tsx
import { Layout as OriginalLayout } from '@rspress/core/theme-original';
export * from '@rspress/core/theme-original';
export function Layout() {
return <OriginalLayout beforeNavTitle={<MyLogo />} />;
}
```
### Multiple Slots
```tsx
// theme/index.tsx
import { Layout as OriginalLayout } from '@rspress/core/theme-original';
export * from '@rspress/core/theme-original';
export function Layout() {
return (
<OriginalLayout
top={<div className="announcement-bar">New version released!</div>}
bottom={<footer>© 2025 My Company</footer>}
afterOutline={<div>Related resources</div>}
/>
);
}
```
### With i18n Hooks
```tsx
// theme/index.tsx
import { Layout as OriginalLayout } from '@rspress/core/theme-original';
import { useLang } from '@rspress/core/runtime';
export * from '@rspress/core/theme-original';
function LocalizedBanner() {
const lang = useLang();
return <div>{lang === 'zh' ? '欢迎' : 'Welcome'}</div>;
}
export function Layout() {
return <OriginalLayout top={<LocalizedBanner />} />;
}
```
### Override MDX Components
The `components` slot accepts a `Record<string, React.ComponentType>` to override how MDX elements render:
```tsx
// theme/index.tsx
import { Layout as OriginalLayout } from '@rspress/core/theme-original';
export * from '@rspress/core/theme-original';
function CustomH1({ children }: { children: React.ReactNode }) {
return (
<h1 style={{ borderBottom: '2px solid var(--rp-c-brand)' }}>{children}</h1>
);
}
export function Layout() {
return <OriginalLayout components={{ h1: CustomH1 }} />;
}
```
---
## Available Hooks
Use these hooks inside slot components. Import from `@rspress/core/runtime`.
| Hook | Purpose |
| ------------------ | ----------------------------------- |
| `useDark()` | Returns whether dark mode is active |
| `useLang()` | Returns current language code |
| `useVersion()` | Returns current doc version |
| `usePage()` | Returns current page metadata |
| `usePages()` | Returns all pages metadata |
| `useSite()` | Returns site-level configuration |
| `useFrontmatter()` | Returns current page frontmatter |
| `useI18n()` | Returns i18n translation function |