An open API service indexing awesome lists of open source software.

https://github.com/pingcap/website-docs

The next generation of PingCAP Docs. Powered by Gatsby ⚛️.
https://github.com/pingcap/website-docs

Last synced: 5 months ago
JSON representation

The next generation of PingCAP Docs. Powered by Gatsby ⚛️.

Awesome Lists containing this project

README

          


PingCAP Logo


website-docs

[Click here to view.](https://docs.pingcap.com/)

## Quick Start

1. Clone this repo;

2. Install dependent:

- Run `yarn`;

3. Download docs:

- Run `git submodule init`;
- Run `git submodule update --depth 1 --remote`;

### After download

Run `yarn start` to develop:

```sh
yarn start
```

In order to debug algolia searches, you need to provide two additional environment variables:

- `GATSBY_ALGOLIA_APPLICATION_ID`
- `GATSBY_ALGOLIA_API_KEY`

Put them in `.env.development` to make them take effect. (Ref: )

## Workflow

Because of most of our text data stored in GitHub. It's needed to apply a GitHub API token in development **when you are prompted for `rate-limiting`**.

For more details, view .

You must set the token as an env when you start some commands, defined as:

```sh
GITHUB_AUTHORIZATION_TOKEN=token
```

## The rules we followed

For better collaboration and review, we have developed a few rules to help us develop better.

- [JS](#js)
- [Styles](#styles)
- [Be Compact](#be-compact)
- [Necessary Test](#necessary-test)

**Before you contribute, you must read the following carefully.**

### JS

First, we use [husky](https://github.com/typicode/husky) and [lint-staged](https://github.com/okonet/lint-staged) to make [prettier](https://prettier.io/) format our code automatically before commit.

And also, because some of us use vscode to develop, we recommend to use [sort-imports](https://marketplace.visualstudio.com/items?itemName=amatiasq.sort-imports) to format all imports. (This is optional, we will not force you to use)

### Styles

Currently, we use `sass` to style each pages and components.

We hope you can follow this order **(Don't care about their value)** to organize all styles:

```scss
// Position first
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
// Then display
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
// Layout
width: 0;
height: 0;
margin: 0;
padding: 0;
// Colors
background: #fff;
color: #000;
// Outside
border: 0;
box-shadow: none;
// Finally, not often used values can be in any order
```

### Be Compact

**Don't include no used deps.**

**Don't let your code be too long-winded, there will be a lot of elegant writing.**

### Necessary Test

**Every new features must have a unit test.**

## Shortcodes

Currently, you can use these shortcodes into docs:

### Notifications

```jsx
This is a note.

This is a warning.

This is a tip.

This is an error.

This is an important message.
```

Everything you need is just to write a JSX tag, put the text into it. Then we will use `mdx` to convert it to JS code.

### Tab Panels

Use `` to create a tab panel. Do not put any h1 ~ h3 headings inside the tab panel.

```jsx


This is the first content, which is markdown format. The content will show
on the corresponding panel when users switch the tabs.

This is the second content.

```

## Landing page for TiDB

Edit file `_index.md` in each doc repo to custom its landing page.

All columns have to be wrapped by tag ``, each column has to be wrapped by tag ``and column title has to be wrapped by tag ``. For example:

```jsx


Column title- [This is nav](/fileName.md) - [This
is nav](/fileName.md) - [This is nav](/fileName.md) - [This is
nav](/fileName.md)


Column title- [This is nav](/fileName.md) - [This
is nav](/fileName.md) - [This is nav](/fileName.md) - [This is
nav](/fileName.md)

```

## License

MIT