Add prominent Edit on GitHub buttons to doc pages#49
Merged
Conversation
WalkthroughAdds theme wrappers that render conditional "Edit" controls from page Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (4)
prototypes/docusaurus/src/theme/DocBreadcrumbs/styles.module.css (2)
26-31: Add a focus state for keyboard accessibility.Same as the other edit button, keyboard users won't see visual feedback when this link is focused.
♿ Proposed fix to add focus state
.editButton:hover { background: var(--ifm-color-primary); border-color: var(--ifm-color-primary); color: `#ffffff`; text-decoration: none; } + +.editButton:focus-visible { + outline: 2px solid var(--ifm-color-primary); + outline-offset: 2px; +}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@prototypes/docusaurus/src/theme/DocBreadcrumbs/styles.module.css` around lines 26 - 31, The .editButton rule lacks a keyboard focus state; add a matching :focus and/or :focus-visible selector for .editButton (mirroring the :hover styles or providing an accessible visible focus indicator) so keyboard users see the same visual feedback as when hovering; update styles.module.css to include .editButton:focus and/or .editButton:focus-visible with the same background, border-color, color (and optionally a clear outline or box-shadow) so the Edit button is keyboard-accessible.
8-24: Consider extracting shared button styles to reduce duplication.The
.editButtonstyles here are nearly identical to.editOnGithubinDocItem/Content/styles.module.css(flex, border, background, transitions, hover states). Once the team decides which placement(s) to keep, consider consolidating these into a shared CSS module or utility class incustom.css.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@prototypes/docusaurus/src/theme/DocBreadcrumbs/styles.module.css` around lines 8 - 24, The .editButton CSS duplicates most rules from .editOnGithub; extract the shared styles (flex layout, border, background, color, font, transition, white-space) into a single reusable class or utility in a shared stylesheet (e.g., custom.css or a shared module) and replace both .editButton and .editOnGithub usages with that shared class, keeping only any unique overrides (e.g., gap, padding or hover specifics) in their local modules; update the markup or component code to include the new shared class alongside any per-component modifiers.prototypes/docusaurus/src/theme/DocItem/Content/styles.module.css (1)
24-29: Add a focus state for keyboard accessibility.The hover state is defined, but there's no corresponding
:focusor:focus-visiblestate. Keyboard users navigating with Tab won't see a visual indicator when the link is focused.♿ Proposed fix to add focus state
.editOnGithub:hover { background: var(--ifm-color-primary); border-color: var(--ifm-color-primary); color: `#ffffff`; text-decoration: none; } + +.editOnGithub:focus-visible { + outline: 2px solid var(--ifm-color-primary); + outline-offset: 2px; +}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@prototypes/docusaurus/src/theme/DocItem/Content/styles.module.css` around lines 24 - 29, The .editOnGithub:hover rule lacks a keyboard-visible focus style; add matching :focus and/or :focus-visible selectors for .editOnGithub (and keep :hover) so keyboard users get the same visual indication — update the .editOnGithub CSS block to include .editOnGithub:focus and .editOnGithub:focus-visible with the same background, border-color and color (or use an accessible outline if you prefer) to ensure focus is clearly visible when tabbing to the link.prototypes/docusaurus/src/theme/DocBreadcrumbs/index.tsx (1)
11-22: Consider extractingPencilIconto a shared location.This same SVG icon component is duplicated in
DocItem/Content/index.tsx. Once the final placement is decided, consider moving shared icons to a common location (e.g.,src/components/icons/).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@prototypes/docusaurus/src/theme/DocBreadcrumbs/index.tsx` around lines 11 - 22, Duplicate inline SVG component PencilIcon is defined here and duplicated in DocItem/Content; extract PencilIcon into a shared icons module and replace both inline definitions with an import. Locate the PencilIcon function and the duplicate in DocItem/Content, create a single exported PencilIcon component in a central icons file or folder (shared icons module), and update both places to import and use that exported component instead of duplicating the SVG.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@prototypes/docusaurus/src/theme/DocBreadcrumbs/index.tsx`:
- Around line 11-22: Duplicate inline SVG component PencilIcon is defined here
and duplicated in DocItem/Content; extract PencilIcon into a shared icons module
and replace both inline definitions with an import. Locate the PencilIcon
function and the duplicate in DocItem/Content, create a single exported
PencilIcon component in a central icons file or folder (shared icons module),
and update both places to import and use that exported component instead of
duplicating the SVG.
In `@prototypes/docusaurus/src/theme/DocBreadcrumbs/styles.module.css`:
- Around line 26-31: The .editButton rule lacks a keyboard focus state; add a
matching :focus and/or :focus-visible selector for .editButton (mirroring the
:hover styles or providing an accessible visible focus indicator) so keyboard
users see the same visual feedback as when hovering; update styles.module.css to
include .editButton:focus and/or .editButton:focus-visible with the same
background, border-color, color (and optionally a clear outline or box-shadow)
so the Edit button is keyboard-accessible.
- Around line 8-24: The .editButton CSS duplicates most rules from
.editOnGithub; extract the shared styles (flex layout, border, background,
color, font, transition, white-space) into a single reusable class or utility in
a shared stylesheet (e.g., custom.css or a shared module) and replace both
.editButton and .editOnGithub usages with that shared class, keeping only any
unique overrides (e.g., gap, padding or hover specifics) in their local modules;
update the markup or component code to include the new shared class alongside
any per-component modifiers.
In `@prototypes/docusaurus/src/theme/DocItem/Content/styles.module.css`:
- Around line 24-29: The .editOnGithub:hover rule lacks a keyboard-visible focus
style; add matching :focus and/or :focus-visible selectors for .editOnGithub
(and keep :hover) so keyboard users get the same visual indication — update the
.editOnGithub CSS block to include .editOnGithub:focus and
.editOnGithub:focus-visible with the same background, border-color and color (or
use an accessible outline if you prefer) to ensure focus is clearly visible when
tabbing to the link.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 27a2c35a-3855-4a85-b79f-57c24f20cce8
📒 Files selected for processing (5)
prototypes/docusaurus/src/css/custom.cssprototypes/docusaurus/src/theme/DocBreadcrumbs/index.tsxprototypes/docusaurus/src/theme/DocBreadcrumbs/styles.module.cssprototypes/docusaurus/src/theme/DocItem/Content/index.tsxprototypes/docusaurus/src/theme/DocItem/Content/styles.module.css
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Autofix Details
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Duplicate PencilIcon component across two files
- I extracted the duplicated SVG into a shared
src/theme/icons/PencilIcon.tsxcomponent and updated both wrappers to import it, removing the duplicate definitions.
- I extracted the duplicated SVG into a shared
Or push these changes by commenting:
@cursor push 0d4b209395
Preview (0d4b209395)
diff --git a/prototypes/docusaurus/src/theme/DocBreadcrumbs/index.tsx b/prototypes/docusaurus/src/theme/DocBreadcrumbs/index.tsx
--- a/prototypes/docusaurus/src/theme/DocBreadcrumbs/index.tsx
+++ b/prototypes/docusaurus/src/theme/DocBreadcrumbs/index.tsx
@@ -3,24 +3,12 @@
import type DocBreadcrumbsType from '@theme/DocBreadcrumbs';
import type {WrapperProps} from '@docusaurus/types';
import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import PencilIcon from '../icons/PencilIcon';
import styles from './styles.module.css';
type Props = WrapperProps<typeof DocBreadcrumbsType>;
-function PencilIcon(): ReactNode {
- return (
- <svg
- viewBox="0 0 16 16"
- width="14"
- height="14"
- fill="currentColor"
- aria-hidden="true">
- <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25a1.75 1.75 0 0 1 .445-.758l8.61-8.61Zm1.414 1.06a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354l-1.086-1.086ZM11.189 6.25 9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064l6.286-6.286Z" />
- </svg>
- );
-}
-
export default function DocBreadcrumbsWrapper(props: Props): ReactNode {
const {metadata} = useDoc();
const {editUrl} = metadata;
diff --git a/prototypes/docusaurus/src/theme/DocItem/Content/index.tsx b/prototypes/docusaurus/src/theme/DocItem/Content/index.tsx
--- a/prototypes/docusaurus/src/theme/DocItem/Content/index.tsx
+++ b/prototypes/docusaurus/src/theme/DocItem/Content/index.tsx
@@ -3,6 +3,7 @@
import type ContentType from '@theme/DocItem/Content';
import type {WrapperProps} from '@docusaurus/types';
import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import PencilIcon from '../../icons/PencilIcon';
import styles from './styles.module.css';
@@ -21,19 +22,6 @@
);
}
-function PencilIcon(): ReactNode {
- return (
- <svg
- viewBox="0 0 16 16"
- width="14"
- height="14"
- fill="currentColor"
- aria-hidden="true">
- <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25a1.75 1.75 0 0 1 .445-.758l8.61-8.61Zm1.414 1.06a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354l-1.086-1.086ZM11.189 6.25 9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064l6.286-6.286Z" />
- </svg>
- );
-}
-
export default function ContentWrapper(props: Props): ReactNode {
const {metadata} = useDoc();
const {editUrl} = metadata;
diff --git a/prototypes/docusaurus/src/theme/icons/PencilIcon.tsx b/prototypes/docusaurus/src/theme/icons/PencilIcon.tsx
new file mode 100644
--- /dev/null
+++ b/prototypes/docusaurus/src/theme/icons/PencilIcon.tsx
@@ -1,0 +1,14 @@
+import type {ReactNode} from 'react';
+
+export default function PencilIcon(): ReactNode {
+ return (
+ <svg
+ viewBox="0 0 16 16"
+ width="14"
+ height="14"
+ fill="currentColor"
+ aria-hidden="true">
+ <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25a1.75 1.75 0 0 1 .445-.758l8.61-8.61Zm1.414 1.06a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354l-1.086-1.086ZM11.189 6.25 9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064l6.286-6.286Z" />
+ </svg>
+ );
+}![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: bbfbc1603b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
prototypes/docusaurus/src/theme/DocItem/Content/styles.module.css
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
Autofix Details
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Edit buttons link to wrong branch after ref change
- Updated the Docusaurus docs edit URL root from the deprecated master branch to main so all Edit on GitHub buttons target the correct branch.
Or push these changes by commenting:
@cursor push 7dcfcd15f6
Preview (7dcfcd15f6)
diff --git a/prototypes/docusaurus/docusaurus.config.ts b/prototypes/docusaurus/docusaurus.config.ts
--- a/prototypes/docusaurus/docusaurus.config.ts
+++ b/prototypes/docusaurus/docusaurus.config.ts
@@ -53,7 +53,7 @@
routeBasePath: 'docs',
exclude: [...GlobExcludeDefault, '**/planning/**'],
editUrl: ({docPath}) => {
- const root = 'https://github.com/shakacode/react_on_rails/tree/master/docs/';
+ const root = 'https://github.com/shakacode/react_on_rails/tree/main/docs/';
if (docPath === 'README.md') {
return `${root}README.md`;
}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 3 total unresolved issues (including 2 from previous reviews).
Autofix Details
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Wrong branch ref breaks doc sync from upstream
- Updated the workflow’s REACT_ON_RAILS_REF from main back to master in both sync-docs steps so cloning targets the actual upstream branch without fallback behavior.
Or push these changes by commenting:
@cursor push 2f7938a4bb
Preview (2f7938a4bb)
diff --git a/.github/workflows/site-build-deploy.yml b/.github/workflows/site-build-deploy.yml
--- a/.github/workflows/site-build-deploy.yml
+++ b/.github/workflows/site-build-deploy.yml
@@ -28,7 +28,7 @@
run: npm run sync:docs
env:
REACT_ON_RAILS_REPO_URL: https://github.com/shakacode/react_on_rails.git
- REACT_ON_RAILS_REF: main
+ REACT_ON_RAILS_REF: master
- name: Prepare docs
run: npm run prepare:docs
@@ -59,7 +59,7 @@
run: npm run sync:docs
env:
REACT_ON_RAILS_REPO_URL: https://github.com/shakacode/react_on_rails.git
- REACT_ON_RAILS_REF: main
+ REACT_ON_RAILS_REF: master
- name: Prepare docs
run: npm run prepare:docs
Two edit buttons for evaluation: 1. Breadcrumb row: small outlined "Edit" button right-aligned next to breadcrumbs 2. Title area: "Edit on GitHub" button floated right next to the H1 Hides the default bottom "Edit this page" link since it's now redundant. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The react_on_rails repo uses main as its default branch, not master. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
useDoc() was called unconditionally in the DocBreadcrumbs wrapper, but category index pages don't have a DocProvider context. Wrap the call in a try/catch so the Edit button gracefully disappears on pages where doc metadata is unavailable. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
justin808
force-pushed
the
jg/edit-page-github-link
branch
from
f6be438 to
6227cdd
Compare
|
Cloudflare preview deployed.
|
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
There are 3 total unresolved issues (including 1 from previous review).
Bugbot Autofix prepared fixes for both issues found in the latest run.
- ✅ Fixed: Edit URL points to wrong branch after rename
- Updated the docs edit URL root in
docusaurus.config.tsfrommastertomainso all edit links target the correct branch.
- Updated the docs edit URL root in
- ✅ Fixed: No-op wrapper is leftover dead code
- Removed the unused swizzled
DocItem/Contentpass-through wrapper and its empty CSS file so Docusaurus falls back to the original component.
- Removed the unused swizzled
Or push these changes by commenting:
@cursor push 2595e251bd
Preview (2595e251bd)
diff --git a/prototypes/docusaurus/docusaurus.config.ts b/prototypes/docusaurus/docusaurus.config.ts
--- a/prototypes/docusaurus/docusaurus.config.ts
+++ b/prototypes/docusaurus/docusaurus.config.ts
@@ -53,7 +53,7 @@
routeBasePath: 'docs',
exclude: [...GlobExcludeDefault, '**/planning/**'],
editUrl: ({docPath}) => {
- const root = 'https://github.com/shakacode/react_on_rails/tree/master/docs/';
+ const root = 'https://github.com/shakacode/react_on_rails/tree/main/docs/';
if (docPath === 'README.md') {
return `${root}README.md`;
}
diff --git a/prototypes/docusaurus/src/theme/DocItem/Content/index.tsx b/prototypes/docusaurus/src/theme/DocItem/Content/index.tsx
deleted file mode 100644
--- a/prototypes/docusaurus/src/theme/DocItem/Content/index.tsx
+++ /dev/null
@@ -1,10 +1,0 @@
-import type {ReactNode} from 'react';
-import Content from '@theme-original/DocItem/Content';
-import type ContentType from '@theme/DocItem/Content';
-import type {WrapperProps} from '@docusaurus/types';
-
-type Props = WrapperProps<typeof ContentType>;
-
-export default function ContentWrapper(props: Props): ReactNode {
- return <Content {...props} />;
-}
\ No newline at end of file
diff --git a/prototypes/docusaurus/src/theme/DocItem/Content/styles.module.css b/prototypes/docusaurus/src/theme/DocItem/Content/styles.module.css
deleted file mode 100644
--- a/prototypes/docusaurus/src/theme/DocItem/Content/styles.module.css
+++ /dev/null
@@ -1 +1,0 @@
-/* Intentionally empty — big Edit on GitHub button removed */
\ No newline at end of file
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
[ ✏️ Edit ]button, right-aligned next to the breadcrumb trail[ ✏️ Edit on GitHub ]button floated right, appears next to the H1 headingeditUrlconfigMotivation
The existing edit link (tiny pencil icon + bottom-of-page text link) is too buried. These two options make it much more discoverable. After reviewing on the demo deploy, we'll keep one or both.
Test plan
Closes #46
🤖 Generated with Claude Code
Note
Low Risk
Low risk UI/UX and CI workflow tweaks; main impact is changing which upstream branch docs are synced from and altering Docusaurus theme rendering/styling for edit links.
Overview
Updates the site build/deploy workflow to sync docs from the
react_on_railsrepo’smainbranch instead ofmaster.Adds a Docusaurus theme override that injects a prominent GitHub-backed
Editbutton into theDocBreadcrumbsrow (with safe handling for pages withoutDocProvider) and hides the default footer “Edit this page” row via CSS.Written by Cursor Bugbot for commit 21c5477. This will update automatically on new commits. Configure here.
Summary by CodeRabbit
New Features
Style
Chores