chore: convert tables to component
Michael Smith committed
Jan 13, 2026 at 17:05 UTC
103ea690332b7551259225a3ef83e979db0e81e8
10 files changed
+151
-72
.eslintrc.js
+11
-1
@@ -40,7 +40,17 @@ module.exports = {
40
parserOptions: {
41
sourceType: 'module',
42
},
43
- globals: getGlobals(['Index', 'Note', 'Prompt', 'Screenshot', 'Link', 'YouTube']),
43
+ globals: getGlobals([
44
+ 'Index',
45
+ 'Note',
46
+ 'Prompt',
47
+ 'Screenshot',
48
+ 'Link',
49
+ 'YouTube',
50
+ 'DataTable',
51
+ 'InlineCode',
52
+ 'Strikethrough',
53
+ ]),
54
settings: {
55
'import/resolver': 'webpack',
56
},
content/getting-started/setting-up-your-npm-user-account/about-two-factor-authentication.mdx
+31
-34
@@ -39,45 +39,42 @@ Two-factor authentication on npm can be enabled for authorization and writes, or
39
40
By default, 2FA is enabled for authorization and writes. We will request a second form of authentication for certain authorized actions, as well as write actions.
41
42
-| Action | CLI command |
43
-| :------------------------------------------------ | :----------------------------------------------------- |
44
-| Log in to npm | [`npm login`][login] |
45
-| Change profile settings (including your password) | [`npm profile set`][profile-set] |
46
-| Change 2FA modes for your user account | [`npm profile enable-2fa auth-and-writes`][2fa-enable] |
47
-| Disable 2FA for your user account | [`npm profile disable-2fa`][2fa-disable] |
48
-| Create tokens | [`npm token create`][token-create] |
49
-| Revoke tokens | [`npm token revoke`][token-revoke] |
50
-| Publish packages | [`npm publish`][publish] |
51
-| Unpublish packages | [`npm unpublish`][unpublish] |
52
-| Deprecate packages | [`npm deprecate`][deprecate] |
53
-| Change package visibility | [`npm access public/restricted`][access] |
54
-| Change user and team package access | [`npm access grant/revoke`][access] |
55
-| [Change package 2FA requirements][pkg-2fa] | [`npm access 2fa-required/2fa-not-required`][access] |
42
+<DataTable
43
+ headers={["Action", "CLI command"]}
44
+ align={["l", "l"]}
45
+ rows={[
46
+ ["Log in to npm", <Link key="login" href="https://docs.npmjs.com/cli/adduser"><InlineCode>npm login</InlineCode></Link>],
47
+ ["Change profile settings (including your password)", <Link key="profile-set" href="https://docs.npmjs.com/cli/profile"><InlineCode>npm profile set</InlineCode></Link>],
48
+ ["Change 2FA modes for your user account", <Link key="2fa-enable" href="https://docs.npmjs.com/cli/profile"><InlineCode>npm profile enable-2fa auth-and-writes</InlineCode></Link>],
49
+ ["Disable 2FA for your user account", <Link key="2fa-disable" href="https://docs.npmjs.com/cli/profile"><InlineCode>npm profile disable-2fa</InlineCode></Link>],
50
+ ["Create tokens", <Link key="token-create" href="https://docs.npmjs.com/cli/token"><InlineCode>npm token create</InlineCode></Link>],
51
+ ["Revoke tokens", <Link key="token-revoke" href="https://docs.npmjs.com/cli/token"><InlineCode>npm token revoke</InlineCode></Link>],
52
+ ["Publish packages", <Link key="publish" href="https://docs.npmjs.com/cli/publish"><InlineCode>npm publish</InlineCode></Link>],
53
+ ["Unpublish packages", <Link key="unpublish" href="https://docs.npmjs.com/cli/unpublish"><InlineCode>npm unpublish</InlineCode></Link>],
54
+ ["Deprecate packages", <Link key="deprecate" href="https://docs.npmjs.com/cli/deprecate"><InlineCode>npm deprecate</InlineCode></Link>],
55
+ ["Change package visibility", <Link key="access-visibility" href="https://docs.npmjs.com/cli/access"><InlineCode>npm access public/restricted</InlineCode></Link>],
56
+ ["Change user and team package access", <Link key="access-grant" href="https://docs.npmjs.com/cli/access"><InlineCode>npm access grant/revoke</InlineCode></Link>],
57
+ [<Link key="pkg-2fa" href="/requiring-2fa-for-package-publishing-and-settings-modification">Change package 2FA requirements</Link>, <Link key="access-2fa" href="https://docs.npmjs.com/cli/access"><InlineCode>npm access 2fa-required/2fa-not-required</InlineCode></Link>]
58
+ ]}
59
+/>
60
61
### Authorization only
62
63
If you enable 2FA for authorization only. We will request a second form of authentication only for certain authorized actions.
64
61
-| Action | CLI command |
62
-| :------------------------------------------------ | :----------------------------------------------- |
63
-| Log in to npm | [`npm login`][login] |
64
-| Change profile settings (including your password) | [`npm profile set`][profile-set] |
65
-| Change 2FA modes for your user account | [`npm profile enable-2fa auth-only`][2fa-enable] |
66
-| Disable 2FA for your user account | [`npm profile disable-2fa`][2fa-disable] |
67
-| Create tokens | [`npm token create`][token-create] |
68
-| Revoke tokens | [`npm token revoke`][token-revoke] |
69
-
70
-[login]: https://docs.npmjs.com/cli/adduser
71
-[profile-set]: https://docs.npmjs.com/cli/profile
72
-[2fa-enable]: https://docs.npmjs.com/cli/profile
73
-[2fa-disable]: https://docs.npmjs.com/cli/profile
74
-[token-create]: https://docs.npmjs.com/cli/token
75
-[token-revoke]: https://docs.npmjs.com/cli/token
76
-[publish]: https://docs.npmjs.com/cli/publish
77
-[unpublish]: https://docs.npmjs.com/cli/unpublish
78
-[deprecate]: https://docs.npmjs.com/cli/deprecate
79
-[access]: https://docs.npmjs.com/cli/access
80
-[pkg-2fa]: /requiring-2fa-for-package-publishing-and-settings-modification
65
+<DataTable
66
+ headers={["Action", "CLI command"]}
67
+ align={["l", "l"]}
68
+ rows={[
69
+ ["Log in to npm", <Link key="login" href="https://docs.npmjs.com/cli/adduser"><InlineCode>npm login</InlineCode></Link>],
70
+ ["Change profile settings (including your password)", <Link key="profile-set" href="https://docs.npmjs.com/cli/profile"><InlineCode>npm profile set</InlineCode></Link>],
71
+ ["Change 2FA modes for your user account", <Link key="2fa-enable" href="https://docs.npmjs.com/cli/profile"><InlineCode>npm profile enable-2fa auth-only</InlineCode></Link>],
72
+ ["Disable 2FA for your user account", <Link key="2fa-disable" href="https://docs.npmjs.com/cli/profile"><InlineCode>npm profile disable-2fa</InlineCode></Link>],
73
+ ["Create tokens", <Link key="token-create" href="https://docs.npmjs.com/cli/token"><InlineCode>npm token create</InlineCode></Link>],
74
+ ["Revoke tokens", <Link key="token-revoke" href="https://docs.npmjs.com/cli/token"><InlineCode>npm token revoke</InlineCode></Link>]
75
+ ]}
76
+/>
77
+
78
[webauthn]: https://webauthn.guide/
79
[can-i-use]: https://caniuse.com/#search=webauthn
80
[u2f]: https://en.wikipedia.org/wiki/Universal_2nd_Factor
content/getting-started/troubleshooting/common-errors.mdx
+1
-1
@@ -178,7 +178,7 @@ npm is written to use resources efficiently on install, and part of this is that
178
179
## `cb() never called!` when using shrinkwrapped dependencies
180
181
-Take a look at [issue #5920](https://github.com/npm/npm/issues/5920). <s>We're working on fixing this one, but it's a fairly subtle race condition and it's taking us a little time. You might try moving your `npm-shrinkwrap.json` file out of the way until we have this fixed.</s> This has been fixed in versions of npm newer than `npm@2.1.5`, so update to `npm@latest`.
181
+Take a look at [issue #5920](https://github.com/npm/npm/issues/5920). <Strikethrough>We're working on fixing this one, but it's a fairly subtle race condition and it's taking us a little time. You might try moving your `npm-shrinkwrap.json` file out of the way until we have this fixed.</Strikethrough> This has been fixed in versions of npm newer than `npm@2.1.5`, so update to `npm@latest`.
182
183
## `npm login` errors
184
content/organizations/managing-organization-members/organization-roles-and-permissions.mdx
+19
-15
@@ -14,18 +14,22 @@ There are three roles in an organization:
14
15
<><strong>On the public registry, you cannot remove the last owner from an organization.</strong> To delete an organization, {shared['contact-support'].text}.</>
16
17
-| Action | **Owner** | **Admin** | **Member** |
18
-| :---------------------------------------------------- | :-------: | :-------: | :--------: |
19
-| Manage organization billing | X | | |
20
-| Add members to the organization | X | | |
21
-| Remove members from the organization | X | | |
22
-| Rename an organization | X | | |
23
-| Delete an organization | X | | |
24
-| Change any organization member's role | X | | |
25
-| Add org owned packages to other orgs | X | | |
26
-| Create teams | X | X | |
27
-| Delete teams | X | X | |
28
-| Add any member to any team | X | X | |
29
-| Remove any member from any team | X | X | |
30
-| Manage team package access | X | X | |
31
-| Create and publish packages in the organization scope | X | X | X |
17
+<DataTable
18
+ headers={["Action", "Owner", "Admin", "Member"]}
19
+ align={["l", "c", "c", "c"]}
20
+ rows={[
21
+ ["Manage organization billing", "X", "", ""],
22
+ ["Add members to the organization", "X", "", ""],
23
+ ["Remove members from the organization", "X", "", ""],
24
+ ["Rename an organization", "X", "", ""],
25
+ ["Delete an organization", "X", "", ""],
26
+ ["Change any organization member's role", "X", "", ""],
27
+ ["Add org owned packages to other orgs", "X", "", ""],
28
+ ["Create teams", "X", "X", ""],
29
+ ["Delete teams", "X", "X", ""],
30
+ ["Add any member to any team", "X", "X", ""],
31
+ ["Remove any member from any team", "X", "X", ""],
32
+ ["Manage team package access", "X", "X", ""],
33
+ ["Create and publish packages in the organization scope", "X", "X", "X"]
34
+ ]}
35
+/>
content/packages-and-modules/contributing-packages-to-the-registry/about-semantic-versioning.mdx
+9
-6
@@ -16,12 +16,15 @@ To keep the JavaScript ecosystem healthy, reliable, and secure, every time you m
16
17
To help developers who rely on your code, we recommend starting your package version at `1.0.0` and incrementing as follows:
18
19
-| Code status | Stage | Rule | Example version |
20
-| --- | --- | --- | --- |
21
-| First release | New product | Start with 1.0.0 | 1.0.0 |
22
-| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |
23
-| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |
24
-| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |
19
+<DataTable
20
+ headers={["Code status", "Stage", "Rule", "Example version"]}
21
+ rows={[
22
+ ["First release", "New product", "Start with 1.0.0", "1.0.0"],
23
+ ["Backward compatible bug fixes", "Patch release", "Increment the third digit", "1.0.1"],
24
+ ["Backward compatible new features", "Minor release", "Increment the middle digit and reset last digit to zero", "1.1.0"],
25
+ ["Changes that break backward compatibility", "Major release", "Increment the first digit and reset middle and last digits to zero", "2.0.0"]
26
+ ]}
27
+/>
28
29
## Using semantic versioning to specify update types your package can accept
30
content/packages-and-modules/introduction-to-packages-and-modules/package-scope-access-level-and-visibility.mdx
+10
-7
@@ -12,13 +12,16 @@ Visibility of npm packages depends on the scope (namespace) in which the package
12
13
## npm Package Access Matrix
14
15
-| Scope | Access level | Can view and download | Can write (publish) |
16
-| --- | --- | --- | --- |
17
-| Org | Private | Members of a team in the organization with read access to the package | Members of a team in the organization with read and write access to the package |
18
-| Org | Public | Everyone | Members of a team in the organization with read and write access to the package |
19
-| User | Private | The package owner and users who have been granted read access to the package | The package owner and users who have been granted read and write access to the package |
20
-| User | Public | Everyone | The package owner and users who have been granted read and write access to the package |
21
-| Unscoped | Public | Everyone | The package owner and users who have been granted read and write access to the package |
15
+<DataTable
16
+ headers={["Scope", "Access level", "Can view and download", "Can write (publish)"]}
17
+ rows={[
18
+ ["Org", "Private", "Members of a team in the organization with read access to the package", "Members of a team in the organization with read and write access to the package"],
19
+ ["Org", "Public", "Everyone", "Members of a team in the organization with read and write access to the package"],
20
+ ["User", "Private", "The package owner and users who have been granted read access to the package", "The package owner and users who have been granted read and write access to the package"],
21
+ ["User", "Public", "Everyone", "The package owner and users who have been granted read and write access to the package"],
22
+ ["Unscoped", "Public", "Everyone", "The package owner and users who have been granted read and write access to the package"]
23
+ ]}
24
+/>
25
26
<Note>
27
content/packages-and-modules/securing-your-code/about-audit-reports.mdx
+10
-6
@@ -20,12 +20,16 @@ Audit reports contain tables of information about security vulnerabilities in yo
20
21
The severity of the vulnerability, determined by the impact and exploitability of the vulnerability in its most common use case.
22
23
-| Severity | Recommended action |
24
-| :------- | :----------------------------- |
25
-| Critical | Address immediately |
26
-| High | Address as quickly as possible |
27
-| Moderate | Address as time allows |
28
-| Low | Address at your discretion |
23
+<DataTable
24
+ headers={["Severity", "Recommended action"]}
25
+ align={["l", "l"]}
26
+ rows={[
27
+ ["Critical", "Address immediately"],
28
+ ["High", "Address as quickly as possible"],
29
+ ["Moderate", "Address as time allows"],
30
+ ["Low", "Address at your discretion"]
31
+ ]}
32
+/>
33
34
#### Description
35
gatsby-config.mjs
+1
-2
@@ -1,6 +1,5 @@
1
import path from 'path'
2
import fs from 'fs'
3
-import remarkGfm from 'remark-gfm'
3
import remarkFm from 'remark-frontmatter'
4
5
const {NODE_ENV, GATSBY_CONTENT_ALLOW, GATSBY_CONTENT_IGNORE, GATSBY_CONTENT_DIR = 'content'} = process.env
@@ -73,7 +72,7 @@ const config = {
72
resolve: 'gatsby-plugin-mdx',
73
options: {
74
mdxOptions: {
76
- remarkPlugins: [remarkGfm, remarkFm],
75
+ remarkPlugins: [remarkFm],
76
},
77
},
78
},
src/mdx/components.js
+56
@@ -325,3 +325,59 @@ export const YouTube = ({id}) => (
325
className={styles.Box}
326
/>
327
)
328
+
329
+export const InlineCode = styled.code`
330
+ font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
331
+ background-color: var(--bgColor-neutral-muted, #afb8c133);
332
+ padding: 2px 6px;
333
+ border-radius: 6px;
334
+ font-size: 85%;
335
+`
336
+
337
+export const Strikethrough = styled.span`
338
+ text-decoration: line-through;
339
+`
340
+
341
+const Thead = styled.thead``
342
+const Tbody = styled.tbody``
343
+const Tr = styled.tr``
344
+const Th = styled.th``
345
+const Td = styled.td``
346
+
347
+export const DataTable = ({headers, rows, align}) => {
348
+ const getAlign = index => {
349
+ if (!align) return undefined
350
+ const a = align[index]
351
+ if (a === 'l') return 'left'
352
+ if (a === 'r') return 'right'
353
+ if (a === 'c') return 'center'
354
+ return a
355
+ }
356
+
357
+ return (
358
+ <Table>
359
+ {headers && (
360
+ <Thead>
361
+ <Tr>
362
+ {headers.map((header, i) => (
363
+ <Th key={i} style={{textAlign: getAlign(i)}}>
364
+ {header}
365
+ </Th>
366
+ ))}
367
+ </Tr>
368
+ </Thead>
369
+ )}
370
+ <Tbody>
371
+ {rows.map((row, rowIndex) => (
372
+ <Tr key={rowIndex}>
373
+ {row.map((cell, cellIndex) => (
374
+ <Td key={cellIndex} style={{textAlign: getAlign(cellIndex)}}>
375
+ {cell}
376
+ </Td>
377
+ ))}
378
+ </Tr>
379
+ ))}
380
+ </Tbody>
381
+ </Table>
382
+ )
383
+}
src/mdx/index.js
+3
@@ -23,3 +23,6 @@ export const Prompt = Components.Prompt
23
export const Screenshot = Components.Screenshot
24
export const Link = Components.Link
25
export const YouTube = Components.YouTube
26
+export const DataTable = Components.DataTable
27
+export const InlineCode = Components.InlineCode
28
+export const Strikethrough = Components.Strikethrough