[FEATURE] “Edit This Page” Button for Docs and Blog Pages
- Dominant language
- TypeScript
- Stars
- 716
- Forks
- 1.2k
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 35
Description
### Why do we need this improvement?
Currently, AsyncAPI’s documentation and blog pages do not include an “Edit this page” button, which is a standard in open-source docs websites (like Docusaurus, React, or MDN).
Without this, contributors can’t easily correct typos, improve content, or submit PRs directly from the website.
### How will this change help?
1. Users will no longer have to find the repo or search for the source file manually.
2. It enables quick edits — like fixing typos, updating examples, correcting broken links, etc.
3. Contributors can create PRs directly from the website, increasing community engagement.
4. Maintainers receive cleaner, smaller PRs instead of lengthy issue threads.
### Screenshots
_No response_
### How could it be implemented/designed?
Add a floating or inline "✏️ Edit this page on GitHub" button on every documentation and blog page, linking directly to the source file in the GitHub repo.
📌 Technical Implementation
Determine the GitHub file path
Use router.pathname in Next.js to map each URL to its corresponding .mdx or .md file in the repo.
Build the Button UI
Add a visible, styled button (e.g., top-right or bottom of each page) with Tailwind CSS.
Optional: Add GitHub icon (e.g., lucide-react or react-icons)
Dynamic URL
Construct the GitHub edit link using the base:
https://github.com/asyncapi/website/blob/master/
Accessibility
Add aria-label="Edit this page on GitHub" and ensure it’s keyboard-focusable.
### 🚧 Breaking changes
No
### 👀 Have you checked for similar open issues?
- [x] I checked and didn't find a similar issue
### 🏢 Have you read the Contributing Guidelines?
- [x] I have read the [Contributing Guidelines](https://github.com/asyncapi/.github/blob/master/CONTRIBUTING.md)
### Are you willing to work on this issue?
None
Contributor guide
Research direction
Start by reading the website's Next.js page routing and how documentation and blog pages resolve to their source files; the issue does not name specific files or tests. Verify how router.pathname maps to repository paths and check existing page layout and styling conventions. Done means each documentation and blog page has an accessible, keyboard-focusable GitHub edit link targeting its source file.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, tailwindcss, typescript
- Domain
- documentation, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100