Skip to content

Commit

Permalink
Sync with react.dev @ 9748943 (#647)
Browse files Browse the repository at this point in the history
  • Loading branch information
resir014 authored Apr 5, 2024
2 parents 3b25a57 + d147913 commit 0730ebb
Show file tree
Hide file tree
Showing 192 changed files with 7,576 additions and 1,526 deletions.
2 changes: 1 addition & 1 deletion .env.production
Original file line number Diff line number Diff line change
@@ -1 +1 @@
NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'
34 changes: 34 additions & 0 deletions .github/ISSUE_TEMPLATE/0-bug.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
name: "🐛 Report a bug"
description: "Report a problem on the website."
title: "[Bug]: "
labels: ["bug: unconfirmed"]
body:
- type: textarea
attributes:
label: Summary
description: |
A clear and concise summary of what the bug is.
placeholder: |
Example bug report:
When I click the "Submit" button on "Feedback", nothing happens.
validations:
required: true
- type: input
attributes:
label: Page
description: |
What page(s) did you encounter this bug on?
placeholder: |
https://react.dev/
validations:
required: true
- type: textarea
attributes:
label: Details
description: |
Please provide any additional details about the bug.
placeholder: |
Example details:
The "Submit" button is unresponsive. I've tried refreshing the page and using a different browser, but the issue persists.
validations:
required: false
34 changes: 34 additions & 0 deletions .github/ISSUE_TEMPLATE/1-typo.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
name: "🤦 Typo or mistake"
description: "Report a typo or mistake in the docs."
title: "[Typo]: "
labels: ["type: typos"]
body:
- type: textarea
attributes:
label: Summary
description: |
A clear and concise summary of what the mistake is.
placeholder: |
Example:
The code example on the "useReducer" page includes an unused variable `nextId`.
validations:
required: true
- type: input
attributes:
label: Page
description: |
What page is the typo on?
placeholder: |
https://react.dev/
validations:
required: true
- type: textarea
attributes:
label: Details
description: |
Please provide a explanation for why this is a mistake.
placeholder: |
Example mistake:
In the "useReducer" section of the "API Reference" page, the code example under "Writing a reducer function" includes an unused variable `nextId` that should be removed.
validations:
required: false
34 changes: 34 additions & 0 deletions .github/ISSUE_TEMPLATE/2-suggestion.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
name: "💡 Suggestions"
description: "Suggest a new page, section, or edit for an existing page."
title: "[Suggestion]: "
labels: ["type: documentation"]
body:
- type: textarea
attributes:
label: Summary
description: |
A clear and concise summary of what we should add.
placeholder: |
Example:
Add a new page for how to use React with TypeScript.
validations:
required: true
- type: input
attributes:
label: Page
description: |
What page is this about?
placeholder: |
https://react.dev/
validations:
required: false
- type: textarea
attributes:
label: Details
description: |
Please provide a explanation for what you're suggesting.
placeholder: |
Example:
I think it would be helpful to have a page that explains how to use React with TypeScript. This could include a basic example of a component written in TypeScript, and a link to the TypeScript documentation.
validations:
required: true
116 changes: 116 additions & 0 deletions .github/ISSUE_TEMPLATE/3-framework.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
name: "📄 Suggest new framework"
description: "I am a framework author applying to be included as a recommended framework."
title: "[Framework]: "
labels: ["type: framework"]
body:
- type: markdown
attributes:
value: |
## Apply to be included as a recommended React framework
_This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/start-a-new-react-project). If you are not a framework author, please contact the authors before submitting._
Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production.
While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision).
To be included, frameworks must meet the following criteria:
- **Free & open-source**: must be open source and free to use.
- **Well maintained**. must be actively maintained, providing bug fixes and improvements.
- **Active community**: must have a sufficiently large and active community to support users.
- **Clear onboarding**: must have clear install steps to install the React version of the framework.
- **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem.
- **Self-hosting option**: must support an option to self-host applications without losing access to features.
- **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh.
- **User experience**. must provide built-in support for common problems like routing and data-fetching.
- **Compatible with our future vision for React**. React evolves over time, and frameworks that do not align with React’s direction risk isolating their users from the main React ecosystem over time. To be included on this page we must feel confident that the framework is setting its users up for success with React over time.
Please note, we have reviewed most of the popular frameworks available today, so it is unlikely we have not considered your framework already. But if you think we missed something, please complete the application below.
- type: input
attributes:
label: Name
description: |
What is the name of your framework?
validations:
required: true
- type: input
attributes:
label: Homepage
description: |
What is the URL of your homepage?
validations:
required: true
- type: input
attributes:
label: Install instructions
description: |
What is the URL of your getting started guide?
validations:
required: true
- type: dropdown
attributes:
label: Is your framework open source?
description: |
We only recommend free and open source frameworks.
options:
- 'No'
- 'Yes'
validations:
required: true
- type: textarea
attributes:
label: Well maintained
description: |
Please describe how your framework is actively maintained. Include recent releases, bug fixes, and improvements as examples.
validations:
required: true
- type: textarea
attributes:
label: Active community
description: |
Please describe your community. Include the size of your community, and links to community resources.
validations:
required: true
- type: textarea
attributes:
label: Clear onboarding
description: |
Please describe how a user can install your framework with React. Include links to any relevant documentation.
validations:
required: true
- type: textarea
attributes:
label: Ecosystem compatibility
description: |
Please describe any limitations your framework has with the React ecosystem. Include any libraries or tools that are not compatible with your framework.
validations:
required: true
- type: textarea
attributes:
label: Self-hosting option
description: |
Please describe how your framework supports self-hosting. Include any limitations to features when self-hosting. Also include whether you require a server to deploy your framework.
validations:
required: true
- type: textarea
attributes:
label: Developer Experience
description: |
Please describe how your framework provides a great developer experience. Include any limitations to React features like React DevTools, Chrome DevTools, and Fast Refresh.
validations:
required: true
- type: textarea
attributes:
label: User Experience
description: |
Please describe how your framework helps developers create high quality user experiences by solving common use-cases. Include specifics for how your framework offers built-in support for code-splitting, routing, HTML generation, and data-fetching in a way that avoids client/server waterfalls by default. Include details on how you offer features such as SSG and SSR.
validations:
required: true
- type: textarea
attributes:
label: Compatible with our future vision for React
description: |
Please describe how your framework aligns with our future vision for React. Include how your framework will evolve with React over time, and your plans to support future React features like React Server Components.
validations:
required: true
7 changes: 7 additions & 0 deletions .github/ISSUE_TEMPLATE/config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
contact_links:
- name: 📃 Bugs in React
url: https://github.com/facebook/react/issues/new/choose
about: This issue tracker is not for bugs in React. Please file React issues here.
- name: 🤔 Questions and Help
url: https://reactjs.org/community/support.html
about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums.
1 change: 1 addition & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ Ignore this rule if you're specifically describing an experimental proposal. Mak
- Use semicolons.
- No space between function names and parens (`method() {}` not `method () {}`).
- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).
- Always capitalize React concepts such as Hooks, Effects, and Transitions.

