Website live (keystonejs#6340)

* Update index.tsx (keystonejs#6278) * Fix updates bit on the website (keystonejs#6287) * Content management update (keystonejs#6282) * Add Wes Testimonial. Cleanup. * Typos * Fixed whitespace (keystonejs#6283) * Update Header.tsx (keystonejs#6289) * Add CTA block for Web Box eCommerce Course (keystonejs#6273) * Content update (keystonejs#6290) * Style fixes (keystonejs#6291) * Fix styles: CommunityCta * Fix Styles: Homepage * Stylefix: Wes CTA block * Style fixes: Why Keystone * Style fixes: Content Management * Style fixes: Developers * Style fixes: Organisations * Style fixes: Prose lite Reverts text color to default `--text` var per Figma * Style fixes: Docs Home * Stye fixes: examples CTA * Added new content to /updates (keystonejs#6300) * Update fields.mdx (keystonejs#6304) * Fixed typo (keystonejs#6322) * Added top margin to docs page component (keystonejs#6301) * Added styles to table (keystonejs#6315) * Added styles to table * Update prose-lite.ts * Update prose-lite.ts * Update prose-lite.ts Co-authored-by: Thomas Walker <bladey@me.com> * Un-nest <Head> tags. (keystonejs#6327) * Fixed link value (keystonejs#6328) * Update `website_live` (keystonejs#6336) * Update patch dependencies (patch) (keystonejs#6253) * Update search config to match new DocSearch config (keystonejs#6255) * Update dependency/apollo client (keystonejs#6259) * update apolloclient dependency to latest * changeset * Update dependency @graphql-tools/merge to v7 (keystonejs#6246) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Rename first to take (keystonejs#6266) * Expose stacktraces from exceptions thrown in before/after hooks. (keystonejs#6263) * 6268/next typescript config error (keystonejs#6269) * add typescript ignoreBuildErrors flag * changeset * Updated /updates with new things (keystonejs#6272) * Check exceptions returned from GraphQL (keystonejs#6271) * Lock file maintenance (keystonejs#6277) * Allow bearer auth in header using sessionToken (keystonejs#6276) * Use Next 11 in the website (keystonejs#6256) * 6223/custom pages guide improvements (keystonejs#6264) * update example to include helper components * update docs and examples * update docs and examples * update to docs * more updates * changeset * correct incorrect props in README.md * update smoke test * update images * update example * update tests * remove next dep from package.json * updates * re-add schema.prisma for admin-ui-navigation example * Update docs/pages/docs/guides/custom-admin-ui-pages.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs/pages/docs/guides/custom-admin-ui-pages.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs/pages/docs/guides/custom-admin-ui-pages.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs/pages/docs/guides/custom-admin-ui-pages.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs/pages/docs/guides/custom-admin-ui-pages.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs/pages/docs/guides/custom-admin-ui-pages.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs/pages/docs/guides/custom-admin-ui-pages.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs/pages/docs/guides/custom-admin-ui-pages.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Apply suggestions from code review Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * update docs * revert change to next-env.d.ts * Apply suggestions from code review Co-authored-by: Tim Leslie <timl@thinkmill.com.au> Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update dependency eslint-plugin-import to ^2.24.0 (keystonejs#6285) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Fix updates bit on the website (keystonejs#6288) * Include stacktrace flag (keystonejs#6267) * Remove `gqlType` option on `autoIncrement` field type (keystonejs#6280) * Use playwright install-deps (keystonejs#6294) * Update patch dependencies (patch) (keystonejs#6284) * Update prisma monorepo to v2.29.0 (minor) (keystonejs#6292) * Nested filters (keystonejs#6095) * GraphQL API docs changes (keystonejs#6297) * Update dependency @types/jest to v27 (keystonejs#6293) * Ignore generated files in prisma-utils (keystonejs#6305) * Move import of mergeSchemas (keystonejs#6310) * Update resolveInput error handling (keystonejs#6316) * Upgrade Next to 11.1.0 for the website (keystonejs#6311) * Update @graphql-ts/schema (keystonejs#6312) * Lock file maintenance (keystonejs#6320) * Split create/update field input resolvers for relationship fields (keystonejs#6317) * Expand editable area (keystonejs#6318) * POC - Expand editable area * Change things * Create cyan-rabbits-look.md Co-authored-by: mitchellhamilton <mitchell@hamil.town> * Fixed import url on CustomNavigation component (keystonejs#6308) Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update text filter API table (keystonejs#6330) * Update the tags in the docs navigation (keystonejs#6329) * Update patch dependencies (patch) (keystonejs#6331) * Add a GraphQL API upgrade guide (keystonejs#6281) * Fix issue with VisuallyHidden checkbox interactions in table (keystonejs#6334) * resolve CHROME BUG * changeset * 6261/fix delete alert (keystonejs#6296) * refactor confirm procedure to only add success toast on success * new deletion logic in Listview * add crud-notifications test project * update deletion solution to be more pragmatic at scale * update bug fix to be more verbose * update schema.graphql * minor updates * fix yarn lint:examples to not break when running more than one test-project * minor updates to copy * remove log * changeset Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Version Packages (keystonejs#6199) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Charles <cc.lee@live.com.au> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Mitchell Hamilton <mitchell@hamil.town> Co-authored-by: Tim Leslie <timl@thinkmill.com.au> Co-authored-by: Ronald Aveling <ronald.aveling@thinkmill.com.au> Co-authored-by: Gautam Singh <5769869+gautamsi@users.noreply.github.com> Co-authored-by: Charlie Jonas <charlie@callawaycloudconsulting.com> Co-authored-by: KeystoneJS Release Bot <69774846+keystonejs-release-bot@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Mitchell Hamilton <mitchell@hamil.town> Co-authored-by: Ronald Aveling <ronald.aveling@thinkmill.com.au> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Charles <cc.lee@live.com.au> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Tim Leslie <timl@thinkmill.com.au> Co-authored-by: Gautam Singh <5769869+gautamsi@users.noreply.github.com> Co-authored-by: Charlie Jonas <charlie@callawaycloudconsulting.com> Co-authored-by: KeystoneJS Release Bot <69774846+keystonejs-release-bot@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Nikitoring · Sep 14, 2021 · 00b9085 · 00b9085
1 parent dd601bd
commit 00b9085
Show file tree

Hide file tree

Showing 16 changed files with 417 additions and 170 deletions.
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