Merge pull request #1 from reactjs/main

Update fork from main

.env.development

@@ -1 +0,0 @@
-SANDPACK_BARE_COMPONENTS=true 

.env.production

@@ -1,2 +1 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
-SANDPACK_BARE_COMPONENTS=true 
+NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'

next.config.js

@@ -14,9 +14,7 @@ const nextConfig = {
     scrollRestoration: true,
     legacyBrowsers: false,
   },
-  env: {
-    SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
-  },
+  env: {},
   webpack: (config, {dev, isServer, ...options}) => {
     if (process.env.ANALYZE) {
       const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
@@ -35,10 +33,6 @@ const nextConfig = {
 
     const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
     config.plugins.push(
-      new NormalModuleReplacementPlugin(
-        /^@stitches\/core$/,
-        require.resolve('./src/utils/emptyShim.js')
-      ),
       new NormalModuleReplacementPlugin(
         /^raf$/,
         require.resolve('./src/utils/rafShim.js')

package.json

@@ -22,21 +22,20 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "1.15.5",
+    "@codesandbox/sandpack-react": "2.6.0",
     "@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/react-collapsed@3.1.0-forked.1",
+    "react-collapsed": "4.0.4",
     "react-dom": "^0.0.0-experimental-16d053d59-20230506",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1"

src/components/Icon/IconTwitter.tsx

@@ -9,13 +9,13 @@ export const IconTwitter = memo<JSX.IntrinsicElements['svg']>(
     return (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        width="1.33em"
-        height="1.33em"
+        viewBox="0 0 512 512"
+        height="1.30em"
+        width="1.30em"
         fill="currentColor"
         {...props}>
         <path fill="none" d="M0 0h24v24H0z" />
-        <path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z" />
+        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
       </svg>
     );
   }

src/components/Layout/Feedback.tsx

@@ -4,7 +4,6 @@
 
 import {useState} from 'react';
 import {useRouter} from 'next/router';
-import {ga} from '../../utils/analytics';
 
 export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
   const {asPath} = useRouter();
@@ -48,14 +47,12 @@ const thumbsDownIcon = (
 function sendGAEvent(isPositive: boolean) {
   // Fragile. Don't change unless you've tested the network payload
   // and verified that the right events actually show up in GA.
-  ga(
-    'send',
-    'event',
-    'button',
-    'feedback',
-    window.location.pathname,
-    isPositive ? '1' : '0'
-  );
+  // @ts-ignore
+  gtag('event', 'feedback', {
+    event_category: 'button',
+    event_label: window.location.pathname,
+    value: isPositive ? 1 : 0,
+  });
 }
 
 function SendFeedback({onSubmit}: {onSubmit: () => void}) {

src/components/Layout/HomeContent.js

@@ -849,7 +849,7 @@ function ExampleLayout({
               {overlayStyles.map((styles, i) => (
                 <div
                   key={i}
-                  className="inset-x-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
+                  className="top-0 start-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
                   style={styles}
                 />
               ))}
@@ -1654,8 +1654,8 @@ function LikeButton({video}) {
     <button
       data-hover="LikeButton"
       className={cn(
-        'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full text-tertiary hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
-        isLiked && 'text-red-50'
+        'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
+        isLiked ? 'text-red-50' : 'text-tertiary'
       )}
       aria-label={isLiked ? 'Unsave' : 'Save'}
       onClick={() => {

src/components/Layout/Page.tsx

@@ -28,7 +28,12 @@ interface PageProps {
   children: React.ReactNode;
   toc: Array<TocItem>;
   routeTree: RouteItem;
-  meta: {title?: string; canary?: boolean; description?: string};
+  meta: {
+    title?: string;
+    titleForTitleTag?: string;
+    canary?: boolean;
+    description?: string;
+  };
   section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
 }
 
@@ -107,6 +112,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
     <>
       <Seo
         title={title}
+        titleForTitleTag={meta.titleForTitleTag}
         isHomePage={isHomePage}
         image={`/images/og-` + section + '.png'}
         searchOrder={searchOrder}

src/components/Layout/Sidebar/SidebarButton.tsx

@@ -31,7 +31,7 @@ export function SidebarButton({
       })}>
       <button
         className={cn(
-          'p-2 pe-2 ps-5 w-full rounded-s-lg text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+          'p-2 pe-2 ps-5 w-full rounded-e-lg text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
           {
             'p-2 text-base': level > 1,
             'text-link bg-highlight dark:bg-highlight-dark text-base font-bold hover:bg-highlight dark:hover:bg-highlight-dark hover:text-link dark:hover:text-link-dark':

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -58,7 +58,7 @@ export function SidebarLink({
       passHref
       aria-current={selected ? 'page' : undefined}
       className={cn(
-        'p-2 pe-2 w-full rounded-none lg:rounded-s-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+        'p-2 pe-2 w-full rounded-none lg:rounded-e-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
         {
           'text-sm ps-6': level > 0,
           'ps-5': level < 2,
@@ -78,7 +78,7 @@ export function SidebarLink({
         {canary && (
           <IconCanary
             title="This feature is available in the latest Canary"
-            className="ml-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
+            className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
           />
         )}
       </div>

src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -7,7 +7,7 @@ import {useRef, useLayoutEffect, Fragment} from 'react';
 import cn from 'classnames';
 import {useRouter} from 'next/router';
 import {SidebarLink} from './SidebarLink';
-import useCollapse from 'react-collapsed';
+import {useCollapse} from 'react-collapsed';
 import usePendingRoute from 'hooks/usePendingRoute';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
 

src/components/Layout/Toc.tsx

@@ -27,8 +27,7 @@ export function Toc({headings}: {headings: Toc}) {
         <ul className="space-y-2 pb-16">
           {headings.length > 0 &&
             headings.map((h, i) => {
-              if (h.url == null) {
-                // TODO: only log in DEV
+              if (!h.url && process.env.NODE_ENV === 'development') {
                 console.error('Heading does not have URL');
               }
               return (

src/components/Layout/getRouteMeta.tsx

@@ -58,13 +58,13 @@ export interface RouteMeta {
   order?: number;
 }
 
-type TravesalContext = RouteMeta & {
+type TraversalContext = RouteMeta & {
   currentIndex: number;
 };
 
 export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
   const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
-  const ctx: TravesalContext = {
+  const ctx: TraversalContext = {
     currentIndex: 0,
   };
   buildRouteMeta(cleanedPath, routeTree, ctx);
@@ -79,7 +79,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
 function buildRouteMeta(
   searchPath: string,
   currentRoute: RouteItem,
-  ctx: TravesalContext
+  ctx: TraversalContext
 ) {
   ctx.currentIndex++;
 

src/components/MDX/Challenges/Challenge.tsx

@@ -61,17 +61,16 @@ export function Challenge({
       <div className="flex justify-between items-center mt-4">
         {currentChallenge.hint ? (
           <div>
-
             <Button className="me-2" onClick={toggleHint} active={showHint}>
               <IconHint className="me-1.5" />{' '}
-              {showHint ? 'হিন্ট লুকান' : 'হিন্ট দেখান'}
+              {showHint ? 'Hide hint' : 'Show hint'}
             </Button>
             <Button
               className="me-2"
               onClick={toggleSolution}
               active={showSolution}>
               <IconSolution className="me-1.5" />{' '}
-              {showSolution ? 'সমাধান লুকান' : 'সমাধান দেখান'}
+              {showSolution ? 'Hide solution' : 'Show solution'}
             </Button>
           </div>
         ) : (
@@ -81,7 +80,7 @@ export function Challenge({
               onClick={toggleSolution}
               active={showSolution}>
               <IconSolution className="me-1.5" />{' '}
-              {showSolution ? 'সমাধান লুকান' : 'সমাধান লুকান'}
+              {showSolution ? 'Hide solution' : 'Show solution'}
             </Button>
           )
         )}
@@ -95,7 +94,7 @@ export function Challenge({
             )}
             onClick={handleClickNextChallenge}
             active>
-            পরবর্তী {isRecipes ? 'উদাহরণ' : 'চ্যালেঞ্জ'}
+            Next {isRecipes ? 'Example' : 'Challenge'}
             <IconArrowSmall displayDirection="end" className="block ms-1.5" />
           </Button>
         )}
@@ -105,12 +104,12 @@ export function Challenge({
       {showSolution && (
         <div className="mt-6">
           <h3 className="text-2xl font-bold text-primary dark:text-primary-dark">
-            সমাধান
+            Solution
           </h3>
           {currentChallenge.solution}
           <div className="flex justify-between items-center mt-4">
             <Button onClick={() => setShowSolution(false)}>
-              সমাধান বন্ধ করুন
+              Close solution
             </Button>
             {hasNextChallenge && (
               <Button
@@ -119,7 +118,7 @@ export function Challenge({
                 )}
                 onClick={handleClickNextChallenge}
                 active>
-                পরবর্তী চ্যালেঞ্জ
+                Next Challenge
                 <IconArrowSmall
                   displayDirection="end"
                   className="block ms-1.5"

src/components/MDX/Challenges/Challenges.tsx

@@ -78,10 +78,8 @@ export function Challenges({
   children,
   isRecipes,
   noTitle,
-  titleText = isRecipes
-    ? 'কিছু উদাহরণ চেষ্টা করে দেখুন'
-    : 'নিজেকে কিছু চ্যালেঞ্জ করে দেখুন',
-  titleId = isRecipes ? 'কিছু উদাহরণ' : 'কিছু চ্যালেঞ্জ',
+  titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges',
+  titleId = isRecipes ? 'examples' : 'challenges',
 }: ChallengesProps) {
   const challenges = parseChallengeContents(children);
   const totalChallenges = challenges.length;

src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -3,11 +3,14 @@
  */
 
 import cn from 'classnames';
-import {highlightTree, HighlightStyle, tags} from '@codemirror/highlight';
+import {HighlightStyle} from '@codemirror/language';
+import {highlightTree} from '@lezer/highlight';
 import {javascript} from '@codemirror/lang-javascript';
 import {html} from '@codemirror/lang-html';
 import {css} from '@codemirror/lang-css';
 import rangeParser from 'parse-numeric-range';
+import {tags} from '@lezer/highlight';
+
 import {CustomTheme} from '../Sandpack/Themes';
 
 interface InlineHighlight {
@@ -52,7 +55,7 @@ const CodeBlock = function CodeBlock({
   let tokenStarts = new Map();
   let tokenEnds = new Map();
   const highlightTheme = getSyntaxHighlight(CustomTheme);
-  highlightTree(tree, highlightTheme.match, (from, to, className) => {
+  highlightTree(tree, highlightTheme, (from, to, className) => {
     tokenStarts.set(from, className);
     tokenEnds.set(to, className);
   });

src/components/MDX/Heading.tsx

@@ -88,3 +88,11 @@ export const H4 = ({className, ...props}: HeadingProps) => (
     {...props}
   />
 );
+
+export const H5 = ({className, ...props}: HeadingProps) => (
+  <Heading
+    as="h5"
+    className={cn(className, 'text-lg font-display font-bold leading-9 my-2')}
+    {...props}
+  />
+);

src/components/MDX/MDXComponents.tsx

@@ -11,7 +11,7 @@ import {CodeDiagram} from './CodeDiagram';
 import ConsoleBlock from './ConsoleBlock';
 import ExpandableCallout from './ExpandableCallout';
 import ExpandableExample from './ExpandableExample';
-import {H1, H2, H3, H4} from './Heading';
+import {H1, H2, H3, H4, H5} from './Heading';
 import InlineCode from './InlineCode';
 import Intro from './Intro';
 import BlogCard from './BlogCard';
@@ -126,13 +126,8 @@ function LearnMore({
               label="Read More"
               href={path}
               type="primary">
-<<<<<<< HEAD
               আরো পড়ুন
-              <IconNavArrow displayDirection="right" className="inline ml-1" />
-=======
-              Read More
-              <IconNavArrow displayDirection="end" className="inline ms-1" />
->>>>>>> 819518cfe32dd2db3b765410247c30feea713c77
+              <IconNavArrow displayDirection="end" className="inline ml-1" />
             </ButtonLink>
           ) : null}
         </div>
@@ -393,6 +388,7 @@ export const MDXComponents = {
   h2: H2,
   h3: H3,
   h4: H4,
+  h5: H5,
   hr: Divider,
   a: Link,
   img: Image,