Skip to content

Commit 385840d

Browse files
author
Michael Smith
committed
chore: convert tables to component
1 parent ea8a81c commit 385840d

9 files changed

Lines changed: 126 additions & 71 deletions

File tree

‎.eslintrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ module.exports = {
4040
parserOptions: {
4141
sourceType: 'module',
4242
},
43-
globals: getGlobals(['Index', 'Note', 'Prompt', 'Screenshot', 'Link', 'YouTube']),
43+
globals: getGlobals(['Index', 'Note', 'Prompt', 'Screenshot', 'Link', 'YouTube', 'DataTable']),
4444
settings: {
4545
'import/resolver': 'webpack',
4646
},

‎content/getting-started/setting-up-your-npm-user-account/about-two-factor-authentication.mdx‎

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -39,45 +39,42 @@ Two-factor authentication on npm can be enabled for authorization and writes, or
3939

4040
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.
4141

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 href="https://docs.npmjs.com/cli/adduser"><code>npm login</code></Link>],
47+
["Change profile settings (including your password)", <Link href="https://docs.npmjs.com/cli/profile"><code>npm profile set</code></Link>],
48+
["Change 2FA modes for your user account", <Link href="https://docs.npmjs.com/cli/profile"><code>npm profile enable-2fa auth-and-writes</code></Link>],
49+
["Disable 2FA for your user account", <Link href="https://docs.npmjs.com/cli/profile"><code>npm profile disable-2fa</code></Link>],
50+
["Create tokens", <Link href="https://docs.npmjs.com/cli/token"><code>npm token create</code></Link>],
51+
["Revoke tokens", <Link href="https://docs.npmjs.com/cli/token"><code>npm token revoke</code></Link>],
52+
["Publish packages", <Link href="https://docs.npmjs.com/cli/publish"><code>npm publish</code></Link>],
53+
["Unpublish packages", <Link href="https://docs.npmjs.com/cli/unpublish"><code>npm unpublish</code></Link>],
54+
["Deprecate packages", <Link href="https://docs.npmjs.com/cli/deprecate"><code>npm deprecate</code></Link>],
55+
["Change package visibility", <Link href="https://docs.npmjs.com/cli/access"><code>npm access public/restricted</code></Link>],
56+
["Change user and team package access", <Link href="https://docs.npmjs.com/cli/access"><code>npm access grant/revoke</code></Link>],
57+
[<Link href="/requiring-2fa-for-package-publishing-and-settings-modification">Change package 2FA requirements</Link>, <Link href="https://docs.npmjs.com/cli/access"><code>npm access 2fa-required/2fa-not-required</code></Link>]
58+
]}
59+
/>
5660

5761
### Authorization only
5862

5963
If you enable 2FA for authorization only. We will request a second form of authentication only for certain authorized actions.
6064

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 href="https://docs.npmjs.com/cli/adduser"><code>npm login</code></Link>],
70+
["Change profile settings (including your password)", <Link href="https://docs.npmjs.com/cli/profile"><code>npm profile set</code></Link>],
71+
["Change 2FA modes for your user account", <Link href="https://docs.npmjs.com/cli/profile"><code>npm profile enable-2fa auth-only</code></Link>],
72+
["Disable 2FA for your user account", <Link href="https://docs.npmjs.com/cli/profile"><code>npm profile disable-2fa</code></Link>],
73+
["Create tokens", <Link href="https://docs.npmjs.com/cli/token"><code>npm token create</code></Link>],
74+
["Revoke tokens", <Link href="https://docs.npmjs.com/cli/token"><code>npm token revoke</code></Link>]
75+
]}
76+
/>
77+
8178
[webauthn]: https://webauthn.guide/
8279
[can-i-use]: https://caniuse.com/#search=webauthn
8380
[u2f]: https://en.wikipedia.org/wiki/Universal_2nd_Factor

‎content/organizations/managing-organization-members/organization-roles-and-permissions.mdx‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,22 @@ There are three roles in an organization:
1414

1515
<><strong>On the public registry, you cannot remove the last owner from an organization.</strong> To delete an organization, {shared['contact-support'].text}.</>
1616

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‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,15 @@ To keep the JavaScript ecosystem healthy, reliable, and secure, every time you m
1616

1717
To help developers who rely on your code, we recommend starting your package version at `1.0.0` and incrementing as follows:
1818

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+
/>
2528

2629
## Using semantic versioning to specify update types your package can accept
2730

‎content/packages-and-modules/introduction-to-packages-and-modules/package-scope-access-level-and-visibility.mdx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,16 @@ Visibility of npm packages depends on the scope (namespace) in which the package
1212

1313
## npm Package Access Matrix
1414

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+
/>
2225

2326
<Note>
2427

‎content/packages-and-modules/securing-your-code/about-audit-reports.mdx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,16 @@ Audit reports contain tables of information about security vulnerabilities in yo
2020

2121
The severity of the vulnerability, determined by the impact and exploitability of the vulnerability in its most common use case.
2222

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+
/>
2933

3034
#### Description
3135

‎gatsby-config.mjs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import path from 'path'
22
import fs from 'fs'
3-
import remarkGfm from 'remark-gfm'
43
import remarkFm from 'remark-frontmatter'
54

65
const {NODE_ENV, GATSBY_CONTENT_ALLOW, GATSBY_CONTENT_IGNORE, GATSBY_CONTENT_DIR = 'content'} = process.env
@@ -73,7 +72,7 @@ const config = {
7372
resolve: 'gatsby-plugin-mdx',
7473
options: {
7574
mdxOptions: {
76-
remarkPlugins: [remarkGfm, remarkFm],
75+
remarkPlugins: [remarkFm],
7776
},
7877
},
7978
},

‎src/mdx/components.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,3 +325,47 @@ export const YouTube = ({id}) => (
325325
className={styles.Box}
326326
/>
327327
)
328+
329+
const Thead = styled.thead``
330+
const Tbody = styled.tbody``
331+
const Tr = styled.tr``
332+
const Th = styled.th``
333+
const Td = styled.td``
334+
335+
export const DataTable = ({headers, rows, align}) => {
336+
const getAlign = index => {
337+
if (!align) return undefined
338+
const a = align[index]
339+
if (a === 'l') return 'left'
340+
if (a === 'r') return 'right'
341+
if (a === 'c') return 'center'
342+
return a
343+
}
344+
345+
return (
346+
<Table>
347+
{headers && (
348+
<Thead>
349+
<Tr>
350+
{headers.map((header, i) => (
351+
<Th key={i} style={{textAlign: getAlign(i)}}>
352+
{header}
353+
</Th>
354+
))}
355+
</Tr>
356+
</Thead>
357+
)}
358+
<Tbody>
359+
{rows.map((row, rowIndex) => (
360+
<Tr key={rowIndex}>
361+
{row.map((cell, cellIndex) => (
362+
<Td key={cellIndex} style={{textAlign: getAlign(cellIndex)}}>
363+
{cell}
364+
</Td>
365+
))}
366+
</Tr>
367+
))}
368+
</Tbody>
369+
</Table>
370+
)
371+
}

‎src/mdx/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,4 @@ export const Prompt = Components.Prompt
2323
export const Screenshot = Components.Screenshot
2424
export const Link = Components.Link
2525
export const YouTube = Components.YouTube
26+
export const DataTable = Components.DataTable

0 commit comments

Comments
 (0)