mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-29 18:27:56 +02:00
misc: update CONTRIBUTING to reflect status quo (#5989)
* misc: update CONTRIBUTING to reflect status quo * One more line * Add links
This commit is contained in:
Joshua Chen
GitHub
parent
30cf744544
commit
0e6ec24aa3
2 changed files with 80 additions and 210 deletions
150
CONTRIBUTING.md
150
CONTRIBUTING.md
|
|
@ -18,25 +18,14 @@ There are many ways to contribute to Docusaurus, and many of them do not involve
|
|||
- Simply start using Docusaurus. Go through the [Getting Started](https://docusaurus.io/docs/installation) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](#reporting-new-issues).
|
||||
- Look through the [open issues](https://github.com/facebook/docusaurus/issues). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](#triaging-issues-and-pull-requests).
|
||||
- If you find an issue you would like to fix, [open a pull request](#your-first-pull-request). Issues tagged as [_Good first issue_](https://github.com/facebook/docusaurus/labels/Good%20first%20issue) are a good place to get started.
|
||||
- Read through the [Docusaurus docs](https://docusaurus.io/docs/installation). If you find anything that is confusing or can be improved, you can make edits by clicking "Edit" at the top of most docs.
|
||||
- Take a look at the [features requested](https://github.com/facebook/docusaurus/labels/enhancement) by others in the community and consider opening a pull request if you see something you want to work on.
|
||||
- Read through the [Docusaurus docs](https://docusaurus.io/docs/installation). If you find anything that is confusing or can be improved, you can click "Edit this page" at the bottom of most docs, which takes you to the GitHub interface to make and propose changes.
|
||||
- Take a look at the [features requested](https://github.com/facebook/docusaurus/labels/feature) by others in the community and consider opening a pull request if you see something you want to work on.
|
||||
|
||||
Contributions are very welcome. If you think you need help planning your contribution, please ping us on Twitter at [@docusaurus](https://twitter.com/docusaurus) and let us know you are looking for a bit of help.
|
||||
|
||||
### Versioned Docs
|
||||
|
||||
If you only want to make content changes you just need to know about versioned docs.
|
||||
|
||||
- `website/docs` - The files in here are responsible for the "next" version at https://docusaurus.io/docs/next/installation.
|
||||
- `website/versioned_docs/version-X.Y.Z` - These are the docs for the X.Y.Z version at https://docusaurus.io/docs/X.Y.Z/installation.
|
||||
|
||||
To make a fix to the published versions you must edit the corresponding markdown file in both folders. If you only made changes in `docs`, be sure to be viewing the `next` version to see the updates (ensure there's `next` in the URL).
|
||||
|
||||
> Do not edit the auto-generated files within `versioned_docs/` or `versioned_sidebars/` unless you are sure it is necessary. For example, information about new features should not be documented in versioned docs. Edits made to older versions will not be propagated to newer versions of the docs.
|
||||
|
||||
### Join our Discord Channel
|
||||
|
||||
We have the [`#contributors`](https://discord.gg/6g6ASPA) channel on [Discord](https://discord.gg/docusaurus) to discuss all things about Docusaurus development.
|
||||
We have the [`#contributors`](https://discord.gg/6g6ASPA) channel on [Discord](https://discord.gg/docusaurus) to discuss all things about Docusaurus development. You can also be of great help by helping other users in the help channel.
|
||||
|
||||
### Triaging Issues and Pull Requests
|
||||
|
||||
|
|
@ -51,13 +40,28 @@ One great way you can contribute to the project without writing any code is to h
|
|||
|
||||
Docusaurus uses [GitHub](https://github.com/facebook/docusaurus) as its source of truth. The core team will be working directly there. All changes will be public from the beginning.
|
||||
|
||||
When a change made on GitHub is approved, it will be checked by our continuous integration system, CircleCI.
|
||||
All pull requests will be checked by the continuous integration system, GitHub actions. There are unit tests, end-to-end tests, performance tests, style tests, and much more.
|
||||
|
||||
### Branch Organization
|
||||
|
||||
Docusaurus has one primary branch `main` and we use feature branches with deploy previews to deliver new features with pull requests.
|
||||
|
||||
## Bugs
|
||||
## Proposing a Change
|
||||
|
||||
If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, you can also file an issue with the [feature template](https://github.com/facebook/docusaurus/issues/new?assignees=&labels=feature%2Cneeds+triage&template=feature.yml).
|
||||
|
||||
If you intend to change the public API (e.g., something in `siteConfig.js`) or make any non-trivial changes to the implementation, we recommend filing an issue with the [proposal template](https://github.com/facebook/docusaurus/issues/new?assignees=&labels=proposal%2Cneeds+triage&template=proposal.yml). This lets us reach an agreement on your proposal before you put significant effort into it. These types of issues should be rare.
|
||||
|
||||
If you're only fixing a bug, it's fine to submit a pull request right away but we still recommend [filing an issue](https://github.com/facebook/docusaurus/issues/new?assignees=&labels=bug%2Cneeds+triage&template=bug.yml) detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue.
|
||||
|
||||
### Reporting New Issues
|
||||
|
||||
When [opening a new issue](https://github.com/facebook/docusaurus/issues/new/choose), always make sure to fill out the issue template. **This step is very important!** Not doing so may result in your issue not managed in a timely fashion. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.
|
||||
|
||||
- **One issue, one bug:** Please report a single bug per issue.
|
||||
- **Provide reproduction steps:** List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort.
|
||||
|
||||
### Bugs
|
||||
|
||||
We use [GitHub Issues](https://github.com/facebook/docusaurus/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new, unreported bug, you can submit a [bug report](#reporting-new-issues).
|
||||
|
||||
|
|
@ -65,38 +69,10 @@ If you have questions about using Docusaurus, contact the Docusaurus Twitter acc
|
|||
|
||||
You can also file issues as [feature requests or enhancements](https://github.com/facebook/docusaurus/labels/feature%20request). If you see anything you'd like to be implemented, create an issue with [feature template](https://raw.githubusercontent.com/facebook/docusaurus/main/.github/ISSUE_TEMPLATE/feature.md)
|
||||
|
||||
## Reporting New Issues
|
||||
|
||||
When [opening a new issue](https://github.com/facebook/docusaurus/issues/new/choose), always make sure to fill out the issue template. **This step is very important!** Not doing so may result in your issue not managed in a timely fashion. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.
|
||||
|
||||
- **One issue, one bug:** Please report a single bug per issue.
|
||||
- **Provide reproduction steps:** List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort.
|
||||
|
||||
### Security Bugs
|
||||
|
||||
Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe disclosure of security bugs. With that in mind, please do not file public issues; go through the process outlined on that page.
|
||||
|
||||
## Installation
|
||||
|
||||
1. Ensure you have [Yarn](https://yarnpkg.com/) installed.
|
||||
1. After cloning the repository, run `yarn install` in the root of the repository.
|
||||
1. To start a development server:
|
||||
|
||||
- For Docusaurus 1 development, run `yarn start:v1`
|
||||
- For Docusaurus 2 development, run `yarn start`
|
||||
|
||||
## Online one-click setup for contributing
|
||||
|
||||
You can use Gitpod (a free, online, VS Code-like IDE) for contributing. With a single click it will launch a workspace (for Docusaurus 2) and automatically:
|
||||
|
||||
- clone the docusaurus repo.
|
||||
- install the dependencies.
|
||||
- run `yarn run start`
|
||||
|
||||
So that you can start contributing straight away.
|
||||
|
||||
[](https://gitpod.io/#https://github.com/facebook/docusaurus)
|
||||
|
||||
## Pull Requests
|
||||
|
||||
### Your First Pull Request
|
||||
|
|
@ -109,13 +85,36 @@ Working on your first Pull Request? You can learn how from this free video serie
|
|||
|
||||
We have a list of [beginner friendly issues](https://github.com/facebook/docusaurus/labels/good%20first%20issue) to help you get your feet wet in the Docusaurus codebase and familiar with our contribution process. This is a great place to get started.
|
||||
|
||||
### Proposing a Change
|
||||
### Versioned Docs
|
||||
|
||||
If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, you can also file an issue with the [feature template](https://github.com/facebook/docusaurus/issues/new?template=feature.md).
|
||||
If you only want to make content changes you just need to be aware of versioned docs.
|
||||
|
||||
If you intend to change the public API (e.g., something in `siteConfig.js`) or make any non-trivial changes to the implementation, we recommend filing an issue with the [proposal template](https://github.com/facebook/docusaurus/issues/new?template=proposal.md) and including `[Proposal]` in the title. This lets us reach an agreement on your proposal before you put significant effort into it. These types of issues should be rare.
|
||||
- `website/docs` - The files in here are responsible for the "next" version at https://docusaurus.io/docs/next/installation.
|
||||
- `website/versioned_docs/version-X.Y.Z` - These are the docs for the X.Y.Z version at https://docusaurus.io/docs/X.Y.Z/installation.
|
||||
|
||||
If you're only fixing a bug, it's fine to submit a pull request right away but we still recommend filing an issue detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue.
|
||||
To make a fix to the published versions you must edit the corresponding markdown file in both folders. If you only made changes in `docs`, be sure to be viewing the `next` version to see the updates (ensure there's `next` in the URL).
|
||||
|
||||
> Do not edit the auto-generated files within `versioned_docs/` or `versioned_sidebars/` unless you are sure it is necessary. For example, information about new features should not be documented in versioned docs. Edits made to older versions will not be propagated to newer versions of the docs.
|
||||
|
||||
### Installation
|
||||
|
||||
1. Ensure you have [Yarn](https://yarnpkg.com/) installed.
|
||||
1. After cloning the repository, run `yarn install` in the root of the repository.
|
||||
1. To start a development server, run `yarn workspace website start`.
|
||||
|
||||
### Online one-click setup for contributing
|
||||
|
||||
You can use Gitpod (a free, online, VS Code-like IDE) for contributing. With a single click it will launch a workspace (for Docusaurus 2) and automatically:
|
||||
|
||||
- clone the docusaurus repo.
|
||||
- install the dependencies.
|
||||
- run `yarn start`
|
||||
|
||||
So that you can start contributing straight away.
|
||||
|
||||
[](https://gitpod.io/#https://github.com/facebook/docusaurus)
|
||||
|
||||
You can also try using the new [github.dev](https://github.dev/facebook/docusaurus) feature. While you are browsing any file, changing the domain name from `github.com` to `github.dev` will turn your browser into an online editor. You can start making changes and send pull requests right away.
|
||||
|
||||
### Sending a Pull Request
|
||||
|
||||
|
|
@ -124,7 +123,7 @@ Small pull requests are much easier to review and more likely to get merged. Mak
|
|||
Please make sure the following is done when submitting a pull request:
|
||||
|
||||
1. Fork [the repository](https://github.com/facebook/docusaurus) and create your branch from `main`.
|
||||
1. Add the copyright notice to the top of any code new files you've added.
|
||||
1. Add the [copyright notice](#copyright-header-for-source-code) notice to the top of any code new files you've added.
|
||||
1. Describe your [**test plan**](#test-plan) in your pull request description. Make sure to [test your changes](https://github.com/facebook/docusaurus/blob/main/admin/testing-changes-on-Docusaurus-itself.md)!
|
||||
1. Make sure your code lints (`yarn prettier && yarn lint`).
|
||||
1. Make sure your Jest tests pass (`yarn test`).
|
||||
|
|
@ -170,6 +169,12 @@ Copy and paste this to the top of your new file(s):
|
|||
|
||||
In order to accept your pull request, we need you to submit a CLA. You only need to do this once, so if you've done this for another Facebook open source project, you're good to go. If you are submitting a pull request for the first time, the Facebook GitHub Bot will reply with a link to the CLA form. You may also [complete your CLA here](https://code.facebook.com/cla).
|
||||
|
||||
After you have signed the CLA, the CLA bot would automatically update the PR status. There's no need to open a new PR.
|
||||
|
||||
**CLAs are required for us to merge your pull request.** While we value your effort and are willing to wait for you to come back and address the reviews in case you are unavailable after sending the pull request, pull requests that are ready to merge but have CLA missing and no response from the author **will be closed within two weeks of opening**. If you have further questions about the CLA, please stay in touch with us.
|
||||
|
||||
If it happens that you were unavailable and your PR gets closed, feel free to reopen once it's ready! We are still happy to review it, help you complete it, and eventually merge it.
|
||||
|
||||
### What Happens Next?
|
||||
|
||||
The core Docusaurus team will be monitoring for pull requests. Do help us by keeping pull requests consistent by following the guidelines above.
|
||||
|
|
@ -186,37 +191,42 @@ See how a minor change to your commit message style can make you a better progra
|
|||
|
||||
Format: `<type>(<scope>): <subject>`
|
||||
|
||||
`<scope>` is optional
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
feat: allow overriding of webpack config
|
||||
^--^ ^------------^
|
||||
| |
|
||||
| +-> Summary in present tense.
|
||||
|
|
||||
+-------> Type: chore, docs, feat, fix, refactor, style, or test.
|
||||
```
|
||||
`<scope>` is optional. If your change is specific to one/two packages, consider adding the scope. Scopes should be brief but recognizable, e.g. `content-docs`, `theme-classic`, `core`
|
||||
|
||||
The various types of commits:
|
||||
|
||||
- `feat`: (new feature for the user, not a new feature for build script)
|
||||
- `fix`: (bug fix for the user, not a fix to a build script)
|
||||
- `docs`: (changes to the documentation)
|
||||
- `style`: (formatting, missing semicolons, etc; no production code change)
|
||||
- `refactor`: (refactoring production code, eg. renaming a variable)
|
||||
- `test`: (adding missing tests, refactoring tests; no production code change)
|
||||
- `chore`: (updating grunt tasks etc; no production code change)
|
||||
- `feat`: a new API or behavior **for the end user**.
|
||||
- `fix`: a bug fix **for the end user**.
|
||||
- `docs`: a change to the website or other Markdown documents in our repo.
|
||||
- `refactor`: a change to production code that leads to no behavior difference, e.g. splitting files, renaming internal variables, improving code style...
|
||||
- `test`: adding missing tests, refactoring tests; no production code change.
|
||||
- `chore`: upgrading dependencies, releasing new versions... Chores that are **regularly done** for maintenance purposes.
|
||||
- `misc`: anything else that doesn't change production code, yet is not `test` or `chore`. e.g. updating GitHub actions workflow.
|
||||
|
||||
Do not get too stressed about PR titles, however. The maintainers will help you get them right, and we also have a PR label system that doesn't equate with the commit message types. Your code is more important than conventions!
|
||||
|
||||
### Example
|
||||
|
||||
```
|
||||
feat(core): allow overriding of webpack config
|
||||
^--^^----^ ^------------^
|
||||
| | |
|
||||
| | +-> Summary in present tense.
|
||||
| |
|
||||
| +-> The package(s) that this change affected.
|
||||
|
|
||||
+-------> Type: see below for the list we use.
|
||||
```
|
||||
|
||||
Use lower case not title case!
|
||||
|
||||
### Code Conventions
|
||||
## Code Conventions
|
||||
|
||||
#### General
|
||||
### General
|
||||
|
||||
- **Most important: Look around.** Match the style you see used in the rest of the project. This includes formatting, naming files, naming things in code, naming things in documentation.
|
||||
- "Attractive"
|
||||
- We do have Prettier (a formatter) and ESLint (a syntax linter) to catch most stylistic problems. If you are working locally, they should automatically fix some issues during every git commit.
|
||||
|
||||
### Documentation
|
||||
|
||||
|
|
|
|||
|
|
@ -1,140 +0,0 @@
|
|||
Docusaurus uses [Remarkable](https://github.com/jonschlinkert/remarkable) to convert plain markdown text into HTML. This document covers how one may extend Remarkable to provide custom functionality. While the document focuses on extending Remarkable in implementation, the theory should apply in general to any markdown parser.
|
||||
|
||||
## Why extend Remarkable?
|
||||
|
||||
Users of GitHub Pages have come to expect certain features provided by GitHub Flavored Markdown. One such example would be heading anchors, where every sub-header has an associated anchor that matches the heading text. This makes it possible to link to a specific section in a document by passing a fragment that matches the heading. For example, to link to this very section, you may create a link like so:
|
||||
|
||||
```md
|
||||
[Link to this section](#why-extend-remarkable)
|
||||
```
|
||||
|
||||
## A Brief Overview of How A Markdown Parser/Renderer Works
|
||||
|
||||
This is a summary of the basic concepts you'll need to understand in order to extend Remarkable, based on the [Remarkable docs](https://github.com/jonschlinkert/remarkable/tree/master/docs) as well as our own experience extending Remarkable to support GFM-style heading anchors.
|
||||
|
||||
As the heading here implies, there's two main parts to how a markdown parser works: the parsing phase, and the rendering phase. During the parsing phase, a plain markdown document is parsed into a set of tokens that describe its structure. These tokens are then used by the renderer to output the actual HTML contents.
|
||||
|
||||
### Parsing Markdown into Tokens
|
||||
|
||||
Let's talk a bit more about what is done as part of the parsing stage. The result of this stage is a tree made up of tokens. There's three types of tokens: inline, block, and core.
|
||||
|
||||
#### Inline tokens
|
||||
|
||||
Inline tokens are tokens that have text as a child. They are leaf nodes, and do not support having additional tokens within. An example of this might be `_emphasized text_`, which might be represented as a token of type `em` with contents of `emphasized text`.
|
||||
|
||||
#### Block tokens
|
||||
|
||||
A block token is a bit more complex. It may wrap one or more tokens, and can span more than one line of text. An example of this is the heading token:
|
||||
|
||||
```md
|
||||
### Hi there
|
||||
```
|
||||
|
||||
The plain markdown text above would be parsed into three tokens:
|
||||
|
||||
- `heading_open`: Marks the beginning of the heading. May have additional props, such as `hLevel: 3` (heading level) in this case.
|
||||
- `text`: Plain text token, with a value of "Hi there".
|
||||
- `heading_close`: Marks the end of the heading. In this case, it would also have a `hLevel: 3` prop.
|
||||
|
||||
This is a basic example, because it contains a `text` token within the opening and closing tags. A common block encountered in markdown is the paragraph, which might be tokenized into a series of tokens such as `paragraph_open`, one or more `text` tokens, `link` tokens (if links are present within the text, for example), and, eventually, a `paragraph_close` token.
|
||||
|
||||
#### Core tokens
|
||||
|
||||
These are outside of the initial scope of this article for now. Core tokens may be [reference-style links](https://github.github.com/gfm/#link-reference-definitions), which can appear anywhere in a markdown document.
|
||||
|
||||
### Rendering Tokens into HTML
|
||||
|
||||
After we have parsed everything into tokens, we go to the rendering phase. This is where we convert our `heading_open`, `text`, and `heading_close` tokens from earlier into `<h3>Hi there</h3>`. This should be self-explanatory.
|
||||
|
||||
## Creating a Remarkable Extension
|
||||
|
||||
Now that you have a better idea of how parsing/rendering works, we can proceed to create an extension that renders heading anchors. First we need to determine if we need to extend the parser, or the renderer. In this case, we're only interested in changing how a heading is rendered to HTML, so we'll just need to override the heading renderers.
|
||||
|
||||
The default heading renderers may look like this (you can refer to the Remarkable source code here):
|
||||
|
||||
```js
|
||||
md.renderer.rules.heading_open = function (tokens, idx /*, options, env */) {
|
||||
return '<h' + tokens[idx].hLevel + '>';
|
||||
};
|
||||
|
||||
md.renderer.rules.heading_close = function (tokens, idx /*, options, env */) {
|
||||
return '</h' + tokens[idx].hLevel + '>\n';
|
||||
};
|
||||
```
|
||||
|
||||
That's pretty straightforward: whenever these tokens are found, we render a `<hN>` or `</hN>` HTML tag, where N is the `hLevel` for this heading. That would result in `<h3>Hi there</h3>` being output. But what we want is something closer to this:
|
||||
|
||||
```html
|
||||
<h3>
|
||||
<a class="anchor" id="hi-there"></a>Hi there
|
||||
<a class="hash-link" href="#hi-there">#</a>
|
||||
</h3>
|
||||
```
|
||||
|
||||
In that case, we need to override our heading rules like so:
|
||||
|
||||
```js
|
||||
md.renderer.rules.heading_open = function (tokens, idx /*, options, env */) {
|
||||
return (
|
||||
'<h' +
|
||||
tokens[idx].hLevel +
|
||||
'>' +
|
||||
'<a class="anchor" id="' +
|
||||
toSlug(tokens[idx + 1].content) +
|
||||
'"></a>'
|
||||
);
|
||||
};
|
||||
|
||||
md.renderer.rules.heading_close = function (tokens, idx /*, options, env */) {
|
||||
return (
|
||||
' <a class="hash-link" href="#' +
|
||||
toSlug(tokens[idx - 1].content) +
|
||||
'">#</a>' +
|
||||
'</h' +
|
||||
tokens[idx].hLevel +
|
||||
'>\n'
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
Note that we are referring to `tokens[idx+1]` and `tokens[idx-1]` at various points in the code. In the case of `idx+1` in `heading_open`, it refers to the next token after `heading_open`, which is a `text` inline token. Same for `heading_close`, where we get the same `text` token by grabbing the preceding token. That's because we make a reasonable assumption that the markdown parser has generated three tokens for each of our headers as covered above.
|
||||
|
||||
### Using the Extension
|
||||
|
||||
We now need to tell Remarkable to use our extension. We can wrap our rules in a function called `anchors`:
|
||||
|
||||
```js
|
||||
function anchors(md) {
|
||||
md.renderer.rules.heading_open = function (tokens, idx /*, options, env */) {
|
||||
return (
|
||||
'<h' +
|
||||
tokens[idx].hLevel +
|
||||
'>' +
|
||||
'<a class="anchor" id="' +
|
||||
toSlug(tokens[idx + 1].content) +
|
||||
'"></a>'
|
||||
);
|
||||
};
|
||||
|
||||
md.renderer.rules.heading_close = function (tokens, idx /*, options, env */) {
|
||||
return (
|
||||
' <a class="hash-link" href="#' +
|
||||
toSlug(tokens[idx - 1].content) +
|
||||
'">#</a>' +
|
||||
'</h' +
|
||||
tokens[idx].hLevel +
|
||||
'>\n'
|
||||
);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
We can now tell Remarkable to load this function as a plugin (`md` is our instance of Remarkable):
|
||||
|
||||
```js
|
||||
this.md.use(anchors);
|
||||
```
|
||||
|
||||
### Future Work
|
||||
|
||||
A more advanced extension might add additional parser rules. These rules may add support for new markdown syntax not covered by Remarkable. Say, for example, a custom syntax to embed video when a tag like `@video` is found can be supported by generating a new type of token, that is later used by the renderer to output the necessary `<embed>` HTML tags. This is left as an exercise to the reader for now.
|
||||
Loading…
Add table
Reference in a new issue