Add "Edit This Page" link to documentation

src/components/EditThis.tsx

@@ -0,0 +1,30 @@
+import {useRouter} from 'next/router';
+import {ExternalLink} from './ExternalLink';
+import {IconGitHub} from './Icon/IconGitHub';
+import {ReactElement} from 'react';
+
+const githubBranch = 'main';
+const baseGithubLink = `https://github.com/reactjs/react.dev/edit/${githubBranch}/`;
+
+type EditThisProps = {
+  path: string;
+  isIndexPage: boolean;
+};
+
+export const EditThis = ({path, isIndexPage}: EditThisProps): ReactElement => {
+  const {asPath} = useRouter();
+  const pathParts = asPath.split(/[\?\#]/)[0].split('/');
+  const pageToEdit = isIndexPage ? 'index' : pathParts[pathParts.length - 1];
+
+  return (
+    <div className="flex text-link dark:text-link-dark group justify-start align-middle">
+      <IconGitHub />
+      <ExternalLink
+        href={`${baseGithubLink}src/content${path}/${pageToEdit}.md`}>
+        <span className="text-lg group-hover:underline">
+          Edit this page on Github
+        </span>
+      </ExternalLink>
+    </div>
+  );
+};

src/components/Layout/Page.tsx

@@ -21,6 +21,7 @@ import {HomeContent} from './HomeContent';
 import {TopNav} from './TopNav';
 import cn from 'classnames';
 import Head from 'next/head';
+import {EditThis} from 'components/EditThis';
 
 import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
 
@@ -57,6 +58,7 @@ export function Page({
   const description = meta.description || route?.description || '';
   const isHomePage = cleanedPath === '/';
   const isBlogIndex = cleanedPath === '/blog';
+  const isReferencePage = cleanedPath.startsWith('/reference');
 
   let content;
   if (isHomePage) {
@@ -88,6 +90,16 @@ export function Page({
               </LanguagesContext.Provider>
             </TocContext.Provider>
           </div>
+          {isReferencePage && route && (
+            <EditThis
+              isIndexPage={
+                routeTree.routes?.find((el: RouteItem): boolean | undefined =>
+                  el.path?.startsWith(route.path!)
+                )?.path === route.path
+              }
+              path={route?.path || routeTree.path || ''}
+            />
+          )}
           {!isBlogIndex && (
             <DocsPageFooter
               route={route}