Skip to content

Commit 0868adb

Browse files
Update contributing guide and improve docs (#408)
* update contributing guide and improve docs * symlink work plz? * add changeset
1 parent 3d2cc84 commit 0868adb

File tree

5 files changed

+99
-100
lines changed

5 files changed

+99
-100
lines changed

.changeset/happy-shrimps-carry.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ngrok/mantle": patch
3+
---
4+
5+
Revamp the readme and contributing guide

CODE_OF_CONDUCT.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# ngrok Documentation Code of Conduct
1+
# Mantle Code of Conduct
22

33
## Our Pledge
44

@@ -24,9 +24,9 @@ Examples of unacceptable behavior by participants include:
2424

2525
## Our Responsibilities
2626

27-
The ngrok documentation team is responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
27+
The Mantle team is responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
2828

29-
The ngrok documentation team has the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
29+
The Mantle team has the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
3030

3131
## Scope
3232

CONTRIBUTING.md

+82-16
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,97 @@
1-
# Contributing to the ngrok documentation
1+
# Contributing to Mantle
22

3-
Thank you for your interest in contributing to the ngrok documentation! We welcome contributions from the community and are grateful for your help in making our documentation better.
3+
Thank you for your interest in contributing to the Mantle! We welcome contributions from the community and are grateful for your help in making our design system better.
44

55
## Getting started
66

7-
To get started, fork the ngrok documentation repository on GitHub and clone your fork locally.
8-
ngrok docs is built using Docusaurus. Use the instructions on [README.md](README.md) to setup your local environment.
9-
The documentation is written in Markdown and organized into directories by topic.
7+
First, [fork the repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo) and clone to your local machine:
108

11-
## Making changes
9+
```sh
10+
git clone git@github.com:<your username>/mantle.git
11+
cd mantle
12+
```
1213

13-
To make changes to the documentation, edit the relevant Markdown files in your local clone of the repository. If you are unsure which files to edit, you can use the GitHub search functionality to find the relevant files.
14+
## Installation
1415

15-
When making changes, please follow the Markdown style guide and try to keep your changes concise and to the point. If you are making significant changes or adding new content, please consider including examples or other resources to help readers understand the topic better.
16+
The following prerequisites are required to contribute to `@ngrok/mantle`. Install the prerequisites through either the [automated](#automated-installation) or [manual](#manual-installation) installation guides below.
1617

17-
Once you have finished making your changes, we recommend you run a local build with docusaurus (command `pnpm run build`) to ensure your contribution will not present errors with links or build. After a successful build, push them to your fork on GitHub and create a pull request to submit your changes for review.
18+
- [Node 20](https://nodejs.org/en/download)
19+
- [pnpm 9](https://pnpm.io/installation#using-npm)
20+
- [nvm](https://github.com/nvm-sh/nvm)
1821

19-
## Code of conduct
22+
### Automated Installation
23+
24+
We use [direnv](https://direnv.net/) to assist you with setting up all of the required tooling.
25+
26+
Prefer to install and manage the tooling yourself? See [the manual installation instructions below](#manual-installation).
27+
28+
First, install `direnv`:
29+
30+
| OS | command |
31+
| ------ | ----------------------- |
32+
| macOS | brew install direnv |
33+
| ubuntu | sudo apt install direnv |
34+
35+
For all other OSes, see the [direnv installation guide](https://direnv.net/docs/installation.html).
36+
37+
> [!NOTE]
38+
> Don't forget to [set up direnv integration with your shell](https://direnv.net/docs/hook.html).
39+
40+
Next, run:
41+
42+
```sh
43+
direnv allow
44+
```
45+
46+
> [!WARNING]
47+
> If `direnv allow` does nothing for you (you should see things happening!), consider following the [guides to integrate direnv with your shell](https://direnv.net/docs/hook.html) and then try `direnv allow` again! As a last resort, you can follow the [manual installation instructions up above](#manual-installation).
48+
49+
This will install `nvm` (if not already installed) as well as set the correct `node` and `pnpm` versions for you. It will also run `pnpm install` at the end to install all `node_modules`.
50+
51+
### Manual Installation
52+
53+
If you prefer to manually manage and install the tooling yourself, follow these steps:
2054

21-
We ask that all contributors follow our [code of conduct](CODE_OF_CONDUCT.md) when contributing to the documentation. This code of conduct outlines our expectations for behavior and helps ensure that the ngrok community is a welcoming and inclusive place for everyone.
55+
1. Install [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) or your node version manager of choice.
56+
2. Ensure that `node 20` is installed. With `nvm`, run `nvm install`.
57+
3. Enable `pnpm` with `corepack`: `corepack enable pnpm`
58+
4. Install `pnpm` with `corepack`: `corepack install`
59+
5. Install project dependencies with `pnpm`: `pnpm install`
2260

23-
## Review process
61+
## Local Development
2462

25-
Once you have submitted your pull request, the ngrok documentation team will review your changes and provide feedback or suggestions for improvement. We may also make additional changes to your pull request to ensure that it meets the standards of the ngrok documentation.
63+
We use [Turborepo](https://turbo.build/) and pnpm workspaces to help manage the Mantle monorepo.
2664

27-
Once your pull request has been reviewed and any necessary changes have been made, it will be merged into the main ngrok documentation repository.
65+
To get started, simply run:
2866

29-
## Thank you!
67+
```
68+
pnpm -w run start
69+
```
70+
71+
This will spin up the Remix documentation site, and is configured to watch for changes to components (so your changes will be instantly reflected).
72+
73+
## Submitting a Pull Request
74+
75+
Before working on a large change, it is best to open an issue first to discuss.
76+
77+
After making your changes locally, go ahead and submit a pull request. The Mantle team will review your changes and provide feedback or suggestions for improvement. We may also make additional changes to your pull request to ensure that it meets the standards of Mantle.
78+
79+
We use [changesets](https://github.com/changesets/changesets) to help us manage versioning and changelogs. You can think of a changeset as an _intent to change_. If your changes require a publish and release, feel free to add a changeset to your PR, otherwise we can add one for you if you're unsure.
80+
81+
Handy command to add a changeset via the CLI:
82+
83+
```
84+
pnpm -w run changeset
85+
```
86+
87+
Some helpful tips:
88+
89+
- You don't have to use the cli if you prefer to just create one manually (though the cli is definitely easiest).
90+
- Feel free to edit the changeset file however many times you want (it's just an `.md` file) while working on your PR.
91+
- Check out their [common questions](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) for more tips or read their [docs](https://github.com/changesets/changesets/tree/main/docs).
92+
93+
Once your pull request has been reviewed and any necessary changes have been made, it will be merged.
94+
95+
## Code of conduct
3096

31-
Thank you for contributing to the ngrok documentation! Your help is greatly appreciated and will make our documentation better for everyone.
97+
We ask that all contributors follow our [code of conduct](CODE_OF_CONDUCT.md) when contributing. This code of conduct outlines our expectations for behavior and helps ensure that the ngrok community is a welcoming and inclusive place for everyone.

README.md

-23
This file was deleted.

README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
packages/mantle/README.md

packages/mantle/README.md

+8-58
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,12 @@
1111

1212
[Mantle](https://mantle.ngrok.com) is [ngrok](https://ngrok.com/)’s UI library and design system. It’s inspired by [shadcn/ui](https://ui.shadcn.com) and uses [Radix](https://www.radix-ui.com) with [Tailwind](https://tailwindcss.com/) for styling. It’s documented using [Remix](https://remix.run/docs).
1313

14-
## Getting Started
14+
## Documentation
15+
16+
- [mantle.ngrok.com](https://mantle.ngrok.com) - our official component documentation site (reflects latest releases)
17+
- [develop.mantle.ngrok.com](https://develop.mantle.ngrok.com) - staging site for all merges to `main`
18+
19+
## Installation
1520

1621
Install `@ngrok/mantle` with your preferred package manager:
1722

@@ -40,61 +45,6 @@ export default {
4045

4146
Next, check out the [Overview & Setup](https://mantle.ngrok.com/) and [Theme Provider](https://mantle.ngrok.com/components/theme-provider) usage docs and start using mantle components in your application!
4247

43-
### Prerequisites
44-
45-
The following prerequisites are required to contribute to `@ngrok/mantle`.
46-
We walk through the [tooling installation](#installation) steps below.
47-
48-
- [Node 20](https://nodejs.org/en/download)
49-
- [pnpm 9](https://pnpm.io/installation#using-npm)
50-
- [nvm](https://github.com/nvm-sh/nvm)
51-
52-
### Installation
53-
54-
Install the prerequisites through either the [automated](#automated-installation) or [manual](#manual-installation) installation guides.
55-
56-
#### Automated Installation
57-
58-
We use [direnv](https://direnv.net/) to assist you with setting up all of the required tooling.
59-
Prefer to install and manage the tooling yourself? See [the manual installation instructions below](#manual-installation).
60-
61-
First, install `direnv`:
62-
63-
| OS | command |
64-
| ------ | ----------------------- |
65-
| macOS | brew install direnv |
66-
| ubuntu | sudo apt install direnv |
67-
68-
For all other OSes, see the [direnv installation guide](https://direnv.net/docs/installation.html).
69-
70-
> [!NOTE]
71-
> Don't forget to [set up direnv integration with your shell](https://direnv.net/docs/hook.html).
72-
73-
Next, clone the repo and move into the directory:
74-
75-
```sh
76-
git clone git@github.com:ngrok-oss/mantle.git
77-
cd frontend
78-
```
79-
80-
Next, run:
81-
82-
```sh
83-
direnv allow
84-
```
85-
86-
> [!WARNING]
87-
> If `direnv allow` does nothing for you (you should see things happening!), consider following the [guides to integrate direnv with your shell](https://direnv.net/docs/hook.html) and then try `direnv allow` again! As a last resort, you can follow the [manual installation instructions up above](#manual-installation).
88-
89-
This will install `nvm` (if not already installed) as well as set the correct `node` and `pnpm` versions for you.
90-
It will also run `pnpm install` at the end to install all `node_modules`.
91-
92-
#### Manual Installation
93-
94-
If you prefer to manually manage and install the tooling yourself, follow these steps:
48+
## Contributing
9549

96-
1. Install [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) or your node version manager of choice.
97-
2. Ensure that `node 20` is installed. With `nvm`, run `nvm install`.
98-
3. Enable `pnpm` with `corepack`: `corepack enable pnpm`
99-
4. Install `pnpm` with `corepack`: `corepack install`
100-
5. Install project dependencies with `pnpm`: `pnpm install`
50+
Please read our [contribution guide](https://github.com/ngrok-oss/mantle/blob/main/CONTRIBUTING.md).

0 commit comments

Comments
 (0)