Skip to content

Comments

feat: Add 'Edit this page' button linking to GitHub issues#158

Open
ankitkumar748846 wants to merge 1 commit intoOneBusAway:mainfrom
ankitkumar748846:editPage
Open

feat: Add 'Edit this page' button linking to GitHub issues#158
ankitkumar748846 wants to merge 1 commit intoOneBusAway:mainfrom
ankitkumar748846:editPage

Conversation

@ankitkumar748846
Copy link
Contributor

Fixes: #156

Description:

This PR introduces an "Edit this page" button that allows users to quickly navigate to the GitHub issues section to report problems or suggest improvements.

Screenshots

Screenshot from 2025-03-21 19-49-45

Screenshot from 2025-03-21 20-17-37

Why is this needed?

  • Enhances user contribution by providing an easy way to submit issues.
  • Improves accessibility and site interactivity.

Copy link
Member

@aaronbrethorst aaronbrethorst left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Ankit, thanks for taking another swing at the "Edit this page" feature — I appreciate you putting in the effort on this. Before we can merge this, I will need you to make a couple changes:

Critical

  1. The label "Edit this page" is misleading. The link goes to GitHub's generic new-issue form, but "Edit this page" is a well-established convention across documentation sites (React docs, MDN, Docusaurus, etc.) that means "open the source file on GitHub for direct editing." Users will be confused when they land on an issue form instead. Please either:

    • Rename the link to something like "Report an issue" and swap the pencil icon for something more fitting, or
    • Make it a true "Edit this page" link that points to the actual source file on GitHub
  2. The link isn't page-specific. Every page on the site will link to the exact same /issues/new URL with zero context. At minimum, please pass query parameters to pre-fill the issue with the page title and URL so maintainers know which page the feedback is about.

Important

  1. Use Tailwind's color tokens instead of hardcoded hex values. text-[#34d399] should be text-emerald-400 (or text-green-400) — they're the same color, but the Tailwind token works with the design system and can be paired with a dark: variant. No other file in the codebase uses arbitrary hex colors in class names.

  2. Remove the magic number lg:ml-[220px]. This arbitrary pixel value doesn't correspond to any layout dimension and will break if the sidebar width changes. Use Tailwind's standard spacing utilities or let the element flow naturally within the existing px-4 sm:px-6 lg:px-8 container.

  3. Add missing accessibility and security attributes. The existing footer links all have title attributes and their SVGs use aria-hidden="true". Please add title="..." to the link, aria-hidden="true" to the SVG, and rel="noopener noreferrer" alongside target="_blank".

  4. Move the link out of default.erb and into _footer.erb. The project architecture (documented in CLAUDE.md) puts site-wide links in src/_partials/_footer.erb, where the GitHub, App Store, and blog links already live. The layout file should stay a structural skeleton.

Fit and Finish

  1. Fix indentation. The file uses 2-space indentation, but the new code uses inconsistent spacing (attributes are indented to 15, 18, and 22 spaces in the same tag). Please reformat to match the surrounding code.

Thanks again, and I look forward to merging this change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Add "Edit this page" Button

2 participants