Add 'Edit this page' links to documentation

[will-lamerton]

Summary

Add "Edit this page" links to documentation pages that point to the correct source file in the GitHub repository. This encourages community contributions and makes it easy for users to suggest changes.

Existing Nextra Configuration

The docs layout already configures docsRepositoryBase on the Nextra Layout component:

// app/[project]/docs/[version]/layout.tsx (line 64)
<Layout
  docsRepositoryBase={`https://github.com/${project.repo.owner}/${project.repo.name}/tree/${resolvedVersion}`}
  // ...
>

In Nextra v4, docsRepositoryBase is used to construct "Edit this page on GitHub" links. Before implementing a custom solution, investigate whether Nextra v4 is already rendering edit links from this prop.

What to Check First

1. Does nextra-theme-docs v4 render an "Edit this page" link when docsRepositoryBase is set?
2. If yes, is the constructed URL correct? The current base uses /tree/ (file browser), which Nextra may transform to /edit/ for the edit link
3. Does the link point to the correct file path? Since page maps are built remotely, Nextra needs to know the file path to construct the full URL
4. Check if editLink is a separate prop on Layout that needs to be explicitly enabled

Possible Outcomes

• Nextra already handles it — Just need to verify the URL is correct and possibly adjust docsRepositoryBase to use /edit/ instead of /tree/
• Nextra needs the file path — May need to pass filePath metadata through the page map or wrapper
• Custom implementation needed — If Nextra's built-in edit link doesn't work with remote content, build a custom solution (see below)

Custom Implementation (If Needed)

Only proceed with this if Nextra's built-in support doesn't work for this remote content setup.

1. Build the Edit URL

function buildEditUrl(
  version: string,
  filePath: string,  // e.g., "docs/getting-started.md"
  repo: { owner: string; name: string }
): string {
  return `https://github.com/${repo.owner}/${repo.name}/edit/${version}/${filePath}`;
}

Note: The filePath is already resolved in the page component via findDocFile() — it's the exact path in the repo (e.g., docs/getting-started.md).

2. Pass to DocsWrapper

In app/[project]/docs/[version]/[[...slug]]/page.tsx, the filePath is already available:

const filePath = await findDocFile(projectId, resolvedVersion, slug, project.repo);

// Pass to DocsWrapper
<DocsWrapper
  toc={toc}
  metadata={mdxMetadata || {}}
  sourceCode={rawMdx}
  editUrl={`https://github.com/${project.repo.owner}/${project.repo.name}/edit/${resolvedVersion}/${filePath}`}
>

3. Render in DocsWrapper

Pass as bottomContent to Nextra's DefaultWrapper:

const bottomContent = editUrl ? (
  <div className="mt-8 pt-4 border-t">
    <a
      href={editUrl}
      target="_blank"
      rel="noopener noreferrer"
      className="text-sm text-muted-foreground hover:text-foreground"
    >
      Edit this page on GitHub →
    </a>
  </div>
) : undefined;

Requirements

1. Correct URL - Link points to the exact file in the repo
2. Version awareness - Links to the correct version branch/tag
3. Consistent placement - Same location on every page
4. Opens in new tab - Uses target="_blank"
5. Accessible - Proper link text and aria labels
6. Fallback - Gracefully handle pages without edit URLs

Files Likely Affected

• lib/remote-content.ts - Add edit URL builder function
• lib/github.ts - May need to expose repo info
• app/[project]/docs/[version]/page.tsx - Pass edit URL
• components/DocsWrapper.tsx - Render edit link

Edge Cases

1. Local docs - Docs from local content/ folder (different URL structure)
2. Index pages - /docs → docs/index.md
3. Nested pages - /docs/api/auth → docs/api/auth.md
4. Version aliases - latest maps to actual version tag
5. 404 pages - No edit link needed

Success Criteria

• Edit link appears on documentation pages
• Link points to correct GitHub file
• Link uses correct version/branch
• Opens in new tab
• Works for nested pages
• Works for index pages
• Accessible link text

Additional Ideas

• Add "Report an issue" link alongside edit link
• Show "View source" as alternative
• Add "History" link to view file changes
• Consider using GitHub's new edit UI