From 7a43357767c0f261b9cbaf874f314d80ccb551bb Mon Sep 17 00:00:00 2001
From: Fabrizio Siciliano <fa.siciliano@reply.de>
Date: Mon, 18 Nov 2024 11:11:57 +0100
Subject: [PATCH 1/3] added edit this page button

---
 src/components/EditThis.tsx    | 21 +++++++++++++++++++++
 src/components/Layout/Page.tsx |  2 ++
 2 files changed, 23 insertions(+)
 create mode 100644 src/components/EditThis.tsx

diff --git a/src/components/EditThis.tsx b/src/components/EditThis.tsx
new file mode 100644
index 00000000000..9f80da38248
--- /dev/null
+++ b/src/components/EditThis.tsx
@@ -0,0 +1,21 @@
+import {useRouter} from 'next/router';
+import {ExternalLink} from './ExternalLink';
+import {IconGitHub} from './Icon/IconGitHub';
+
+const githubBranch = 'main';
+const baseGithubLink = `https://github.com/reactjs/react.dev/edit/${githubBranch}/`;
+
+export const EditThis = () => {
+  const {asPath} = useRouter();
+  const cleanedPath = asPath.split(/[\?\#]/)[0];
+  return (
+    <div className="flex text-link dark:text-link-dark group justify-start align-middle">
+      <IconGitHub />
+      <ExternalLink href={`${baseGithubLink}src/content/${cleanedPath}.md`}>
+        <span className="text-lg group-hover:underline">
+          Edit this page on Github
+        </span>
+      </ExternalLink>
+    </div>
+  );
+};
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 24d379589de..eaef2a7a42f 100644
--- a/src/components/Layout/Page.tsx
+++ b/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');
 
@@ -88,6 +89,7 @@ export function Page({
               </LanguagesContext.Provider>
             </TocContext.Provider>
           </div>
+          {!isBlogIndex && <EditThis />}
           {!isBlogIndex && (
             <DocsPageFooter
               route={route}

From 86bb7ac49ec5609be86fc63264906fb900b1b558 Mon Sep 17 00:00:00 2001
From: Fabrizio Siciliano <fa.siciliano@reply.de>
Date: Mon, 18 Nov 2024 11:21:12 +0100
Subject: [PATCH 2/3] Add edit button only on reference pages

---
 src/components/Layout/Page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index eaef2a7a42f..e2f68b45cf7 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -58,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) {
@@ -89,7 +90,7 @@ export function Page({
               </LanguagesContext.Provider>
             </TocContext.Provider>
           </div>
-          {!isBlogIndex && <EditThis />}
+          {isReferencePage && <EditThis />}
           {!isBlogIndex && (
             <DocsPageFooter
               route={route}

From 38672e3846ba1d2056b1acdaf0b1fe0b7809f285 Mon Sep 17 00:00:00 2001
From: Fabrizio Siciliano <fa.siciliano@reply.de>
Date: Mon, 18 Nov 2024 12:01:27 +0100
Subject: [PATCH 3/3] Fix index pages and sub pages

---
 src/components/EditThis.tsx    | 15 ++++++++++++---
 src/components/Layout/Page.tsx | 11 ++++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/EditThis.tsx b/src/components/EditThis.tsx
index 9f80da38248..7dbbd8540b2 100644
--- a/src/components/EditThis.tsx
+++ b/src/components/EditThis.tsx
@@ -1,17 +1,26 @@
 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}/`;
 
-export const EditThis = () => {
+type EditThisProps = {
+  path: string;
+  isIndexPage: boolean;
+};
+
+export const EditThis = ({path, isIndexPage}: EditThisProps): ReactElement => {
   const {asPath} = useRouter();
-  const cleanedPath = asPath.split(/[\?\#]/)[0];
+  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/${cleanedPath}.md`}>
+      <ExternalLink
+        href={`${baseGithubLink}src/content${path}/${pageToEdit}.md`}>
         <span className="text-lg group-hover:underline">
           Edit this page on Github
         </span>
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index e2f68b45cf7..45435b10832 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -90,7 +90,16 @@ export function Page({
               </LanguagesContext.Provider>
             </TocContext.Provider>
           </div>
-          {isReferencePage && <EditThis />}
+          {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}