feat: use ConsoleBlockMulti style for ErrorDecoder and add isCustom error page support

Author: rickhanlonii

src/components/MDX/ErrorDecoder.tsx

@@ -8,6 +8,7 @@
 import {useEffect, useState} from 'react';
 import {useErrorDecoderParams} from '../ErrorDecoderContext';
 import cn from 'classnames';
+import {IconError} from '../Icon/IconError';
 
 function replaceArgs(
   msg: string,
@@ -108,12 +109,48 @@ export default function ErrorDecoder() {
   }, [errorCode, hasParams, errorMessage]);
 
   return (
-    <code
+    <div
       className={cn(
-        'whitespace-pre-line block bg-red-100 text-red-600 py-4 px-6 mt-5 rounded-lg',
+        'console-block mb-4 text-secondary bg-wash dark:bg-wash-dark rounded-lg mt-5',
         isReady ? 'opacity-100' : 'opacity-0'
-      )}>
-      <b>{message}</b>
-    </code>
+      )}
+      translate="no"
+      dir="ltr">
+      <div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
+        <div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
+          <div
+            className="bg-gray-300 dark:bg-gray-70"
+            style={{width: '15px', height: '17px'}}
+          />
+        </div>
+        <div className="flex text-sm px-4">
+          <div className="border-b-2 border-gray-300 dark:border-gray-90 text-tertiary dark:text-tertiary-dark">
+            Console
+          </div>
+          <div className="px-4 py-2 flex">
+            <div
+              className="me-2 bg-gray-300 dark:bg-gray-70"
+              style={{width: '60px', height: '17px'}}
+            />
+            <div
+              className="me-2 hidden md:block bg-gray-300 dark:bg-gray-70"
+              style={{width: '60px', height: '17px'}}
+            />
+            <div
+              className="hidden md:block bg-gray-300 dark:bg-gray-70"
+              style={{width: '60px', height: '17px'}}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 divide-y divide-gray-300 dark:divide-gray-70 text-base">
+        <div className="ps-4 pe-2 pt-1 pb-2 grid grid-cols-[18px_auto] font-mono rounded-b-md bg-red-30 text-red-50 dark:text-red-30 bg-opacity-5">
+          <IconError className="self-start mt-1.5 text-[.7rem] w-6" />
+          <div className="px-2 pt-1 whitespace-break-spaces text-code leading-tight">
+            {message}
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }

src/pages/errors/[errorCode].tsx

@@ -20,26 +20,33 @@ interface ErrorDecoderProps {
   content: string;
   toc: string;
   meta: any;
+  isCustom: boolean;
 }
 
 export default function ErrorDecoderPage({
   errorMessage,
   errorCode,
   content,
+  toc,
+  isCustom,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   const parsedContent = useMemo<React.ReactNode>(
     () => JSON.parse(content, reviveNodeOnClient),
     [content]
   );
+  const parsedToc = useMemo(
+    () => (isCustom ? JSON.parse(toc, reviveNodeOnClient) : []),
+    [toc, isCustom]
+  );
 
   return (
     <ErrorDecoderContext value={{errorMessage, errorCode}}>
       <Page
-        toc={[]}
+        toc={parsedToc}
         meta={{
           title: errorCode
-            ? `Minified React error #${errorCode}`
-            : 'Minified Error Decoder',
+            ? `React error #${errorCode}`
+            : 'React Error Decoder',
         }}
         routeTree={sidebarLearn as RouteItem}
         section="unknown">
@@ -117,11 +124,13 @@ export const getStaticProps: GetStaticProps<ErrorDecoderProps> = async ({
   // Read MDX from the file.
   let path = params?.errorCode || 'index';
   let mdx;
+  let isCustom = true;
   try {
     mdx = fs.readFileSync(rootDir + '/' + path + '.md', 'utf8');
   } catch {
     // if [errorCode].md is not found, fallback to generic.md
     mdx = fs.readFileSync(rootDir + '/generic.md', 'utf8');
+    isCustom = false;
   }
 
   const {content, toc, meta} = await compileMDX(mdx, path, {code, errorCodes});
@@ -131,6 +140,7 @@ export const getStaticProps: GetStaticProps<ErrorDecoderProps> = async ({
       content,
       toc,
       meta,
+      isCustom,
       errorCode: code,
       errorMessage: code ? errorCodes[code] : null,
     },