Fix index pages and sub pages

Author: fab-siciliano

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>

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}