create-rspress 2.0.5 → 2.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-rspress",
3
- "version": "2.0.5",
3
+ "version": "2.0.6",
4
4
  "description": "Create a new Rspress project",
5
5
  "homepage": "https://rspress.rs",
6
6
  "repository": {
@@ -26,8 +26,8 @@
26
26
  "create-rstack": "1.8.0"
27
27
  },
28
28
  "devDependencies": {
29
- "@microsoft/api-extractor": "^7.57.6",
30
- "@rslib/core": "0.19.6",
29
+ "@microsoft/api-extractor": "^7.57.7",
30
+ "@rslib/core": "0.20.0",
31
31
  "@types/node": "^22.8.1",
32
32
  "rsbuild-plugin-publint": "^0.3.4",
33
33
  "typescript": "^5.8.2"
@@ -1,16 +1,16 @@
1
1
  [
2
2
  {
3
3
  "text": "Guide",
4
- "link": "/guide/",
4
+ "link": "/guide/start/introduction",
5
5
  "activeMatch": "/guide/"
6
6
  },
7
7
  {
8
- "text": "Hello world",
9
- "link": "/hello/",
10
- "activeMatch": "/hello/"
8
+ "text": "API",
9
+ "link": "/api/",
10
+ "activeMatch": "/api/"
11
11
  },
12
12
  {
13
- "text": "API",
14
- "link": "https://rspress.rs/api/index.html"
13
+ "text": "Document",
14
+ "link": "https://rspress.rs/"
15
15
  }
16
16
  ]
@@ -0,0 +1 @@
1
+ ["index", "commands"]
@@ -0,0 +1,7 @@
1
+ # Commands
2
+
3
+ ## dev
4
+
5
+ ## build
6
+
7
+ ## preview
@@ -0,0 +1,6 @@
1
+ ---
2
+ title: API Overview
3
+ overview: true
4
+ ---
5
+
6
+ This is an API Overview page which outlines all the available APIs.
@@ -1 +1,12 @@
1
- ["index"]
1
+ [
2
+ {
3
+ "type": "dir-section-header",
4
+ "name": "start",
5
+ "label": "Getting Started"
6
+ },
7
+ {
8
+ "type": "dir-section-header",
9
+ "name": "use-mdx",
10
+ "label": "Markdown & MDX"
11
+ }
12
+ ]
@@ -0,0 +1 @@
1
+ ["introduction", "getting-started"]
@@ -0,0 +1,50 @@
1
+ # Getting started
2
+
3
+ ## Project structure
4
+
5
+ After creating a project with `create-rspress`, you will get the following project structure:
6
+
7
+ - `docs/` — The documentation source directory, configured via `root` in `rspress.config.ts`.
8
+ - `docs/_nav.json` — The navigation bar configuration.
9
+ - `docs/guide/_meta.json` — The sidebar configuration for the guide section.
10
+ - `docs/public/` — Static assets directory.
11
+ - `rspress.config.ts` — The Rspress configuration file.
12
+
13
+ ## Development
14
+
15
+ Start the local development server:
16
+
17
+ ```bash
18
+ npm run dev
19
+ ```
20
+
21
+ :::tip
22
+
23
+ You can specify the port number or host with `--port` or `--host`, such as `rspress dev --port 8080 --host 0.0.0.0`.
24
+
25
+ :::
26
+
27
+ ## Production build
28
+
29
+ Build the site for production:
30
+
31
+ ```bash
32
+ npm run build
33
+ ```
34
+
35
+ By default, Rspress will output to `doc_build` directory.
36
+
37
+ ## Preview
38
+
39
+ Preview the production build locally:
40
+
41
+ ```bash
42
+ npm run preview
43
+ ```
44
+
45
+ ## Next steps
46
+
47
+ - Learn how to use [MDX & React Components](/guide/use-mdx/components) in your docs.
48
+ - Learn about [Code Blocks](/guide/use-mdx/code-blocks/) syntax highlighting and line highlighting.
49
+ - Learn about [Custom Containers](/guide/use-mdx/container) for tips, warnings, and more.
50
+ - Explore the full [Rspress documentation](https://rspress.rs/) for advanced features.
@@ -0,0 +1,15 @@
1
+ # Introduction
2
+
3
+ Rspress is a static site generator based on [Rsbuild](https://rsbuild.rs/), rendered with the React framework. It comes with a default documentation theme, and you can quickly build a documentation site with Rspress.
4
+
5
+ ## Why Rspress
6
+
7
+ - **Build Performance**. The core compilation module is based on the Rust front-end toolchain, providing millisecond-level startup and a more ultimate development experience.
8
+ - **AI-native**. Technical documentation not only serves human readers but can also be better understood and utilized by AI through SSG-MD.
9
+ - **MDX Support**. MDX is a powerful way to write content, allowing you to use React components in Markdown.
10
+ - **Basic Capabilities**. Including full-text search, internationalization, multi-version support, component library documentation, etc.
11
+ - **Extensibility**. Provides a built-in plugin system, supports extending Rspress through plugin API.
12
+
13
+ ## Try Rspress
14
+
15
+ Go to [Getting Started](/guide/start/getting-started) to learn how to use Rspress to build a documentation site.
@@ -0,0 +1 @@
1
+ ["components", { "type": "dir", "name": "code-blocks" }, "container"]
@@ -0,0 +1 @@
1
+ ["title", "meta"]
@@ -0,0 +1,9 @@
1
+ # Code blocks
2
+
3
+ Rspress uses [Shiki](https://shiki.style) for syntax highlighting at compile time, which means better runtime performance.
4
+
5
+ When using code blocks in multiple languages, the corresponding language is automatically detected at compile time, and the runtime bundle size does not increase. For supported programming languages, refer to the [Shiki supported languages list](https://shiki.style/languages).
6
+
7
+ ```js
8
+ console.log('Hello World');
9
+ ```
@@ -0,0 +1,7 @@
1
+ # Meta
2
+
3
+ Besides the title, we also have some other meta attributes.
4
+
5
+ ```ts lineNumbers wrapCode title="example.ts"
6
+ const longLine = 'This code block has line numbers, code wrapping, and a title';
7
+ ```
@@ -0,0 +1,5 @@
1
+ # Title
2
+
3
+ ```js title="foo.js"
4
+ console.log('Hello World');
5
+ ```
@@ -0,0 +1,47 @@
1
+ # MDX & React components
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 components
14
+
15
+ When you want to use React components in Markdown files, you should name your files with `.mdx` extension.
16
+
17
+ ```mdx
18
+ // docs/index.mdx
19
+ import { CustomComponent } from './custom';
20
+
21
+ # Hello world
22
+
23
+ <CustomComponent />
24
+ ```
25
+
26
+ ## Use Rspress built-in components
27
+
28
+ import { Tabs, Tab } from '@rspress/core/theme';
29
+
30
+ <Tabs>
31
+
32
+ <Tab label="foo.js">
33
+
34
+ ```js
35
+ console.log('foo');
36
+ ```
37
+
38
+ </Tab>
39
+ <Tab label="bar.js">
40
+
41
+ ```js
42
+ console.log('bar');
43
+ ```
44
+
45
+ </Tab>
46
+
47
+ </Tabs>
@@ -0,0 +1,33 @@
1
+ # Container
2
+
3
+ You can use the `:::` syntax to create custom containers and support custom titles.
4
+
5
+ ## Examples
6
+
7
+ :::tip
8
+ This is a `block` of type `tip`
9
+ :::
10
+
11
+ :::info
12
+ This is a `block` of type `info`
13
+ :::
14
+
15
+ :::warning
16
+ This is a `block` of type `warning`
17
+ :::
18
+
19
+ :::danger
20
+ This is a `block` of type `danger`
21
+ :::
22
+
23
+ ::: details
24
+ This is a `block` of type `details`
25
+ :::
26
+
27
+ :::tip Custom Title
28
+ This is a `block` of `Custom Title`
29
+ :::
30
+
31
+ :::tip{title="Custom Title"}
32
+ This is a `block` of `Custom Title`
33
+ :::
@@ -8,7 +8,7 @@ hero:
8
8
  actions:
9
9
  - theme: brand
10
10
  text: Quick Start
11
- link: /guide/
11
+ link: /guide/start/introduction
12
12
  - theme: alt
13
13
  text: GitHub
14
14
  link: https://github.com/web-infra-dev/rspress
@@ -19,19 +19,25 @@ features:
19
19
  - title: Blazing fast build speed
20
20
  details: The core compilation module is based on the Rust front-end toolchain, providing a more ultimate development experience.
21
21
  icon: 🏃🏻‍♀️
22
+ link: /guide/start/introduction
22
23
  - title: Support for MDX content writing
23
24
  details: MDX is a powerful way to write content, allowing you to use React components in Markdown.
24
25
  icon: 📦
26
+ link: /guide/use-mdx/components
25
27
  - title: Built-in full-text search
26
28
  details: Automatically generates a full-text search index for you during construction, providing out-of-the-box full-text search capabilities.
27
29
  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: 🌍
30
+ link: https://rspress.rs/guide/advanced/custom-search
31
+ - title: AI-friendly
32
+ details: Generate llms.txt and Markdown files compliant with the llms.txt specification through SSG-MD, making it easier for large language models to understand and use your documentation.
33
+ icon: 🤖
34
+ link: https://rspress.rs/guide/basic/ssg-md
31
35
  - title: Static site generation
32
36
  details: In production, it automatically builds into static HTML files, which can be easily deployed anywhere.
33
37
  icon: 🌈
38
+ link: https://rspress.rs/guide/basic/ssg
34
39
  - title: Providing multiple custom capabilities
35
40
  details: Through its extension mechanism, you can easily extend theme UI and build process.
36
41
  icon: 🔥
42
+ link: https://rspress.rs/guide/basic/custom-theme
37
43
  ---
@@ -1,216 +0,0 @@
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"
182
- console.log('Hello World'); // [\!code highlight]
183
-
184
- // [\!code highlight:3]
185
- const a = 1;
186
-
187
- console.log(a);
188
-
189
- const b = 2;
190
-
191
- console.log(b);
192
- ```
193
- ````
194
-
195
- :::warning
196
- The backslash (`\`) in `[\!code highlight]` is for Markdown escaping to display the raw syntax. Do not include it when using this notation in your actual code.
197
- :::
198
-
199
- **Output:**
200
-
201
- ```js title="hello.js"
202
- console.log('Hello World'); // [!code highlight]
203
-
204
- // [!code highlight:3]
205
- const a = 1;
206
-
207
- console.log(a);
208
-
209
- const b = 2;
210
-
211
- console.log(b);
212
- ```
213
-
214
- ## Rustify MDX compiler
215
-
216
- You can enable Rustify MDX compiler by following config:
@@ -1,5 +0,0 @@
1
- # Hello world!
2
-
3
- ## Start
4
-
5
- Write something to build your own docs! 🎁