Fixing StackOverFlow in MDX Component

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

src/components/Layout/HomeContent.js

@@ -509,7 +509,7 @@ export function HomeContent() {
 
           <div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
             <div className="uwu-visible flex justify-center">
-              <Image
+              <img
                 alt="logo by @sawaratsuki1004"
                 title="logo by @sawaratsuki1004"
                 className="uwu-visible mb-10 lg:mb-8 h-24 lg:h-32"
@@ -802,7 +802,7 @@ const CommunityImages = memo(function CommunityImages({isLazy}) {
               className={cn(
                 'overflow-clip relative before:absolute before:inset-0 before:pointer-events-none before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-transform ease-in-out duration-300'
               )}>
-              <Image
+              <img
                 loading={isLazy ? 'lazy' : 'eager'}
                 src={src}
                 alt={alt}
@@ -1564,7 +1564,7 @@ function Cover({background, children}) {
       <div className="absolute inset-0 px-4 py-2 flex items-end bg-gradient-to-t from-black/40 via-black/0">
         {children}
       </div>
-      <Image
+      <img
         src={background}
         width={500}
         height={263}
@@ -1641,7 +1641,7 @@ function Thumbnail({video}) {
         <>
           <div className="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center">
             {image.speakers.map((src, i) => (
-              <Image
+              <img
                 key={i}
                 className="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full"
                 src={src}

src/components/MDX/MDXComponents.tsx

@@ -315,7 +315,7 @@ function Illustration({
   return (
     <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
       <figure className="my-8 flex justify-center">
-        <Image
+        <img
           src={src}
           alt={alt}
           style={{maxHeight: 300}}
@@ -351,7 +351,7 @@ function IllustrationBlock({
   const images = imageInfos.map((info, index) => (
     <figure key={index}>
       <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
-        <Image
+        <img
           className="text-primary"
           src={info.src}
           alt={info.alt}
@@ -487,9 +487,7 @@ function YouTubeIframe(props: any) {
 
 function Image(props: any) {
   const {alt, ...rest} = props;
-  return (
-    <Image alt={alt} className="max-w-[calc(min(700px,100%))]" {...rest} />
-  );
+  return <img alt={alt} className="max-w-[calc(min(700px,100%))]" {...rest} />;
 }
 
 export const MDXComponents = {

src/components/PageHeading.tsx

@@ -41,13 +41,20 @@ function CopyAsMarkdownButton() {
     return () => clearTimeout(timer);
   }, [copied]);
 
-  async function handleCopy() {
+  async function fetchPageBlob() {
     const cleanPath = asPath.split(/[?#]/)[0];
+    const res = await fetch(cleanPath + '.md');
+    if (!res.ok) throw new Error('Failed to fetch');
+    const text = await res.text();
+    return new Blob([text], {type: 'text/plain'});
+  }
+
+  async function handleCopy() {
     try {
-      const res = await fetch(cleanPath + '.md');
-      if (!res.ok) return;
-      const text = await res.text();
-      await navigator.clipboard.writeText(text);
+      await navigator.clipboard.write([
+        // Don't wait for the blob, or Safari will refuse clipboard access
+        new ClipboardItem({'text/plain': fetchPageBlob()}),
+      ]);
       setCopied(true);
     } catch {
       // Silently fail
@@ -76,7 +83,6 @@ function PageHeading({
   tags = [],
   breadcrumbs,
 }: PageHeadingProps) {
-  console.log('version', version);
   return (
     <div className="px-5 sm:px-12 pt-3.5">
       <div className="max-w-4xl ms-0 2xl:mx-auto">

src/content/learn/thinking-in-react.md

@@ -50,6 +50,7 @@ Kuna vijenzi vitano kwenye skrini hii:
 <CodeDiagram flip>
 
 <img src="/images/docs/s_thinking-in-react_ui_outline.png" width="500" style={{margin: '0 auto'}} />
+
 1. `FilterableProductTable` (kijivu) ina programu nzima.
 2. `SearchBar` (bluu) inapokea ingizo la mtumiaji.
 3. `ProductTable` (lavender) huonyesha na kuchuja orodha kulingana na ingizo la mtumiaji.

src/sidebarReference.json

@@ -575,4 +575,4 @@
       ]
     }
   ]
-}
+}

yarn.lock

@@ -3188,22 +3188,15 @@ emoji-regex@^9.2.2:
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
-<<<<<<< HEAD
-encodeurl@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
-  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
-=======
 emojis-list@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-encodeurl@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz"
-  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
->>>>>>> 427f24d694674be458f0fe7cb97ab1c8fe736586
+encodeurl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
+  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
 
 enquirer@^2.3.5:
   version "2.3.6"
@@ -3637,6 +3630,7 @@ eslint-plugin-jsx-a11y@^6.4.1:
 
 "eslint-plugin-local-rules@link:eslint-local-rules":
   version "0.0.0"
+  uid ""
 
 eslint-plugin-react-compiler@^19.0.0-beta-e552027-20250112:
   version "19.0.0-beta-e552027-20250112"