Skip to content

feat: adding rspress example #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ Once you've forked this repository, you can clone it and follow the instructions
A monorepo using Turborepo, React, and Rspack as the bundler
*`` __[`react-vite-ts`](./examples/react-vite-ts)__
A React application built in TypeScript, using Vite as the bundler.
* __[`rspress`](./examples/rspress)__
A Rspress application.
* __[`rspack-project`](./examples/rspack-project)__
A simple Rspack application using React.

Expand Down
25 changes: 25 additions & 0 deletions examples/rspress/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
doc_build
16 changes: 16 additions & 0 deletions examples/rspress/docs/_meta.json
Original file line number Diff line number Diff line change
@@ -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 change: 1 addition & 0 deletions examples/rspress/docs/guide/_meta.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
["index"]
210 changes: 210 additions & 0 deletions examples/rspress/docs/guide/index.md
Original file line number Diff line number Diff line change
@@ -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);
```
````

**Ouput:**

```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 changes: 5 additions & 0 deletions examples/rspress/docs/hello.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Hello World!

## Start

Write something to build your own docs! 🎁
37 changes: 37 additions & 0 deletions examples/rspress/docs/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
pageType: home

hero:
name: Rspress
text: Rspack-based Static Site Generator
tagline: Rspress 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: Rspress 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: 🔥
---
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/rspress/docs/public/rspress-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading