keystonejs · bladey · Aug 17, 2021 · Aug 8, 2021 · Aug 10, 2021 · Aug 10, 2021
diff --git a/docs/components/Page.tsx b/docs/components/Page.tsx
@@ -18,8 +18,8 @@ import { Footer } from './Footer';
 function Announcement() {
   return (
     <Announce>
-      Keystone 6 is in Community Preview! What does that mean? see our{' '}
-      <Link href="/updates/roadmap">Roadmap</Link>. For Keystone 5 docs, visit{' '}
+      Keystone 6 is in <Link href="/updates/roadmap">Community Preview</Link>! For Keystone 5 docs
+      visit{' '}
       <a href="https://v5.keystonejs.com" rel="noopener noreferrer" target="_blank">
         v5.keystonejs.com
       </a>
@@ -41,7 +41,7 @@ function OpenGraph({
     ogImage = `${siteUrl}/og-image-landscape.png`;
   }
   return (
-    <Fragment>
+    <Head>
       <title>{title}</title>
       <meta name="description" content={description} />
       <meta key="og:site_name" property="og:site_name" content={title} />
@@ -53,7 +53,7 @@ function OpenGraph({
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
       <meta name="twitter:image" content={`${ogImage}`} />
-    </Fragment>
+    </Head>
   );
 }
 
@@ -85,9 +85,7 @@ export function DocsPage({
 
   return (
     <Fragment>
-      <Head>
-        <OpenGraph title={metaTitle} description={description} ogImage={ogImage} />
-      </Head>
+      <OpenGraph title={metaTitle} description={description} ogImage={ogImage} />
       <div
         css={{
           gridArea: 'main',
@@ -100,6 +98,7 @@ export function DocsPage({
         <Wrapper
           css={mq({
             display: ['block', null, 'grid'],
+            marginTop: '2.5rem',
             gridTemplateColumns: noRightNav
               ? '15rem minmax(0, auto)'
               : [
@@ -147,9 +146,7 @@ export function Page({
   const metaTitle = title ? `${title} - Keystone 6` : `Keystone 6`;
   return (
     <Fragment>
-      <Head>
-        <OpenGraph title={metaTitle} description={description} ogImage={ogImage} />
-      </Head>
+      <OpenGraph title={metaTitle} description={description} ogImage={ogImage} />
       <div
         css={{
           gridArea: 'main',

diff --git a/docs/components/content/AdvancedReactCta.tsx b/docs/components/content/AdvancedReactCta.tsx
@@ -0,0 +1,116 @@
+/** @jsx jsx */
+import type { HTMLAttributes } from 'react';
+import { jsx } from '@emotion/react';
+import Image from 'next/image';
+
+import wesBosCta from '../../public/assets/wesbos-cta.jpg';
+
+import { useMediaQuery } from '../../lib/media';
+import { Button } from '../primitives/Button';
+import { Type } from '../primitives/Type';
+import { ArrowR } from '../icons/ArrowR';
+import { Tick } from '../icons/Tick';
+import { Section } from './Section';
+
+export function AdvancedReactCta(props: HTMLAttributes<HTMLElement>) {
+  const mq = useMediaQuery();
+
+  return (
+    <Section
+      css={mq({
+        display: 'grid',
+        gridTemplateColumns: ['1fr', '1fr 1fr', '1fr 2fr', '1fr 3fr'],
+        gap: ['1.5rem', '3rem'],
+        alignItems: 'center',
+        borderRadius: '1rem',
+        padding: ['1rem', '1.5rem 3rem', null, '2rem 4rem', '2rem 6rem'],
+        background: 'var(--code-bg)',
+      })}
+      {...props}
+    >
+      <div
+        css={{
+          display: 'grid',
+          '& > div': {
+            display: 'inline-grid !important',
+            justifyContent: 'center',
+            alignSelf: 'center',
+          },
+        }}
+      >
+        <Image
+          src={wesBosCta}
+          alt="Wes Bos Avatar"
+          width={675}
+          height={900}
+          css={{
+            objectFit: 'cover',
+            borderRadius: '1rem',
+          }}
+        />
+      </div>
+      <div
+        css={{
+          paddingRight: '.3rem',
+        }}
+      >
+        <Type as="h2" look="heading24">
+          Learn Keystone for eCommerce with Wes Bos
+        </Type>
+        <Type as="p" look="body18" color="var(--muted)" margin="1rem 0">
+          Master eCommerce with Keystone, React, & GraphQL. Join Wes as he teaches you how to build
+          a full-stack online store with of today's best JavaScript technology.
+        </Type>
+        <ul
+          css={{
+            listStyle: 'none',
+            margin: '0 0 1.5rem 0',
+            padding: 0,
+            display: 'inline-block',
+            '& li': {
+              display: 'inline-flex',
+              alignItems: 'center',
+              marginRight: '1rem',
+              color: 'var(--muted)',
+            },
+            '& svg': {
+              height: '1.25rem',
+              margin: '0.25rem 0.5rem 0 0',
+            },
+          }}
+        >
+          <li>
+            <Tick grad="grad2" />
+            <Type look="body18" color="var(--muted)">
+              11 modules
+            </Type>
+          </li>
+          <li>
+            <Tick grad="grad2" />
+            <Type look="body18" color="var(--muted)">
+              70 videos
+            </Type>
+          </li>
+          <li>
+            <Tick grad="grad2" />
+            <Type look="body18" color="var(--muted)">
+              28,000 students
+            </Type>
+          </li>
+        </ul>
+        <div>
+          <Button
+            as="a"
+            look="soft"
+            size="small"
+            href="https://advancedreact.com/friend/KEYSTONE"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Course details <ArrowR />
+          </Button>
+        </div>
+      </div>
+    </Section>
+  );
+}
diff --git a/docs/components/content/CommunityCta.tsx b/docs/components/content/CommunityCta.tsx
@@ -54,7 +54,7 @@ export function CommunityCta(props: HTMLAttributes<HTMLElement>) {
         <Type as="h2" look="heading30">
           Learn with others in a supportive community
         </Type>
-        <Type as="p" look="body18" margin="1rem 0">
+        <Type as="p" look="body18" color="var(--muted)" margin="1rem 0">
           Share your work and get the help you need in the Keystone community Slack: an inclusive
           space to share ideas and explore what‘s possible.
         </Type>
@@ -88,11 +88,15 @@ export function CommunityCta(props: HTMLAttributes<HTMLElement>) {
         >
           <li>
             <Tick grad="grad4" />
-            <Type look="body16">2000+ members</Type>
+            <Type look="body18" color="var(--muted)">
+              2000+ members
+            </Type>
           </li>
           <li>
             <Tick grad="grad4" />
-            <Type look="body16">Personalised support</Type>
+            <Type look="body18" color="var(--muted)">
+              Personalised support
+            </Type>
           </li>
         </ul>
       </div>

diff --git a/docs/components/content/MWrapper.tsx b/docs/components/content/MWrapper.tsx
@@ -14,7 +14,7 @@ export function MWrapper({ as: Tag = 'div', ...props }: MWrapperProps) {
   return (
     <Tag
       css={mq({
-        margin: '0 auto',
+        margin: '4rem auto 0',
         paddingLeft: [0, null, null, null, '7.5rem'],
         paddingRight: [0, null, null, null, '7.5rem'],
       })}

diff --git a/docs/components/docs/ExamplesList.tsx b/docs/components/docs/ExamplesList.tsx
@@ -124,6 +124,7 @@ export function Examples() {
         users rate items on a 5-star scale. Builds on the Blog starter project.
       </Well>
       <Well
+        grad="grad3"
         heading="Custom Admin UI Pages"
         href="https://github.com/keystonejs/keystone/blob/master/examples/custom-admin-ui-pages"
         target="_blank"
@@ -141,7 +142,7 @@ export function Examples() {
         Adds a custom logo component in the Admin UI. Builds on the Task Manager starter project.
       </Well>
       <Well
-        grad="grad2"
+        grad="grad3"
         heading="Custom Admin UI Navigation"
         href="/docs/guides/custom-admin-ui-navigation"
       >

diff --git a/docs/components/docs/GitHubExamplesCTA.tsx b/docs/components/docs/GitHubExamplesCTA.tsx
@@ -18,6 +18,8 @@ export function GitHubExamplesCTA() {
       </span>
       <Button
         as="a"
+        look="secondary"
+        size="small"
         href="https://github.com/keystonejs/keystone/tree/master/examples"
         target="_blank"
         rel="noopener noreferrer"

diff --git a/docs/lib/prose-lite.ts b/docs/lib/prose-lite.ts
@@ -1,5 +1,4 @@
 export const proseStyles = {
-  color: 'var(--muted)',
   'img, video': {
     maxWidth: '100%',
     height: 'auto',
@@ -154,6 +153,9 @@ export const proseStyles = {
     marginBottom: '2rem',
     fontSize: 'var(--font-xsmall)',
     lineHeight: 1.7142857,
+    maxWidth: '100%',
+    overflowX: 'auto' as const,
+    display: 'block',
   },
   thead: {
     color: 'var(--text)',
@@ -174,6 +176,9 @@ export const proseStyles = {
     paddingRight: '0.5714285714em',
     paddingBottom: '0.5714285714em',
     paddingLeft: '0.5714285714em',
+    '> code': {
+      whiteSpace: 'nowrap' as const,
+    },
   },
   fontSize: 'var(--font-small)',
   lineHeight: 1.75,

diff --git a/docs/pages/docs/apis/fields.mdx b/docs/pages/docs/apis/fields.mdx
@@ -458,7 +458,7 @@ Read our [relationships guide](../guides/relationships) for details on Keystone
 
 - `ref` (required): A string of the form `<listKey>` or `<listKey>.<fieldPath>`.
 - `many` (default: `false`): Configures the cardinality of the relationship.
-- `defaultValue` (default: `undefined`): Can be either a relationship input value or an async function which takes an argument `({ context, originalInput })` and returns a relationship input value.
+- `defaultValue` (default: `undefined`): Can be either a relationship input value `{ connect: { id: ID } }` or an async function which takes an argument `({ context, originalInput })` and returns a relationship input value.
   This value will be used for the field when creating items if no explicit value is set.
   `context` is a [`KeystoneContext`](./context) object.
   `originalInput` is an object containing the data passed in to the `create` mutation.

diff --git a/docs/pages/docs/guides/hooks.mdx b/docs/pages/docs/guides/hooks.mdx
@@ -220,6 +220,6 @@ export default config({
 });
 ```
 
-See the [fields API](../apis/hooks) for the details of all the arguments available for all the different hook functions.
+See the [Hooks API](../apis/hooks) for the details of all the arguments available for all the different hook functions.
 
 export default ({ children }) => <Markdown description="Learn how to use Keystone’s Hooks API to enhance your core operations with custome business logic.">{children}</Markdown>;
diff --git a/docs/pages/for-content-management.tsx b/docs/pages/for-content-management.tsx
@@ -97,9 +97,11 @@ export default function ForOrganisations() {
                 </Type>
               </li>
             </ul>
-            <Link href="/docs/apis/access-control">
-              <a>Access control API →</a>
-            </Link>
+            <Type as="p" look="body18">
+              <Link href="/docs/apis/access-control">
+                <a>Access control API →</a>
+              </Link>
+            </Type>
           </div>
           <div>
             <Image
@@ -110,6 +112,16 @@ export default function ForOrganisations() {
             />
           </div>
         </SideBySideSection>
+        <Quote
+          name="Wes Bos"
+          img="/assets/wesbos-square.jpg"
+          title="Javascript developer. Host of Syntax.FM podcast."
+          grad="grad5"
+        >
+          I love how Keystone’s access control lets me declare every single Create, Read, Update,
+          and Delete operation at both the <strong>model</strong> and <strong>field</strong> level.
+          It’s my favorite way of implementing Auth.
+        </Quote>
 
         <SideBySideSection>
           <div>
@@ -154,9 +166,11 @@ export default function ForOrganisations() {
                 </Type>
               </li>
             </ul>
-            <Link href="/docs/apis/fields">
-              <a>Fields API →</a>
-            </Link>
+            <Type as="p" look="body18">
+              <Link href="/docs/apis/fields">
+                <a>Fields API →</a>
+              </Link>
+            </Type>
           </div>
           <div>
             <Image
@@ -189,14 +203,18 @@ export default function ForOrganisations() {
               </Type>
               <Button
                 as="a"
+                // look="soft"
+                size="large"
                 href="/docs/guides/document-fields#try-the-demo"
                 css={{ margin: '1.5rem 1rem 1rem 0' }}
               >
                 Try the demo <ArrowR />
               </Button>
-              <Link href="/docs/guides/document-fields">
-                <a>Read the guide →</a>
-              </Link>
+              <Type look="body18">
+                <Link href="/docs/guides/document-fields">
+                  <a>Read the guide →</a>
+                </Link>
+              </Type>
             </div>
             <div>
               <Image
@@ -213,7 +231,7 @@ export default function ForOrganisations() {
               padding: 0,
               margin: 0,
               display: 'grid',
-              marginTop: '2rem',
+              marginTop: '5rem',
               gridTemplateColumns: ['1fr', '1fr 1fr', null, '1fr 1fr 1fr 1fr'],
               gap: '3rem',
               '& li': {
@@ -261,7 +279,12 @@ export default function ForOrganisations() {
           </ul>
         </Section>
 
-        <Quote name="@mxstbr" img="/assets/mxstbr.jpg" grad="grad5">
+        <Quote
+          name="Max Stoiber"
+          img="/assets/mxstbr.jpg"
+          title="Co-Founder Graph CDN. Formerly GatsbyJS & Github."
+          grad="grad5"
+        >
           The new @KeystoneJS rich text editor has incredible inline React component support,
           including editing props and everything!
         </Quote>
@@ -309,12 +332,11 @@ export default function ForOrganisations() {
                 </Type>
               </li>
             </ul>
-            {/*<Link href="/TODO" passHref>
-              <a css={{ display: 'block', margin: '1rem 0' }}>Try the example →</a>
-            </Link>*/}
-            <Link href="/docs/guides/relationships">
-              <a>Relationships guide →</a>
-            </Link>
+            <Type as="p" look="body18">
+              <Link href="/docs/guides/relationships">
+                <a>Relationships guide →</a>
+              </Link>
+            </Type>
           </div>
           <div>
             <Image