PingCAP Chinese Website

<p align="center">
  <img src="static/favicons/android-chrome-512x512.png" width="128" alt="PingCAP Logo" />
</p>

<h1 align="center">PingCAP Chinese Website</h1>

<p align="center">The website of PingCAP. Powered by Gatsby ⚛️.</p>

## How to start

Please visit: [Gatsby: Set Up Your Development Environment](https://www.gatsbyjs.com/docs/tutorial/part-zero/) .

## How to development

Into project, run:

```sh
yarn && yarn start
```

## Environment file ready

Please copy environment file (.env.development and .env.production) to your root folder.

### environment keyword

- CMS_URL: API path
- CMS_IDENTIFIER: API auth
- CMS_PASSWORD: API auth

- GATSBY_ALGOLIA_APP_ID: Algolia app id
- GATSBY_ALGOLIA_SEARCH_KEY: Algolia setting
- ALGOLIA_ADMIN_KEY: Algolia setting

- GATSBY_ALGOLIA_INDEX: Algolia setting

## Style guides

We use [husky](https://www.npmjs.com/package/husky) and [lint-staged](https://www.npmjs.com/package/lint-staged) to make sure all commits follow the [prettier](https://prettier.io/) setting.

## Code guide

### Naming convention

For fold and files name, allowed only letters a-z, A-Z, the numbers 0-9, hyphens ( - ), no special characters, no underscores( \_ )

#### Examples:

- assets `static resources`
  - iconfonts
  - images
  - ...
- constants `global constants`
  - global.js
  - ...
- compontents `global/static components`
- components
  - page
    - component-name
      - index.scss `component styles`
      - index.tsx `component container`
      - ...
    - index.scss `page styles`
  - ...
- pages `web pages `
  - index.tsx `page container`
  - ...
- styles
  - variables.scss `SCSS global variables`
  - mixins.scss `SCSS global mixins`
  - index.scss `global styles`
- types
  - \*.d.ts `types file`

### Syntax convention

#### TypeScript

- follow typescript syntax for ts/tsx file

#### Modules

- follow ESM modules syntax, use `import/export` for module system

#### Naming

- use camelCase for function name
- use PascalCase for module name
- use all uppercase for global constants
- use `handleEventName` for event handler
- avoid use single letter name

```
// bad
function Bad () { //TODO }
class bad { //TODO }
const env = globalEnv
q() { //TODO }

// good
function good() { //TODO }
class Good { //TODO }
const env = GLOBAL_ENV
query() { //TODO }

```

#### JSX

- use PascalCase for custom component tag
- use self closing tag for no content block

```
// bad
<div></div>

// good
<div />
<div>Hi</div>
```

#### Variable

- follow ES7 syntax, use `const` and `let` for all
- use destructuring for multiple properties object

```
// bad
var a = 1
var b = 2

// good
const a = 1
let b = 2

// bad
const a = obj.a
const b = obj.b
const d = obj.c.d

// good
const { a, b, c: { d } } = obj
```

#### Object

- use literal syntax for object creation
- for function property use shorthand
- only use quote properties for invalid identifiers

```
const obj = {
  'bad': 1,
  badMethod: function () {}
  good: 2,
  goodShorthand() {}
}
```

#### Array

- use the literal syntax for creation
- use array spreads `...` to copy array
- use `Array.from` for converting an object to array
- use array destructuring

```

// bad
const bad = new Array()

// good
const good = []
const newArray = [...good]
const convertFromObj = Array.from({ a: 1, b: 2, c: 3 })

// bad
const a = array[0]
const b = array[1]

// good
const [a, b] = array

```

#### Function

- follow ES8 , use shorthand or arrow function
- avoid use async/await for async function
- never reassign parameters

```
// bad
function a(obj) {
  obj.a = 1
}

// good
b(obj) {
  const { a } = obj
}

const b = (obj) => {
  const { a } = obj
}
```

#### String

- use template string ` `` ` for programmatically string
- never use `eval()` on string

```
// bad
const name = `Mison`

// good
const messages = (name) => {
  return `Hi, ${name}!`
}

```

Scss variable/mixins

- use `$variable` and `@mixins`, about detail please see [SCSS Documentation](https://sass-lang.com/documentation/variables).

## Git Flow

Trunk-based Development

[Document](https://trunkbaseddevelopment.com)

## Commit Specification

```
[<Author name>]<commit type><#story number> <description>
```

🌰

```
[MyName]feat:#PCW-28 created news page
```

### Commit Type

```shell
chore: add Oyster build script
docs: explain hat wobble
feat: add beta sequence
fix: remove broken confirmation message
refactor: share logic between 4d3d3d3 and flarhgunnstow
style: convert tabs to spaces
test: ensure Tayne retains clothing
```

### Commit template

```shell
git config commit.template ./commit_template
```

## Authors

PingCAP