merging all conflicts

.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'

.eslintrc

@@ -5,7 +5,8 @@
   "plugins": ["@typescript-eslint"],
   "rules": {
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": "warn"
+    "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
+    "react-hooks/exhaustive-deps": "error"
   },
   "env": {
     "node": true,

.github/workflows/site_lint.yml

@@ -16,12 +16,12 @@ jobs:
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js 20.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: 20.x
 
       - name: Install deps and build (with cache)
-        uses: bahmutov/npm-install@v1.7.10
+        uses: bahmutov/npm-install@v1.8.32
 
       - name: Lint codebase
         run: yarn ci-check

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

@@ -23,21 +23,20 @@
     "prepare": "husky install"
   },
   "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/[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"
@@ -93,7 +92,7 @@
     "retext": "^7.0.1",
     "retext-smartypants": "^4.0.0",
     "rss": "^1.2.2",
-    "tailwindcss": "^3.0.22",
+    "tailwindcss": "^3.4.1",
     "typescript": "^4.0.2",
     "unist-util-visit": "^2.0.3",
     "webpack-bundle-analyzer": "^4.5.0"

plugins/remark-smartypants.js

@@ -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');
@@ -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;

src/components/Breadcrumbs.tsx

@@ -17,10 +17,10 @@ function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) {
               <Fragment key={crumb.path}>
                 <Link
                   href={crumb.path}
-                  className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase mr-1 hover:underline">
+                  className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase me-1 hover:underline">
                   {crumb.title}
                 </Link>
-                <span className="inline-block mr-1 text-link dark:text-link-dark text-lg">
+                <span className="inline-block me-1 text-link dark:text-link-dark text-lg rtl:rotate-180">
                   <svg
                     width="20"
                     height="20"

src/components/DocsFooter.tsx

@@ -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="Previous"
@@ -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-right': type === 'Next',
+          'flex-row-reverse justify-self-end text-end': type === 'Next',
         }
       )}>
       <IconNavArrow
-        className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
-        displayDirection={type === 'Previous' ? 'left' : 'right'}
+        className="inline text-tertiary dark:text-tertiary-dark group-focus:text-link dark:group-focus:text-link-dark"
+        displayDirection={type === 'Previous' ? '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>
   );
 }

src/components/ErrorDecoderContext.tsx

@@ -0,0 +1,23 @@
+// Error Decoder requires reading pregenerated error message from getStaticProps,
+// but MDX component doesn't support props. So we use React Context to populate
+// the value without prop-drilling.
+// TODO: Replace with React.cache + React.use when migrating to Next.js App Router
+
+import {createContext, useContext} from 'react';
+
+const notInErrorDecoderContext = Symbol('not in error decoder context');
+
+export const ErrorDecoderContext = createContext<
+  | {errorMessage: string | null; errorCode: string | null}
+  | typeof notInErrorDecoderContext
+>(notInErrorDecoderContext);
+
+export const useErrorDecoderParams = () => {
+  const params = useContext(ErrorDecoderContext);
+
+  if (params === notInErrorDecoderContext) {
+    throw new Error('useErrorDecoder must be used in error decoder pages only');
+  }
+
+  return params;
+};

src/components/Icon/IconArrow.tsx

