@cryptotaxi247 / documentation-1 / commits / 940d9d0

chore: prettier

Luke Karrys committed Oct 15, 2023 at 10:52 UTC 940d9d05cea912c9698a74777705425a9e12eeb5
14 files changed +446 -348
.eslintrc.js
+23 -24
@@ -1,11 +1,7 @@
1 module.exports = {
2 root: true,
3 - ignorePatterns: [
4 - 'cli/',
5 - 'theme/',
6 - ],
3 + ignorePatterns: ['cli/', '.cache/', 'public/'],
4 extends: [
8 - '@npmcli',
5 'eslint:recommended',
6 'plugin:react/recommended',
7 'plugin:github/react',
@@ -17,26 +13,29 @@ module.exports = {
13 version: 'detect',
14 },
15 },
20 - overrides: [{
21 - files: ['src/**'],
22 - parserOptions: {
23 - ecmaFeatures: {
24 - jsx: true,
16 + overrides: [
17 + {
18 + files: ['src/**'],
19 + parserOptions: {
20 + ecmaFeatures: {
21 + jsx: true,
22 + },
23 + },
24 + env: {
25 + commonjs: true,
26 + es2022: true,
27 + browser: true,
28 + node: false,
29 + },
30 + rules: {
31 + 'max-len': 'off',
32 },
33 },
27 - env: {
28 - commonjs: true,
29 - es2022: true,
30 - browser: true,
31 - node: false,
32 - },
33 - rules: {
34 - 'max-len': 'off',
35 - },
36 - }, {
37 - files: ['src/shared.js'],
38 - rules: {
39 - 'react/no-unescaped-entities': 'off',
34 + {
35 + files: ['src/shared.js'],
36 + rules: {
37 + 'react/no-unescaped-entities': 'off',
38 + },
39 },
41 - }],
40 + ],
41 }
.prettierIgnore
-3
@@ -1,10 +1,7 @@
1 **/template-oss/*.json
2 **/template-oss/*.yml
3 content/
4 -content-debug/
4 cli/
5 .github/
6 package-lock.json
8 -CODE_OF_CONDUCT.md
9 -CONTENT-MODEL.md
7 SECURITY.md
CODE_OF_CONDUCT.md
+12 -13
@@ -10,20 +10,20 @@ We pledge to act and interact in ways that contribute to an open, welcoming, div
10
11 Examples of behavior that contributes to a positive environment for our community include:
12
13 -* Demonstrating empathy and kindness toward other people
14 -* Being respectful of differing opinions, viewpoints, and experiences
15 -* Giving and gracefully accepting constructive feedback
16 -* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
17 -* Focusing on what is best not just for us as individuals, but for the overall community
13 +- Demonstrating empathy and kindness toward other people
14 +- Being respectful of differing opinions, viewpoints, and experiences
15 +- Giving and gracefully accepting constructive feedback
16 +- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
17 +- Focusing on what is best not just for us as individuals, but for the overall community
18
19 Examples of unacceptable behavior include:
20
21 -* The use of sexualized language or imagery, and sexual attention or advances of any kind
22 -* Trolling, insulting or derogatory comments, and personal or political attacks
23 -* Public or private harassment
24 -* Publishing others' private information, such as a physical or email address, without their explicit permission
25 -* Contacting individual members, contributors, or leaders privately, outside designated community mechanisms, without their explicit permission
26 -* Other conduct which could reasonably be considered inappropriate in a professional setting
21 +- The use of sexualized language or imagery, and sexual attention or advances of any kind
22 +- Trolling, insulting or derogatory comments, and personal or political attacks
23 +- Public or private harassment
24 +- Publishing others' private information, such as a physical or email address, without their explicit permission
25 +- Contacting individual members, contributors, or leaders privately, outside designated community mechanisms, without their explicit permission
26 +- Other conduct which could reasonably be considered inappropriate in a professional setting
27
28 ## Enforcement Responsibilities
29
@@ -65,7 +65,7 @@ Community leaders will follow these Community Impact Guidelines in determining t
65
66 ### 4. Permanent Ban
67
68 -**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
68 +**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
69
70 **Consequence**: A permanent ban from any sort of public interaction within the community.
71
@@ -78,4 +78,3 @@ Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcem
78 [homepage]: https://www.contributor-covenant.org
79
80 For answers to common questions about this code of conduct, see the FAQ at <https://www.contributor-covenant.org/faq>. Translations are available at <https://www.contributor-covenant.org/translations>.
81 -
CONTENT-MODEL.md
+49 -36
@@ -1,32 +1,38 @@
1 # Content model
2 +
3 ## Introduction
3 -This content model explains the goals of content in the npm docs, and what to include when you're writing or updating an article. We use a model to ensure that our content consistently, clearly, and comprehensively communicates what people need to achieve their goals with npm.
4 -Following a content model creates consistency that helps users and maintainers of the docs.
4 +
5 +This content model explains the goals of content in the npm docs, and what to include when you're writing or updating an article. We use a model to ensure that our content consistently, clearly, and comprehensively communicates what people need to achieve their goals with npm. Following a content model creates consistency that helps users and maintainers of the docs.
6
7 For style questions, default to https://github.com/github/docs-internal/blob/main/contributing/content-style-guide.md
8
9 ## Content structure
10 +
11 Docs are grouped by topic.
10 -* Top-level doc set (Example: https://docs.npmjs.com/packages-and-modules)
11 - * Categories (Example: https://docs.npmjs.com/packages-and-modules/introduction-to-packages-and-modules)
12 - * Articles (Example: https://docs.npmjs.com/about-packages-and-modules)
12 +
13 +- Top-level doc set (Example: https://docs.npmjs.com/packages-and-modules)
14 + - Categories (Example: https://docs.npmjs.com/packages-and-modules/introduction-to-packages-and-modules)
15 + - Articles (Example: https://docs.npmjs.com/about-packages-and-modules)
16
17 ### Categories
18 +
19 Categories are organized around a feature or a discrete set of tasks. Use titles that are task-based and describe the purpose or goal of the category.
20
21 ### Articles
22 +
23 Articles are the basic unit of content for the docs. Use titles that are clear, descriptive, and specific, with the same terminology as the product itself. All articles follow the same content order.
24
25 #### Content order
26 +
27 Introduce content from the broadest applicability to the most specific, following this order:
28
23 -* Conceptual content
24 -* Procedural content for enabling a feature or setting
25 -* Procedural content on using a feature
26 -* Procedural content on managing a feature or setting
27 -* Procedural content on disabling a feature or setting
28 -* Procedural content on destructive actions (e.g. deletion)
29 -* Troubleshooting information
29 +- Conceptual content
30 +- Procedural content for enabling a feature or setting
31 +- Procedural content on using a feature
32 +- Procedural content on managing a feature or setting
33 +- Procedural content on disabling a feature or setting
34 +- Procedural content on destructive actions (e.g. deletion)
35 +- Troubleshooting information
36
37 Articles answer, “What is it? Why do it?” and then “How does someone do it?”
38
@@ -34,57 +40,64 @@ Articles answer, “What is it? Why do it?” and then “How does someone do it
40
41 **Conceptual**
42
37 -Conceptual content helps people understand a feature or topic by providing a clear, high-level overview, explanation of how the feature or topic can help them on their journey, and context like use cases or examples. Conceptual content is clear enough for a novice audience but also includes relevant information for advanced users. People most often use conceptual content when they're learning.
38 -If people need certain permissions to do a task described in the article, include a permissions statement describing who can do the task in the conceptual information.
43 +Conceptual content helps people understand a feature or topic by providing a clear, high-level overview, explanation of how the feature or topic can help them on their journey, and context like use cases or examples. Conceptual content is clear enough for a novice audience but also includes relevant information for advanced users. People most often use conceptual content when they're learning. If people need certain permissions to do a task described in the article, include a permissions statement describing who can do the task in the conceptual information.
44
45 How to write conceptual content
41 -* If people need specific permissions to do what is described in the article, list those required permissions
42 -* Describe in plain language what the feature, setting, or topic is
43 -* Describe its purpose and why it’s useful to the reader
44 -* Share use cases or examples
45 -* If relevant, describe how the feature or topic works
46 -* Highlight any details the reader needs to know to use the feature
47 -* Include next steps for getting started with the feature (whether through further reading links or content within the article itself)
46 +
47 +- If people need specific permissions to do what is described in the article, list those required permissions
48 +- Describe in plain language what the feature, setting, or topic is
49 +- Describe its purpose and why it’s useful to the reader
50 +- Share use cases or examples
51 +- If relevant, describe how the feature or topic works
52 +- Highlight any details the reader needs to know to use the feature
53 +- Include next steps for getting started with the feature (whether through further reading links or content within the article itself)
54
55 **Procedural**
56
57 Procedural content helps people complete a task from start to finish while they're using npm. Procedural content gives context on how the task fits into someone's larger journey. If a procedure has prerequisites, include them before the procedural content.
58
59 How to write procedural content
54 -* Group multiple related procedures into a single article unless there's a reason not to
55 -* Use ordered lists for procedural steps
56 -* If a step is optional, indicate that first
57 -* Tell readers the expected outcome of any procedures
58 -* Include troubleshooting tips as frequently as possible
60 +
61 +- Group multiple related procedures into a single article unless there's a reason not to
62 +- Use ordered lists for procedural steps
63 +- If a step is optional, indicate that first
64 +- Tell readers the expected outcome of any procedures
65 +- Include troubleshooting tips as frequently as possible
66
67 How to write prerequisites
61 -* Put the prerequisites immediately before the procedure that they are relevant to. If the prerequisites are relevant to all the procedures in an article, put them after the conceptual content and before the first procedure
62 -* You can use a list, a sentence, or a paragraph to explain prerequisites
63 -* You can also use a separate prerequisites section when:
64 - * The prerequisite information is very important and should not be missed
65 - * There is more than one prerequisite
68 +
69 +- Put the prerequisites immediately before the procedure that they are relevant to. If the prerequisites are relevant to all the procedures in an article, put them after the conceptual content and before the first procedure
70 +- You can use a list, a sentence, or a paragraph to explain prerequisites
71 +- You can also use a separate prerequisites section when:
72 + - The prerequisite information is very important and should not be missed
73 + - There is more than one prerequisite
74
75 #### Contents of an article
68 -* Title
69 -* Conceptual content
70 -* Prerequisites (if applicable)
71 -* Procedural content
72 -* Troubleshooting (if applicable)
76 +
77 +- Title
78 +- Conceptual content
79 +- Prerequisites (if applicable)
80 +- Procedural content
81 +- Troubleshooting (if applicable)
82
83 ## User and job stories
84 +
85 When planning content, you can create user and job stories to define acceptance criteria that help determine if an article is helping users accomplish their goals.
86
87 ### User stories
88 +
89 Create user stories to better understand each audience when a feature affects more than one audience.
90
91 As a [person in a particular role], I want to [perform an action or find something out], so that I can [achieve my goal of...].
92
93 ### Job stories
94 +
95 Job stories are narrow, granular, and useful for targeted actions or specific tasks that a single audience wants to achieve.
96
97 When [there's a particular situation], I want to [perform an action or find something out], so that I can [achieve my goal of...].
98
99 ### Acceptance criteria
100 +
101 Acceptance criteria explain the specific ways we'll know when a user or job story is considered complete. To define acceptance criteria, identify what an article has to offer someone for them to complete their desired task and feel satisfied.
102
103 ## Article template
CONTRIBUTING.md
+45 -122
@@ -1,67 +1,48 @@
1 # Contributing to the npm Documentation
2
3 -This is the documentation for
4 -[https://docs.npmjs.com/](https://docs.npmjs.com/). Do you want to
5 -contribute a change? Great!
3 +This is the documentation for [https://docs.npmjs.com/](https://docs.npmjs.com/). Do you want to contribute a change? Great!
4
5 ### Table of Contents
6
9 -* [Quick start](#quick-start)
10 -* [Running locally](#running-locally)
11 -* [Updating content](#updating-content)
12 -* [Navigation](#navigation)
13 -* [CLI](#cli)
14 -* [Deploying changes](#deploying-changes)
15 -* [Theme](#theme)
7 +- [Quick start](#quick-start)
8 +- [Running locally](#running-locally)
9 +- [Updating content](#updating-content)
10 +- [Navigation](#navigation)
11 +- [CLI](#cli)
12 +- [Deploying changes](#deploying-changes)
13 +- [Theme](#theme)
14
15 ## Quick start
16
17 1. `npm install` to download Gatsby, our theme, and the dependencies
18 2. `npm run develop`: starts the test server at `http://localhost:8000`.
21 -3. Update the content - it's MDX, which is like Markdown - in the `content`
22 - directory.
23 -4. Review your content at `http://localhost:8000`. (Gatsby watches the
24 - filesystem and will reload your content changes immediately.)
25 -5. Once you're happy, commit it and open a pull request at
26 - https://github.com/npm/documentation.
19 +3. Update the content - it's MDX, which is like Markdown - in the `content` directory.
20 +4. Review your content at `http://localhost:8000`. (Gatsby watches the filesystem and will reload your content changes immediately.)
21 +5. Once you're happy, commit it and open a pull request at https://github.com/npm/documentation.
22 6. A CI workflow run will publish your PR to a GitHub Preview Page.
28 -7. Once the content is reviewed, merge the pull request. That will
29 - [deploy the site](https://github.com/npm/documentation/actions/workflows/publish.yml).
23 +7. Once the content is reviewed, merge the pull request. That will [deploy the site](https://github.com/npm/documentation/actions/workflows/publish.yml).
24
25 ## Running locally
26
33 -First, `npm install` the dependencies. This will install Gatsby, et al.
27 +First, `npm install` the dependencies. This will install Gatsby, et al.
28
35 -Next, `npm run develop` to start the test server to view your changes.
36 -The Gatsby server will be started on port 8000. You can navigate to
37 -`http://localhost:8000` to view the site live.
29 +Next, `npm run develop` to start the test server to view your changes. The Gatsby server will be started on port 8000. You can navigate to `http://localhost:8000` to view the site live.
30
39 -In order to cut down on the time it takes `npm run develop` to complete, you can
40 -use the environment variable `GATSBY_PARTIAL_CONTENT` to only build some pages.
41 -For example, if the only pages you need to test locally are in `/cli/v10/commands`,
42 -then you can run the site locally with `GATSBY_PARTIAL_CONTENT=cli/v10/commands npm run develop`.
31 +In order to cut down on the time it takes `npm run develop` to complete, you can use the environment variable `GATSBY_PARTIAL_CONTENT` to only build some pages. For example, if the only pages you need to test locally are in `/cli/v10/commands`, then you can run the site locally with `GATSBY_PARTIAL_CONTENT=cli/v10/commands npm run develop`.
32
33 **For best results use Node 18 and npm 9+**
34
46 -**Gatsby will watch your filesystem looking for updates.** Any content
47 -changes you make should be reflected in the site immediately.
35 +**Gatsby will watch your filesystem looking for updates.** Any content changes you make should be reflected in the site immediately.
36
37 ## Updating content
38
39 ### Documentation content
40
53 -The documentation content lives in the `content` directory, and is
54 -Markdown. (Actually, [MDX](https://mdxjs.com/), a sort of reactive
55 -Markdown.)
41 +The documentation content lives in the `content` directory, and is Markdown. (Actually, [MDX](https://mdxjs.com/), a sort of reactive Markdown.)
42
43 ### Static content (images)
44
59 -Static content lives in the `static` directory. Since most of the
60 -static content is screenshots, you can use the `Screenshot` component
61 -to reference them, which is an extension of the `Img` component that
62 -is configured for the docs site. For example, an image living as
63 -`static/organizations/managing-teams/team-members.png` would be
64 -referenced as:
45 +Static content lives in the `static` directory. Since most of the static content is screenshots, you can use the `Screenshot` component to reference them, which is an extension of the `Img` component that is configured for the docs site. For example, an image living as `static/organizations/managing-teams/team-members.png` would be referenced as:
46
47 ```
48 <Screenshot src="/organizations/managing-teams/team-members.png" alt="Screenshot of the team members button" />
@@ -71,13 +52,9 @@ referenced as:
52
53 ### "Shared" content
54
74 -There are various places where we want to share content between
75 -pages, to prevent copy-pasta. For example, we display a screenshot
76 -of the user login dialog repeatedly. Therefore this shared content
77 -is defined in `src/shared.js`, and includes a literal MDX snippet.
55 +There are various places where we want to share content between pages, to prevent copy-pasta. For example, we display a screenshot of the user login dialog repeatedly. Therefore this shared content is defined in `src/shared.js`, and includes a literal MDX snippet.
56
79 -For example, `user-login` is defined with `text` and `image`
80 -properties:
57 +For example, `user-login` is defined with `text` and `image` properties:
58
59 ```js
60 'user-login': {
@@ -88,10 +65,7 @@ m login dialog" />)
65 },
66 ```
67
91 -Since MDX is reactive, you can import the shared data at the top of the
92 -file, just beneath your frontmatter. It uses the special path `~/shared.js`
93 -so it can be imported the same way from any nested file without needing to
94 -figure out the appropriate relative path:
68 +Since MDX is reactive, you can import the shared data at the top of the file, just beneath your frontmatter. It uses the special path `~/shared.js` so it can be imported the same way from any nested file without needing to figure out the appropriate relative path:
69
70 ```
71 ---
@@ -108,31 +82,19 @@ To login, <>{shared['user-login'].text}</>
82
83 ### URLs
84
111 -Note that for backward compatibility reasons, the on-disk paths
112 -are not precisely identical to the URLs for the documentation.
113 -To keep URLs expressive but still short, intermediate directories
114 -are removed from a page's URL.
85 +Note that for backward compatibility reasons, the on-disk paths are not precisely identical to the URLs for the documentation. To keep URLs expressive but still short, intermediate directories are removed from a page's URL.
86
116 -You can see this navigating through the documentation hierarchy:
117 -if you visit the "Packages and modules" page, you'll navigate to
118 -`https://docs.npmjs.com/packages-and-modules`.
87 +You can see this navigating through the documentation hierarchy: if you visit the "Packages and modules" page, you'll navigate to `https://docs.npmjs.com/packages-and-modules`.
88
120 -There's then a folder beneath that, "Contributing packages to the
121 -registry", which is (sensibly) at
122 -`https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry`.
89 +There's then a folder beneath that, "Contributing packages to the registry", which is (sensibly) at `https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry`.
90
124 -You might (understandably) expect the page "Creating Node.js modules"
125 -to be URL-wise beneath `contributing-packages-to-the-registry`, but
126 -unfortunately, you would be wrong. To keep URLs short, the intermediate
127 -folder paths are removed from pages, so "Creating Node.js modules" becomes
128 -`https://docs.npmjs.com/creating-node-js-modules`.
91 +You might (understandably) expect the page "Creating Node.js modules" to be URL-wise beneath `contributing-packages-to-the-registry`, but unfortunately, you would be wrong. To keep URLs short, the intermediate folder paths are removed from pages, so "Creating Node.js modules" becomes `https://docs.npmjs.com/creating-node-js-modules`.
92
130 -If you have only a URL and want to find where it lives on disk, you can
131 -consult the left-hand navigation on the site.
93 +If you have only a URL and want to find where it lives on disk, you can consult the left-hand navigation on the site.
94
95 <img width="353" alt="Screen Shot 2021-03-02 at 10 06 19" src="https://user-images.githubusercontent.com/1130014/109632522-04494980-7b3f-11eb-8b07-9e7bb992872f.png">
96
135 -You can also use `find` from within the `content` directory. For example:
97 +You can also use `find` from within the `content` directory. For example:
98
99 ```
100 find . -iname creating-node-js-modules\* -print
@@ -140,91 +102,52 @@ find . -iname creating-node-js-modules\* -print
102
103 ### Frontmatter
104
143 -The content pages should include
144 -[frontmatter](https://jekyllrb.com/docs/front-matter/).
105 +The content pages should include [frontmatter](https://jekyllrb.com/docs/front-matter/).
106
146 -* `title`: the page's title (string); required
147 -* `redirect_from`: any URLs on the site that will be redirected to this page (array of strings)
107 +- `title`: the page's title (string); required
108 +- `redirect_from`: any URLs on the site that will be redirected to this page (array of strings)
109
110 ## Navigation
111
151 -The site's navigation (on the left-hand sidebar of the site) is controlled
152 -by `src/theme/nav.yml`. If you add or remove a page from the site, you'll
153 -also want to add or remove it from the navigation configuration.
112 +The site's navigation (on the left-hand sidebar of the site) is controlled by `src/theme/nav.yml`. If you add or remove a page from the site, you'll also want to add or remove it from the navigation configuration.
113
114 ## CLI
115
157 -The documentation for the [npm cli](https://github.com/npm/cli) is not
158 -modified in this repository. Instead, the canonical location for it
159 -is in the [npm/cli](https://github.com/npm/cli) repository. Modifications
160 -to those files are automatically included here for completeness.
116 +The documentation for the [npm cli](https://github.com/npm/cli) is not modified in this repository. Instead, the canonical location for it is in the [npm/cli](https://github.com/npm/cli) repository. Modifications to those files are automatically included here for completeness.
117
118 **Pull requests to CLI documentation in this repository will be closed.**
119
120 ### Updating CLI Content
121
166 -Since the CLI documentation content lives in the [npm/cli
167 -repo](https://github.com/npm/cli), there is a [GitHub Actions
168 -workflow](https://github.com/npm/documentation/actions/workflows/update-cli.yml)
169 -that pulls documentation updates from the CLI into this repository.
170 -This is done nightly.
122 +Since the CLI documentation content lives in the [npm/cli repo](https://github.com/npm/cli), there is a [GitHub Actions workflow](https://github.com/npm/documentation/actions/workflows/update-cli.yml) that pulls documentation updates from the CLI into this repository. This is done nightly.
123
172 -This process can, of course, be done manually. This may be useful for
173 -editing its behavior or debugging, and it *should* be done when you're
174 -adding a new major version to the site.
124 +This process can, of course, be done manually. This may be useful for editing its behavior or debugging, and it _should_ be done when you're adding a new major version to the site.
125
126 1. Review the configuration
177 - The `cli/releases.json` configures how the CLI documentation is
178 - included. It is an array of documentation versions, each having
179 - the following configuration:
180 -
181 - * `id`: A short identifier for the documentation version, eg
182 - `v6` or `v7`. This corresponds to a directory containing a
183 - version of the CLI repository (using a submodule). This will also
184 - be used as the output folder in the content.
185 - * `branch`: The branch name for the version. This will be used to
186 - fetch the latest version of the documentation from GitHub.
187 - * `spec`: The registry spec for the version. This will be used
188 - to fetch the latest version in that range from the registry.
189 - * `resolved`: This should not be edited manually. This is a reference
190 - to the last fetched version of the content for this release. If
191 - a future fetch is done and this field matches what is returned
192 - from the registry, then no updates will be made. To force an update
193 - (which can be useful when making changes to the `bin/build.js` script)
194 - it can be run with the argument `--force`.
127 + The `cli/releases.json` configures how the CLI documentation is included. It is an array of documentation versions, each having the following configuration:
128 +
129 + - `id`: A short identifier for the documentation version, eg `v6` or `v7`. This corresponds to a directory containing a version of the CLI repository (using a submodule). This will also be used as the output folder in the content.
130 + - `branch`: The branch name for the version. This will be used to fetch the latest version of the documentation from GitHub.
131 + - `spec`: The registry spec for the version. This will be used to fetch the latest version in that range from the registry.
132 + - `resolved`: This should not be edited manually. This is a reference to the last fetched version of the content for this release. If a future fetch is done and this field matches what is returned from the registry, then no updates will be made. To force an update (which can be useful when making changes to the `bin/build.js` script) it can be run with the argument `--force`.
133
134 2. Fetch and import the latest content for each CLI release
197 - Run `npm run build -w cli` to download the latest version for each release
198 - and import its content into the `content` directory. This will take the
199 - content in each submodule's `docs/content` directory, perform any necessary
200 - translations (like adding historical redirects) and putting it in this repository's
201 - `content` directory. In addition, it will take the `docs/nav.yml` and include it
202 - in this repository's navigation.
135 + Run `npm run build -w cli` to download the latest version for each release and import its content into the `content` directory. This will take the content in each submodule's `docs/content` directory, perform any necessary translations (like adding historical redirects) and putting it in this repository's `content` directory. In addition, it will take the `docs/nav.yml` and include it in this repository's navigation.
136
137 ## Reviewing changes
138
206 -When a pull request is opened or updated the
207 -[GitHub Actions workflow](https://github.com/npm/documentation/actions/workflows/publish.yml)
208 -will deploy a preview to the [`github-pages` environment](https://github.com/npm/documentation/deployments/activity_log?environment=github-pages).
209 -The URL will be reported to the pull request and the status can be checked by looking at the
210 -workflows for the [`pull_request_target` event](https://github.com/npm/documentation/actions/workflows/publish.yml?query=event%3Apull_request_target).
139 +When a pull request is opened or updated the [GitHub Actions workflow](https://github.com/npm/documentation/actions/workflows/publish.yml) will deploy a preview to the [`github-pages` environment](https://github.com/npm/documentation/deployments/activity_log?environment=github-pages). The URL will be reported to the pull request and the status can be checked by looking at the workflows for the [`pull_request_target` event](https://github.com/npm/documentation/actions/workflows/publish.yml?query=event%3Apull_request_target).
140
141 ## Deploying changes
142
214 -The docs site (https://docs.npmjs.com/) is published from a
215 -[GitHub Actions workflow](https://github.com/npm/documentation/actions/workflows/publish.yml)
216 -on any push into the main branch. That means that the workflow for
217 -updating the site is:
143 +The docs site (https://docs.npmjs.com/) is published from a [GitHub Actions workflow](https://github.com/npm/documentation/actions/workflows/publish.yml) on any push into the main branch. That means that the workflow for updating the site is:
144
145 1. Make your changes locally, review them, commit them.
146 2. Open a pull request for review
147 3. Merge that pull request
148
223 -On step three, your changes will be published live! 🎉
149 +On step three, your changes will be published live! 🎉
150
151 ## Theme
152
227 -The Gatsby theme used here is located in the [`theme/`](./theme) directory. It is a variation of
228 -[doctocat](https://github.com/primer/doctocat) with some theme changes
229 -for npm's design language and additional components to support multiple
230 -versions of the CLI documentation.
153 +The Gatsby theme used here is located in the [`theme/`](./theme) directory. It is a variation of [doctocat](https://github.com/primer/doctocat) with some theme changes for npm's design language and additional components to support multiple versions of the CLI documentation.
README.md
+7 -17
@@ -2,35 +2,25 @@
2
3 [![Publish](https://github.com/npm/documentation/actions/workflows/publish.yml/badge.svg)](https://github.com/npm/documentation/actions/workflows/publish.yml)
4
5 -This is the documentation for
6 -[https://docs.npmjs.com/](https://docs.npmjs.com/).
5 +This is the documentation for [https://docs.npmjs.com/](https://docs.npmjs.com/).
6
8 -[This repository](https://github.com/npm/documentation) contains the
9 -content for our documentation site, and the GitHub Actions workflows
10 -that generate the site itself.
7 +[This repository](https://github.com/npm/documentation) contains the content for our documentation site, and the GitHub Actions workflows that generate the site itself.
8
9 ## Quick start
10
11 1. `npm install` to download gatsby, our theme, and the dependencies
12 2. `npm run develop`: starts the test server at `http://localhost:8000`.
16 -3. Update the content - it's Mdx, which is like markdown - in the `content`
17 - directory.
18 -4. Review your content at `http://localhost:8000`. (Gatsby watches the
19 - filesystem and will reload your content changes immediately.)
20 -5. Once you're happy, commit it and open a pull request at
21 - https://github.com/npm/documentation.
13 +3. Update the content - it's Mdx, which is like markdown - in the `content` directory.
14 +4. Review your content at `http://localhost:8000`. (Gatsby watches the filesystem and will reload your content changes immediately.)
15 +5. Once you're happy, commit it and open a pull request at https://github.com/npm/documentation.
16 6. A CI workflow run will publish your PR to a GitHub Preview Page.
23 -7. Once the content is reviewed, merge the pull request. That will
24 - [deploy the site](https://github.com/npm/documentation/actions/workflows/publish.yml).
17 +7. Once the content is reviewed, merge the pull request. That will [deploy the site](https://github.com/npm/documentation/actions/workflows/publish.yml).
18
19 Do you want to know more? Check out our [contributing guide](CONTRIBUTING.md).
20
21 ## Theme
22
30 -The gatsby theme used here is located in the [`theme/`](./theme) directory. It is a variation of
31 -[doctocat](https://github.com/primer/doctocat) with some theme changes
32 -for npm's design language and additional components to support multiple
33 -versions of the CLI documentation.
23 +The gatsby theme used here is located in the [`theme/`](./theme) directory. It is a variation of [doctocat](https://github.com/primer/doctocat) with some theme changes for npm's design language and additional components to support multiple versions of the CLI documentation.
24
25 ## License
26
gatsby-node.js
+3 -3
@@ -1,8 +1,8 @@
1 const path = require('path')
2
3 -exports.onCreateNode = ({ node, actions, getNode }) => {
3 +exports.onCreateNode = ({node, actions, getNode}) => {
4 if (node.internal.type === 'Mdx') {
5 - const { name, relativeDirectory: dir } = getNode(node.parent)
5 + const {name, relativeDirectory: dir} = getNode(node.parent)
6
7 // These paths are unchanged:
8 // - directory indexes
@@ -21,7 +21,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
21 }
22 }
23
24 -exports.onCreateWebpackConfig = ({ stage, actions }) => {
24 +exports.onCreateWebpackConfig = ({stage, actions}) => {
25 actions.setWebpackConfig({
26 resolve: {
27 alias: {
package-lock.json
+8 -16
@@ -19,15 +19,20 @@
19 "theme": "^1.0.0"
20 },
21 "devDependencies": {
22 - "@npmcli/eslint-config": "^4.0.2",
22 + "@github/prettier-config": "^0.0.6",
23 "@npmcli/template-oss": "4.19.0",
24 + "@testing-library/jest-dom": "^6.1.4",
25 + "@testing-library/react": "^9.5.0",
26 + "babel-jest": "^29.7.0",
27 "eslint": "^8.51.0",
28 "eslint-plugin-github": "^4.10.1",
29 "eslint-plugin-jsx-a11y": "^6.7.1",
30 "eslint-plugin-primer-react": "^4.0.3",
31 "eslint-plugin-react": "^7.33.2",
32 "eslint-plugin-react-hooks": "^4.6.0",
30 - "tap": "^16.3.9"
33 + "jest": "^29.7.0",
34 + "jest-environment-jsdom": "^29.7.0",
35 + "prettier": "^3.0.3"
36 },
37 "engines": {
38 "node": ">=18.0.0"
@@ -33702,20 +33707,7 @@
33707 "styled-components": "^5.3.11"
33708 },
33709 "devDependencies": {
33705 - "@github/prettier-config": "^0.0.6",
33706 - "@npmcli/template-oss": "4.19.0",
33707 - "@testing-library/jest-dom": "^6.1.4",
33708 - "@testing-library/react": "^9.5.0",
33709 - "babel-jest": "^29.7.0",
33710 - "eslint": "^8.51.0",
33711 - "eslint-plugin-github": "^4.10.1",
33712 - "eslint-plugin-jsx-a11y": "^6.7.1",
33713 - "eslint-plugin-primer-react": "^4.0.3",
33714 - "eslint-plugin-react": "^7.33.2",
33715 - "eslint-plugin-react-hooks": "^4.6.0",
33716 - "jest": "^29.7.0",
33717 - "jest-environment-jsdom": "^29.7.0",
33718 - "prettier": "^3.0.3"
33710 + "@npmcli/template-oss": "4.19.0"
33711 },
33712 "engines": {
33713 "node": ">=18.0.0"
package.json
+8 -7
@@ -35,15 +35,20 @@
35 "theme": "^1.0.0"
36 },
37 "devDependencies": {
38 - "@npmcli/eslint-config": "^4.0.2",
38 + "@github/prettier-config": "^0.0.6",
39 "@npmcli/template-oss": "4.19.0",
40 + "@testing-library/jest-dom": "^6.1.4",
41 + "@testing-library/react": "^9.5.0",
42 + "babel-jest": "^29.7.0",
43 "eslint": "^8.51.0",
44 "eslint-plugin-github": "^4.10.1",
45 "eslint-plugin-jsx-a11y": "^6.7.1",
46 "eslint-plugin-primer-react": "^4.0.3",
47 "eslint-plugin-react": "^7.33.2",
48 "eslint-plugin-react-hooks": "^4.6.0",
46 - "tap": "^16.3.9"
49 + "jest": "^29.7.0",
50 + "jest-environment-jsdom": "^29.7.0",
51 + "prettier": "^3.0.3"
52 },
53 "author": "GitHub Inc.",
54 "engines": {
@@ -53,9 +58,5 @@
58 "//@npmcli/template-oss": "This file is partially managed by @npmcli/template-oss. Edits may be overwritten.",
59 "version": "4.19.0",
60 "content": "./scripts/template-oss"
56 - },
57 - "eslintIgnore": [
58 - ".cache/",
59 - "public/"
60 - ]
61 + }
62 }
scripts/template-oss/index.js
+3 -3
@@ -11,7 +11,7 @@ module.exports = {
11 },
12 rootModule: {
13 add: {
14 - 'package.json': { file: 'pkg.json', overwrite: false },
14 + 'package.json': {file: 'pkg.json', overwrite: false},
15 '.eslintrc.js': false,
16 'CODE_OF_CONDUCT.md': false,
17 'CONTRIBUTING.md': false,
@@ -24,7 +24,7 @@ module.exports = {
24 },
25 workspaceModule: {
26 add: {
27 - 'package.json': { file: 'pkg.json', overwrite: false },
27 + 'package.json': {file: 'pkg.json', overwrite: false},
28 '.eslintrc.js': false,
29 },
30 },
@@ -35,7 +35,7 @@ module.exports = {
35 lockfile: true,
36 allowedPackages: ['eslint'],
37 requiredPackages: {
38 - devDependencies: []
38 + devDependencies: [],
39 },
40 allowPaths: [
41 '/.reuse/',
src/pages/404.js
+1 -3
@@ -1,9 +1,7 @@
1 import React from 'react'
2
3 const Page404 = () => {
4 - return (
5 - <h1>404 page</h1>
6 - )
4 + return <h1>404 page</h1>
5 }
6
7 export default Page404
src/shared.js
+286 -100
@@ -1,215 +1,401 @@
1 import React from 'react'
2 -import { Link } from '@primer/react'
2 +import {Link} from '@primer/react'
3 import Screenshot from 'theme/src/mdx/screenshot'
4 import Note from 'theme/src/mdx/note'
5
6 export default {
7 /* User login */
8 'user-login': {
9 - text: (<>On the npm "<Link href="https://www.npmjs.com/login">Sign In</Link>" page, enter your account details and click <strong>Sign In</strong>.</>),
10 - image: (<Screenshot src="/shared/user-login.png" alt="Screenshot of npm login dialog" />),
9 + text: (
10 + <>
11 + On the npm "<Link href="https://www.npmjs.com/login">Sign In</Link>" page, enter your account details and click{' '}
12 + <strong>Sign In</strong>.
13 + </>
14 + ),
15 + image: <Screenshot src="/shared/user-login.png" alt="Screenshot of npm login dialog" />,
16 },
17 'contact-support': {
13 - text: (<Link href="https://www.npmjs.com/support">contact npm Support</Link>),
18 + text: <Link href="https://www.npmjs.com/support">contact npm Support</Link>,
19 },
20 'contact-enterprise-support': {
16 - text: (<Link href="mailto:enterprise@npmjs.com">contact Enterprise Support</Link>),
21 + text: <Link href="mailto:enterprise@npmjs.com">contact Enterprise Support</Link>,
22 },
23 'profile-settings': {
19 - text: (<>In the upper right corner of the page, click your profile picture, then click <strong>Profile Settings</strong>.</>),
20 - image: (<Screenshot src="/shared/profile-settings.png" alt="Screenshot of profile settings selection in user menu" />),
24 + text: (
25 + <>
26 + In the upper right corner of the page, click your profile picture, then click <strong>Profile Settings</strong>.
27 + </>
28 + ),
29 + image: (
30 + <Screenshot src="/shared/profile-settings.png" alt="Screenshot of profile settings selection in user menu" />
31 + ),
32 },
33 'account-settings': {
23 - text: (<>In the upper right corner of the page, click your profile picture, then click <strong>Account</strong>.</>),
24 - image: (<Screenshot src="/shared/account-settings.png" alt="Screenshot of account settings selection in user menu" />),
34 + text: (
35 + <>
36 + In the upper right corner of the page, click your profile picture, then click <strong>Account</strong>.
37 + </>
38 + ),
39 + image: (
40 + <Screenshot src="/shared/account-settings.png" alt="Screenshot of account settings selection in user menu" />
41 + ),
42 },
43 'start-account-recovery': {
27 - text: (<>On the "Request an Account Recovery" page, click <strong>Start Account Recovery</strong>.</>),
28 - image: (<Screenshot src="/getting-started/setting-up-your-npm-user-account/request-account-recovery.png" alt="Screenshot showing account recovery page" />),
44 + text: (
45 + <>
46 + On the "Request an Account Recovery" page, click <strong>Start Account Recovery</strong>.
47 + </>
48 + ),
49 + image: (
50 + <Screenshot
51 + src="/getting-started/setting-up-your-npm-user-account/request-account-recovery.png"
52 + alt="Screenshot showing account recovery page"
53 + />
54 + ),
55 },
56 'use-recovery-code': {
31 - text: (<>On the "Two-Factor Authentication" page, click <strong>Use a recovery code or request a reset</strong>.</>),
32 - image: (<Screenshot src="/getting-started/setting-up-your-npm-user-account/recovery-code-link.png" alt="Screenshot showing Security Key prompt with a link to navigate to the recovery code input screen" />),
57 + text: (
58 + <>
59 + On the "Two-Factor Authentication" page, click <strong>Use a recovery code or request a reset</strong>.
60 + </>
61 + ),
62 + image: (
63 + <Screenshot
64 + src="/getting-started/setting-up-your-npm-user-account/recovery-code-link.png"
65 + alt="Screenshot showing Security Key prompt with a link to navigate to the recovery code input screen"
66 + />
67 + ),
68 },
69 'support-ticket-form': {
35 - text: (<>In the "Open a Support Ticket" form, enter the following information:</>),
70 + text: <>In the "Open a Support Ticket" form, enter the following information:</>,
71 },
72 'enter-email-address': {
38 - text: (<>In the <strong>Email</strong> field, enter an email address where our support team can contact you.</>),
73 + text: (
74 + <>
75 + In the <strong>Email</strong> field, enter an email address where our support team can contact you.
76 + </>
77 + ),
78 },
79 'support-ticket-other': {
41 - text: (<>If you need help with anything else, in the <strong>How can we help?</strong> section, select <strong>Other</strong> and enter more information in the <strong>Additional Details</strong> field.</>),
80 + text: (
81 + <>
82 + If you need help with anything else, in the <strong>How can we help?</strong> section, select{' '}
83 + <strong>Other</strong> and enter more information in the <strong>Additional Details</strong> field.
84 + </>
85 + ),
86 },
87 'connect-to-accounts': {
44 - text: (<>
45 - <ul>
46 - <li>If you have previously linked a GitHub account to your npm account, select <strong>Connect to GitHub</strong>. This will help our support team verify your account.</li>
47 - <li>If you have previously linked a Twitter account to your npm account, select <strong>Connect to Twitter</strong>. This will help our support team verify your account.</li>
48 - </ul>
49 - </>
88 + text: (
89 + <>
90 + <ul>
91 + <li>
92 + If you have previously linked a GitHub account to your npm account, select{' '}
93 + <strong>Connect to GitHub</strong>. This will help our support team verify your account.
94 + </li>
95 + <li>
96 + If you have previously linked a Twitter account to your npm account, select{' '}
97 + <strong>Connect to Twitter</strong>. This will help our support team verify your account.
98 + </li>
99 + </ul>
100 + </>
101 ),
102 },
103 'submit-support-ticket': {
53 - text: (<>At the bottom of the form, click <strong>Submit Support Ticket</strong>.</>),
104 + text: (
105 + <>
106 + At the bottom of the form, click <strong>Submit Support Ticket</strong>.
107 + </>
108 + ),
109 },
110
111 /* Billing */
112 'billing-creditcard-form': {
58 - text: (<>
59 - In the credit card information dialog box, enter your credit card information:
60 -
61 - <ul>
62 - <li>Card number</li>
63 - <li>MM / YY: the month and year of the card expiration date</li>
64 - <li>CVC: the three-digit code on the credit card</li>
65 - </ul>
66 - </>
113 + text: (
114 + <>
115 + In the credit card information dialog box, enter your credit card information:
116 + <ul>
117 + <li>Card number</li>
118 + <li>MM / YY: the month and year of the card expiration date</li>
119 + <li>CVC: the three-digit code on the credit card</li>
120 + </ul>
121 + </>
122 ),
68 - image: (<Screenshot src="/shared/billing-creditcard-form.png" alt="Screenshot of the credit card form" />),
123 + image: <Screenshot src="/shared/billing-creditcard-form.png" alt="Screenshot of the credit card form" />,
124 },
125 'billing-downgrade-selection': {
71 - text: (<>Under "change plan", click <strong>Downgrade Plan</strong>.</>),
72 - image: (<Screenshot src="/shared/billing-downgrade-selection.png" alt="Screenshot of the downgrade plan button" />),
126 + text: (
127 + <>
128 + Under "change plan", click <strong>Downgrade Plan</strong>.
129 + </>
130 + ),
131 + image: <Screenshot src="/shared/billing-downgrade-selection.png" alt="Screenshot of the downgrade plan button" />,
132 },
133 'billing-downgrade-confirm': {
75 - text: (<>Under "Are you sure?", click <strong>Downgrade to a free account</strong>.</>),
76 - image: (<Screenshot src="/shared/billing-downgrade-confirm.png" alt="Screenshot of the downgrade plan confirmation" />),
134 + text: (
135 + <>
136 + Under "Are you sure?", click <strong>Downgrade to a free account</strong>.
137 + </>
138 + ),
139 + image: (
140 + <Screenshot src="/shared/billing-downgrade-confirm.png" alt="Screenshot of the downgrade plan confirmation" />
141 + ),
142 },
143 'billing-download': {
79 - text: (<>To download a single receipt, find the row of the receipt you want to download, then click the PDF icon on the right side of the row.</>),
80 - image: (<Screenshot src="/shared/billing-download-icon.png" alt="Screenshot of the download receipt icon" />),
144 + text: (
145 + <>
146 + To download a single receipt, find the row of the receipt you want to download, then click the PDF icon on the
147 + right side of the row.
148 + </>
149 + ),
150 + image: <Screenshot src="/shared/billing-download-icon.png" alt="Screenshot of the download receipt icon" />,
151 },
152 'billing-download-checked': {
83 - text: (<>To download multiple receipts, first select the receipts that you wish to download by selecting the box next to the date. To select all receipts, select the checkbox next to the "Date" header. Then click <strong>Download Checked</strong>.</>),
84 - image: (<Screenshot src="/shared/billing-download-checked.png" alt="Screenshot of the download checked option" />),
153 + text: (
154 + <>
155 + To download multiple receipts, first select the receipts that you wish to download by selecting the box next to
156 + the date. To select all receipts, select the checkbox next to the "Date" header. Then click{' '}
157 + <strong>Download Checked</strong>.
158 + </>
159 + ),
160 + image: <Screenshot src="/shared/billing-download-checked.png" alt="Screenshot of the download checked option" />,
161 },
162 'billing-email': {
87 - text: (<>To email a single receipt, find the row of the receipt you want to download, then, on the right side of the row, click the email icon.</>),
88 - image: (<Screenshot src="/shared/billing-email-icon.png" alt="Screenshot of the email receipt icon" />),
163 + text: (
164 + <>
165 + To email a single receipt, find the row of the receipt you want to download, then, on the right side of the row,
166 + click the email icon.
167 + </>
168 + ),
169 + image: <Screenshot src="/shared/billing-email-icon.png" alt="Screenshot of the email receipt icon" />,
170 },
171 'billing-email-checked': {
91 - text: (<>To email multiple receipts, first select the receipts that you wish to download by selecting the box next to the date. To select all receipts, select the checkbox next to the "Date" header. Then click <strong>Email Checked</strong>.</>),
92 - image: (<Screenshot src="/shared/billing-email-checked.png" alt="Screenshot of the email checked receipt icon" />),
172 + text: (
173 + <>
174 + To email multiple receipts, first select the receipts that you wish to download by selecting the box next to the
175 + date. To select all receipts, select the checkbox next to the "Date" header. Then click{' '}
176 + <strong>Email Checked</strong>.
177 + </>
178 + ),
179 + image: <Screenshot src="/shared/billing-email-checked.png" alt="Screenshot of the email checked receipt icon" />,
180 },
181 'billing-email-receipt': {
95 - text: (<>In the Email Receipt dialog box, fill in the "From", "To", and "Message" fields.</>),
96 - image: (<Screenshot src="/shared/billing-email-receipt.png" alt="Screenshot of the email receipt dialog" />),
182 + text: <>In the Email Receipt dialog box, fill in the "From", "To", and "Message" fields.</>,
183 + image: <Screenshot src="/shared/billing-email-receipt.png" alt="Screenshot of the email receipt dialog" />,
184 },
185 'billing-extra-info': {
99 - text: (<>To add a business name, VAT number, address of record, or other information to your receipts, in the "Extra Billing Information" text box, type the information.</>),
100 - image: (<Screenshot src="/shared/billing-extra-info.png" alt="Screenshot of the extra billing info dialog" />),
186 + text: (
187 + <>
188 + To add a business name, VAT number, address of record, or other information to your receipts, in the "Extra
189 + Billing Information" text box, type the information.
190 + </>
191 + ),
192 + image: <Screenshot src="/shared/billing-extra-info.png" alt="Screenshot of the extra billing info dialog" />,
193 },
194 'billing-extra-receipt-email': {
103 - text: (<>To update the email address used for receipts, beside "Send my receipts", select the checkbox and type the email address that should receive billing receipts.</>),
104 - image: (<Screenshot src="/shared/billing-extra-receipt-email.png" alt="Screenshot of billing receipt email settings" />),
195 + text: (
196 + <>
197 + To update the email address used for receipts, beside "Send my receipts", select the checkbox and type the email
198 + address that should receive billing receipts.
199 + </>
200 + ),
201 + image: (
202 + <Screenshot src="/shared/billing-extra-receipt-email.png" alt="Screenshot of billing receipt email settings" />
203 + ),
204 },
205 'billing-extra-save': {
107 - text: (<>Click <strong>Save</strong>.</>),
108 - image: (<Screenshot src="/shared/billing-extra-save.png" alt="Screenshot of billing extra info save button" />),
206 + text: (
207 + <>
208 + Click <strong>Save</strong>.
209 + </>
210 + ),
211 + image: <Screenshot src="/shared/billing-extra-save.png" alt="Screenshot of billing extra info save button" />,
212 },
213 'billing-form': {
111 - text: (<>
112 - In the billing information dialog box, enter your billing information:
113 -
114 - <ul>
115 - <li>Email: the email address used for the billing contact</li>
116 - <li>Name: the name on the credit card used to pay</li>
117 - <li>Street, City, ZIP Code, Country: the billing address associated with the credit card</li>
118 - </ul>
119 - </>
214 + text: (
215 + <>
216 + In the billing information dialog box, enter your billing information:
217 + <ul>
218 + <li>Email: the email address used for the billing contact</li>
219 + <li>Name: the name on the credit card used to pay</li>
220 + <li>Street, City, ZIP Code, Country: the billing address associated with the credit card</li>
221 + </ul>
222 + </>
223 ),
121 - image: (<Screenshot src="/shared/billing-form.png" alt="Screenshot of billing form" />),
224 + image: <Screenshot src="/shared/billing-form.png" alt="Screenshot of billing form" />,
225 },
226 'billing-history': {
124 - text: (<>On the Billing Information page, under "monthly bill", select <strong>View Billing History</strong>.</>),
125 - image: (<Screenshot src="/shared/billing-history.png" alt="Screenshot of billing history selection in user menu" />),
227 + text: (
228 + <>
229 + On the Billing Information page, under "monthly bill", select <strong>View Billing History</strong>.
230 + </>
231 + ),
232 + image: <Screenshot src="/shared/billing-history.png" alt="Screenshot of billing history selection in user menu" />,
233 },
234 'billing-info': {
128 - text: (<>In the upper right corner of the page, click your profile picture, then select <strong>Billing Info</strong>.</>),
129 - image: (<Screenshot src="/shared/billing-info.png" alt="Screenshot of billing info selection in user menu" />),
235 + text: (
236 + <>
237 + In the upper right corner of the page, click your profile picture, then select <strong>Billing Info</strong>.
238 + </>
239 + ),
240 + image: <Screenshot src="/shared/billing-info.png" alt="Screenshot of billing info selection in user menu" />,
241 },
242 'billing-receipt-settings': {
132 - text: (<>At the bottom of the Billing History dialog box, click "Receipt Settings".</>),
133 - image: (<Screenshot src="/shared/billing-receipt-settings.png" alt="Screenshot of billing receipt settings" />),
243 + text: <>At the bottom of the Billing History dialog box, click "Receipt Settings".</>,
244 + image: <Screenshot src="/shared/billing-receipt-settings.png" alt="Screenshot of billing receipt settings" />,
245 },
246 'billing-update-card': {
136 - text: (<>Click <strong>Update Card</strong>.</>),
137 - image: (<Screenshot src="/shared/billing-update-card.png" alt="Screenshot of update credit card confirmation button" />),
247 + text: (
248 + <>
249 + Click <strong>Update Card</strong>.
250 + </>
251 + ),
252 + image: (
253 + <Screenshot src="/shared/billing-update-card.png" alt="Screenshot of update credit card confirmation button" />
254 + ),
255 },
256 'billing-view': {
140 - text: (<>To view a single receipt, find the row of the receipt you want to view, then, on the right side of the row, click the view icon.</>),
141 - image: (<Screenshot src="/shared/billing-view-icon.png" alt="Screenshot of the view receipt icon" />),
257 + text: (
258 + <>
259 + To view a single receipt, find the row of the receipt you want to view, then, on the right side of the row,
260 + click the view icon.
261 + </>
262 + ),
263 + image: <Screenshot src="/shared/billing-view-icon.png" alt="Screenshot of the view receipt icon" />,
264 },
265 'grace-period': {
266 text: 'nine days',
267 },
268 'payment-info-button': {
147 - text: (<>Click <strong>Payment Info</strong>.</>),
148 - image: (<Screenshot src="/shared/payment-info-button.png" alt="Screenshot of payment information button" />),
269 + text: (
270 + <>
271 + Click <strong>Payment Info</strong>.
272 + </>
273 + ),
274 + image: <Screenshot src="/shared/payment-info-button.png" alt="Screenshot of payment information button" />,
275 },
276 'payment-remember-me': {
151 - text: (<>To save your credit card information for other payments on npm, select "Remember me".</>),
152 - image: (<Screenshot src="/shared/payment-remember-me.png" alt="Screenshot of payment remember me button" />),
277 + text: <>To save your credit card information for other payments on npm, select "Remember me".</>,
278 + image: <Screenshot src="/shared/payment-remember-me.png" alt="Screenshot of payment remember me button" />,
279 },
280 'payment-info': {
155 - text: (<>Under "monthly bill", click <strong>Edit Payment Info</strong>.</>),
156 - image: (<Screenshot src="/shared/payment-info.png" alt="Screenshot of edit payment info link" />),
281 + text: (
282 + <>
283 + Under "monthly bill", click <strong>Edit Payment Info</strong>.
284 + </>
285 + ),
286 + image: <Screenshot src="/shared/payment-info.png" alt="Screenshot of edit payment info link" />,
287 },
288 'billing-price-teams': {
159 - text: (<>$7 per member per month</>),
289 + text: <>$7 per member per month</>,
290 },
291 'billing-organization-plans': {
162 - image: (<Screenshot src="/shared/billing-plan-selection.png" alt="Screenshot showing the billing plan selection dialog" />),
292 + image: (
293 + <Screenshot src="/shared/billing-plan-selection.png" alt="Screenshot showing the billing plan selection dialog" />
294 + ),
295 },
296
297 /* Package management */
298 'organization-package-public': {
167 - image: (<Screenshot src="/shared/organization-package-public.png" alt="Screenshot of a public npm Teams package" />),
299 + image: <Screenshot src="/shared/organization-package-public.png" alt="Screenshot of a public npm Teams package" />,
300 },
301 'organization-package-private': {
170 - image: (<Screenshot src="/shared/organization-package-private.png" alt="Screenshot of a private npm Teams package" />),
302 + image: (
303 + <Screenshot src="/shared/organization-package-private.png" alt="Screenshot of a private npm Teams package" />
304 + ),
305 },
306
307 /* Organizations */
308 'organization-create': {
175 - text: (<>In the upper right corner of the page, click your profile picture, then click <strong>Add an Organization</strong>.</>),
176 - image: (<Screenshot src="/shared/organization-create.png" alt="Screenshot of the add an organization dropdown menu" />),
309 + text: (
310 + <>
311 + In the upper right corner of the page, click your profile picture, then click{' '}
312 + <strong>Add an Organization</strong>.
313 + </>
314 + ),
315 + image: (
316 + <Screenshot src="/shared/organization-create.png" alt="Screenshot of the add an organization dropdown menu" />
317 + ),
318 },
319 'organization-selection': {
179 - text: (<>In the left sidebar, click the name of your organization.</>),
180 - image: (<Screenshot src="/shared/organization-selection.png" alt="Screenshot of a selected organization" />),
320 + text: <>In the left sidebar, click the name of your organization.</>,
321 + image: <Screenshot src="/shared/organization-selection.png" alt="Screenshot of a selected organization" />,
322 },
323 'organization-billing-tab': {
183 - text: (<>On the organization settings page, click <strong>Billing</strong>.</>),
184 - image: (<Screenshot src="/shared/organization-billing-tab.png" alt="Screenshot of the organization billing tab" />),
324 + text: (
325 + <>
326 + On the organization settings page, click <strong>Billing</strong>.
327 + </>
328 + ),
329 + image: <Screenshot src="/shared/organization-billing-tab.png" alt="Screenshot of the organization billing tab" />,
330 },
331 'organization-members-tab': {
187 - text: (<>On the organization settings page, click <strong>Members</strong>.</>),
188 - image: (<Screenshot src="/shared/organization-members-tab.png" alt="Screenshot of the organization members tab" />),
332 + text: (
333 + <>
334 + On the organization settings page, click <strong>Members</strong>.
335 + </>
336 + ),
337 + image: <Screenshot src="/shared/organization-members-tab.png" alt="Screenshot of the organization members tab" />,
338 },
339 'organization-teams-tab': {
191 - text: (<>On the organization settings page, click <strong>Teams</strong>.</>),
192 - image: (<Screenshot src="/shared/organization-teams-tab.png" alt="Screenshot of the organization teams tab" />),
340 + text: (
341 + <>
342 + On the organization settings page, click <strong>Teams</strong>.
343 + </>
344 + ),
345 + image: <Screenshot src="/shared/organization-teams-tab.png" alt="Screenshot of the organization teams tab" />,
346 },
347
348 /* Enterprise */
349 'enterprise-admin-panel': {
197 - text: (<>In the upper right corner of the page, click your profile picture, then click <strong>Site Administration</strong>.</>),
198 - image: (<Screenshot src="/shared/enterprise-admin-panel.png" alt="Screenshot of the admin panel" />),
350 + text: (
351 + <>
352 + In the upper right corner of the page, click your profile picture, then click{' '}
353 + <strong>Site Administration</strong>.
354 + </>
355 + ),
356 + image: <Screenshot src="/shared/enterprise-admin-panel.png" alt="Screenshot of the admin panel" />,
357 },
358 'enterprise-admin-panel-settings': {
201 - image: (<Screenshot src="/shared/enterprise-admin-panel-settings.png" alt="Screenshot of the admin panel settings button" />),
359 + image: (
360 + <Screenshot
361 + src="/shared/enterprise-admin-panel-settings.png"
362 + alt="Screenshot of the admin panel settings button"
363 + />
364 + ),
365 },
366 'enterprise-choose-security-policy': {
204 - image: (<Screenshot src="/shared/enterprise-choose-security-policy.png" alt="Screenshot of the choose security policy" />),
367 + image: (
368 + <Screenshot src="/shared/enterprise-choose-security-policy.png" alt="Screenshot of the choose security policy" />
369 + ),
370 },
371 'enterprise-custom-blocking-message': {
207 - image: (<Screenshot src="/shared/enterprise-custom-blocking-message.png" alt="Screenshot of the custom blocking message option" />),
372 + image: (
373 + <Screenshot
374 + src="/shared/enterprise-custom-blocking-message.png"
375 + alt="Screenshot of the custom blocking message option"
376 + />
377 + ),
378 },
379 'enterprise-instance-login': {
210 - text: (<>Log in to your Enterprise instance.</>),
380 + text: <>Log in to your Enterprise instance.</>,
381 },
382 'enterprise-migration-requirements': {
213 - text: (<Note><><strong>Note:</strong> Using <code><a href="https://www.npmjs.com/package/pneumatic-tubes">pneumatic-tubes</a></code> for migration requires <ul><li>Node 8+</li><li>npm 5+ (to install or upgrade, run <code>npm install npm@latest -g</code>)</li></ul></></Note>),
383 + text: (
384 + <Note>
385 + <>
386 + <strong>Note:</strong> Using{' '}
387 + <code>
388 + <a href="https://www.npmjs.com/package/pneumatic-tubes">pneumatic-tubes</a>
389 + </code>{' '}
390 + for migration requires{' '}
391 + <ul>
392 + <li>Node 8+</li>
393 + <li>
394 + npm 5+ (to install or upgrade, run <code>npm install npm@latest -g</code>)
395 + </li>
396 + </ul>
397 + </>
398 + </Note>
399 + ),
400 },
401 }
theme/.gitignore
+1
@@ -8,6 +8,7 @@
8 !/.eslintrc.js
9 !/.eslintrc.local.*
10 !/.gitignore
11 +!/.prettierIgnore
12 !/bin/
13 !/CHANGELOG*
14 !/docs/
theme/package.json
-1
@@ -9,7 +9,6 @@
9 "private": true,
10 "main": "index.js",
11 "license": "MIT",
12 - "prettier": "@github/prettier-config",
12 "scripts": {
13 "test": "jest",
14 "lint": "eslint \"**/*.js\"",