Skip to content

Commit 74263ca

Browse files
committed
chore: settings rspress
1 parent c9256d4 commit 74263ca

File tree

15 files changed

+3404
-91
lines changed

15 files changed

+3404
-91
lines changed

docs/.gitignore

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
doc_build

docs/docs/_meta.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
[
2+
{
3+
"text": "Guide",
4+
"link": "/guide/",
5+
"activeMatch": "/guide/"
6+
},
7+
{
8+
"text": "Hello World",
9+
"link": "/hello/",
10+
"activeMatch": "/hello/"
11+
},
12+
{
13+
"text": "API",
14+
"link": "https://rspress.dev/api/index.html"
15+
}
16+
]

docs/docs/guide/_meta.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
["index"]

docs/docs/guide/index.md

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
# Markdown & MDX
2+
3+
Rspress supports not only Markdown but also [MDX](https://mdxjs.com/), a powerful way to develop content.
4+
5+
## Markdown
6+
7+
MDX is a superset of Markdown, which means you can write Markdown files as usual. For example:
8+
9+
```md
10+
# Hello World
11+
```
12+
13+
## Use Component
14+
15+
When you want to use React components in Markdown files, you should name your files with `.mdx` extension. For example:
16+
17+
```mdx
18+
// docs/index.mdx
19+
import { CustomComponent } from './custom';
20+
21+
# Hello World
22+
23+
<CustomComponent />
24+
```
25+
26+
## Front Matter
27+
28+
You can add Front Matter at the beginning of your Markdown file, which is a YAML-formatted object that defines some metadata. For example:
29+
30+
```yaml
31+
---
32+
title: Hello World
33+
---
34+
```
35+
36+
> Note: By default, Rspress uses h1 headings as html headings.
37+
38+
You can also access properties defined in Front Matter in the body, for example:
39+
40+
```markdown
41+
---
42+
title: Hello World
43+
---
44+
45+
# {frontmatter.title}
46+
```
47+
48+
The previously defined properties will be passed to the component as `frontmatter` properties. So the final output will be:
49+
50+
```html
51+
<h1>Hello World</h1>
52+
```
53+
54+
## Custom Container
55+
56+
You can use the `:::` syntax to create custom containers and support custom titles. For example:
57+
58+
**Input:**
59+
60+
```markdown
61+
:::tip
62+
This is a `block` of type `tip`
63+
:::
64+
65+
:::info
66+
This is a `block` of type `info`
67+
:::
68+
69+
:::warning
70+
This is a `block` of type `warning`
71+
:::
72+
73+
:::danger
74+
This is a `block` of type `danger`
75+
:::
76+
77+
::: details
78+
This is a `block` of type `details`
79+
:::
80+
81+
:::tip Custom Title
82+
This is a `block` of `Custom Title`
83+
:::
84+
85+
:::tip{title="Custom Title"}
86+
This is a `block` of `Custom Title`
87+
:::
88+
```
89+
90+
**Output:**
91+
92+
:::tip
93+
This is a `block` of type `tip`
94+
:::
95+
96+
:::info
97+
This is a `block` of type `info`
98+
:::
99+
100+
:::warning
101+
This is a `block` of type `warning`
102+
:::
103+
104+
:::danger
105+
This is a `block` of type `danger`
106+
:::
107+
108+
::: details
109+
This is a `block` of type `details`
110+
:::
111+
112+
:::tip Custom Title
113+
This is a `block` of `Custom Title`
114+
:::
115+
116+
:::tip{title="Custom Title"}
117+
This is a `block` of `Custom Title`
118+
:::
119+
120+
## Code Block
121+
122+
### Basic Usage
123+
124+
You can use the \`\`\` syntax to create code blocks and support custom titles. For example:
125+
126+
**Input:**
127+
128+
````md
129+
```js
130+
console.log('Hello World');
131+
```
132+
133+
```js title="hello.js"
134+
console.log('Hello World');
135+
```
136+
````
137+
138+
**Output:**
139+
140+
```js
141+
console.log('Hello World');
142+
```
143+
144+
```js title="hello.js"
145+
console.log('Hello World');
146+
```
147+
148+
### Show Line Numbers
149+
150+
If you want to display line numbers, you can enable the `showLineNumbers` option in the config file:
151+
152+
```ts title="rspress.config.ts"
153+
export default {
154+
// ...
155+
markdown: {
156+
showLineNumbers: true,
157+
},
158+
};
159+
```
160+
161+
### Wrap Code
162+
163+
If you want to wrap long code line by default, you can enable the `defaultWrapCode` option in the config file:
164+
165+
```ts title="rspress.config.ts"
166+
export default {
167+
// ...
168+
markdown: {
169+
defaultWrapCode: true,
170+
},
171+
};
172+
```
173+
174+
### Line Highlighting
175+
176+
You can also apply line highlighting and code block title at the same time, for example:
177+
178+
**Input:**
179+
180+
````md
181+
```js title="hello.js" {1,3-5}
182+
console.log('Hello World');
183+
184+
const a = 1;
185+
186+
console.log(a);
187+
188+
const b = 2;
189+
190+
console.log(b);
191+
```
192+
````
193+
194+
**Ouput:**
195+
196+
```js title="hello.js" {1,3-5}
197+
console.log('Hello World');
198+
199+
const a = 1;
200+
201+
console.log(a);
202+
203+
const b = 2;
204+
205+
console.log(b);
206+
```
207+
208+
## Rustify MDX compiler
209+
210+
You can enable Rustify MDX compiler by following config:

docs/docs/hello.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Hello World!
2+
3+
## Start
4+
5+
Write something to build your own docs! 🎁

docs/docs/index.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
pageType: home
3+
4+
hero:
5+
name: rsbuild-plugin-web-extension
6+
text: rbsuild plugin for chrome/web extension
7+
tagline: rsbuild-plugin-web-extension tagline
8+
actions:
9+
- theme: brand
10+
text: Quick Start
11+
link: /guide/
12+
- theme: alt
13+
text: GitHub
14+
link: https://github.com/web-infra-dev/rspress
15+
image:
16+
src: /rspress-icon.png
17+
alt: rsbuild-plugin-web-extension Logo
18+
features:
19+
- title: Blazing fast build speed
20+
details: The core compilation module is based on the Rust front-end toolchain, providing a more ultimate development experience.
21+
icon: 🏃🏻‍♀️
22+
- title: Support for MDX content writing
23+
details: MDX is a powerful way to write content, allowing you to use React components in Markdown.
24+
icon: 📦
25+
- title: Built-in full-text search
26+
details: Automatically generates a full-text search index for you during construction, providing out-of-the-box full-text search capabilities.
27+
icon: 🎨
28+
- title: Simpler I18n solution
29+
details: With the built-in I18n solution, you can easily provide multi-language support for documents or components.
30+
icon: 🌍
31+
- title: Static site generation
32+
details: In production, it automatically builds into static HTML files, which can be easily deployed anywhere.
33+
icon: 🌈
34+
- title: Providing multiple custom capabilities
35+
details: Through its extension mechanism, you can easily extend theme UI and build process.
36+
icon: 🔥
37+
---
6.15 KB
Loading

docs/docs/public/rspress-icon.png

100 KB
Loading
6.23 KB
Loading

docs/package.json

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
11
{
2-
"name": "docs"
3-
}
2+
"name": "docs",
3+
"version": "1.0.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "rspress dev",
7+
"build": "rspress build",
8+
"preview": "rspress preview"
9+
},
10+
"dependencies": {
11+
"rspress": "^1.32.0"
12+
},
13+
"devDependencies": {
14+
"@types/node": "^16"
15+
}
16+
}

0 commit comments

Comments
 (0)