Move edit icon to make it more obvious

docusaurus.config.js

@@ -267,6 +267,11 @@ async function createConfig() {
             href: 'https://contentauthenticity.org',
           },
           items: [
+            {
+              type: 'custom-editThisPage',
+              position: 'right',
+              className: 'header-logo header-edit-link',
+            },
             {
               href: 'https://discord.gg/CAI',
               position: 'right',

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@contentauth/react": "^0.2.95",
     "@docusaurus/core": "^3.10.2",
+    "@docusaurus/plugin-content-docs": "3.10.2",
     "@docusaurus/preset-classic": "^3.10.2",
     "@docusaurus/theme-mermaid": "^3.10.2",
     "@mdx-js/react": "^3.0.0",

src/css/custom.css

@@ -155,6 +155,15 @@ a.hash-link {
   background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24px' height='24px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eapp/Twitter%3C/title%3E%3Cg id='app/Twitter' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect id='Rectangle' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Cpath d='M23.206,5.185 C22.371,5.555 21.474,5.805 20.531,5.918 C21.493,5.342 22.231,4.428 22.579,3.34 C21.679,3.874 20.682,4.262 19.621,4.47 C18.771,3.566 17.561,3 16.221,3 C13.649,3 11.563,5.086 11.563,7.66 C11.563,8.024 11.605,8.378 11.683,8.72 C7.81,8.525 4.379,6.67 2.081,3.852 C1.681,4.542 1.451,5.342 1.451,6.194 C1.451,7.81 2.274,9.237 3.523,10.072 C2.759,10.047 2.041,9.838 1.413,9.489 L1.413,9.549 C1.413,11.806 3.018,13.689 5.15,14.117 C4.758,14.223 4.347,14.279 3.923,14.279 C3.623,14.279 3.33,14.251 3.046,14.197 C3.639,16.047 5.359,17.395 7.398,17.431 C5.803,18.681 3.794,19.426 1.612,19.426 C1.236,19.426 0.865,19.404 0.5,19.361 C2.562,20.684 5.01,21.454 7.64,21.454 C16.21,21.454 20.895,14.356 20.895,8.2 C20.895,8 20.89,7.798 20.881,7.598 C21.791,6.94 22.581,6.121 23.204,5.188 L23.206,5.185 Z' id='Path' fill='%232680eb' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
     no-repeat;
 }
+.header-edit-link:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%232680eb' d='m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
 .header-logo {
   filter: brightness(0);
   transition: filter var(--ifm-transition-fast)

src/theme/DocItem/Layout/index.js

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react';
+import OriginalDocItemLayout from '@theme-original/DocItem/Layout';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import { setEditThisPageUrl } from '@site/src/utils/editThisPageStore';
+
+export default function DocItemLayout(props) {
+  const { metadata } = useDoc();
+
+  useEffect(() => {
+    setEditThisPageUrl(metadata.editUrl);
+    return () => setEditThisPageUrl(undefined);
+  }, [metadata.editUrl]);
+
+  return <OriginalDocItemLayout {...props} />;
+}

src/theme/EditThisPage/index.js

@@ -0,0 +1,6 @@
+// The "Edit this page" link now appears in the navbar (see
+// src/theme/NavbarItem/EditThisPageNavbarItem), so the default footer
+// link is suppressed here so it's not shown twice.
+export default function EditThisPage() {
+  return null;
+}

src/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,7 @@
+import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes';
+import EditThisPageNavbarItem from '@site/src/theme/NavbarItem/EditThisPageNavbarItem';
+
+export default {
+  ...ComponentTypes,
+  'custom-editThisPage': EditThisPageNavbarItem,
+};

src/theme/NavbarItem/EditThisPageNavbarItem/index.js

@@ -0,0 +1,30 @@
+import React, { useSyncExternalStore } from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {
+  getEditThisPageUrl,
+  subscribeEditThisPageUrl,
+} from '@site/src/utils/editThisPageStore';
+
+const getServerSnapshot = () => undefined;
+
+export default function EditThisPageNavbarItem({ className }) {
+  const editUrl = useSyncExternalStore(
+    subscribeEditThisPageUrl,
+    getEditThisPageUrl,
+    getServerSnapshot,
+  );
+
+  if (!editUrl) {
+    return null;
+  }
+
+  return (
+    <Link
+      to={editUrl}
+      className={clsx(className)}
+      aria-label="Edit this page"
+      title="Edit this page"
+    />
+  );
+}

src/utils/editThisPageStore.js

@@ -0,0 +1,19 @@
+// DocItem/Layout and the navbar edit link are siblings under <Layout>, so
+// there's no shared React context to read editUrl from. DocItem/Layout
+// publishes the current page's editUrl here; the navbar item subscribes.
+let currentEditUrl;
+const listeners = new Set();
+
+export function setEditThisPageUrl(url) {
+  currentEditUrl = url;
+  listeners.forEach((listener) => listener());
+}
+
+export function getEditThisPageUrl() {
+  return currentEditUrl;
+}
+
+export function subscribeEditThisPageUrl(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}