Writing style
The writing rules of this site, the linter that examines them, and how to add a page.
Note
The text of this site, the READMEs and the TSDoc comments follow the writing rules of ASD-STE100 Simplified Technical English as a style target. The rules make the text short, clear and the same for all readers, also for readers whose first language is not English. The project is not certified by ASD. The linter is an automated approximation of the rules. Refer to the writing standard for the background.
The main rules
- Write an instruction in 20 words or fewer, and a description in 25 words or fewer. A code span, a number with its unit, and a product name each count as one word.
- Write 6 sentences or fewer in a paragraph.
- Write one instruction in each sentence.
- Use the active voice. Use only the present tense, the past tense and the future tense with "will".
- Do not use semicolons. Write two sentences.
- Do not use contractions.
- Use only these modal verbs: "can", "cannot", "must" and "will". Do not use "should", "may", "would", "might" or "shall".
- Use one word for one meaning. For example, write "use", not "utilize". Write "make sure", not "ensure". Write "approximately", not "about", for a quantity. "About" means "concerned with".
- Do not omit the subject. For example, the TSDoc sentence "Returns the value." is not complete. Write "The function gives the value."
- Do not use "e.g.", "i.e." or "etc.". Write "for example", or rewrite the sentence.
- Write API names, file names, metric names and commands in code format.
The linter
@mark1russell7/ste-lint examines the Markdown and MDX pages and the TSDoc comments. It finds these problems:
- long sentences and long paragraphs
- modal verbs that are not approved
- semicolons and Latin abbreviations
- words with a better alternative
- gender pronouns
- passive instructions
- sentences without a subject
Examine all files:
pnpm lint:ste
Examine some files, with the output in JSON:
pnpm lint:ste "packages/site/content/docs/**/*.mdx" --format json
The configuration is in ste.config.json. It has the glossary of the project: the technical nouns and verbs that the rules permit, for example "heartbeat", "histogram" and "flush". Add a word to the glossary only if it is a real technical term of the project.
Note
To suppress the linter for one block, write a ste-disable-next comment before it, and give the cause. Use this only for text that the rules cannot handle, for example a diagram in a comment.
The full dictionary of ASD-STE100 is copyrighted. The project does not contain it. You can use a licensed copy:
- Convert the copy to the format in the README of
ste-lint. - Keep the file outside the repository.
- Set
STE_DICTIONARYto the path of the file.
Then the linter also reports words that are not in the dictionary.
The same word for the same thing
| Use | Do not use |
|---|---|
| main thread | UI thread |
| page view | pageview |
| back/forward cache | bfcache (except in code) |
| monitor | tracker, probe (except for a probe of a monitor) |
| worker heartbeat | ping |
Add a page
- Add an
.mdxfile inpackages/site/content/docs,packages/site/content/thesisorpackages/site/content/research. The path of the file is the path of the page. - Add the frontmatter:
title,descriptionandorder. For a page that is not complete, addstatus: draft. - Start the text at heading level 2 (
##). The page shows the title as the heading of level 1. - Use
pnpm lint:steto examine the page, and correct each finding.
The table of contents shows the headings of level 2 and 3.
Frontmatter
| Field | Type | What it does |
|---|---|---|
title | Text | The title of the page, in the sidebar, as the level 1 heading and in the document title. |
description | Text | One sentence under the title. Search engines and link previews show it, and the Open Graph image of the page shows it. Write 70 to 200 characters, and put the main point first. If the text has a colon, put it in quotes. |
order | Number | The position in the section. Lower numbers come first. |
status | draft or final | Optional. A draft page shows a note that it is a draft. |
Components
Each MDX page can use these components without an import. Put the data for a component in a TypeScript file next to the page, for example browser-support.data.ts. Then import the data in the page.
| Component | Use it for |
|---|---|
Callout | A note, a caution or a warning. |
Figure | Content with a caption. |
Tabs and Tab | Content in tabs, for example one command for each tool. |
Mermaid | A state, sequence or flow diagram. A fenced code block with the language mermaid also shows as a diagram. |
ArchitectureMap | The map of the system. |
PlotFigure | A chart. The page gives the Plot options and a text alternative. |
MetricTable | The metrics of a monitor, from the metric catalog. |
SupportMatrix | The browser support of features. |
To add a component, add it to packages/site/src/mdx/component-map.tsx.
Callouts
Note
A note gives information that helps the reader.
Caution
A caution tells the reader about a risk to performance or to other parts of the system.
Warning
A warning tells the reader about a risk of incorrect measurements or lost data.
Facts
Do not write facts about the library that the code or the tests do not show. Write facts about browsers only with a source, for example from the research. Set status: draft on a page with facts that nobody examined.