Skip to content

Commit 390b6f9

Browse files
docschina-botdocschina-bot
committedNov 15, 2021
Merge branch 'main' of https://github.com/reactjs/reactjs.org into sync-49a552c1
2 parents d08857c + 49a552c commit 390b6f9

19 files changed

+597
-498
lines changed
 

‎.github/workflows/beta_site_lint.yml

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: Beta Site Lint
2+
3+
on:
4+
pull_request:
5+
types: [opened, synchronize, reopened]
6+
7+
jobs:
8+
lint:
9+
runs-on: ubuntu-latest
10+
11+
name: Lint on node 12.x and ubuntu-latest
12+
13+
steps:
14+
- uses: actions/checkout@v1
15+
- name: Use Node.js 12.x
16+
uses: actions/setup-node@v1
17+
with:
18+
node-version: 12.x
19+
20+
- name: Install deps and build (with cache)
21+
uses: bahmutov/npm-install@v1.6.0
22+
with:
23+
working-directory: 'beta'
24+
25+
26+
- name: Lint codebase
27+
run: cd beta && yarn ci-check

‎beta/.eslintrc

+3-11
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
{
2-
"extends": ["react-app", "plugin:jsx-a11y/recommended"],
3-
"plugins": ["jsx-a11y"],
4-
"overrides": [
5-
{
6-
"files": ["**/*.ts?(x)"],
7-
"rules": {
8-
"jsx-a11y/anchor-is-valid": 0
9-
}
10-
}
11-
],
2+
"root": true,
3+
"extends": "next",
124
"env": {
135
"node": true,
146
"commonjs": true,
157
"browser": true,
168
"es6": true
179
}
18-
}
10+
}

‎beta/.husky/pre-commit

+2
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,5 @@
44
cd beta
55
yarn generate-ids
66
git add -u src/pages/**/*.md
7+
yarn prettier
8+
yarn lint:fix

‎beta/.prettierrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"bracketSpacing": false,
33
"singleQuote": true,
4-
"jsxBracketSameLine": true,
4+
"bracketSameLine": true,
55
"trailingComma": "es5",
66
"printWidth": 80
77
}

‎beta/package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"analyze": "ANALYZE=true next build",
88
"dev": "next",
99
"build": "next build && node ./scripts/generateRSS.js",
10-
"lint": "eslint 'src/**/*.{js,ts,tsx}'",
10+
"lint": "next lint",
11+
"lint:fix": "next lint --fix",
1112
"format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx}\"",
1213
"nit:source": "prettier --config .prettierrc --list-different \"{plugins,src}/**/*.{js,ts,jsx,tsx}\"",
1314
"prettier": "yarn format:source",
@@ -52,7 +53,8 @@
5253
"asyncro": "^3.0.0",
5354
"autoprefixer": "^10.3.1",
5455
"babel-eslint": "10.x",
55-
"eslint": "6.x",
56+
"eslint": "7.x",
57+
"eslint-config-next": "12.0.3",
5658
"eslint-config-react-app": "^5.2.1",
5759
"eslint-plugin-flowtype": "4.x",
5860
"eslint-plugin-import": "2.x",