### Highlighting

Expand Down
9 changes: 4 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,20 @@
"check-all": "npm-run-all prettier lint:fix tsc"
},
"dependencies": {
"@codesandbox/sandpack-react": "2.6.0",
"@codesandbox/sandpack-react": "2.13.5",
"@docsearch/css": "3.0.0-alpha.41",
"@docsearch/react": "3.0.0-alpha.41",
"@headlessui/react": "^1.7.0",
"body-scroll-lock": "^3.1.3",
"classnames": "^2.2.6",
"date-fns": "^2.16.1",
"debounce": "^1.2.1",
"ga-lite": "^2.1.4",
"github-slugger": "^1.3.0",
"next": "^13.4.1",
"next-remote-watch": "^1.0.0",
"parse-numeric-range": "^1.2.0",
"react": "^0.0.0-experimental-16d053d59-20230506",
"react-collapsed": "npm:@gaearon/[email protected]",
"react-collapsed": "4.0.4",
"react-dom": "^0.0.0-experimental-16d053d59-20230506",
"remark-frontmatter": "^4.0.1",
"remark-gfm": "^3.0.1"
Expand Down Expand Up @@ -92,13 +91,13 @@
"retext": "^7.0.1",
"retext-smartypants": "^4.0.0",
"rss": "^1.2.2",
"tailwindcss": "^3.3.2",
"tailwindcss": "^3.4.1",
"typescript": "^4.0.2",
"unist-util-visit": "^2.0.3",
"webpack-bundle-analyzer": "^4.5.0"
},
"engines": {
"node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
"node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
},
"nextBundleAnalysis": {
"budget": null,
Expand Down
47 changes: 44 additions & 3 deletions plugins/remark-smartypants.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/*!
* Based on 'silvenon/remark-smartypants'
* https://github.com/silvenon/remark-smartypants/pull/80
*/

const visit = require('unist-util-visit');
const retext = require('retext');
const smartypants = require('retext-smartypants');
Expand All @@ -9,12 +14,48 @@ function check(parent) {
}

module.exports = function (options) {
const processor = retext().use(smartypants, options);
const processor = retext().use(smartypants, {
...options,
// Do not replace ellipses, dashes, backticks because they change string
// length, and we couldn't guarantee right splice of text in second visit of
// tree
ellipses: false,
dashes: false,
backticks: false,
});

const processor2 = retext().use(smartypants, {
...options,
// Do not replace quotes because they are already replaced in the first
// processor
quotes: false,
});

function transformer(tree) {
visit(tree, 'text', (node, index, parent) => {
if (check(parent)) node.value = String(processor.processSync(node.value));
let allText = '';
let startIndex = 0;
const textOrInlineCodeNodes = [];

visit(tree, ['text', 'inlineCode'], (node, _, parent) => {
if (check(parent)) {
if (node.type === 'text') allText += node.value;
// for the case when inlineCode contains just one part of quote: `foo'bar`
else allText += 'A'.repeat(node.value.length);
textOrInlineCodeNodes.push(node);
}
});

// Concat all text into one string, to properly replace quotes around non-"text" nodes
allText = String(processor.processSync(allText));

for (const node of textOrInlineCodeNodes) {
const endIndex = startIndex + node.value.length;
if (node.type === 'text') {
const processedText = allText.slice(startIndex, endIndex);
node.value = String(processor2.processSync(processedText));
}
startIndex = endIndex;
}
}

return transformer;
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/docs/diagrams/render_tree.dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/docs/diagrams/render_tree.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/team/jack-pope.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/team/noahlemen.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 9 additions & 7 deletions src/components/DocsFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const DocsPageFooter = memo<DocsPageFooterProps>(
<>
{prevRoute?.path || nextRoute?.path ? (
<>
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4 py-4 md:py-12">
<div className="grid grid-cols-1 gap-4 py-4 mx-auto max-w-7xl md:grid-cols-2 md:py-12">
{prevRoute?.path ? (
<FooterLink
type="Sebelumnya"
Expand Down Expand Up @@ -69,21 +69,23 @@ function FooterLink({
<NextLink
href={href}
className={cn(
'flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
'flex gap-x-4 md:gap-x-6 items-center w-full md:min-w-80 md:w-fit md:max-w-md px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
{
'flex-row-reverse justify-self-end text-end': type === 'Selanjutnya',
}
)}>
<IconNavArrow
className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
className="inline text-tertiary dark:text-tertiary-dark group-focus:text-link dark:group-focus:text-link-dark"
displayDirection={type === 'Sebelumnya' ? 'start' : 'end'}
/>
<span>
<span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
<div className="flex flex-col overflow-hidden">
<span className="text-sm font-bold tracking-wide no-underline uppercase text-secondary dark:text-secondary-dark group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
{type}
</span>
<span className="block text-lg group-hover:underline">{title}</span>
</span>
<span className="text-lg break-words group-hover:underline">
{title}
</span>
</div>
</NextLink>
);
}
Loading

0 comments on commit 0730ebb

Please sign in to comment.