diff --git a/docs/components/Page.tsx b/docs/components/Page.tsx index b0fe1ae53b8..6f01f78ed78 100644 --- a/docs/components/Page.tsx +++ b/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(null); const mq = useMediaQuery(); @@ -119,7 +125,16 @@ export function DocsPage({ ref={contentRef} className={noProse ? '' : 'prose'} > - + + + {!isUpdatesPage && ( + + )} + {children} {!!headings.length && !noRightNav && ( diff --git a/docs/components/primitives/Button.tsx b/docs/components/primitives/Button.tsx index 4261a937b9e..39f224c6caf 100644 --- a/docs/components/primitives/Button.tsx +++ b/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 = { diff --git a/docs/components/primitives/EditButton.tsx b/docs/components/primitives/EditButton.tsx new file mode 100644 index 00000000000..4db732d9fd0 --- /dev/null +++ b/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 ( + + ); +} diff --git a/docs/pages/docs/apis/index.tsx b/docs/pages/docs/apis/index.tsx index c77f14c2ba0..a390f1e5ec7 100644 --- a/docs/pages/docs/apis/index.tsx +++ b/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 > API Reference diff --git a/docs/pages/docs/examples.tsx b/docs/pages/docs/examples.tsx index f11f3e16562..b74b068fc9a 100644 --- a/docs/pages/docs/examples.tsx +++ b/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'} > Examples diff --git a/docs/pages/docs/guides/index.tsx b/docs/pages/docs/guides/index.tsx index 2da2b2dc68d..826749e0580 100644 --- a/docs/pages/docs/guides/index.tsx +++ b/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 > Keystone Guides diff --git a/docs/pages/docs/index.tsx b/docs/pages/docs/index.tsx index 977fb76e921..39194cd9177 100644 --- a/docs/pages/docs/index.tsx +++ b/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 > Keystone Docs diff --git a/docs/pages/docs/walkthroughs/index.tsx b/docs/pages/docs/walkthroughs/index.tsx index 05c827c2c2c..c6a5e3bd8be 100644 --- a/docs/pages/docs/walkthroughs/index.tsx +++ b/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 > Walkthroughs diff --git a/docs/pages/updates/index.tsx b/docs/pages/updates/index.tsx index 4a824cc16cc..36b3be48ca4 100644 --- a/docs/pages/updates/index.tsx +++ b/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 > Latest News