Bring in latest website changes

.github/workflows/tests.yml

@@ -73,9 +73,9 @@ jobs:
           path: |
             ${{ steps.yarn-cache-dir-path.outputs.dir }}
             node_modules
-          key: ${{ runner.os }}-yarn-v4-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-yarn-v5-${{ hashFiles('yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-v4-
+            ${{ runner.os }}-yarn-v5-
 
       - name: Install Dependencies
         run: yarn
@@ -136,9 +136,9 @@ jobs:
           path: |
             ${{ steps.yarn-cache-dir-path.outputs.dir }}
             node_modules
-          key: ${{ runner.os }}-yarn-v4-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-yarn-v5-${{ hashFiles('yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-v4-
+            ${{ runner.os }}-yarn-v5-
 
       - name: Install Dependencies
         run: yarn
@@ -191,9 +191,9 @@ jobs:
           path: |
             ${{ steps.yarn-cache-dir-path.outputs.dir }}
             node_modules
-          key: ${{ runner.os }}-yarn-v4-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-yarn-v5-${{ hashFiles('yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-v4-
+            ${{ runner.os }}-yarn-v5-
 
       - name: Install Dependencies
         run: yarn
@@ -229,9 +229,9 @@ jobs:
           path: |
             ${{ steps.yarn-cache-dir-path.outputs.dir }}
             node_modules
-          key: ${{ runner.os }}-yarn-v4-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-yarn-v5-${{ hashFiles('yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-v4-
+            ${{ runner.os }}-yarn-v5-
 
       - name: Install Dependencies
         run: yarn
@@ -290,9 +290,9 @@ jobs:
           path: |
             ${{ steps.yarn-cache-dir-path.outputs.dir }}
             node_modules
-          key: ${{ runner.os }}-yarn-v4-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-yarn-v5-${{ hashFiles('yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-v4-
+            ${{ runner.os }}-yarn-v5-
 
       - name: Install Dependencies
         if: needs.should_run_tests.outputs.shouldRunTests == 'true'
@@ -340,9 +340,9 @@ jobs:
           path: |
             ${{ steps.yarn-cache-dir-path.outputs.dir }}
             node_modules
-          key: ${{ runner.os }}-yarn-v4-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-yarn-v5-${{ hashFiles('yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-v4-
+            ${{ runner.os }}-yarn-v5-
 
       - name: Install Dependencies
         if: needs.should_run_tests.outputs.shouldRunTests == 'true'
@@ -379,9 +379,9 @@ jobs:
           path: |
             ${{ steps.yarn-cache-dir-path.outputs.dir }}
             node_modules
-          key: ${{ runner.os }}-yarn-v4-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-yarn-v5-${{ hashFiles('yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-v4-
+            ${{ runner.os }}-yarn-v5-
 
       - name: Install Dependencies
         run: yarn

docs/components/Announce.tsx

@@ -14,7 +14,11 @@ export function Announce({ children, ...props }: AnnounceProps) {
     <div
       css={{
         '--focus': '#fff',
+        // standard styling (blue)
         background: 'var(--brand-bg)',
+        // special styling (orange gradient)
+        // backgroundColor: 'var(--grad4-2)',
+        // backgroundImage: `linear-gradient(116.01deg, var(--grad4-2), var(--grad4-1))`,
         color: 'var(--brand-text)',
         padding: '1rem',
         textAlign: 'center',

docs/components/Page.tsx

@@ -11,13 +11,38 @@ import { Announce } from '../components/Announce';
 import { TableOfContents } from './docs/TableOfContents';
 import { Wrapper } from './primitives/Wrapper';
 import { EditButton } from './primitives/EditButton';
+// import { Emoji } from './primitives/Emoji';
 import { Breadcrumbs } from './Breadcrumbs';
 import { Sidebar } from './docs/Sidebar';
 import { Stack } from './primitives/Stack';
 import { Header } from './Header';
 import { Footer } from './Footer';
 
 function Announcement() {
+  // special announcement
+  // return (
+  //   <Announce>
+  //     <Emoji symbol="🎤" alt="Microphone" />{' '}
+  //     <a
+  //       href="https://306ucv95ugh.typeform.com/to/TbFERbep"
+  //       rel="noopener noreferrer"
+  //       target="_blank"
+  //     >
+  //       Join us
+  //     </a>{' '}
+  //     for our first <strong>Community Q&A</strong> next{' '}
+  //     <strong>Tuesday Sep 21st @ 3–4pm AEST</strong> –{' '}
+  //     <a
+  //       href="https://306ucv95ugh.typeform.com/to/TbFERbep"
+  //       rel="noopener noreferrer"
+  //       target="_blank"
+  //     >
+  //       Register now
+  //     </a>
+  //     !
+  //   </Announce>
+  // );
+  // standard announcement
   return (
     <Announce>
       Keystone 6 is in <Link href="/updates/roadmap">Community Preview</Link>! For Keystone 5 docs
@@ -131,9 +156,8 @@ export function DocsPage({
               css={{ justifyContent: 'space-between', alignItems: 'baseline' }}
             >
               <Breadcrumbs />
-              {!isUpdatesPage && (
-                <EditButton pathName={pathname} isIndexPage={isIndexPage} editPath={editPath} />
-              )}
+
+              <EditButton pathName={pathname} isIndexPage={isIndexPage} editPath={editPath} />
             </Stack>
             {children}
           </main>

docs/components/Socials.tsx

@@ -4,14 +4,15 @@ import { jsx } from '@emotion/react';
 import { HTMLAttributes } from 'react';
 
 import { Twitter } from './icons/Twitter';
+import { YouTube } from './icons/YouTube';
 import { Slack } from './icons/Slack';
 
 export function Socials(props: HTMLAttributes<HTMLElement>) {
   return (
     <div
       css={{
         display: 'inline-grid',
-        gridTemplateColumns: '1fr 1fr',
+        gridTemplateColumns: '1fr 1fr 1fr',
         gap: 'var(--space-large)',
         alignItems: 'center',
         marginLeft: 'auto',
@@ -67,6 +68,24 @@ export function Socials(props: HTMLAttributes<HTMLElement>) {
       >
         <Slack css={{ height: '1.5em' }} />
       </a>
+      <a
+        href="https://www.youtube.com/channel/UClWScN0YMgpN7swHVaEPKuQ"
+        target="_blank"
+        rel="noopener noreferrer"
+        css={{
+          display: 'inline-flex',
+          padding: 0,
+          justifyContent: 'center',
+          borderRadius: '100%',
+          color: 'currentColor',
+          transition: 'color 0.3s ease',
+          ':hover': {
+            color: '#fb0202',
+          },
+        }}
+      >
+        <YouTube css={{ height: '2em' }} />
+      </a>
     </div>
   );
 }

docs/components/docs/DocumentEditorDemo.tsx

@@ -296,15 +296,17 @@ export const DocumentEditorDemo = () => {
         'blockquote, p, pre': {
           marginTop: '1em',
           marginBottom: '1em',
+          lineHeight: 1.75,
         },
-        'h1,h2,h3,h4,h5,h6': { fontWeight: 'bold', margin: 0 },
+        'h1,h2,h3,h4,h5,h6': { fontWeight: 'bold', margin: 0, lineHeight: 1.75 },
         h1: { fontSize: 'var(--font-xxlarge)' },
         h2: { fontSize: 'var(--font-large)' },
         h3: { fontSize: 'var(--font-medium)' },
         h5: { fontSize: 'var(--font-xsmall)' },
         h6: { fontSize: 'var(--font-xxsmall)' },
         'ul, ol': {
           paddingLeft: 40,
+          lineHeight: 1.75,
         },
       }}
     >

docs/components/docs/GitHubExamplesCTA.tsx

@@ -15,7 +15,7 @@ export function GitHubExamplesCTA() {
           margin: '0 1rem 0.5rem 0',
         }}
       >
-        See the full set of examples in our
+        All example projects live in the
       </span>
       <Button
         as="a"
@@ -25,7 +25,7 @@ export function GitHubExamplesCTA() {
         target="_blank"
         rel="noopener noreferrer"
       >
-        GitHub Repo <ArrowR />
+        Keystone GitHub repo <ArrowR />
       </Button>
     </Alert>
   );

docs/components/docs/Keystone5DocsCTA.tsx

@@ -0,0 +1,23 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+import { Alert } from '../primitives/Alert';
+
+export function Keystone5DocsCTA() {
+  return (
+    <Alert css={{ margin: '2rem 0' }}>
+      <span
+        css={{
+          display: 'inline-block',
+          margin: '0 1rem 0rem 0',
+        }}
+      >
+        Using <strong>Keystone 5</strong>? Find the docs at{' '}
+        <a href="https://v5.keystonejs.com/documentation" target="_blank">
+          v5.keystonejs.com
+        </a>
+      </span>
+    </Alert>
+  );
+}

docs/components/docs/Navigation.tsx

@@ -13,7 +13,7 @@ import { Badge } from '../primitives/Badge';
 import { Type } from '../primitives/Type';
 import { Emoji } from '../primitives/Emoji';
 
-type SectionProps = { label: string; children: ReactNode };
+type SectionProps = { label?: string; children: ReactNode };
 export function Section({ label, children }: SectionProps) {
   return (
     <div
@@ -22,18 +22,20 @@ export function Section({ label, children }: SectionProps) {
         marginTop: 'var(--space-xlarge)',
       }}
     >
-      <Type
-        as="h3"
-        look="body16bold"
-        margin="var(--space-xlarge) 0 var(--space-large) 0"
-        color="var(--text-heading)"
-        css={{
-          textTransform: 'uppercase',
-          fontWeight: 700,
-        }}
-      >
-        {label}
-      </Type>
+      {label && (
+        <Type
+          as="h3"
+          look="body16bold"
+          margin="var(--space-xlarge) 0 var(--space-large) 0"
+          color="var(--text-heading)"
+          css={{
+            textTransform: 'uppercase',
+            fontWeight: 700,
+          }}
+        >
+          {label}
+        </Type>
+      )}
       {children}
     </div>
   );
@@ -142,8 +144,14 @@ export function DocsNavigation() {
     >
       <PrimaryNavItem href="/docs">Docs Home</PrimaryNavItem>
       <PrimaryNavItem href="/docs/walkthroughs">Walkthroughs</PrimaryNavItem>
-      <PrimaryNavItem href="/docs/examples">Examples</PrimaryNavItem>
-      <Section label="Guides">
+      <Section>
+        <PrimaryNavItem href="/docs/examples">Examples</PrimaryNavItem>
+        <NavItem href="/docs/examples/#base-projects">Basic</NavItem>
+        <NavItem href="/docs/examples/#feature-projects">Feature</NavItem>
+        <NavItem href="/docs/examples/#deployment-projects">Deployment</NavItem>
+      </Section>
+      <Section>
+        <PrimaryNavItem href="/docs/guides">Guides</PrimaryNavItem>
         <NavItem href="/docs/guides/cli">Command Line</NavItem>
         <NavItem href="/docs/guides/relationships">Relationships</NavItem>
         <NavItem href="/docs/guides/filters">
@@ -180,7 +188,8 @@ export function DocsNavigation() {
           Custom Field Views
         </NavItem>
       </Section>
-      <Section label="API">
+      <Section>
+        <PrimaryNavItem href="/docs/apis">APIs</PrimaryNavItem>
         <SubHeading>Config</SubHeading>
         <NavItem href="/docs/apis/config">Config API</NavItem>
         <NavItem href="/docs/apis/schema">Schema API</NavItem>

docs/components/icons/Bulb.tsx

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+import { Gradients, IconProps } from './util';
+
+export function Bulb({ grad, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-label="Bulb"
+      role="img"
+      fill="none"
+      stroke={grad ? `url(#Bulb-${grad})` : 'currentColor'}
+      {...props}
+    >
+      <Gradients name="Bulb" />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9.66353 17H14.3365M12 3V4M18.364 5.63604L17.6569 6.34315M21.0001 11.9999H20.0001M4.00005 11.9999H3.00005M6.34315 6.34315L5.63604 5.63604M8.46447 15.5356C6.51184 13.5829 6.51184 10.4171 8.46447 8.46449C10.4171 6.51187 13.5829 6.51187 15.5355 8.46449C17.4882 10.4171 17.4882 13.5829 15.5355 15.5356L14.9884 16.0827C14.3556 16.7155 14 17.5739 14 18.469V19C14 20.1046 13.1046 21 12 21C10.8954 21 10 20.1046 10 19V18.469C10 17.5739 9.64445 16.7155 9.01156 16.0827L8.46447 15.5356Z"
+      />
+    </svg>
+  );
+}

docs/components/icons/Question.tsx

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+import { Gradients, IconProps } from './util';
+
+export function Question({ grad, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-label="Question"
+      role="img"
+      fill="none"
+      stroke={grad ? `url(#Question-${grad})` : 'currentColor'}
+      {...props}
+    >
+      <Gradients name="Question" />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M8.22766 9C8.77678 7.83481 10.2584 7 12.0001 7C14.2092 7 16.0001 8.34315 16.0001 10C16.0001 11.3994 14.7224 12.5751 12.9943 12.9066C12.4519 13.0106 12.0001 13.4477 12.0001 14M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+      />
+    </svg>
+  );
+}

docs/components/icons/Video.tsx

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+import { Gradients, IconProps } from './util';
+
+export function Video({ grad, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-label="Video"
+      role="img"
+      fill="none"
+      stroke={grad ? `url(#Video-${grad})` : 'currentColor'}
+      {...props}
+    >
+      <Gradients name="Video" />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M15 10L19.5528 7.72361C20.2177 7.39116 21 7.87465 21 8.61803V15.382C21 16.1253 20.2177 16.6088 19.5528 16.2764L15 14M5 18H13C14.1046 18 15 17.1046 15 16V8C15 6.89543 14.1046 6 13 6H5C3.89543 6 3 6.89543 3 8V16C3 17.1046 3.89543 18 5 18Z"
+      />
+    </svg>
+  );
+}