Merge branch 'website_live'

docs/components/Header.tsx

@@ -258,7 +258,6 @@ export function Header() {
 
         <LinkItem href="/why-keystone">Why Keystone</LinkItem>
         <LinkItem href="/updates">Updates</LinkItem>
-        <LinkItem href="/docs">Docs</LinkItem>
 
         {/* TODO: Add in search for mobile via this button */}
         {/*
@@ -277,8 +276,6 @@ export function Header() {
           <Search css={{ height: '1.4rem', marginTop: '0.2rem' }} />
         </button>
         */}
-
-        <DarkModeBtn />
         <Button
           as="a"
           href="/docs"
@@ -289,8 +286,9 @@ export function Header() {
             },
           })}
         >
-          Get Started
+          Documentation
         </Button>
+        <DarkModeBtn />
         <a
           href="https://github.com/keystonejs/keystone"
           target="_blank"

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

@@ -95,6 +95,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

@@ -17,6 +17,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

@@ -16,6 +16,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/document-field-demo.mdx

@@ -34,11 +34,6 @@ export default ({ children }) => {
           id: 'document-field-demo',
           depth: 1,
         },
-        {
-          label: 'Try the demo',
-          id: 'try-the-demo',
-          depth: 2,
-        },
         ...headings,
       ]}
     >

docs/pages/docs/guides/document-fields.mdx

@@ -375,7 +375,7 @@ export default config({
 <details>
 
 <summary>
-  In the document editor at the top of this page, the Quote(shown above), Notice and Hero are
+  In the [document editor demo](/docs/guides/document-field-demo), the insertable Quote, Notice and Hero items are
   implemented as component blocks, see the implementation for Notice and Hero by expanding this.
 </summary>
 
@@ -641,9 +641,10 @@ fields.conditional(fields.checkbox({ label: 'Show Call to action' }), {
 
 ### Chromeless
 
-If you want to give your component blocks a more native feel in the editor, you can set `chromeless: true`.
-When you disable it, the generated form is disabled.
-In the editor at the top of this page, the Notice and Quote blocks are chromeless and the Hero has the chrome enabled.
+If you want to give your component blocks a more native feel in the editor, you can set `chromeless: true` to disable Keystone's standard generated edit form. In the [document editor demo](/docs/guides/document-field-demo), the Notice and Quote blocks are chromeless, but the Hero block has the standard chrome styling:
+
+![Notice, Quote, and Hero component blocks demonstrating chrome, and chromeless styling](/assets/guides/document-fields/chomeless-example-docs-demo.png)
+
 You will likely want to provide a custom [toolbar](#toolbar) when you set `chromeless: true`.
 
 ```tsx

docs/pages/docs/guides/index.tsx

@@ -19,6 +19,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

@@ -1,6 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import Link from 'next/link';
 
 import { CommunitySlackCTA } from '../../components/docs/CommunitySlackCTA';
 import { Examples } from '../../components/docs/ExamplesList';
@@ -19,6 +20,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
@@ -41,7 +43,10 @@ export default function Docs() {
             Watch Jed's Prisma Day talk to learn about what’s driving the development of Keystone 6,
             and how it delivers a developer experience that combines features, flexibility, and the
             perfect amount of abstraction to get started fast, and grow as you learn.{' '}
-            <a href="/updates/prisma-day-2021">Read the full transcript</a>.
+            <Link href="/updates/prisma-day-2021">
+              <a>Read the full transcript</a>
+            </Link>
+            .
           </Type>
         </div>
         <div>

docs/pages/docs/walkthroughs/embedded-mode-with-sqlite-nextjs.mdx

@@ -40,13 +40,19 @@ Here's what we're going to do:
 
 ## Setup a Next.js app
 
-Create a basic Next.js project with the `--typescript` option in an empty directory.
+x> **Warning:** We normally advise to set up a new Next.js app with `yarn create next-app --typescript my-project`, however this will install Next.js `11.x`. This version isn't compatible with this guide until we upgrade Keystone's Next.js internals to `11.x`.
+
+x> To continue, you'll need to use Next.js `10.x` until this upgrade is completed. We've set up a repository below using Next.js `10.x` you can clone in the mean time.
+
+Clone the basic Next.js project below.
 
 ```bash
-yarn create next-app --typescript my-project
-cd my-project
+git clone https://github.com/keystonejs/embedded-mode-with-sqlite-nextjs
+cd embedded-mode-with-sqlite-nextjs
 ```
 
+Then run `yarn` to install the dependencies.
+
 !> Keystone 6 has great TypeScript support. Including it in your project will make it easier to use Keystone’s APIs later.
 
 Delete the `/pages/api` directory. We’ll add a GraphQL API later in the tutorial. Your `/pages` directory should now look like this:

docs/pages/docs/walkthroughs/index.tsx

@@ -15,6 +15,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/for-developers.tsx

@@ -484,7 +484,7 @@ export default function ForDevelopers() {
                 @KeystoneJS
               </a>{' '}
               is almost too good to be open source. I can’t stress enough how awesome the dev
-              experience is. This is what I wish Wordpress was.
+              experience is. This is what I wish WordPress was.
             </TweetBox>
             <TweetBox user="_kud" img="/assets/_kud.jpg" grad="grad3">
               I think I'm in love. Keystone‘s just what I needed: a dashboard &amp; GraphQL API that