finding the source of truth in MDX configs and page components

Author: SiroDevs

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

@@ -14,8 +14,12 @@ import Tag from 'components/Tag';
 import {H1} from './MDX/Heading';
 import type {RouteTag, RouteItem} from './Layout/getRouteMeta';
 import * as React from 'react';
+import {useState, useEffect} from 'react';
+import {useRouter} from 'next/router';
 import {IconCanary} from './Icon/IconCanary';
 import {IconExperimental} from './Icon/IconExperimental';
+import {IconCopy} from './Icon/IconCopy';
+import {Button} from './Button';
 
 interface PageHeadingProps {
   title: string;
@@ -27,18 +31,67 @@ interface PageHeadingProps {
   breadcrumbs: RouteItem[];
 }
 
+function CopyAsMarkdownButton() {
+  const {asPath} = useRouter();
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 2000);
+    return () => clearTimeout(timer);
+  }, [copied]);
+
+  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 {
+      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
+    }
+  }
+
+  return (
+    <Button onClick={handleCopy} className="text-sm py-1 px-3">
+      <IconCopy className="w-3.5 h-3.5 me-1.5" />
+      {copied ? (
+        'Copied!'
+      ) : (
+        <>
+          <span className="hidden sm:inline">Copy page</span>
+          <span className="sm:hidden">Copy</span>
+        </>
+      )}
+    </Button>
+  );
+}
+
 function PageHeading({
   title,
   status,
   version,
   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">
-        {breadcrumbs ? <Breadcrumbs breadcrumbs={breadcrumbs} /> : null}
+        <div className="flex justify-between items-start">
+          <div className="flex-1">
+            {breadcrumbs ? <Breadcrumbs breadcrumbs={breadcrumbs} /> : null}
+          </div>
+          <CopyAsMarkdownButton />
+        </div>
         <H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5 break-words">
           {title}
           {version === 'canary' && (

src/sidebarReference.json

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