‎beta/plugins/remark-header-custom-ids.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -36,27 +36,27 @@ module.exports = ({
3636
// A bit weird: this is to support MDX 2 comments in expressions,
3737
// while we’re still on MDX 1, which doesn’t support them.
3838
if (!tail || tail.type !== 'text' || tail.value !== '/}') {
39-
return
39+
return;
4040
}
4141

42-
tail = children[children.length - 2]
42+
tail = children[children.length - 2];
4343

4444
if (!tail && tail.type !== 'emphasis') {
45-
return
45+
return;
4646
}
4747

48-
const id = toString(tail)
48+
const id = toString(tail);
4949

50-
tail = children[children.length - 3]
50+
tail = children[children.length - 3];
5151

5252
if (!tail || tail.type !== 'text' || !tail.value.endsWith('{/')) {
53-
return
53+
return;
5454
}
5555

5656
// Remove the emphasis and trailing `/}`
57-
children.splice(children.length - 2, 2)
57+
children.splice(children.length - 2, 2);
5858
// Remove the `{/`
59-
tail.value = tail.value.replace(/[ \t]*\{\/$/, '')
59+
tail.value = tail.value.replace(/[ \t]*\{\/$/, '');
6060

6161
const data = patch(node, 'data', {});
6262

‎beta/src/components/Button.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,10 @@ export function Button({
3232
className,
3333
'text-base leading-tight font-bold border rounded-lg py-2 px-4 focus:ring-1 focus:ring-offset-2 focus:ring-link active:bg-link active:border-link active:text-white active:ring-0 active:ring-offset-0 outline-none inline-flex items-center my-1',
3434
{
35-
'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link': active,
36-
'bg-transparent text-secondary dark:text-secondary-dark bg-secondary-button dark:bg-secondary-button-dark hover:text-link focus:text-link border-transparent': !active,
35+
'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link':
36+
active,
37+
'bg-transparent text-secondary dark:text-secondary-dark bg-secondary-button dark:bg-secondary-button-dark hover:text-link focus:text-link border-transparent':
38+
!active,
3739
}
3840
)}>
3941
{children}

‎beta/src/components/Layout/Nav/MobileNav.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,8 @@ function TabButton({
7474
const classes = cn(
7575
'inline-flex items-center w-full border-b-2 justify-center text-base leading-9 px-3 py-0.5 hover:text-link hover:gray-5',
7676
{
77-
'text-link dark:text-link-dark dark:border-link-dark border-link font-bold': isActive,
77+
'text-link dark:text-link-dark dark:border-link-dark border-link font-bold':
78+
isActive,
7879
'border-transparent': !isActive,
7980
}
8081
);

‎beta/src/components/Layout/Nav/NavButtonLink.tsx

-39
This file was deleted.

‎beta/src/components/Layout/Nav/NavLink.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ interface NavLinkProps {
1616
export default function NavLink({href, children, isActive}: NavLinkProps) {
1717
const classes = cn(
1818
{
19-
'text-link border-link dark:text-link-dark dark:border-link-dark font-bold': isActive,
19+
'text-link border-link dark:text-link-dark dark:border-link-dark font-bold':
20+
isActive,
2021
},
2122
{'border-transparent': !isActive},
2223
'inline-flex w-full items-center border-b-2 justify-center text-base leading-9 px-3 py-0.5 hover:text-link dark:hover:text-link-dark whitespace-nowrap'

‎beta/src/components/Layout/Sidebar/SidebarLink.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ export function SidebarLink({
6565
'dark:text-primary-dark text-primary': heading,
6666
'text-base text-secondary dark:text-secondary-dark':
6767
!selected && !heading,
68-
'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark': selected,
68+
'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
69+
selected,
6970
}
7071
)}>
7172
{title}

‎beta/src/components/MDX/CodeBlock/CodeBlock.tsx

+79-83
Original file line numberDiff line numberDiff line change
@@ -21,94 +21,90 @@ interface InlineHiglight {
2121
endColumn: number;
2222
}
2323

24-
const CodeBlock = React.forwardRef(
25-
(
26-
{
27-
children,
28-
className = 'language-js',
29-
metastring,
30-
noMargin,
31-
noMarkers,
32-
}: {
33-
children: string;
34-
className?: string;
35-
metastring: string;
36-
noMargin?: boolean;
37-
noMarkers?: boolean;
38-
},
39-
ref?: React.Ref<HTMLDivElement>
40-
) => {
41-
const getDecoratedLineInfo = () => {
42-
if (!metastring) {
43-
return [];
44-
}
24+
const CodeBlock = React.forwardRef(function CodeBlock(
25+
{
26+
children,
27+
className = 'language-js',
28+
metastring,
29+
noMargin,
30+
noMarkers,
31+
}: {
32+
children: string;
33+
className?: string;
34+
metastring: string;
35+
noMargin?: boolean;
36+
noMarkers?: boolean;
37+
},
38+
ref?: React.Ref<HTMLDivElement>
39+
) {
40+
const getDecoratedLineInfo = () => {
41+
if (!metastring) {
42+
return [];
43+
}
4544

46-
const linesToHighlight = getHighlightLines(metastring);
47-
const highlightedLineConfig = linesToHighlight.map((line) => {
48-
return {
49-
className: 'bg-github-highlight dark:bg-opacity-10',
50-
line,
51-
};
52-
});
45+
const linesToHighlight = getHighlightLines(metastring);
46+
const highlightedLineConfig = linesToHighlight.map((line) => {
47+
return {
48+
className: 'bg-github-highlight dark:bg-opacity-10',
49+
line,
50+
};
51+
});
5352

54-
const inlineHighlightLines = getInlineHighlights(metastring, children);
55-
const inlineHighlightConfig = inlineHighlightLines.map(
56-
(line: InlineHiglight) => ({
57-
...line,
58-
elementAttributes: {'data-step': `${line.step}`},
59-
className: cn(
60-
'code-step bg-opacity-10 relative rounded-md p-1 ml-2',
61-
{
62-
'pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4': !noMarkers,
63-
'bg-blue-40 before:bg-blue-40': line.step === 1,
64-
'bg-yellow-40 before:bg-yellow-40': line.step === 2,
65-
'bg-green-40 before:bg-green-40': line.step === 3,
66-
'bg-purple-40 before:bg-purple-40': line.step === 4,
67-
}
68-
),
69-
})
70-
);
53+
const inlineHighlightLines = getInlineHighlights(metastring, children);
54+
const inlineHighlightConfig = inlineHighlightLines.map(
55+
(line: InlineHiglight) => ({
56+
...line,
57+
elementAttributes: {'data-step': `${line.step}`},
58+
className: cn('code-step bg-opacity-10 relative rounded-md p-1 ml-2', {
59+
'pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4':
60+
!noMarkers,
61+
'bg-blue-40 before:bg-blue-40': line.step === 1,
62+
'bg-yellow-40 before:bg-yellow-40': line.step === 2,
63+
'bg-green-40 before:bg-green-40': line.step === 3,
64+
'bg-purple-40 before:bg-purple-40': line.step === 4,
65+
}),
66+
})
67+
);
7168

72-
return highlightedLineConfig.concat(inlineHighlightConfig);
73-
};
69+
return highlightedLineConfig.concat(inlineHighlightConfig);
70+
};
7471

75-
// e.g. "language-js"
76-
const language = className.substring(9);
77-
const filename = '/index.' + language;
78-
const decorators = getDecoratedLineInfo();
79-
return (
80-
<div
81-
translate="no"
82-
className={cn(
83-
'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
84-
!noMargin && 'my-8'
85-
)}>
86-
<SandpackProvider
87-
customSetup={{
88-
entry: filename,
89-
files: {
90-
[filename]: {
91-
code: children.trimEnd(),
92-
},
72+
// e.g. "language-js"
73+
const language = className.substring(9);
74+
const filename = '/index.' + language;
75+
const decorators = getDecoratedLineInfo();
76+
return (
77+
<div
78+
translate="no"
79+
className={cn(
80+
'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
81+
!noMargin && 'my-8'
82+
)}>
83+
<SandpackProvider
84+
customSetup={{
85+
entry: filename,
86+
files: {
87+
[filename]: {
88+
code: children.trimEnd(),
9389
},
94-
}}>
95-
<SandpackThemeProvider theme={CustomTheme}>
96-
<ClasserProvider
97-
classes={{
98-
'sp-cm': styles.codeViewer,
99-
}}>
100-
<SandpackCodeViewer
101-
ref={ref}
102-
showLineNumbers={false}
103-
decorators={decorators}
104-
/>
105-
</ClasserProvider>
106-
</SandpackThemeProvider>
107-
</SandpackProvider>
108-
</div>
109-
);
110-
}
111-
);
90+
},
91+
}}>
92+
<SandpackThemeProvider theme={CustomTheme}>
93+
<ClasserProvider
94+
classes={{
95+
'sp-cm': styles.codeViewer,
96+
}}>
97+
<SandpackCodeViewer
98+
ref={ref}
99+
showLineNumbers={false}
100+
decorators={decorators}
101+
/>
102+
</ClasserProvider>
103+
</SandpackThemeProvider>
104+
</SandpackProvider>
105+
</div>
106+
);
107+
});
112108

113109
export default CodeBlock;
114110

‎beta/src/components/MDX/ExpandableExample.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,10 @@ function ExpandableExample({
6060
<Button
6161
active={true}
6262
className={cn({
63-
'bg-purple-50 border-purple-50 hover:bg-purple-40 focus:bg-purple-50 active:bg-purple-50': isDeepDive,
64-
'bg-yellow-50 border-yellow-50 hover:bg-yellow-40 focus:bg-yellow-50 active:bg-yellow-50': isExample,
63+
'bg-purple-50 border-purple-50 hover:bg-purple-40 focus:bg-purple-50 active:bg-purple-50':
64+
isDeepDive,
65+
'bg-yellow-50 border-yellow-50 hover:bg-yellow-40 focus:bg-yellow-50 active:bg-yellow-50':
66+
isExample,
6567
})}
6668
onClick={() => setIsExpanded((current) => !current)}>
6769
<span className="mr-1">

‎beta/src/components/MDX/Link.tsx

+9-17
Original file line numberDiff line numberDiff line change
@@ -34,28 +34,20 @@ function Link({
3434
return (
3535
<>
3636
{href.startsWith('https://') ? (
37-
<ExternalLink
38-
href={href}
39-
className={cn(classes, className)}
40-
{...props}
41-
children={modifiedChildren}
42-
/>
37+
<ExternalLink href={href} className={cn(classes, className)} {...props}>
38+
{modifiedChildren}
39+
</ExternalLink>
4340
) : href.startsWith('#') ? (
4441
// eslint-disable-next-line jsx-a11y/anchor-has-content
45-
<a
46-
className={cn(classes, className)}
47-
href={href}
48-
{...props}
49-
children={modifiedChildren}
50-
/>
42+
<a className={cn(classes, className)} href={href} {...props}>
43+
{modifiedChildren}
44+
</a>
5145
) : (
5246
<NextLink href={href.replace('.html', '')}>
5347
{/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
54-
<a
55-
className={cn(classes, className)}
56-
{...props}
57-
children={modifiedChildren}
58-
/>
48+
<a className={cn(classes, className)} {...props}>
49+
{modifiedChildren}
50+
</a>
5951
</NextLink>
6052
)}
6153
</>

‎beta/src/components/MDX/MDXComponents.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,12 @@ function Illustration({
185185
return (
186186
<div className="my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
187187
<figure className="my-8 flex justify-center">
188-
<img src={src} alt={alt} style={{maxHeight: 300}} className="bg-white rounded-lg" />
188+
<img
189+
src={src}
190+
alt={alt}
191+
style={{maxHeight: 300}}
192+
className="bg-white rounded-lg"
193+
/>
189194
{caption ? (
190195
<figcaption className="text-center leading-tight mt-4">
191196
{caption}
@@ -234,8 +239,10 @@ function IllustrationBlock({
234239
) : null}
235240
{sequential ? (
236241
<ol className="mdx-illustration-block flex">
237-
{images.map((x: any) => (
238-
<li className="flex-1">{x}</li>
242+
{images.map((x: any, i: number) => (
243+
<li className="flex-1" key={i}>
244+
{x}
245+
</li>
239246
))}
240247
</ol>
241248
) : (

‎beta/src/components/Seo.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,7 @@ export const Seo = withRouter(
2525
<Head>
2626
{/* DEFAULT */}
2727

28-
<meta
29-
name="viewport"
30-
content="width=device-width, initial-scale=1"
31-
/>
28+
<meta name="viewport" content="width=device-width, initial-scale=1" />
3229

3330
{title != null && <title key="title">{title}</title>}
3431
{description != null && (

‎beta/src/utils/forwardRefWithAs.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export function forwardRefWithAs<Props, ComponentType extends As>(
9696
ref: React.RefObject<any>
9797
) => React.ReactElement | null
9898
) {
99-
return (React.forwardRef(comp as any) as unknown) as ComponentWithAs<
99+
return React.forwardRef(comp as any) as unknown as ComponentWithAs<
100100
ComponentType,
101101
Props
102102
>;

‎beta/tsconfig.json

+15-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
{
22
"compilerOptions": {
33
"target": "es5",
4-
"lib": ["dom", "dom.iterable", "esnext"],
4+
"lib": [
5+
"dom",
6+
"dom.iterable",
7+
"esnext"
8+
],
59
"allowJs": true,
610
"skipLibCheck": true,
711
"strict": true,
@@ -17,8 +21,15 @@
1721
"resolveJsonModule": true,
1822
"isolatedModules": true,
1923
"jsx": "preserve",
20-
"baseUrl": "src"
24+
"baseUrl": "src",
25+
"incremental": true
2126
},
22-
"include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"],
23-
"exclude": ["node_modules"]
27+
"include": [
28+
"next-env.d.ts",
29+
"src/**/*.ts",
30+
"src/**/*.tsx"
31+
],
32+
"exclude": [
33+
"node_modules"
34+
]
2435
}

‎beta/yarn.lock

+423-318
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.