onixbyte/onixbyte.com
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: format the repository with prettier

Browse Source 
These files were already out of step with the project's Prettier config
before this branch of work; running `pnpm format` finally swept them up.
No semantic changes.

Kept separate from the functional commits so the reformatting does not
bury them in diff noise.
This commit is contained in:
zihluwang committed 2026-09-25 15:37:59 +08:00
1 parent 6800f7251d
commit 861852961f
50 files changed
+643 -678
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.agents/skills/rspress-custom-theme/SKILL.md
+20 -25
View File
@@ -49,8 +49,8 @@ Minimal setup:
```tsx
// theme/index.tsx
import './index.css'; // optional
export * from '@rspress/core/theme-original';
import "./index.css" // optional
export * from "@rspress/core/theme-original"
```
**Critical import rule**: Inside `theme/` files, always import from `@rspress/core/theme-original`. The path `@rspress/core/theme` resolves to your own `theme/index.tsx`, which causes circular imports. (In `docs/` MDX files, `@rspress/core/theme` is fine — it correctly points to your custom theme.)
@@ -80,8 +80,8 @@ Override CSS custom properties for brand colors, backgrounds, text, code blocks,
```ts
// rspress.config.ts
export default defineConfig({
globalStyles: path.join(__dirname, 'styles/custom.css'),
});
globalStyles: path.join(__dirname, "styles/custom.css"),
})
```
> **Full variable list**: Read `references/css-variables.md` for all available CSS variables with light/dark defaults.
@@ -104,13 +104,11 @@ Inject content at specific positions in the layout without replacing built-in co
```tsx
// theme/index.tsx
import { Layout as OriginalLayout } from '@rspress/core/theme-original';
export * from '@rspress/core/theme-original';
import { Layout as OriginalLayout } from "@rspress/core/theme-original"
export * from "@rspress/core/theme-original"
export function Layout() {
return (
<OriginalLayout beforeNavTitle={<MyLogo />} bottom={<CustomFooter />} />
);
return <OriginalLayout beforeNavTitle={<MyLogo />} bottom={<CustomFooter />} />
}
```
@@ -132,8 +130,8 @@ rspress eject DocFooter # eject to theme/components/DocFooter/
Then re-export in `theme/index.tsx` (named export takes precedence over the wildcard):
```tsx
export * from '@rspress/core/theme-original';
export { DocFooter } from './components/DocFooter';
export * from "@rspress/core/theme-original"
export { DocFooter } from "./components/DocFooter"
```
> **Component list & patterns**: Read `references/eject-components.md` for available components, workflow, and common patterns.
@@ -147,38 +145,38 @@ Rspress has 27 built-in icons used across the UI. You can replace any of them by
**Icon type**: Each icon is a React component or a URL string:
```ts
import type { FC, SVGProps } from 'react';
type Icon = FC<SVGProps<SVGSVGElement>> | string;
import type { FC, SVGProps } from "react"
type Icon = FC<SVGProps<SVGSVGElement>> | string
```
**Example 1** — Replace an icon with a custom SVG component:
```tsx
// theme/index.tsx
export * from '@rspress/core/theme-original';
export * from "@rspress/core/theme-original"
// Named export overrides the wildcard — replaces the GitHub icon site-wide
export const IconGithub = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 ..." fill="currentColor" />
</svg>
);
)
```
**Example 2** — Use an SVGR import:
```tsx
// theme/index.tsx
export * from '@rspress/core/theme-original';
export * from "@rspress/core/theme-original"
import CustomGithubIcon from './icons/github.svg?react';
export const IconGithub = CustomGithubIcon;
import CustomGithubIcon from "./icons/github.svg?react"
export const IconGithub = CustomGithubIcon
```
**Using `SvgWrapper` in MDX or custom components**:
```mdx
import { SvgWrapper, IconGithub } from '@rspress/core/theme';
import { SvgWrapper, IconGithub } from "@rspress/core/theme"
<SvgWrapper icon={IconGithub} width={24} height={24} />
```
@@ -197,13 +195,10 @@ For components that should render on every page without theme overrides:
// rspress.config.ts
export default defineConfig({
globalUIComponents: [
path.join(__dirname, 'components', 'BackToTop.tsx'),
[
path.join(__dirname, 'components', 'Analytics.tsx'),
{ trackingId: '...' },
],
path.join(__dirname, "components", "BackToTop.tsx"),
[path.join(__dirname, "components", "Analytics.tsx"), { trackingId: "..." }],
],
});
})
```
---