init repo
This commit is contained in:
16
docs/_meta.json
Normal file
16
docs/_meta.json
Normal file
@@ -0,0 +1,16 @@
|
||||
[
|
||||
{
|
||||
"text": "Guide",
|
||||
"link": "/guide/",
|
||||
"activeMatch": "/guide/"
|
||||
},
|
||||
{
|
||||
"text": "Hello world",
|
||||
"link": "/hello/",
|
||||
"activeMatch": "/hello/"
|
||||
},
|
||||
{
|
||||
"text": "API",
|
||||
"link": "https://rspress.dev/api/index.html"
|
||||
}
|
||||
]
|
||||
1
docs/guide/_meta.json
Normal file
1
docs/guide/_meta.json
Normal file
@@ -0,0 +1 @@
|
||||
["index"]
|
||||
210
docs/guide/index.md
Normal file
210
docs/guide/index.md
Normal file
@@ -0,0 +1,210 @@
|
||||
# Markdown & MDX
|
||||
|
||||
Rspress supports not only Markdown but also [MDX](https://mdxjs.com/), a powerful way to develop content.
|
||||
|
||||
## Markdown
|
||||
|
||||
MDX is a superset of Markdown, which means you can write Markdown files as usual. For example:
|
||||
|
||||
```md
|
||||
# Hello world
|
||||
```
|
||||
|
||||
## Use component
|
||||
|
||||
When you want to use React components in Markdown files, you should name your files with `.mdx` extension. For example:
|
||||
|
||||
```mdx
|
||||
// docs/index.mdx
|
||||
import { CustomComponent } from './custom';
|
||||
|
||||
# Hello world
|
||||
|
||||
<CustomComponent />
|
||||
```
|
||||
|
||||
## Front matter
|
||||
|
||||
You can add Front Matter at the beginning of your Markdown file, which is a YAML-formatted object that defines some metadata. For example:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: Hello world
|
||||
---
|
||||
```
|
||||
|
||||
> Note: By default, Rspress uses h1 headings as html headings.
|
||||
|
||||
You can also access properties defined in Front Matter in the body, for example:
|
||||
|
||||
```markdown
|
||||
---
|
||||
title: Hello world
|
||||
---
|
||||
|
||||
# {frontmatter.title}
|
||||
```
|
||||
|
||||
The previously defined properties will be passed to the component as `frontmatter` properties. So the final output will be:
|
||||
|
||||
```html
|
||||
<h1>Hello world</h1>
|
||||
```
|
||||
|
||||
## Custom container
|
||||
|
||||
You can use the `:::` syntax to create custom containers and support custom titles. For example:
|
||||
|
||||
**Input:**
|
||||
|
||||
```markdown
|
||||
:::tip
|
||||
This is a `block` of type `tip`
|
||||
:::
|
||||
|
||||
:::info
|
||||
This is a `block` of type `info`
|
||||
:::
|
||||
|
||||
:::warning
|
||||
This is a `block` of type `warning`
|
||||
:::
|
||||
|
||||
:::danger
|
||||
This is a `block` of type `danger`
|
||||
:::
|
||||
|
||||
::: details
|
||||
This is a `block` of type `details`
|
||||
:::
|
||||
|
||||
:::tip Custom Title
|
||||
This is a `block` of `Custom Title`
|
||||
:::
|
||||
|
||||
:::tip{title="Custom Title"}
|
||||
This is a `block` of `Custom Title`
|
||||
:::
|
||||
```
|
||||
|
||||
**Output:**
|
||||
|
||||
:::tip
|
||||
This is a `block` of type `tip`
|
||||
:::
|
||||
|
||||
:::info
|
||||
This is a `block` of type `info`
|
||||
:::
|
||||
|
||||
:::warning
|
||||
This is a `block` of type `warning`
|
||||
:::
|
||||
|
||||
:::danger
|
||||
This is a `block` of type `danger`
|
||||
:::
|
||||
|
||||
::: details
|
||||
This is a `block` of type `details`
|
||||
:::
|
||||
|
||||
:::tip Custom Title
|
||||
This is a `block` of `Custom Title`
|
||||
:::
|
||||
|
||||
:::tip{title="Custom Title"}
|
||||
This is a `block` of `Custom Title`
|
||||
:::
|
||||
|
||||
## Code block
|
||||
|
||||
### Basic usage
|
||||
|
||||
You can use the \`\`\` syntax to create code blocks and support custom titles. For example:
|
||||
|
||||
**Input:**
|
||||
|
||||
````md
|
||||
```js
|
||||
console.log('Hello World');
|
||||
```
|
||||
|
||||
```js title="hello.js"
|
||||
console.log('Hello World');
|
||||
```
|
||||
````
|
||||
|
||||
**Output:**
|
||||
|
||||
```js
|
||||
console.log('Hello World');
|
||||
```
|
||||
|
||||
```js title="hello.js"
|
||||
console.log('Hello World');
|
||||
```
|
||||
|
||||
### Show line numbers
|
||||
|
||||
If you want to display line numbers, you can enable the `showLineNumbers` option in the config file:
|
||||
|
||||
```ts title="rspress.config.ts"
|
||||
export default {
|
||||
// ...
|
||||
markdown: {
|
||||
showLineNumbers: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Wrap code
|
||||
|
||||
If you want to wrap long code line by default, you can enable the `defaultWrapCode` option in the config file:
|
||||
|
||||
```ts title="rspress.config.ts"
|
||||
export default {
|
||||
// ...
|
||||
markdown: {
|
||||
defaultWrapCode: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Line highlighting
|
||||
|
||||
You can also apply line highlighting and code block title at the same time, for example:
|
||||
|
||||
**Input:**
|
||||
|
||||
````md
|
||||
```js title="hello.js" {1,3-5}
|
||||
console.log('Hello World');
|
||||
|
||||
const a = 1;
|
||||
|
||||
console.log(a);
|
||||
|
||||
const b = 2;
|
||||
|
||||
console.log(b);
|
||||
```
|
||||
````
|
||||
|
||||
**Output:**
|
||||
|
||||
```js title="hello.js" {1,3-5}
|
||||
console.log('Hello World');
|
||||
|
||||
const a = 1;
|
||||
|
||||
console.log(a);
|
||||
|
||||
const b = 2;
|
||||
|
||||
console.log(b);
|
||||
```
|
||||
|
||||
## Rustify MDX compiler
|
||||
|
||||
You can enable Rustify MDX compiler by following config:
|
||||
5
docs/hello.md
Normal file
5
docs/hello.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# Hello world!
|
||||
|
||||
## Start
|
||||
|
||||
Write something to build your own docs! 🎁
|
||||
37
docs/index.md
Normal file
37
docs/index.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
pageType: home
|
||||
|
||||
hero:
|
||||
name: My Site
|
||||
text: A cool website!
|
||||
tagline: This is the tagline
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Quick Start
|
||||
link: /guide/
|
||||
- theme: alt
|
||||
text: GitHub
|
||||
link: https://github.com/web-infra-dev/rspress
|
||||
image:
|
||||
src: /rspress-icon.png
|
||||
alt: Logo
|
||||
features:
|
||||
- title: Blazing fast build speed
|
||||
details: The core compilation module is based on the Rust front-end toolchain, providing a more ultimate development experience.
|
||||
icon: 🏃🏻♀️
|
||||
- title: Support for MDX content writing
|
||||
details: MDX is a powerful way to write content, allowing you to use React components in Markdown.
|
||||
icon: 📦
|
||||
- title: Built-in full-text search
|
||||
details: Automatically generates a full-text search index for you during construction, providing out-of-the-box full-text search capabilities.
|
||||
icon: 🎨
|
||||
- title: Simpler I18n solution
|
||||
details: With the built-in I18n solution, you can easily provide multi-language support for documents or components.
|
||||
icon: 🌍
|
||||
- title: Static site generation
|
||||
details: In production, it automatically builds into static HTML files, which can be easily deployed anywhere.
|
||||
icon: 🌈
|
||||
- title: Providing multiple custom capabilities
|
||||
details: Through its extension mechanism, you can easily extend theme UI and build process.
|
||||
icon: 🔥
|
||||
---
|
||||
BIN
docs/public/rspress-dark-logo.png
Normal file
BIN
docs/public/rspress-dark-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
docs/public/rspress-icon.png
Normal file
BIN
docs/public/rspress-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
docs/public/rspress-light-logo.png
Normal file
BIN
docs/public/rspress-light-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Reference in New Issue
Block a user