diff --git a/src/components/EditThis.tsx b/src/components/EditThis.tsx new file mode 100644 index 00000000000..7dbbd8540b2 --- /dev/null +++ b/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 ( +
+ + + + Edit this page on Github + + +
+ ); +}; diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index 24d379589de..45435b10832 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'); @@ -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({ + {isReferencePage && route && ( + + el.path?.startsWith(route.path!) + )?.path === route.path + } + path={route?.path || routeTree.path || ''} + /> + )} {!isBlogIndex && (