Add Edit on GitHub button to all docs pages (#6423)

* Progress commit.

* Update EditButton.tsx

* Update EditButton.tsx

docs/components/Page.tsx

@@ -10,8 +10,10 @@ import type { Heading } from '../lib/getHeadings';
 import { Announce } from '../components/Announce';
 import { TableOfContents } from './docs/TableOfContents';
 import { Wrapper } from './primitives/Wrapper';
+import { EditButton } from './primitives/EditButton';
 import { Breadcrumbs } from './Breadcrumbs';
 import { Sidebar } from './docs/Sidebar';
+import { Stack } from './primitives/Stack';
 import { Header } from './Header';
 import { Footer } from './Footer';
 
@@ -66,6 +68,8 @@ export function DocsPage({
   title,
   description,
   ogImage,
+  isIndexPage,
+  editPath,
 }: {
   children: ReactNode;
   headings?: Heading[];
@@ -75,6 +79,8 @@ export function DocsPage({
   title: string;
   description: string;
   ogImage?: string;
+  isIndexPage?: boolean;
+  editPath?: string;
 }) {
   const contentRef = useRef<HTMLDivElement | null>(null);
   const mq = useMediaQuery();
@@ -119,7 +125,16 @@ export function DocsPage({
             ref={contentRef}
             className={noProse ? '' : 'prose'}
           >
-            <Breadcrumbs />
+            <Stack
+              orientation="horizontal"
+              block
+              css={{ justifyContent: 'space-between', alignItems: 'baseline' }}
+            >
+              <Breadcrumbs />
+              {!isUpdatesPage && (
+                <EditButton pathName={pathname} isIndexPage={isIndexPage} editPath={editPath} />
+              )}
+            </Stack>
             {children}
           </main>
           {!!headings.length && !noRightNav && (

docs/components/primitives/Button.tsx

@@ -94,6 +94,12 @@ const sizeMap = {
     height: '2.2rem',
     padding: '0 14px',
   },
+  xsmall: {
+    fontSize: '.75rem',
+    borderRadius: '4px',
+    height: '2rem',
+    padding: '0 12px',
+  },
 };
 
 type ButtonProps = {

docs/components/primitives/EditButton.tsx

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+import { Edit } from '../../components/icons/Edit';
+import { Button } from './Button';
+
+export function EditButton({
+  pathName,
+  isIndexPage,
+  editPath,
+}: {
+  pathName: string;
+  isIndexPage?: boolean;
+  editPath?: string;
+}) {
+  let fileUrl = `https://github.com/keystonejs/keystone/edit/website_live/docs/pages/`;
+
+  if (editPath) {
+    fileUrl += editPath;
+  } else if (isIndexPage) {
+    fileUrl += `${pathName}/index.tsx`;
+  } else {
+    fileUrl += `${pathName}.mdx`;
+  }
+
+  return (
+    <Button
+      as="a"
+      href={fileUrl}
+      look="text"
+      size="xsmall"
+      target="_blank"
+      rel="noopener noreferrer"
+      css={{
+        textTransform: 'uppercase',
+      }}
+    >
+      <Edit
+        css={{
+          color: 'var(--muted)',
+          marginRight: '0.35rem',
+        }}
+      />
+      Edit on GitHub
+    </Button>
+  );
+}

docs/pages/docs/apis/index.tsx

@@ -16,6 +16,7 @@ export default function Docs() {
       noProse
       title={'APIs'}
       description={'Index for Keystone’s API reference docs.'}
+      isIndexPage
     >
       <Type as="h1" look="heading64">
         API Reference

docs/pages/docs/examples.tsx

@@ -15,6 +15,7 @@ export default function Docs() {
       description={
         'A growing collection of projects you can run locally to learn more about Keystone’s many features. Use them as a reference for best practice, and springboard when adding features to your own project.'
       }
+      editPath={'docs/examples.tsx'}
     >
       <Type as="h1" look="heading64">
         Examples

docs/pages/docs/guides/index.tsx

@@ -18,6 +18,7 @@ export default function Docs() {
       description={
         'Practical explanations of Keystone’s fundamental building blocks. Learn how to think about, and get the most out of Keystone’s many features.'
       }
+      isIndexPage
     >
       <Type as="h1" look="heading64">
         Keystone Guides

docs/pages/docs/index.tsx

@@ -19,6 +19,7 @@ export default function Docs() {
       noProse
       title={'Keystone Docs Home'}
       description={'Developer docs for KeystoneJS: The superpowered headless CMS for developers.'}
+      isIndexPage
     >
       <Type as="h1" look="heading64">
         Keystone Docs

docs/pages/docs/walkthroughs/index.tsx

@@ -14,6 +14,7 @@ export default function Docs() {
       description={
         'Explore tutorials with step-by-step instruction on building solutions with Keystone.'
       }
+      isIndexPage
     >
       <Type as="h1" look="heading64">
         Walkthroughs

docs/pages/updates/index.tsx

@@ -129,6 +129,7 @@ export default function WhatsNew() {
       noProse
       title={'Latest News'}
       description={'What’s new with Keystone. A snapshot of announcements and recent releases.'}
+      isIndexPage
     >
       <Type as="h1" look="heading64">
         Latest News