From 1fd0ab5def8e7d57dd757bfe57315f6c736bf3ee Mon Sep 17 00:00:00 2001
From: Hichem Fantar <hichemfantar2049@gmail.com>
Date: Wed, 20 Nov 2024 07:13:57 +0100
Subject: [PATCH 1/5] feat: add EditPage component for editing documentation
 pages

---
 src/components/EditPage.tsx    | 24 ++++++++++++++++++++++++
 src/components/Layout/Page.tsx | 31 ++++++++++++++++++++++++++++++-
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/components/EditPage.tsx

diff --git a/src/components/EditPage.tsx b/src/components/EditPage.tsx
new file mode 100644
index 00000000000..27c0a8ae0b9
--- /dev/null
+++ b/src/components/EditPage.tsx
@@ -0,0 +1,24 @@
+import {ExternalLink} from './ExternalLink';
+import {IconGitHub} from './Icon/IconGitHub';
+
+const RepoEditLink = `https://github.com/reactjs/react.dev/edit/main/`;
+
+type EditPageProps = {
+  path: string;
+  isIndexPage: boolean;
+};
+
+export const EditPage = ({path, isIndexPage}: EditPageProps) => {
+  return (
+    <ExternalLink
+      href={
+        isIndexPage
+          ? `${RepoEditLink}src/content${path}/index.md`
+          : `${RepoEditLink}src/content${path}.md`
+      }
+      className="group inline-flex text-link dark:text-link-dark justify-start items-center gap-1">
+      <IconGitHub />
+      <span className="group-hover:underline">Edit this page</span>
+    </ExternalLink>
+  );
+};
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 24d379589de..089bb324399 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -21,9 +21,18 @@ import {HomeContent} from './HomeContent';
 import {TopNav} from './TopNav';
 import cn from 'classnames';
 import Head from 'next/head';
+import {EditPage} from 'components/EditPage';
 
 import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
 
+type Section =
+  | 'learn'
+  | 'reference'
+  | 'community'
+  | 'blog'
+  | 'home'
+  | 'unknown';
+
 interface PageProps {
   children: React.ReactNode;
   toc: Array<TocItem>;
@@ -34,7 +43,7 @@ interface PageProps {
     canary?: boolean;
     description?: string;
   };
-  section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
+  section: Section;
   languages?: Languages | null;
 }
 
@@ -58,6 +67,13 @@ export function Page({
   const isHomePage = cleanedPath === '/';
   const isBlogIndex = cleanedPath === '/blog';
 
+  const editableSections: Section[] = [
+    'community',
+    'blog',
+    'learn',
+    'reference',
+  ];
+
   let content;
   if (isHomePage) {
     content = <HomeContent />;
@@ -88,6 +104,19 @@ export function Page({
               </LanguagesContext.Provider>
             </TocContext.Provider>
           </div>
+          {editableSections.includes(section) && !!route?.path && (
+            <div className={cn('mx-auto mt-14 max-w-4xl 2xl:mx-auto')}>
+              <EditPage
+                isIndexPage={
+                  routeTree.path === route.path ||
+                  (!!routeTree.path &&
+                    !route.path.startsWith(routeTree.path) &&
+                    !!route.routes?.length)
+                }
+                path={route.path}
+              />
+            </div>
+          )}
           {!isBlogIndex && (
             <DocsPageFooter
               route={route}

From c71e13d9203d4c74a3aee6d02f84203d11d1febb Mon Sep 17 00:00:00 2001
From: Hichem Fantar <hichemfantar2049@gmail.com>
Date: Wed, 20 Nov 2024 07:32:31 +0100
Subject: [PATCH 2/5] fix: remove unnecessary class from editable section
 container in Page component

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

diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 089bb324399..55bc2a0a9ce 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -105,7 +105,7 @@ export function Page({
             </TocContext.Provider>
           </div>
           {editableSections.includes(section) && !!route?.path && (
-            <div className={cn('mx-auto mt-14 max-w-4xl 2xl:mx-auto')}>
+            <div className={cn('mt-14 max-w-4xl 2xl:mx-auto')}>
               <EditPage
                 isIndexPage={
                   routeTree.path === route.path ||

From d9d130d6fb84e5a41070395c54594cd510e59e9a Mon Sep 17 00:00:00 2001
From: Hichem Fantar <hichemfantar2049@gmail.com>
Date: Wed, 20 Nov 2024 07:41:08 +0100
Subject: [PATCH 3/5] fix: adjust layout structure for EditPage component in
 Page component

---
 src/components/Layout/Page.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 55bc2a0a9ce..8dd23cefa30 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -105,16 +105,18 @@ export function Page({
             </TocContext.Provider>
           </div>
           {editableSections.includes(section) && !!route?.path && (
-            <div className={cn('mt-14 max-w-4xl 2xl:mx-auto')}>
-              <EditPage
-                isIndexPage={
-                  routeTree.path === route.path ||
-                  (!!routeTree.path &&
-                    !route.path.startsWith(routeTree.path) &&
-                    !!route.routes?.length)
-                }
-                path={route.path}
-              />
+            <div className="max-w-7xl mx-auto">
+              <div className={cn('mt-14 max-w-4xl 2xl:mx-auto')}>
+                <EditPage
+                  isIndexPage={
+                    routeTree.path === route.path ||
+                    (!!routeTree.path &&
+                      !route.path.startsWith(routeTree.path) &&
+                      !!route.routes?.length)
+                  }
+                  path={route.path}
+                />
+              </div>
             </div>
           )}
           {!isBlogIndex && (

From 5256c5257ee16e3449d7b0c290cda0389f1ebfac Mon Sep 17 00:00:00 2001
From: Hichem Fantar <fantar.hichem@gmail.com>
Date: Mon, 16 Dec 2024 18:08:56 +0100
Subject: [PATCH 4/5] fix: update RepoEditLink to use 'blob' for correct GitHub
 file editing URL

---
 src/components/EditPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/EditPage.tsx b/src/components/EditPage.tsx
index 27c0a8ae0b9..93af5736735 100644
--- a/src/components/EditPage.tsx
+++ b/src/components/EditPage.tsx
@@ -1,7 +1,7 @@
 import {ExternalLink} from './ExternalLink';
 import {IconGitHub} from './Icon/IconGitHub';
 
-const RepoEditLink = `https://github.com/reactjs/react.dev/edit/main/`;
+const RepoEditLink = `https://github.com/reactjs/react.dev/blob/main/`;
 
 type EditPageProps = {
   path: string;

From d92a2fdbd56ad054befa6637b82239a9bc76b150 Mon Sep 17 00:00:00 2001
From: Hichem Fantar <fantar.hichem@gmail.com>
Date: Mon, 16 Dec 2024 18:14:21 +0100
Subject: [PATCH 5/5] fix: update RepoEditLink to use 'edit' for correct GitHub
 file editing URL

---
 src/components/EditPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/EditPage.tsx b/src/components/EditPage.tsx
index 93af5736735..27c0a8ae0b9 100644
--- a/src/components/EditPage.tsx
+++ b/src/components/EditPage.tsx
@@ -1,7 +1,7 @@
 import {ExternalLink} from './ExternalLink';
 import {IconGitHub} from './Icon/IconGitHub';
 
-const RepoEditLink = `https://github.com/reactjs/react.dev/blob/main/`;
+const RepoEditLink = `https://github.com/reactjs/react.dev/edit/main/`;
 
 type EditPageProps = {
   path: string;