X Tutup
Skip to content

Commit 103ea69

Browse files
owlstronautowlstronaut
committed
chore: convert tables to component
1 parent 9261d9f commit 103ea69

File tree

10 files changed

+151
-72
lines changed

10 files changed

+151
-72
lines changed

‎.eslintrc.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,17 @@ module.exports = {
4040
parserOptions: {
4141
sourceType: 'module',
4242
},
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+
]),
4454
settings: {
4555
'import/resolver': 'webpack',
4656
},

‎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 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+
/>
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 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+
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/getting-started/troubleshooting/common-errors.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ npm is written to use resources efficiently on install, and part of this is that
178178

179179
## `cb() never called!` when using shrinkwrapped dependencies
180180

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`.
182182

183183
## `npm login` errors
184184

‎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: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,3 +325,59 @@ export const YouTube = ({id}) => (
325325
className={styles.Box}
326326
/>
327327
)
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‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,6 @@ 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
27+
export const InlineCode = Components.InlineCode
28+
export const Strikethrough = Components.Strikethrough

0 commit comments

Comments
 (0)
X Tutup