@@ -7,7 +7,12 @@ import cn from 'classnames';
 
 export const IconArrow = memo<
   JSX.IntrinsicElements['svg'] & {
-    displayDirection: 'left' | 'right' | 'up' | 'down';
+    /**
+     * The direction the arrow should point.
+     * `start` and `end` are relative to the current locale.
+     * for example, in LTR, `start` is left and `end` is right.
+     */
+    displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
   }
 >(function IconArrow({displayDirection, className, ...rest}) {
   return (
@@ -20,6 +25,7 @@ export const IconArrow = memo<
       {...rest}
       className={cn(className, {
         'rotate-180': displayDirection === 'right',
+        'rotate-180 rtl:rotate-0': displayDirection === 'end',
       })}>
       <path fill="none" d="M0 0h24v24H0z" />
       <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />

src/components/Icon/IconArrowSmall.tsx

@@ -7,11 +7,17 @@ import cn from 'classnames';
 
 export const IconArrowSmall = memo<
   JSX.IntrinsicElements['svg'] & {
-    displayDirection: 'left' | 'right' | 'up' | 'down';
+    /**
+     * The direction the arrow should point.
+     * `start` and `end` are relative to the current locale.
+     * for example, in LTR, `start` is left and `end` is right.
+     */
+    displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
   }
 >(function IconArrowSmall({displayDirection, className, ...rest}) {
   const classes = cn(className, {
     'rotate-180': displayDirection === 'left',
+    'rotate-180 rtl:rotate-0': displayDirection === 'start',
     'rotate-90': displayDirection === 'down',
   });
   return (

src/components/Icon/IconCanary.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconCanary = memo<JSX.IntrinsicElements['svg'] & {title?: string}>(
+  function IconCanary({className, title}) {
+    return (
+      <svg
+        className={className}
+        width="20px"
+        height="20px"
+        viewBox="0 0 20 20"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg">
+        {title && <title>{title}</title>}
+        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+          <g
+            id="noun-labs-1201738-(2)"
+            transform="translate(2, 0)"
+            fill="currentColor"
+            fillRule="nonzero">
+            <path
+              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"
+              id="Shape"></path>
+          </g>
+        </g>
+      </svg>
+    );
+  }
+);

src/components/Icon/IconChevron.tsx

@@ -7,7 +7,12 @@ import cn from 'classnames';
 
 export const IconChevron = memo<
   JSX.IntrinsicElements['svg'] & {
-    displayDirection: 'up' | 'down' | 'left' | 'right';
+    /**
+     * The direction the arrow should point.
+     * `start` and `end` are relative to the current locale.
+     * for example, in LTR, `start` is left and `end` is right.
+     */
+    displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
   }
 >(function IconChevron({className, displayDirection}) {
   const classes = cn(
@@ -16,6 +21,8 @@ export const IconChevron = memo<
       'rotate-90': displayDirection === 'left',
       'rotate-180': displayDirection === 'up',
       '-rotate-90': displayDirection === 'right',
+      'rotate-90 rtl:-rotate-90': displayDirection === 'start',
+      '-rotate-90 rtl:rotate-90': displayDirection === 'end',
     },
     className
   );

src/components/Icon/IconGitHub.tsx

@@ -9,8 +9,8 @@ export const IconGitHub = memo<JSX.IntrinsicElements['svg']>(
     return (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="1.33em"
-        height="1.33em"
+        width="1.5em"
+        height="1.5em"
         viewBox="0 -2 24 24"
         fill="currentColor"
         {...props}>

src/components/Icon/IconNavArrow.tsx

@@ -7,15 +7,22 @@ import cn from 'classnames';
 
 export const IconNavArrow = memo<
   JSX.IntrinsicElements['svg'] & {
-    displayDirection: 'right' | 'down' | 'left';
+    /**
+     * The direction the arrow should point.
+     * `start` and `end` are relative to the current locale.
+     * for example, in LTR, `start` is left and `end` is right.
+     */
+    displayDirection: 'start' | 'end' | 'right' | 'left' | 'down';
   }
->(function IconNavArrow({displayDirection = 'right', className}) {
+>(function IconNavArrow({displayDirection = 'start', className}) {
   const classes = cn(
     'duration-100 ease-in transition',
     {
       'rotate-0': displayDirection === 'down',
-      '-rotate-90': displayDirection === 'right',
       'rotate-90': displayDirection === 'left',
+      '-rotate-90': displayDirection === 'right',
+      'rotate-90 rtl:-rotate-90': displayDirection === 'start',
+      '-rotate-90 rtl:rotate-90': displayDirection === 'end',
     },
     className
   );