tachiyomi-website/CONTRIBUTING.md
2023-08-27 22:06:46 -04:00

114 lines
3.5 KiB
Markdown

# Tachiyomi Website Contributing Guide
Before submitting your contribution, please make sure to take a moment and read through the following guidelines:
- [Code of Conduct](./CODE_OF_CONDUCT.md)
- [Development Setup](#development-setup)
- [Project Structure](#project-structure)
- [Images and Videos guidelines](#images-and-videos-guidelines)
## Development Setup
You will need [Node.js](http://nodejs.org) **version 12+**, and [npm](https://docs.npmjs.com/try-the-latest-stable-version-of-npm) **version 7+**.
After cloning the repo, run:
``` bash
# Installs any dependencies needed.
$ npm install
```
To run the project now, run:
``` bash
# This command start a local server you can access and edit live.
$ npm run serve
```
### Commonly used NPM scripts
``` bash
# This command will generate a static site inside a public directory in your project.
$ npm run build
# This command will lint your files.
$ npm run lint
```
**Please make sure to have `npm run build` pass successfully before submitting a PR.** Although the same tests will be run against your PR on the CI server, it is better to have it working locally.
## Project Structure
- **`public`**: contains built files for distribution. Note this directory is only updated when a release happens or when you run the build command. Changes to this folder will not carry over with Git.
- **`src`**: contains the main code files.
- **`.vuepress`**: contains the main code files.
- **`components`**: this contains all the `.vue` components used on the website.
- **`config`**: contains complementary files for `config.js`.
- `navBar.js`: config for navigation bar.
- `plugins.js`: config for plugins.
- `sideBar.js`: config for sidebar.
- **`public`**: contains the static images/videos/scripts you'll want to use for the website.
- **`store`**: this contains the data store file used to connect features like downloads to main app and its forks.
- **`styles`**: all the projects style files are contained here.
- **`theme`**: this contains the extended Vuepress theme files.
- [`config.js`](https://vuepress.vuejs.org/guide/basic-config.html#config-file): main config file for Vuepress.
- `constants.js`: all reused variables/constants is stored here.
- [`enhanceApp.js`](https://vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements): this file is the place to install Vue plugins, register components and directives, etc.
- **`download`**: contains the markdown file for the `/download/` page.
- **`extensions`**: contains the markdown file for the `/extensions/` page.
- **`forks`**: contains the markdown files for the `/forks/...` pages.
- **`help`**: contains the markdown files for all the `/help/...` pages.
- **`sandbox`**: contains the markdown files for the `/sandbox/...` pages.
- `README.md`: markdown file for the front-page.
- `package.json`: contains information about which plugins are installed in the project.
## Images and Videos guidelines
### Common
- Use the Android Emulator
- Use the white theme
- Preferably use local source or a self-hosted extension
- If you are going to show a manga
- Resize to have a width of 648px
### Images
- Use `.webp` format
### Videos
- Use `.webm` format
- Encode it with our [HandBrake profile](.github/assets/tachiyomi-handbrake-profile.json)
- Remove audio track
## Credits
Thank you to all the people who have already contributed!
<a href="https://github.com/tachiyomiorg/website/graphs/contributors">
<img src="https://contrib.rocks/image?repo=tachiyomiorg/website" />
</a>