We are hiring. Please check out our about page and submit inquiry from there.

• Getting Started
• Content Guide
• Code Style
  • ESLint
  • Prettier
  • VS Code
• Vercel

1. Clone this repository

git clone [email protected]:bytebase/bytebase.com.git

1. Install dependencies

pnpm install

1. Run website locally

pnpm run dev

Open http://localhost:3001 with your browser to see the local running website.

The repo hosts 3 major content types:

• Documentation at https://www.bytebase.com/docs
• Blog at https://www.bytebase.com/blog
• Changelog at https://www.bytebase.com/changelog

For general writing guide, please check this writing guide.

All lowercase with - as word separator:

• my-awesome-post.md
• my-awesome-image.webp

• Naming: choose a readable image name.
• Sizing: use 16:9 ratio if possible. The feature image sizing must be 16:9.
• Format: use WebP instead of PNG format to reduce image size.

Use animated recording judicious. Sometimes you have to use animation to showcase the feature, however, recording requires much larger size and slows page loading speed. In most cases, we should have at most 1 recording per page.

• Format: Try converting GIF to WebP to see if the size can be reduced. If not, then use GIF.

• Put documentation under https://github.com/bytebase/bytebase.com/tree/main/content/docs.
• Put image under https://github.com/bytebase/bytebase.com/tree/main/public/content/docs.
• Check https://www.bytebase.com/docs/document-write-guide for supported markdown syntax.

• Put under https://github.com/bytebase/bytebase.com/tree/main/content/blog.
• Under https://github.com/bytebase/bytebase.com/tree/main/public/content/blog, for each blog post, create a folder using the blog post file name and put all images for that post there.
• Use feature image.

• Put under https://github.com/bytebase/bytebase.com/tree/main/content/changelog.
• Under https://github.com/bytebase/bytebase.com/tree/main/public/content/changelog, for each changelog containing any image, create a folder using the changelog version and put all images for that changelog there.
• Do NOT use feature image

Skip this if you only change documentation

ESLint helps find and fix code style issues and force developers to follow same rules. Current configuration is based on eslint:recommended, next/core-web-vitals and @typescript-eslint/recommended rules sets.

Additional commands:

pnpm run lint

Run it to check the current status of eslint issues across project.

pnpm run lint:fix

Run it to fix all possible issues.

Prettier helps to format code based on defined rules. Difference between Prettier and ESLint.

Additional commands:

pnpm run format

Run it to format all files across the project.

Following extensions required to simplify the process of keeping the same code style across the project:

• ESLint
• Prettier

After installation, VS Code will be use settings from the .vscode/settings.json file and will be fixing and formatting your code automatically on paste and save actions.

www.bytebase.com is hosted on Vercel. Upon successful deployment, Vercel will post a webhook event to /api/index-to-algolia to rebuild the index.

curl -X POST https://www.bytebase.com/api/index-to-algolia/