Skip to content

Commit dcc8f3c

Browse files
Merge branch 'main' of https://github.com/reactjs/react.dev into sync-556063bd
2 parents acb613f + 556063b commit dcc8f3c

File tree

87 files changed

+4927
-298
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+4927
-298
lines changed

.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,6 @@ yarn-error.log*
3636

3737
# external fonts
3838
public/fonts/**/Optimistic_*.woff2
39+
40+
# rss
41+
public/rss.xml

colors.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ module.exports = {
1111
tertiary: '#5E687E', // gray-50
1212
'tertiary-dark': '#99A1B3', // gray-30
1313
link: '#087EA4', // blue-50
14-
'link-dark': '#149ECA', // blue-40
14+
'link-dark': '#58C4DC', // blue-40
1515
syntax: '#EBECF0', // gray-10
1616
wash: '#FFFFFF',
1717
'wash-dark': '#23272F', // gray-90
@@ -23,6 +23,8 @@ module.exports = {
2323
'border-dark': '#343A46', // gray-80
2424
'secondary-button': '#EBECF0', // gray-10
2525
'secondary-button-dark': '#404756', // gray-70
26+
brand: '#087EA4', // blue-40
27+
'brand-dark': '#58C4DC', // blue-40
2628

2729
// Gray
2830
'gray-95': '#16181D',

package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,12 @@
1515
"prettier:diff": "yarn nit:source",
1616
"lint-heading-ids": "node scripts/headingIdLinter.js",
1717
"fix-headings": "node scripts/headingIdLinter.js --fix",
18-
"ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids",
18+
"ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss",
1919
"tsc": "tsc --noEmit",
2020
"start": "next start",
2121
"postinstall": "patch-package && (is-ci || husky install .husky)",
22-
"check-all": "npm-run-all prettier lint:fix tsc"
22+
"check-all": "npm-run-all prettier lint:fix tsc rss",
23+
"rss": "node scripts/generateRss.js"
2324
},
2425
"dependencies": {
2526
"@codesandbox/sandpack-react": "2.13.5",

public/android-chrome-192x192.png

5.86 KB
Loading

public/android-chrome-384x384.png

28.3 KB
Loading

public/android-chrome-512x512.png

69.6 KB
Loading

public/apple-touch-icon.png

5.54 KB
Loading

public/browserconfig.xml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<browserconfig>
3+
<msapplication>
4+
<tile>
5+
<square150x150logo src="/mstile-150x150.png"/>
6+
<TileColor>#2b5797</TileColor>
7+
</tile>
8+
</msapplication>
9+
</browserconfig>

public/favicon-16x16.png

872 Bytes
Loading

public/favicon-32x32.png

1.63 KB
Loading

public/favicon.ico

10.5 KB
Binary file not shown.

public/favicon_old.ico

15 KB
Binary file not shown.

public/images/team/lauren.jpg

28.1 KB
Loading

public/images/team/lesiutin.jpg

174 KB
Loading

public/images/uwu.png

53.8 KB
Loading

public/mstile-150x150.png

6.01 KB
Loading

public/safari-pinned-tab.svg

+60
Loading

public/site.webmanifest

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "React",
3+
"short_name": "React",
4+
"icons": [
5+
{
6+
"src": "/android-chrome-192x192.png",
7+
"sizes": "192x192",
8+
"type": "image/png"
9+
},
10+
{
11+
"src": "/android-chrome-384x384.png",
12+
"sizes": "384x384",
13+
"type": "image/png"
14+
}
15+
],
16+
"theme_color": "#23272f",
17+
"background_color": "#23272f",
18+
"display": "standalone"
19+
}

scripts/generateRss.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/*
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*/
4+
const {generateRssFeed} = require('../src/utils/rss');
5+
6+
generateRssFeed();

src/components/ButtonLink.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ function ButtonLink({
2626
className,
2727
'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug',
2828
{
29-
'bg-link text-white hover:bg-opacity-80': type === 'primary',
29+
'bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80':
30+
type === 'primary',
3031
'text-primary dark:text-primary-dark shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':
3132
type === 'secondary',
3233
'text-lg py-3 rounded-full px-4 sm:px-6': size === 'lg',

src/components/Icon/IconCanary.tsx

+31-25
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,35 @@
44

55
import {memo} from 'react';
66

7-
export const IconCanary = memo<JSX.IntrinsicElements['svg'] & {title?: string}>(
8-
function IconCanary({className, title}) {
9-
return (
10-
<svg
11-
className={className}
12-
width="20px"
13-
height="20px"
14-
viewBox="0 0 20 20"
15-
version="1.1"
16-
xmlns="http://www.w3.org/2000/svg">
17-
{title && <title>{title}</title>}
18-
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
19-
<g
20-
id="noun-labs-1201738-(2)"
21-
transform="translate(2, 0)"
22-
fill="currentColor"
23-
fillRule="nonzero">
24-
<path
25-
d="M10.2865804,5.55665262 L10.2865804,2.22331605 L10.8591544,2.22331605 C11.0103911,2.22244799 11.1551447,2.16342155 11.2617505,2.05914367 C11.3684534,1.95486857 11.4282767,1.81370176 11.4282767,1.66667106 L11.4282767,0.556642208 C11.4282767,0.40907262 11.3678934,0.26747526 11.2605218,0.16308627 C11.1531503,0.0587028348 11.0074938,0 10.8556998,0 L5.14338868,0 C4.9915947,0 4.84594391,0.0587028348 4.73856664,0.16308627 C4.63119507,0.267469704 4.57081178,0.40907262 4.57081178,0.556642208 L4.57081178,1.66667106 C4.57081178,1.81434899 4.63119507,1.95594912 4.73856664,2.06033811 C4.8459382,2.16472155 4.9915947,2.22331605 5.14338868,2.22331605 L5.71596273,2.22331605 L5.71596273,5.55665262 C5.71596273,8.38665538 2.97295619,9.88999017 0.651686904,15.5566623 C-0.0957823782,17.360053 -2.00560068,20 7.99951567,20 C18.004632,20 16.0948137,17.3600252 15.3507732,15.5566623 C13.0124432,9.88999017 10.2865804,8.38665538 10.2865804,5.55665262 Z M9.89570197,10.709991 C10.0921412,10.709991 10.2805515,10.7858383 10.4193876,10.9209301 C10.5583466,11.0559135 10.6363652,11.2390693 10.6363652,11.4300417 C10.6363652,11.6210141 10.5583466,11.8040698 10.4193876,11.9391533 C10.2805401,12.0741367 10.0921412,12.1499813 9.89570197,12.1499813 C9.6992627,12.1499813 9.51096673,12.074134 9.37201631,11.9391533 C9.23316875,11.8040615 9.15515307,11.6210141 9.15515307,11.4300417 C9.15515307,11.2390693 9.2331716,11.0559024 9.37201631,10.9209301 C9.57264221,10.7258996 9.61239426,10.709991 9.89570197,10.709991 Z M8.98919546,9.04212824 C9.09790709,9.14792278 9.15884755,9.29158681 9.1585213,9.44110085 C9.15829001,9.59073155 9.09678989,9.73407335 8.98763252,9.83954568 C8.87847514,9.945018 8.73069852,10.0039347 8.57678157,10.0033977 C8.42286747,10.0027392 8.27565088,9.94273467 8.16727355,9.83639845 C8.05900765,9.73006224 7.99873866,9.58628988 7.99963013,9.43664806 C8.00052304,9.28788403 8.0620221,9.14542556 8.17051087,9.04048101 C8.27911107,8.93555591 8.42599335,8.87663641 8.57913312,8.87663641 C8.73291864,8.87665585 8.88047525,8.93622535 8.98919546,9.04212824 Z M7.99965585,17.9999981 C4.91377349,17.9999981 3.29882839,17.7332867 2.51364277,17.4999976 C2.37780966,17.4476975 2.26954376,17.3439641 2.21396931,17.2125528 C2.15838628,17.0811499 2.16006066,16.9334692 2.21876871,16.8033858 C2.6144474,15.5921346 3.14916224,14.4280501 3.81316983,13.3333824 C5.980145,9.82337899 8.22941036,13.8867718 10.0980836,13.8867718 C11.9666996,13.8867718 11.4695868,12.1534924 12.1827971,13.3333824 C12.8511505,14.4269112 13.3916656,15.5896902 13.794259,16.8000524 C13.8533022,16.9322137 13.8537479,17.0822749 13.7952635,17.2147751 C13.7368889,17.3472613 13.6248314,17.4504531 13.4856467,17.5000531 C12.6833967,17.7332867 11.0855382,17.9999981 7.99965585,17.9999981 Z"
26-
id="Shape"></path>
27-
</g>
28-
</g>
29-
</svg>
30-
);
7+
export const IconCanary = memo<
8+
JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
9+
>(function IconCanary(
10+
{className, title, size} = {
11+
className: undefined,
12+
title: undefined,
13+
size: 'md',
3114
}
32-
);
15+
) {
16+
return (
17+
<svg
18+
className={className}
19+
width={size === 's' ? '12px' : '20px'}
20+
height={size === 's' ? '12px' : '20px'}
21+
viewBox="0 0 20 20"
22+
version="1.1"
23+
xmlns="http://www.w3.org/2000/svg">
24+
{title && <title>{title}</title>}
25+
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
26+
<g
27+
id="noun-labs-1201738-(2)"
28+
transform="translate(2, 0)"
29+
fill="currentColor"
30+
fillRule="nonzero">
31+
<path
32+
d="M10.2865804,5.55665262 L10.2865804,2.22331605 L10.8591544,2.22331605 C11.0103911,2.22244799 11.1551447,2.16342155 11.2617505,2.05914367 C11.3684534,1.95486857 11.4282767,1.81370176 11.4282767,1.66667106 L11.4282767,0.556642208 C11.4282767,0.40907262 11.3678934,0.26747526 11.2605218,0.16308627 C11.1531503,0.0587028348 11.0074938,0 10.8556998,0 L5.14338868,0 C4.9915947,0 4.84594391,0.0587028348 4.73856664,0.16308627 C4.63119507,0.267469704 4.57081178,0.40907262 4.57081178,0.556642208 L4.57081178,1.66667106 C4.57081178,1.81434899 4.63119507,1.95594912 4.73856664,2.06033811 C4.8459382,2.16472155 4.9915947,2.22331605 5.14338868,2.22331605 L5.71596273,2.22331605 L5.71596273,5.55665262 C5.71596273,8.38665538 2.97295619,9.88999017 0.651686904,15.5566623 C-0.0957823782,17.360053 -2.00560068,20 7.99951567,20 C18.004632,20 16.0948137,17.3600252 15.3507732,15.5566623 C13.0124432,9.88999017 10.2865804,8.38665538 10.2865804,5.55665262 Z M9.89570197,10.709991 C10.0921412,10.709991 10.2805515,10.7858383 10.4193876,10.9209301 C10.5583466,11.0559135 10.6363652,11.2390693 10.6363652,11.4300417 C10.6363652,11.6210141 10.5583466,11.8040698 10.4193876,11.9391533 C10.2805401,12.0741367 10.0921412,12.1499813 9.89570197,12.1499813 C9.6992627,12.1499813 9.51096673,12.074134 9.37201631,11.9391533 C9.23316875,11.8040615 9.15515307,11.6210141 9.15515307,11.4300417 C9.15515307,11.2390693 9.2331716,11.0559024 9.37201631,10.9209301 C9.57264221,10.7258996 9.61239426,10.709991 9.89570197,10.709991 Z M8.98919546,9.04212824 C9.09790709,9.14792278 9.15884755,9.29158681 9.1585213,9.44110085 C9.15829001,9.59073155 9.09678989,9.73407335 8.98763252,9.83954568 C8.87847514,9.945018 8.73069852,10.0039347 8.57678157,10.0033977 C8.42286747,10.0027392 8.27565088,9.94273467 8.16727355,9.83639845 C8.05900765,9.73006224 7.99873866,9.58628988 7.99963013,9.43664806 C8.00052304,9.28788403 8.0620221,9.14542556 8.17051087,9.04048101 C8.27911107,8.93555591 8.42599335,8.87663641 8.57913312,8.87663641 C8.73291864,8.87665585 8.88047525,8.93622535 8.98919546,9.04212824 Z M7.99965585,17.9999981 C4.91377349,17.9999981 3.29882839,17.7332867 2.51364277,17.4999976 C2.37780966,17.4476975 2.26954376,17.3439641 2.21396931,17.2125528 C2.15838628,17.0811499 2.16006066,16.9334692 2.21876871,16.8033858 C2.6144474,15.5921346 3.14916224,14.4280501 3.81316983,13.3333824 C5.980145,9.82337899 8.22941036,13.8867718 10.0980836,13.8867718 C11.9666996,13.8867718 11.4695868,12.1534924 12.1827971,13.3333824 C12.8511505,14.4269112 13.3916656,15.5896902 13.794259,16.8000524 C13.8533022,16.9322137 13.8537479,17.0822749 13.7952635,17.2147751 C13.7368889,17.3472613 13.6248314,17.4504531 13.4856467,17.5000531 C12.6833967,17.7332867 11.0855382,17.9999981 7.99965585,17.9999981 Z"
33+
id="Shape"></path>
34+
</g>
35+
</g>
36+
</svg>
37+
);
38+
});

src/components/Layout/Footer.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,30 @@ export function Footer() {
285285
dir="ltr">
286286
&copy;{new Date().getFullYear()}
287287
</div>
288+
<div
289+
className="uwu-visible text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline"
290+
onClick={() => {
291+
// @ts-ignore
292+
window.__setUwu(false);
293+
}}>
294+
no uwu plz
295+
</div>
296+
<div
297+
className="uwu-hidden text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline"
298+
onClick={() => {
299+
// @ts-ignore
300+
window.__setUwu(true);
301+
}}>
302+
uwu?
303+
</div>
304+
<div className="uwu-visible text-xs">
305+
Logo by
306+
<ExternalLink
307+
className="ms-1"
308+
href="https://twitter.com/sawaratsuki1004">
309+
@sawaratsuki1004
310+
</ExternalLink>
311+
</div>
288312
</div>
289313
<div className="flex flex-col">
290314
<FooterLink href="/learn" isHeader={true}>

src/components/Layout/HomeContent.js

+24-4
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import Link from 'components/MDX/Link';
2626
import CodeBlock from 'components/MDX/CodeBlock';
2727
import {ExternalLink} from 'components/ExternalLink';
2828
import sidebarBlog from '../../sidebarBlog.json';
29+
import * as React from 'react';
30+
import Image from 'next/image';
2931

3032
function Section({children, background = null}) {
3133
return (
@@ -115,12 +117,22 @@ export function HomeContent() {
115117
<>
116118
<div className="ps-0">
117119
<div className="mx-5 mt-12 lg:mt-24 mb-20 lg:mb-32 flex flex-col justify-center">
120+
<div className="uwu-visible flex justify-center">
121+
<Image
122+
alt="logo by @sawaratsuki1004"
123+
title="logo by @sawaratsuki1004"
124+
loading="eager"
125+
width={313}
126+
height={160}
127+
src="/images/uwu.png"
128+
/>
129+
</div>
118130
<Logo
119131
className={cn(
120-
'mt-4 mb-3 text-link dark:text-link-dark w-24 lg:w-28 self-center text-sm me-0 flex origin-center transition-all ease-in-out'
132+
'uwu-hidden mt-4 mb-3 text-brand dark:text-brand-dark w-24 lg:w-28 self-center text-sm me-0 flex origin-center transition-all ease-in-out'
121133
)}
122134
/>
123-
<h1 className="text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">
135+
<h1 className="uwu-hidden text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">
124136
React
125137
</h1>
126138
<p className="text-4xl font-display max-w-lg md:max-w-full py-1 text-center text-secondary dark:text-primary-dark leading-snug self-center">
@@ -489,7 +501,15 @@ export function HomeContent() {
489501
</div>
490502

491503
<div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
492-
<Logo className="text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
504+
<div className="uwu-visible flex justify-center">
505+
<img
506+
alt="logo by @sawaratsuki1004"
507+
title="logo by @sawaratsuki1004"
508+
className="uwu-visible mb-10 lg:mb-8 h-24 lg:h-32"
509+
src="/images/uwu.png"
510+
/>
511+
</div>
512+
<Logo className="uwu-hidden text-brand dark:text-brand-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
493513
<Header>
494514
Welcome to the <br className="hidden lg:inline" />
495515
React community
@@ -1620,7 +1640,7 @@ function Thumbnail({video}) {
16201640
</div>
16211641
<div className="mt-1">
16221642
<span className="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg">
1623-
<Logo className="text-xs me-1 w-4 h-4 text-link-dark" />
1643+
<Logo className="text-xs me-1 w-4 h-4 text-brand text-brand-dark" />
16241644
React Conf
16251645
</span>
16261646
</div>

0 commit comments

Comments
 (0)