Skip to content

Commit 0d005bd

Browse files
author
Eric Lin
committed
feat: general docs additions
1 parent 1e1aec9 commit 0d005bd

14 files changed

+233
-14
lines changed

.cspell.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@
3333
"babel.config.js",
3434
"api/",
3535
"docs/test-api/",
36-
"sidebars.js"
36+
"sidebars.js",
37+
"tsconfig.*.json"
3738
],
3839
"ignoreRegExpList": ["Email", "Urls", "#[\\w-]*"]
3940
}

docs/advanced/configuration-files/_category_.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"label": "Configuration Files",
3-
"position": 4,
3+
"position": 6,
44
"link": {
55
"type": "generated-index",
66
"description": "Advanced customization of configuration files."

docs/advanced/google-analytics.mdx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
sidebar_position: 5
3+
---
4+
5+
# Google Analytics
6+
7+
[Google Analytics](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-google-analytics) and [GTag](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-google-gtag) are Docusaurus plugins available depending on whether you need the older Analytics.js or GTag.
8+
9+
:::tip Recommendation
10+
11+
The **GTag** plugin is _pre-installed_ by default with this template repo.
12+
13+
It is highly suggested to use GTag instead of Analytics.js.
14+
15+
:::
16+
17+
## Setting up GTag in `docusaurus.config.js`
18+
19+
Uncomment the highlighted lines shown below in the `docusaurus.config.js` file to enable and set up GTag.
20+
21+
```js title="./docusaurus.config.js" {5-8}
22+
const config = {
23+
presets: [
24+
[
25+
"classic",
26+
gtag: {
27+
trackingID: "G-999X9XX9XX",
28+
anonymizeIP: true,
29+
},
30+
],
31+
],
32+
}
33+
```

docs/advanced/index.mdx

+6
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,9 @@ sidebar_position: 1
33
---
44

55
# Customization
6+
7+
## Docusaurus Plugins
8+
9+
Included plugins
10+
11+
[More plugins](https://docusaurus.io/community/resources)

docs/advanced/manage-docs-versions.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
---
2+
title: Manage versioned docs
23
sidebar_position: 2
34
---
45

5-
# Manage Docs Versions
6+
# Manage Versioned Docs
67

78
Docusaurus can manage multiple versions of your docs.
89

docs/advanced/multi-instance-docs.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
sidebar_position: 3
3+
---
4+
5+
# Support versioned and non-versioned docs

docs/advanced/remove-openapi-demo.mdx

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
sidebar_position: 4
3+
---
4+
5+
# Configure OpenAPI plugins
6+
7+
As part of this template repo, two options have been tested and provided for including OpenAPI documentation directly into Docusaurus. The major benefit of this is that it can be managed all within Docusaurus without linking to separate OpenAPI documentation and incurring more fragmentation in the docs system.
8+
9+
## Demo Plugins included
10+
11+
Click on the links to see the demo.
12+
13+
- [_redocusaurus_](/api)
14+
- [_docusaurus-plugin-openapi-docs_](/docs/category/test-api)
15+
16+
## Choosing between both plugins
17+
18+
| | redocusaurus | docusaurus-plugin-openapi-docs |
19+
| --- | --- | --- |
20+
| Setup requirements | Does not require extra CLI steps to generate OpenAPI Markdown | Requires additional setup in project to generate the Markdown |
21+
| Styling | Is a wrapper around Redocly and does not fit in completely with Docusaurus but is functionally very complete | Generates Markdown which fits in like documentation in Docusaurus |
22+
| | | |
23+
24+
## _redocusaurus_ configuration
25+
26+
```js title="./docusaurus.config.js"
27+
const redocusaurus = [
28+
"redocusaurus",
29+
{
30+
specs: [
31+
{
32+
id: "using-remote-url",
33+
// Remote File
34+
spec: "https://raw.githubusercontent.com/rohit-gohri/redocusaurus/main/website/openapi/single-file/openapi.yaml",
35+
route: "/api/",
36+
},
37+
],
38+
theme: {
39+
/**
40+
* Highlight color for docs
41+
*/
42+
primaryColor: "#3655d5",
43+
/**
44+
* Options to pass to redoc
45+
* @see https://github.com/redocly/redoc#redoc-options-object
46+
*/
47+
options: { disableSearch: true },
48+
/**
49+
* Options to pass to override RedocThemeObject
50+
* @see https://github.com/Redocly/redoc#redoc-theme-object
51+
*/
52+
theme: {},
53+
},
54+
},
55+
];
56+
```
57+
58+
Above is an example of how to configure the _Redocusaurus_ plugin; this is also the same configuration used in this repo as part of the demo.
59+
60+
## _docusaurus-plugin-openapi-docs_ configuration
61+
62+
```js title="./docusaurus.config.js"
63+
const docusaurusApi2 = [
64+
"docusaurus-plugin-openapi-docs",
65+
{
66+
id: "openapi",
67+
docsPluginId: "classic", // e.g. "classic" or the plugin-content-docs id
68+
config: {
69+
api: {
70+
specPath:
71+
"https://raw.githubusercontent.com/PaloAltoNetworks/docusaurus-openapi-docs/main/demo/examples/petstore.yaml", // path or URL to the OpenAPI spec
72+
outputDir: "docs/test-api", // output directory for generated *.mdx and sidebar.js files
73+
template: "api.mustache", // Customize API MDX with mustache template
74+
sidebarOptions: {
75+
groupPathsBy: "tag",
76+
categoryLinkSource: "tag",
77+
},
78+
},
79+
},
80+
},
81+
];
82+
```
83+
84+
## Removing a Plugin
85+
86+
As these plugins are `npm` modules installed into the project, they can be easily removed by doing the following:
87+
88+
1. `npm uninstall <plugin_dependency_name>` where `<plugin_dependency_name>` is either `redocusaurus` or (`docusaurus-plugin-openapi-docs` and `docusaurus-theme-openapi-docs`)
89+
2. To reduce clutter, you can also choose to remove the configuration as seen [above](##Redocusaurus-configuration) by deleting them from your `docusaurus.config.js`.
90+
3. Ensure that all references to the configuration is also removed from `docusaurus.config.js`. Delete the entire lines beginning with `const redocusaurus` and/or `const docusaurusApi2` depending on what you want to remove.
91+
4. Under the `const config` object, there is also a `plugins` and `themes` key which must have the references removed.

docs/getting-started/style-guide.mdx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
description: Documentation style guidelines
3+
sidebar_position: 4
4+
---
5+
6+
# Documentation style guide
7+
8+
The following are writing style guidelines for contributing to the ConsenSys documentation. These guidelines aim to keep the documentation consistent, well-organized, and easy to understand.
9+
10+
## General guidelines
11+
12+
1. **Be consistent** - Consistency helps users follow and understand the documentation. By being consistent with your word choices, visual formatting, and style of communication, users know what to expect when they read the documentation. For example, use consistent sentence structures when [writing step-by-step instructions](https://docs.microsoft.com/en-us/style-guide/procedures-instructions/writing-step-by-step-instructions).
13+
14+
1. **Be simple but technically correct** - Avoid technical jargon and assume the user isn't an Ethereum expert. When an understanding of a complex Ethereum concept is required, you can refer users to external resources. For example, to explain how the EVM works, link to a resource such as the [Ethereum Wiki](<https://eth.wiki/en/concepts/evm/ethereum-virtual-machine-(evm)-awesome-list>).
15+
16+
1. **Be proactive and suggest good practices** - Anticipate users' needs and guide them through a process. This often takes the form of notes or tips alongside the main explanation. Put yourself in the user's shoes and consider what questions you'd have when reading the documentation.
17+
18+
Documenting good practices is also important. For example, instruct users to secure private keys and protect RPC endpoints in production environments.
19+
20+
1. **Be informative but concise** - Provide enough information to help users develop a mental model of how the software works without forcing them to read too much text or redundant detail. Cut down your text by [using simple words and concise sentences](https://docs.microsoft.com/en-us/style-guide/word-choice/use-simple-words-concise-sentences).
21+
22+
1. **Be inclusive** - ConsenSys documentation aims to be inclusive to all users. Refer to the [Google inclusive documentation guide](https://developers.google.com/style/inclusive-documentation) and the [Microsoft bias-free communication guide](https://docs.microsoft.com/en-us/style-guide/bias-free-communication) as starting points.
23+
24+
## Writing style guide
25+
26+
ConsenSys documentation follows the [Microsoft Writing Style Guide](https://docs.microsoft.com/en-us/style-guide/welcome/), which is a straightforward reference for natural and clear writing style. The following are some important style recommendations:
27+
28+
- **Abbreviations** - Avoid [abbreviations and acronyms](https://docs.microsoft.com/en-us/style-guide/acronyms) unless they're well-known or often repeated in the documentation. Use "for example" instead of "e.g," and "that is" instead of "i.e."
29+
- **Active voice** - Use [active voice](https://docs.microsoft.com/en-us/style-guide/grammar/verbs#active-and-passive-voice) where possible. Use "you" to create a personal tone.
30+
- **Code samples** - Provide code samples that can be copied and pasted in a console or editor with minimal editing, and work as expected.
31+
- When writing code samples in a programming language, refer to the programming language's style guide.
32+
- Always provide code samples as text in a code block; never use screenshots that would force the user to type it manually.
33+
- When breaking up lines in a command sample, add line breaks (`\`) to ensure it can work when pasted.
34+
- Don't include the console prompt (`>`,`$`,`#`,`%`, or the full `user@mycomputer Develop %`) or other characters that would prevent the command to run when pasted.
35+
- If values must be replaced in a sample, use placeholders such as `<your IP address>`.
36+
- **Contractions** - Use common contractions, such as "it’s" and "you’re," to create a friendly, informal tone.
37+
- **Sentence case for headings** - Use sentence case instead of title case for headings.
38+
- **"We recommend"** - In general, don't use first person. However, use "we recommend" to introduce a product recommendation. Don't use "ConsenSys recommends" or "it is recommended."
39+
- **GitHub permalinks** - When linking to a GitHub file, use the <!-- markdown-link-check-disable-next-line --> [permanent link (permalink)](https://docs.github.com/en/repositories/working-with-files/using-files/getting-permanent-links-to-files) to the file. You can copy the permalink by selecting the ellipses (`...`) in the upper right corner of the file page, and selecting **Copy permalink**.
40+
41+
Refer to the [Microsoft Guide](https://docs.microsoft.com/en-us/style-guide/welcome/) for any other questions on style.
42+
43+
## Documentation categories
44+
45+
A typical documentation page falls into one of the following four categories:
46+
47+
1. [**How to**](https://documentation.divio.com/how-to-guides/) - How-to content provides instructions to achieve a specific outcome. How-to content assumes users already have some basic knowledge or understanding of the product.
48+
49+
1. [**Concepts**](https://documentation.divio.com/explanation/) - Conceptual content provides background information and context about a feature. Conceptual content can explain what the feature is, how it works at a high level, why it's needed, and when and where it's used.
50+
51+
1. [**Tutorials**](https://documentation.divio.com/tutorials/) - Tutorials provide a set of end-to-end steps to complete a project. Tutorials are complete and reproducible. They don't assume users have prior knowledge of the subject or required tools.
52+
53+
1. [**Reference**](https://documentation.divio.com/reference/) - Reference content provides technical descriptions of APIs, command line options, and other elements of code. Reference content is straightforward and doesn't include long explanations or guides.
54+
55+
A page in each category should link to the related pages in the other categories, if they exist.
56+
57+
For more information about these documentation types and the differences between them, refer to the [Divio documentation system guide](https://documentation.divio.com/).

docusaurus.config.js

+28-6
Original file line numberDiff line numberDiff line change
@@ -90,13 +90,23 @@ const config = {
9090
docs: {
9191
sidebarPath: require.resolve("./sidebars.js"),
9292
// Set a base path separate from default /docs
93-
// routeBasePath: "my-base-path",
9493
editUrl: "https://github.com/ConsenSys/docs-template/tree/main/",
94+
routeBasePath: "/docs",
9595
// @ts-ignore
9696
// eslint-disable-next-line global-require
9797
remarkPlugins: [require("remark-docusaurus-tabs")],
98-
docLayoutComponent: "@theme/DocPage", // Remove if not using OpenAPI
99-
docItemComponent: "@theme/ApiItem", // Remove if not using OpenAPI
98+
docLayoutComponent: "@theme/DocPage", // Remove if not using docusaurus-plugin-openapi-docs
99+
docItemComponent: "@theme/ApiItem", // Remove if not using docusaurus-plugin-openapi-docs
100+
include: ["**/*.md", "**/*.mdx"],
101+
exclude: [
102+
"**/_*.{js,jsx,ts,tsx,md,mdx}",
103+
"**/_*/**",
104+
"**/*.test.{js,jsx,ts,tsx}",
105+
"**/__tests__/**",
106+
],
107+
showLastUpdateAuthor: true,
108+
showLastUpdateTime: true,
109+
includeCurrentVersion: true,
100110
},
101111
blog: {
102112
// routeBasePath: '/',
@@ -115,9 +125,13 @@ const config = {
115125
theme: {
116126
customCss: require.resolve("./src/css/custom.css"),
117127
},
128+
// gtag: {
129+
// trackingID: "G-999X9XX9XX",
130+
// anonymizeIP: true,
131+
// },
118132
},
119133
],
120-
redocusaurus,
134+
redocusaurus, // remove if not using redocusaurus
121135
],
122136

123137
themeConfig:
@@ -146,6 +160,14 @@ const config = {
146160

147161
// ... other Algolia params
148162
},
163+
announcementBar: {
164+
id: "announcement_bar",
165+
content:
166+
"⛔️ This template documentation site is still under construction! 🚧",
167+
backgroundColor: "#fafbfc",
168+
textColor: "#091E42",
169+
isCloseable: false,
170+
},
149171
colorMode: {
150172
defaultMode: "light",
151173
disableSwitch: false,
@@ -299,8 +321,8 @@ const config = {
299321
// },
300322
],
301323
}),
302-
plugins: [docusaurusApi2],
303-
themes: ["docusaurus-theme-openapi-docs"],
324+
plugins: [docusaurusApi2], // remove if not using docusaurus-plugin-openapi-docs
325+
themes: ["docusaurus-theme-openapi-docs"], // remove if not using docusaurus-plugin-openapi-docs
304326
};
305327

306328
module.exports = config;

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"write-heading-ids": "docusaurus write-heading-ids",
1616
"typecheck": "tsc",
1717
"typecheck-staged": "tsc-files --noEmit",
18-
"lint": "npm run lint:js && npm run lint:style && npm run lint:spelling",
18+
"lint": "npm run lint:spelling && npm run lint:js && npm run lint:style",
1919
"lint:js": "eslint . --ext js,jsx,ts,tsx --max-warnings=0",
2020
"lint:spelling": "cspell \"**\" --no-progress",
2121
"lint:style": "stylelint \"**/*.css\"",

project-words.txt

+3
Original file line numberDiff line numberDiff line change
@@ -405,3 +405,6 @@ yangshunz
405405
zhou
406406
zoomable
407407
zpao
408+
redocly
409+
mycomputer
410+
Divio

sidebars.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const sidebars = {
4646
apiSidebar: [
4747
{
4848
type: "category",
49-
label: "Teku",
49+
label: "Pet Store",
5050
link: {
5151
type: "generated-index",
5252
title: "Test API",

src/css/custom.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
--ifm-color-primary-dark: #657cdf;
1919
--ifm-color-primary-darker: #657cdf;
2020
--ifm-color-primary-darkest: #657cdf;
21-
--docusaurus-highlighted-code-line-bg: rgba(0 0 0 30%);
21+
/* --docusaurus-highlighted-code-line-bg: rgb(182 182 182); */
2222
}
2323

2424
[data-theme="light"] {
@@ -29,7 +29,7 @@
2929
--ifm-color-primary-dark: #2a48c7;
3030
--ifm-color-primary-darker: #2744bc;
3131
--ifm-color-primary-darkest: #20389b;
32-
--docusaurus-highlighted-code-line-bg: rgba(0 0 0 10%);
32+
/* --docusaurus-highlighted-code-line-bg: rgb(73, 73, 73); */
3333
}
3434

3535
/* github */

src/pages/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ function HomepageHeader() {
1717
<div className={styles.buttons}>
1818
<Link
1919
className="button button--secondary button--lg"
20-
to="/docs/intro">
20+
to="/docs/category/getting-started">
2121
Get Started - 5min ⏱️
2222
</Link>
2323
</div>

0 commit comments

Comments
 (0)