From 1d3d520cb19fc559966f32068b7624909baeb753 Mon Sep 17 00:00:00 2001 From: mj Date: Thu, 18 Apr 2024 18:35:19 -0400 Subject: [PATCH] Add open source resources for docs (#45) * style guide * workflow * test remove push * build * use pnpm instead * pnpm setup * version * add codeowners file * revert to yarn * edit link --- .github/CODEOWNERS | 5 + .github/pull_request_template.md | 10 ++ .github/workflows/validate.yml | 24 ++++ README.md | 49 ++++++-- STYLE_GUIDE.mdx | 201 +++++++++++++++++++++++++++++++ theme.config.tsx | 1 - 6 files changed, 277 insertions(+), 13 deletions(-) create mode 100644 .github/CODEOWNERS create mode 100644 .github/pull_request_template.md create mode 100644 .github/workflows/validate.yml create mode 100644 STYLE_GUIDE.mdx diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 0000000..4f291a8 --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,5 @@ +# These owners will be the default owners for everything in +# the repo. Unless a later match takes precedence, +# @sei-protocol/sei-core will be requested for +# review when someone opens a pull request. +* @sei-protocol/sei-core \ No newline at end of file diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 0000000..b63f2d6 --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,10 @@ +## What is the purpose of the change? + + + +## Describe the changes to the documentation + + + +## Notes + \ No newline at end of file diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml new file mode 100644 index 0000000..c5791e1 --- /dev/null +++ b/.github/workflows/validate.yml @@ -0,0 +1,24 @@ +name: Validate Changes + +on: + workflow_dispatch: + pull_request: + + +defaults: + run: + shell: bash + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v3 + + - name: Install dependencies + run: yarn + + - name: Build docs + run: yarn build \ No newline at end of file diff --git a/README.md b/README.md index 7b33473..9ac8594 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,48 @@ -# Nextra Docs Template +## Quick Start +Ensure you have `yarn` installed (macOS users can Run `brew install yarn`) -This is a template for creating documentation with [Nextra](https://nextra.site). +1. Use `yarn` to install dependencies +2. Use `yarn dev` to run the docs locally. +3. Use `yarn build` to build the docs. -[**Live Demo →**](https://nextra-docs-template.vercel.app) +You should always run `yarn build` before pushing any changes to validate that there are no syntax errors. -[![](.github/screenshot.png)](https://nextra-docs-template.vercel.app) +## Contributing -## Quick Start +This documentation is created using [Nextra](https://nextra.site). + +### Structure +Each page is generated from a single `.mdx` file under the `./pages` directory. + +Each directory represents a page grouping. Each directory contains a `_meta.json` file, which dictates the order and name of the items in the navbar. + +For more information on how the docs are structured, please refer to the [Nextra docs](https://nextra.site/docs/guide). + +### Changing Content +All content submitted will be reviewed by a maintainer + +To standardize the documentation, please follow the [style guide]() for instructions on how to format changes to the docs. + + +## Open Source Contributors -Click the button to clone this repository and deploy it on Vercel: +As an open source and decentralized protocol, we **greatly appreciate** any contributions! +If you feel like the docs can be better in some way, please feel free to fork this repo and make a pull request or open an issue in this Repository. -[![](https://vercel.com/button)](https://vercel.com/new/clone?s=https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra-docs-template&showOptionalTeamCreation=false) +### Make changes yourself +While the contents of this repository are not technical in nature, contributing requires a basic understanding of +- [Git](https://git-scm.com/downloads) +- Github -## Local Development +To propose changes directly, you can open a Pull Request against this repository. -First, run `pnpm i` to install the dependencies. +1. [Fork the repository](https://guides.github.com/activities/forking/), then [clone](https://docs.github.com/en/get-started/exploring-projects-on-github/contributing-to-a-project#cloning-a-fork) the forked repository locally. +2. Make changes to the repository. You can refer to the contribution guide above on how or where to make specific changes. +3. Validate your changes by running the docs locally (Refer to the [Quick Start](#quick-start) section above for instructions) +4. Commit and push your changes to your forked repository. +5. Once your changes have been pushed to your forked repository, [make a Pull Request](https://git-scm.com/downloads) against this repository. Ensure that your Pull Request follows the template so we can understand and review your changes clearly. -Then, run `pnpm dev` to start the development server and visit localhost:3000. +### Open an Issue. +Alternatively, if you have more general suggestions on how we can improve or correct these docs, you can [open an issue](https://github.com/sei-protocol/sei-docs/issues). -## License -This project is licensed under the MIT License. diff --git a/STYLE_GUIDE.mdx b/STYLE_GUIDE.mdx new file mode 100644 index 0000000..9f95fcb --- /dev/null +++ b/STYLE_GUIDE.mdx @@ -0,0 +1,201 @@ +# Sei Docs style guide + +This style guide contains general rules and principles to ensure the documentation is cohesive, useful and organized. + +## Principles + +This documentation strives to be + +### Beginner Friendly +The Sei community welcomes members from all walks of life. As such, the documentation should be understandable by anyone, including those who are new to Web3 or non-technical. + +The docs should strive to be Jargon Free +- Advanced terms and concepts, especially Web3 related terms and ideas, should be properly explained. +- Where appropriate, we should provide links to resources that can help the reader understand. +- Acronyms should be spelled out + + +### Simple + +Great documentation is simple and to the point. It should aim to convey more meaning with less words. + +- To be clear and inclusive, avoid using jargon and obscure words where possible. +- Limit the number of clauses in a sentence and make sure that your points are structured. +- Avoid qualifying language, which is ~~quite~~ often ~~completely~~ uneccessary. +- Information should be simply organized and easy to find. + +### Self-explanatory + +Great documentation is self-explanatory. Documentation shouldn't need more documentation to explain itself. +- Aim to provide as much context as possible. Code snippets and diagrams are great ways to illustrate complex concepts and provide examples. + +## Organization + +The Sei Docs are structured using the [Nextra](https://nextra.site). Are a guideline, we have split the pages by target audience. + +### General +Docs in these section describe Sei and topics that are applicable to all audiences. This is general information that is not specfic to users or developers. Information here is meant to be as layman as possible and should be understandable by everyone. + +Information here might include: +- What is Sei? +- How does a blockchain work? +- General information about how things work. + +### For Users +This section includes information specific to enabling people to interact with the Sei blockchain. + +Examples include information about standard resources used to interact with the chain (Wallets, Block Explorers), as well as tutorials on how to get started on Sei (Where to find tokens, apps etc.) + +### For Devs +This section includes resources for developers looking to build Dapps on Sei. Examples of what goes in here include: +- Smart contract tutorials +- Endpoints and config information that developers should use to interact with Sei (RPC Endpoints, Chain IDs etc) +- Information about clients and libraries that developers can use to easily develop apps. + +### Advanced +This section covers topics that are more specific to chain infrastructure. These are topics that are typically abstracted away from regular users and developers, but might be relevant to those looking to contribute chain infrastructure. Examples of topics here include: +- How to run a Sei Node +- How to run a Sei Validator + +### Misc +This section houses other pages that do not fall under the buckets above. + +## Style guidelines + +### Acronyms and Abbreviations + +To maximize clarity, we should avoid Acronyms and Abbreviations where possible, especially for shorter, more ambiguous acronyms +- Just use 'CosmWasm' instead of 'CW' + +However, there are occasions where acronyms might be more easily understandable (Eg. NFT instead of Non-Fungible Token, RPC instead of Remote Procedure Call), or referred to very frequently. + +In these cases, we should first use the use the spelled-out term followed by the shortened form in parentheses. +- Command Line Interface (CLI) +- Denomination (Denom) + +On subsequent occurrences in the same topic, we can then use the acronym. + +### Links + +You can add links to text using the followings syntax +```md +[text_to_highlight](link) +``` + +Some examples (These examples assume the page is in the `/pages` directory): +1. Link to section of [same document](#style-guidelines). +```md +[same document](#style-guidelines) +``` + +2. Link to [another document](/pages/overview.mdx). +```md +# Path is relative +[another document](/overview) +``` + +3. Link to [section of another document](/pages/overview.mdx#Staking). +```md +[section of another document](/overview#Staking) +``` + +4. External [Link](www.app.sei.io). +```md +[Link](www.app.sei.io) +``` + +Sentence ending punctuation should always be included outside the link. + +Links should be as descriptive as possible to let the reader know where they are going. + +- Bad Example: Interested to learn more about staking? Click [here](#links) to find out more + +- Better Example: Interested to learn more about staking? Refer to our [staking guide](#links) to find out more! + + +### Code +Code should either be specified as `inline` +```md +Code should either be specified as `inline` +``` + +Or within code blocks. +```ts +const codeBlockString = "codeBlock" +``` + +```md + ```ts + const codeBlockString = "codeBlock" + ``` +``` + +`Inline Code` should be used when referring to +- File and directory names. (eg. `./pages/overview.mdx`) +- References to variables in code (eg. `codeBlockString`) + +Code Blocks should be used when +- Sharing code snippets +```ts +const codeBlockString = () => { + const text = "codeblock" + let codeBlockSize: Number = 1 +} +``` + +- Scripts that users should copy and execute directly +```sh +git clone https://github.com/sei-protocol/sei-chain +cd sei-chain +git checkout v4.1.4-evm-devnet +make install +``` + +When code blocks are used, they should always be prettified by specifying the language. For example: +```md + TypeScript code block labelled with 'ts' + ```ts + const variable = value; + ``` + + Bash command line code block labelled with 'sh' + ```sh + git clone https://github.com/sei-protocol/sei-chain + cd sei-chain + ``` +``` + +When writing code blocks, avoid +1. Creating large code blocks. Break your code into smaller, more digestible pieces. +2. Writing too much documentation in between lines. If neccessary, break the code block up and add text to explain each code block instead. + +For tutorials, the goal should be to write code blocks that can be directly copied and used by the reader. + +Remember, code is used to elaborate or provide an example, make your point clearly first before using code to substantiate it! + +### Headings + +Headings should be use to denote the start of each section. There are 4 levels of headings that correspond to different sizes (avoid using anything more than level 4 headings) + +``` +# Page Title +## Main Topic(s) on page +### Sub Topics +#### Use only if more required +``` + +Headings levels should never be skipped. A level 2 heading should follow a level 1 heading, and a level 3 heading should follow a level 2 heading etc. + +### Images + +To use images, first add them to the `./public/assets` folder. + +Afterwards, they can be imported in each page using an import statement. For example: +```md +import nameOfImage from "../../public/assets/nameOfImage.png"; +``` + +Lastly, use the `ImageWithCaption` component to add the image to the page, along with a descriptive label: +```md + +``` \ No newline at end of file diff --git a/theme.config.tsx b/theme.config.tsx index c070922..68538a9 100644 --- a/theme.config.tsx +++ b/theme.config.tsx @@ -15,7 +15,6 @@ const config: DocsThemeConfig = { text: "Sei Docs © 2024", }, editLink: { - component: null, }, feedback: { content: null,