merging all conflicts

Author: react-translations-bot

.github/ISSUE_TEMPLATE/3-framework.yml

@@ -8,11 +8,11 @@ body:
       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._
+        _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/creating-a-react-app). 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).
+        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/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision).
         
         To be included, frameworks must meet the following criteria:
         

next.config.js

@@ -36,6 +36,14 @@ const nextConfig = {
     // Don't bundle the shim unnecessarily.
     config.resolve.alias['use-sync-external-store/shim'] = 'react';
 
+    // ESLint depends on the CommonJS version of esquery,
+    // but Webpack loads the ESM version by default. This
+    // alias ensures the correct version is used.
+    //
+    // More info:
+    // https://github.com/reactjs/react.dev/pull/8115
+    config.resolve.alias['esquery'] = 'esquery/dist/esquery.min.js';
+
     const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
     config.plugins.push(
       new NormalModuleReplacementPlugin(

package.json

@@ -35,7 +35,11 @@
     "classnames": "^2.2.6",
     "debounce": "^1.2.1",
     "github-slugger": "^1.3.0",
+<<<<<<< HEAD
     "next": "15.4.8",
+=======
+    "next": "15.1.11",
+>>>>>>> 2da4f7fbd90ddc09835c9f85d61fd5644a271abc
     "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
     "react": "^19.0.0",

plugins/remark-smartypants.js

@@ -14,12 +14,24 @@ const visit = require('unist-util-visit');
 const retext = require('retext');
 const smartypants = require('retext-smartypants');
 
-function check(parent) {
+function check(node, parent) {
+  if (node.data?.skipSmartyPants) return false;
   if (parent.tagName === 'script') return false;
   if (parent.tagName === 'style') return false;
   return true;
 }
 
+function markSkip(node) {
+  if (!node) return;
+  node.data ??= {};
+  node.data.skipSmartyPants = true;
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) {
+      markSkip(child);
+    }
+  }
+}
+
 module.exports = function (options) {
   const processor = retext().use(smartypants, {
     ...options,
@@ -43,8 +55,14 @@ module.exports = function (options) {
     let startIndex = 0;
     const textOrInlineCodeNodes = [];
 
+    visit(tree, 'mdxJsxFlowElement', (node) => {
+      if (['TerminalBlock'].includes(node.name)) {
+        markSkip(node); // Mark all children to skip smarty pants
+      }
+    });
+
     visit(tree, ['text', 'inlineCode'], (node, _, parent) => {
-      if (check(parent)) {
+      if (check(node, 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);

src/components/Layout/HomeContent.js

@@ -253,7 +253,7 @@ export function HomeContent() {
               doesn’t prescribe how to do routing and data fetching. To build an
               entire app with React, we recommend a full-stack React framework
               like <Link href="https://nextjs.org">Next.js</Link> or{' '}
-              <Link href="https://remix.run">Remix</Link>.
+              <Link href="https://reactrouter.com">React Router</Link>.
             </Para>
           </Center>
           <FullBleed>
@@ -270,7 +270,7 @@ export function HomeContent() {
               <CTA
                 color="gray"
                 icon="framework"
-                href="/learn/start-a-new-react-project">
+                href="/learn/creating-a-react-app">
                 Get started with a framework
               </CTA>
             </div>

src/components/Layout/Page.tsx

@@ -15,7 +15,7 @@ import {useRouter} from 'next/router';
 import {SidebarNav} from './SidebarNav';
 import {Footer} from './Footer';
 import {Toc} from './Toc';
-import SocialBanner from '../SocialBanner';
+// import SocialBanner from '../SocialBanner';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {Seo} from 'components/Seo';
 import PageHeading from 'components/PageHeading';
@@ -142,7 +142,7 @@ export function Page({
           />
         </Head>
       )}
-      <SocialBanner />
+      {/* <SocialBanner /> */}
       <TopNav
         section={section}
         routeTree={routeTree}

src/components/MDX/Sandpack/runESLint.tsx

@@ -21,13 +21,6 @@ const getCodeMirrorPosition = (
 
 const linter = new Linter();
 
-// HACK! Eslint requires 'esquery' using `require`, but there's no commonjs interop.
-// because of this it tries to run `esquery.parse()`, while there's only `esquery.default.parse()`.
-// This hack places the functions in the right place.
-const esquery = require('esquery');
-esquery.parse = esquery.default?.parse;
-esquery.matches = esquery.default?.matches;
-
 const reactRules = require('eslint-plugin-react-hooks').rules;
 linter.defineRules({
   'react-hooks/rules-of-hooks': reactRules['rules-of-hooks'],

src/components/MDX/Sandpack/template.ts

@@ -35,8 +35,8 @@ root.render(
           eject: 'react-scripts eject',
         },
         dependencies: {
-          react: '^19.2.0',
-          'react-dom': '^19.2.0',
+          react: '^19.2.1',
+          'react-dom': '^19.2.1',
           'react-scripts': '^5.0.0',
         },
       },

src/components/MDX/SandpackWithHTMLOutput.tsx

@@ -56,8 +56,8 @@ export default function formatHTML(markup) {
 const packageJSON = `
 {
   "dependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "react-scripts": "^5.0.0",
     "html-format": "^1.1.2"
   },

src/components/MDX/TerminalBlock.tsx

@@ -79,13 +79,15 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
           </div>
         </div>
       </div>
-      <div
+      <pre
         className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre overflow-x-auto"
         translate="no"
         dir="ltr">
-        <LevelText type={level} />
-        {message}
-      </div>
+        <code>
+          <LevelText type={level} />
+          {message}
+        </code>
+      </pre>
     </div>
   );
 }