Browse Source

feat: init project

main
Leon 4 months ago
commit
3b87b23c46
14 changed files with 3027 additions and 0 deletions
  1. +14
    -0
      .gitignore
  2. +29
    -0
      README.md
  3. +16
    -0
      docs/_meta.json
  4. +1
    -0
      docs/guide/_meta.json
  5. +210
    -0
      docs/guide/index.md
  6. +5
    -0
      docs/hello.md
  7. +37
    -0
      docs/index.md
  8. BIN
      docs/public/rspress-dark-logo.png
  9. BIN
      docs/public/rspress-icon.png
  10. BIN
      docs/public/rspress-light-logo.png
  11. +16
    -0
      package.json
  12. +21
    -0
      rspress.config.ts
  13. +20
    -0
      tsconfig.json
  14. +2658
    -0
      yarn.lock

+ 14
- 0
.gitignore View File

@@ -0,0 +1,14 @@
# Local
.DS_Store
*.local
*.log*

# Dist
node_modules
dist/
doc_build/

# IDE
.vscode/*
!.vscode/extensions.json
.idea

+ 29
- 0
README.md View File

@@ -0,0 +1,29 @@
# Rspress website

## Setup

Install the dependencies:

```bash
npm install
```

## Get started

Start the dev server:

```bash
npm run dev
```

Build the website for production:

```bash
npm run build
```

Preview the production build locally:

```bash
npm run preview
```

+ 16
- 0
docs/_meta.json View 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
- 0
docs/guide/_meta.json View File

@@ -0,0 +1 @@
["index"]

+ 210
- 0
docs/guide/index.md View 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
- 0
docs/hello.md View File

@@ -0,0 +1,5 @@
# Hello world!

## Start

Write something to build your own docs! 🎁

+ 37
- 0
docs/index.md View 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 View File

Before After
Width: 365  |  Height: 95  |  Size: 6.3 kB

BIN
docs/public/rspress-icon.png View File

Before After
Width: 1280  |  Height: 1214  |  Size: 103 kB

BIN
docs/public/rspress-light-logo.png View File

Before After
Width: 365  |  Height: 95  |  Size: 6.4 kB

+ 16
- 0
package.json View File

@@ -0,0 +1,16 @@
{
"name": "doracc-com",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "rspress build",
"dev": "rspress dev",
"preview": "rspress preview"
},
"dependencies": {
"rspress": "^1.40.2"
},
"devDependencies": {
"@types/node": "^18.11.17"
}
}

+ 21
- 0
rspress.config.ts View File

@@ -0,0 +1,21 @@
import * as path from 'node:path';
import { defineConfig } from 'rspress/config';

export default defineConfig({
root: path.join(__dirname, 'docs'),
title: 'My Site',
icon: '/rspress-icon.png',
logo: {
light: '/rspress-light-logo.png',
dark: '/rspress-dark-logo.png',
},
themeConfig: {
socialLinks: [
{
icon: 'github',
mode: 'link',
content: 'https://github.com/web-infra-dev/rspress',
},
],
},
});

+ 20
- 0
tsconfig.json View File

@@ -0,0 +1,20 @@
{
"compilerOptions": {
"target": "ES2020",
"lib": ["DOM", "ES2020"],
"module": "ESNext",
"jsx": "react-jsx",
"noEmit": true,
"strict": true,
"skipLibCheck": true,
"isolatedModules": true,
"resolveJsonModule": true,
"moduleResolution": "bundler",
"useDefineForClassFields": true,
"allowImportingTsExtensions": true
},
"include": ["docs", "theme", "rspress.config.ts"],
"mdx": {
"checkMdx": true
}
}

+ 2658
- 0
yarn.lock
File diff suppressed because it is too large
View File


Loading…
Cancel
Save