Add prominent Edit on GitHub buttons to doc pages (#49)

* Add prominent Edit on GitHub buttons to doc pages

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>

* Fix CI: use main branch instead of master for react_on_rails repo

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>

* Fix build failure: guard useDoc() on category index pages

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>

* Simplify Edit button: remove big button, add GitHub logo to breadcrumb

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: justin808

prototypes/docusaurus/src/css/custom.css

@@ -174,3 +174,8 @@ div[class*='announcementBar'] a {
   color: #ffffff !important;
   text-decoration: none;
 }
+
+/* Hide the default bottom "Edit this page" link — replaced by prominent top buttons */
+.theme-doc-footer-edit-meta-row {
+  display: none;
+}

prototypes/docusaurus/src/theme/DocBreadcrumbs/index.tsx

@@ -0,0 +1,54 @@
+import type {ReactNode} from 'react';
+import DocBreadcrumbs from '@theme-original/DocBreadcrumbs';
+import type DocBreadcrumbsType from '@theme/DocBreadcrumbs';
+import type {WrapperProps} from '@docusaurus/types';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+
+import styles from './styles.module.css';
+
+type Props = WrapperProps<typeof DocBreadcrumbsType>;
+
+function GitHubIcon(): ReactNode {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width="14"
+      height="14"
+      fill="currentColor"
+      aria-hidden="true">
+      <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" />
+    </svg>
+  );
+}
+
+function useDocSafe(): {editUrl: string | undefined} | null {
+  try {
+    const {metadata} = useDoc();
+    return {editUrl: metadata.editUrl};
+  } catch {
+    // useDoc() throws on category index pages where DocProvider is absent
+    return null;
+  }
+}
+
+export default function DocBreadcrumbsWrapper(props: Props): ReactNode {
+  const doc = useDocSafe();
+  const editUrl = doc?.editUrl;
+
+  return (
+    <div className={styles.breadcrumbRow}>
+      <DocBreadcrumbs {...props} />
+      {editUrl && (
+        <a
+          href={editUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.editButton}
+          title="Edit this page on GitHub">
+          <GitHubIcon />
+          <span>Edit</span>
+        </a>
+      )}
+    </div>
+  );
+}

prototypes/docusaurus/src/theme/DocBreadcrumbs/styles.module.css

@@ -0,0 +1,31 @@
+.breadcrumbRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.editButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex-shrink: 0;
+  padding: 0.25rem 0.65rem;
+  border: 1px solid var(--site-border);
+  border-radius: 6px;
+  background: var(--site-soft-surface);
+  color: var(--ifm-color-content-secondary);
+  font-size: 0.8rem;
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: none;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  white-space: nowrap;
+}
+
+.editButton:hover {
+  background: var(--ifm-color-primary);
+  border-color: var(--ifm-color-primary);
+  color: #ffffff;
+  text-decoration: none;
+}

prototypes/docusaurus/src/theme/DocItem/Content/index.tsx

@@ -0,0 +1,10 @@
+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} />;
+}

prototypes/docusaurus/src/theme/DocItem/Content/styles.module.css

@@ -0,0 +1 @@
+/* Intentionally empty — big Edit on GitHub button removed */