You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/docs/en/guide/start/introduction.mdx
+66-7Lines changed: 66 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,6 +7,7 @@ Rspress is a static site generator based on [Rsbuild](https://rsbuild.rs/), rend
7
7
Rspress is designed around the following core features:
8
8
9
9
-**Build Performance**. Ensuring a fast enough startup speed brings a good development experience.
10
+
-**AI-friendly**. Technical documentation not only serves human readers but can also be better understood and utilized by AI through SSG-MD.
10
11
-**MDX Support**. Through MDX, we can conveniently reuse document fragments and render custom React components in documents.
11
12
-**Basic Capabilities of Documentation Site**. Including internationalization, multi-version support, full-text search, component library documentation, etc.
12
13
-**Extensibility**. Provides a built-in plugin system, supports extending Rspress through plugin API.
@@ -21,14 +22,33 @@ We couldn't help but start thinking, can we break the limitations of the current
21
22
22
23
Then, we continued to explore in this direction and finally achieved this effect on Rspress.
23
24
24
-
If there is only one most core optimization method, it is undoubtedly the `Rust Frontend Toolchain`. We mainly use the Rust toolchain in two performance-sensitive parts:
25
+
In Rspress V2, we have made significant performance improvements through multiple optimization methods:
25
26
26
-
- Bundler. Traditional bundlers include webpack, Rollup, etc. For a front-end project, the bundler is the integration hub of various compilation tool chains. It is a very critical engineering capability and has a huge impact on project construction performance. Rspress uses Rspack developed by the team. Rspack is a Bundler based on Rust, with built-in multiple performance optimization methods, such as multi-threaded parallel compilation, incremental compilation, etc., which are 5 to 10 times more efficient than traditional packaging tools in the community.
27
-
- Markdown compiler. For another major compilation performance bottleneck in the SSG framework, namely `Markdown Compilation`, we also Rust this process to further speed up and customize Rspress's Markdown compiler (ie `@rspress/mdx-rs`). This compiler is nearly 20 times more efficient than the JS version of the compiler in the community:
27
+
-**LazyCompilation**. LazyCompilation compiles on-demand in dev mode. Pages are only compiled when you visit them, significantly improving development startup speed and even achieving millisecond-level cold starts.
28
+
-**Persistent Cache**. For production builds, persistent cache is enabled by default, reusing previous compilation results during warm starts to improve build speed by 30%-60%.
29
+
-**Rspack Bundler**. Rspress uses Rspack developed by the team. Rspack is a Bundler based on Rust, with built-in multiple performance optimization methods, such as multi-threaded parallel compilation, incremental compilation, etc., which are 5 to 10 times more efficient than traditional packaging tools in the community.
At the same time, Rspress internally also applies many other build optimization methods. These optimization methods, combined with the powerful Rust front-end toolchain, push the compilation performance of the SSG framework to a new height.
30
32
31
-
At the same time, Rspress internally also applies many other build optimization methods, such as `pre-bundle of theme`, etc. These additional optimization methods, combined with the powerful Rust front-end toolchain, push the compilation performance of the SSG framework to a new height.
33
+
### AI-friendly
34
+
35
+
With the rise of large language models, technical documentation needs to serve not only human readers but also be better understood and utilized by AI.
36
+
37
+
Rspress V2 introduces **SSG-MD** capability, which renders pages as Markdown files instead of HTML files and generates index files compliant with the [llms.txt](https://llmstxt.org/) specification.
38
+
39
+
```ts title="rspress.config.ts"
40
+
import { defineConfig } from'@rspress/core';
41
+
42
+
exportdefaultdefineConfig({
43
+
llms: true,
44
+
});
45
+
```
46
+
47
+
Once enabled, the build output will include `llms.txt` (an index file showing page titles and descriptions in navigation and sidebar order), `llms-full.txt` (a complete file containing Markdown content from all pages), and `.md` files corresponding to each route.
48
+
49
+
Just as SSG can generate static HTML files to improve SEO, SSG-MD can relatively improve GEO (Generative Engine Optimization) and the quality of static information for large models.
50
+
51
+
For detailed usage, please refer to the [SSG-MD documentation](/guide/basic/ssg-md).
32
52
33
53
### MDX support
34
54
@@ -63,6 +83,37 @@ Rspress internally designed various extension mechanisms to ensure sufficient cu
63
83
64
84
Next, let's introduce the main functional features of Rspress.
65
85
86
+
### Brand new theme
87
+
88
+
Rspress V2 introduces a completely redesigned theme, featuring significant improvements in visual effects and reading experience while providing exceptional customizability.
89
+
90
+
#### BEM naming convention
91
+
92
+
All built-in components now adopt the [BEM naming convention](https://getbem.com/). This enables developers to flexibly adjust styles through standard CSS selectors, avoiding conflicts with tools like Tailwind CSS and significantly lowering the barrier for style customization.
93
+
94
+
```css
95
+
/* Easily override component styles */
96
+
.rp-nav__title {
97
+
height: 32px;
98
+
}
99
+
.rp-nav-menu__item--active {
100
+
color: purple;
101
+
}
102
+
```
103
+
104
+
#### Rich CSS variables
105
+
106
+
The new theme exposes more CSS variables, covering styles for theme colors, code blocks, homepage components, and more. You can interactively preview and adjust these variables on the [CSS Variables](/ui/vars) page.
107
+
108
+
#### `rspress eject` Command
109
+
110
+
When CSS variables cannot meet your customization needs, you can use the new `rspress eject` command to copy the source code of built-in components to your project's theme directory for complete customization.
111
+
112
+
```bash
113
+
# Export nav component to theme directory
114
+
npx rspress eject Nav
115
+
```
116
+
66
117
### Automatic layout generation
67
118
68
119
For the construction of a documentation site, in addition to displaying the main content, we generally need the following layout modules:
@@ -107,6 +158,12 @@ In addition, Rspress also supports some specific syntax, such as:
107
158
108
159
Details can be found in the [Use MDX Document](/guide/use-mdx/components).
109
160
161
+
### Code highlighting with [Shiki](https://shiki.style/)
162
+
163
+
Rspress V2 uses [Shiki](https://shiki.style/) by default for code highlighting. Compared to runtime highlighting solutions, Shiki performs highlighting at compile time, achieving accurate syntax highlighting consistent with VS Code based on TextMate grammar, without adding runtime overhead or bundle size.
164
+
165
+
You can customize code block color schemes through CSS variables, and interactively switch and preview different Shiki themes on the [CSS Variables](/ui/vars) page. Shiki also allows extensions through custom [transformers](https://shiki.style/guide/transformers) to enrich writing, such as [twoslash](https://twoslash.netlify.app/).
166
+
110
167
### SSG
111
168
112
169
Rspress is a SSG framework. In the build process in the production environment, it will automatically help you generate static sites, that is, generate HTML content for each page. After the build process is completed, HTML will appear in the default output directory.
@@ -124,7 +181,9 @@ Internationalization is a common requirement in a document-type site, and Rspres
124
181
- How to organize the document directory of different language versions?
125
182
- How to use I18n data source in custom components?
126
183
127
-
Rspress has already supported these demand scenarios for you. You can follow the [I18n Tutorial](../basic/i18n.mdx'I18n Tutorial') to step by step to implement internationalization for your site.
184
+
Rspress V2 includes translations for Chinese, English, Japanese, Korean, and more languages built-in, with more to come. The system automatically performs "Tree Shaking" based on language configuration and usage, bundling only the text you need. You can also easily extend or override translations through the [`i18nSource`](/api/config/config-basic.html#i18nsource) configuration option.
185
+
186
+
You can follow the [I18n Tutorial](../basic/i18n.mdx'I18n Tutorial') to step by step to implement internationalization for your site.
128
187
129
188
### Multi-version Documents
130
189
@@ -266,7 +325,7 @@ export default defineConfig({
266
325
267
326
[Docusaurus](https://docusaurus.io/'Docusaurus') is an open-source SSG framework by Meta. Like Rspress, it uses React as the rendering framework and supports MDX. However, the main differences between Rspress and Docusaurus are:
268
327
269
-
1. Rspress uses [mdx-rs](https://github.com/web-infra-dev/mdx-rs) by default to provide better build performance. For details, see [Build Performance](#build-performance).
328
+
1. Rspress provides better build performance through lazyCompilation and persistent cache, achieving millisecond-level cold starts. For details, see [Build Performance](#build-performance).
270
329
271
330
2. Rspress has simpler config and lower learning curve. Rspress's config is simpler, does not introduce too many concepts, and reduces cognitive load as much as possible. For example, it provides out-of-the-box search functionality, intuitive multi-version document management, etc.
Copy file name to clipboardExpand all lines: website/docs/en/index.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,9 +28,9 @@ features:
28
28
- title: Built-in full-text search
29
29
details: Automatically generates a full-text search index for you during construction, providing out-of-the-box full-text search capabilities.
30
30
icon: 🎨
31
-
- title: Simpler I18n solution
32
-
details: With the built-in I18n solution, you can easily provide multi-language support for documents or components.
33
-
icon: 🌍
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
34
- title: Static site generation
35
35
details: In production, it automatically builds into static HTML files, which can be easily deployed anywhere.
0 commit comments