keystonejs · bladey · Aug 25, 2021 · Aug 8, 2021 · Aug 10, 2021 · Aug 10, 2021
diff --git a/docs/components/RelatedContent.tsx b/docs/components/RelatedContent.tsx
@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ReactNode } from 'react';
+
+import { useMediaQuery } from '../lib/media';
+
+export function RelatedContent({ children }: { children: ReactNode }) {
+  const mq = useMediaQuery();
+
+  return (
+    <div
+      css={mq({
+        display: 'grid',
+        gridTemplateColumns: ['1fr', '1fr', '1fr', '1fr 1fr'],
+        gap: 'var(--space-xlarge)',
+        '> a > p > p > code': {
+          textDecoration: 'none',
+        },
+      })}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/docs/components/docs/Navigation.tsx b/docs/components/docs/Navigation.tsx
@@ -10,6 +10,7 @@ import { useMediaQuery } from '../../lib/media';
 import { useHeaderContext } from '../Header';
 import { Badge } from '../primitives/Badge';
 import { Type } from '../primitives/Type';
+import { Emoji } from '../primitives/Emoji';
 
 type SectionProps = { label: string; children: ReactNode };
 export function Section({ label, children }: SectionProps) {
@@ -133,7 +134,6 @@ export function DocsNavigation() {
       <PrimaryNavItem href="/docs/walkthroughs">Walkthroughs</PrimaryNavItem>
       <PrimaryNavItem href="/docs/examples">Examples</PrimaryNavItem>
       <Section label="Guides">
-        <NavItem href="/docs/guides/keystone-5-vs-keystone-6-preview">Keystone 5 vs 6</NavItem>
         <NavItem href="/docs/guides/cli">Command Line</NavItem>
         <NavItem href="/docs/guides/relationships">Relationships</NavItem>
         <NavItem href="/docs/guides/filters">
@@ -214,6 +214,36 @@ export function UpdatesNavigation({ releases = [] }: { releases: string[] }) {
           ))}
         </Section>
       ) : null}
+      <Section label="Featured News">
+        <NavItem href="/updates/new-graphql-api">
+          <Emoji symbol="💎" alt="Gemstone" />
+          &nbsp; New GraphQL API
+        </NavItem>
+        <NavItem href="/releases/2021-07-29">
+          <Emoji symbol="🎛️" alt="Control knobs" />
+          &nbsp; Customisable Admin UI
+        </NavItem>
+        <NavItem href="/updates/prisma-day-2021">
+          <Emoji symbol="🍿" alt="TV" />
+          &nbsp; Jed’s Prisma Day Talk
+        </NavItem>
+        <NavItem href="/releases/2021-06-15">
+          <Emoji symbol="⚙️" alt="Gear" />
+          &nbsp; New Core
+        </NavItem>
+        <NavItem
+          href="https://github.com/keystonejs/keystone/tree/master/examples"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Emoji symbol="🧪" alt="Test Tube" />
+          &nbsp; New Examples Collection
+        </NavItem>
+        <NavItem href="/updates/keystone-5-vs-keystone-6-preview">
+          <Emoji symbol="ℹ️" alt="Information" />
+          &nbsp; Keystone 5 vs 6
+        </NavItem>
+      </Section>
     </nav>
   );
 }
diff --git a/docs/components/primitives/Well.tsx b/docs/components/primitives/Well.tsx
@@ -27,6 +27,7 @@ export function Well({ grad = 'grad1', heading, href, children, ...props }: Well
           color: 'var(--text)',
           overflow: 'hidden',
           transition: 'box-shadow 0.2s ease, transform 0.2s ease, padding 0.2s ease',
+          textDecoration: 'none !important',
           ':before': {
             content: '""',
             position: 'absolute',
@@ -47,8 +48,9 @@ export function Well({ grad = 'grad1', heading, href, children, ...props }: Well
           as="h2"
           look="heading20bold"
           css={{
-            margin: '0 0 1rem 0',
+            margin: '0 0 1rem 0 !important',
             paddingRight: '2rem',
+            fontSize: '1.25rem !important',
           }}
         >
           {heading} →

diff --git a/docs/lib/prose-lite.ts b/docs/lib/prose-lite.ts
@@ -7,15 +7,15 @@ export const proseStyles = {
     content: '""',
   },
   a: {
-    color: 'var(--text)',
     textDecoration: 'underline',
     fontWeight: 500,
+    color: 'inherit',
   },
   'a:hover': {
     color: 'var(--link)',
   },
   strong: {
-    color: 'var(--text)',
+    color: 'inherit',
     fontWeight: 600,
   },
   'ol[type="A"], ol[type="A" s]': {

diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
@@ -2,3 +2,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/docs/pages/docs/apis/auth.mdx b/docs/pages/docs/apis/auth.mdx
@@ -1,4 +1,6 @@
 import { Markdown } from '../../../components/Markdown';
+import { Well } from '../../../components/primitives/Well';
+import { RelatedContent } from '../../../components/RelatedContent';
 
 # Authentication API
 
@@ -475,4 +477,15 @@ If the token has expired the value `{ code: TOKEN_EXPIRED, message: 'The auth to
 If the token is valid then the session handler will start a new session and return the encoded session cookie data as `sessionToken`.
 The authenticated item will be returned as `item`.
 
+## Related resources
+
+<RelatedContent>
+  <Well
+    heading="Example Project: Authentication"
+    href="https://github.com/keystonejs/keystone/tree/master/examples/with-auth"
+    >
+    Adds password-based authentication to the Task Manager starter project.
+  </Well>
+</RelatedContent>
+
 export default ({ children }) => <Markdown description="API reference for supporting authentication against a password field using the createAuth() function in the `@keystone-next/auth` package.">{children}</Markdown>;
diff --git a/docs/pages/docs/apis/config.mdx b/docs/pages/docs/apis/config.mdx
@@ -1,4 +1,7 @@
 import { Markdown } from '../../../components/Markdown';
+import { Well } from '../../../components/primitives/Well';
+import { RelatedContent } from '../../../components/RelatedContent';
+import { InlineCode } from '../../../components/primitives/Code';
 
 # System Configuration API
 
@@ -405,4 +408,15 @@ Options:
 - `generateNextGraphqlAPI`: Creates a file at `node_modules/.keystone/next/graphql-api` with `default` and `config` exports that can be re-exported in a Next API route
 - `generateNodeAPI`: Creates a file at `node_modules/.keystone/api` with a `lists` export
 
+## Related resources
+
+<RelatedContent>
+  <Well
+    heading="Schema API Reference"
+    href="/docs/apis/schema"
+    >
+    The API to configure your  options used with the <InlineCode>list</InlineCode> function.
+  </Well>
+</RelatedContent>
+
 export default ({ children }) => <Markdown description="API reference for configuring your Keystone system: Lists, Database, Admin UI, Server, Sessions, GraphQl, Files, Images, and experimental options.">{children}</Markdown>;
diff --git a/docs/pages/docs/apis/context.mdx b/docs/pages/docs/apis/context.mdx
@@ -1,4 +1,7 @@
 import { Markdown } from '../../../components/Markdown';
+import { Well } from '../../../components/primitives/Well';
+import { RelatedContent } from '../../../components/RelatedContent';
+import { InlineCode } from '../../../components/primitives/Code';
 
 # Context API
 
@@ -161,4 +164,21 @@ They will be removed in future releases.
 
 `gqlNames`: A function which takes a `listKey` and returns an object containing the GraphQL query, mutation and type names related to that list.
 
+## Related resources
+
+<RelatedContent>
+  <Well
+    heading="List Items API Reference"
+    href="/docs/apis/list-items"
+    >
+    A programmatic API for running CRUD operations against your GraphQL API. For each list in your system you get an API at <InlineCode>context.lists.&lt;listName&gt;</InlineCode>
+  </Well>
+  <Well
+    heading="DB Items API Reference"
+    href="/docs/apis/db-items"
+    >
+    The API for running CRUD operations against the internal GraphQL resolvers in your system. It returns internal item objects, which can be returned from GraphQL resolvers.
+  </Well>
+</RelatedContent>
+
 export default ({ children }) => <Markdown description="The KeystoneContext object is the primary API entry point for all of the run-time functionality of your system. It's APIs can be used to write things like access control, hooks, testing and GraphQL schema extensions.">{children}</Markdown>;
diff --git a/docs/pages/docs/apis/db-items.mdx b/docs/pages/docs/apis/db-items.mdx
@@ -1,4 +1,7 @@
 import { Markdown } from '../../../components/Markdown';
+import { Well } from '../../../components/primitives/Well';
+import { RelatedContent } from '../../../components/RelatedContent';
+import { InlineCode } from '../../../components/primitives/Code';
 
 # Database Items API
 
@@ -140,4 +143,21 @@ const users = await context.db.lists.User.deleteMany({
 });
 ```
 
+## Related resources
+
+<RelatedContent>
+  <Well
+    heading="List Items API Reference"
+    href="/docs/apis/list-items"
+    >
+    A programmatic API for running CRUD operations against your GraphQL API. For each list in your system you get an API at <InlineCode>context.lists.&lt;listName&gt;</InlineCode>.
+  </Well>
+  <Well
+    heading="Context API Reference"
+    href="/docs/apis/context"
+    >
+    The API for run-time functionality in your Keystone system. Use it to write business logic for access control, hooks, testing, GraphQL schema extensions, and more.
+  </Well>
+</RelatedContent>
+
 export default ({ children }) => <Markdown description="Keystone’s database items API is a programmatic API for running CRUD operations against the internal GraphQL resolvers in your system. It bypasses the GraphQL Server itself, invoking resolver functions directly.">{children}</Markdown>;
diff --git a/docs/pages/docs/apis/fields.mdx b/docs/pages/docs/apis/fields.mdx
@@ -1,4 +1,7 @@
 import { Markdown } from '../../../components/Markdown';
+import { Well } from '../../../components/primitives/Well';
+import { RelatedContent } from '../../../components/RelatedContent';
+import { InlineCode } from '../../../components/primitives/Code';
 
 # Fields API
 
@@ -731,4 +734,21 @@ export default config({
 });
 ```
 
-export default ({ children }) => <Markdown description="A reference of Keystone’s field types, and the configuration options they accept.">{children}</Markdown>;
+## Related resources
+
+<RelatedContent>
+  <Well
+    heading="Schema API Reference"
+    href="/docs/apis/schema"
+    >
+    The API to configure your  options used with the <InlineCode>list()</InlineCode> function.
+  </Well>
+  <Well
+    heading="GraphQL API Reference"
+    href="/docs/apis/graphql"
+    >
+    A complete CRUD (create, read, update, delete) GraphQL API derived from the list and field names you configure in your system.
+  </Well>
+</RelatedContent>
+
+export default ({ children }) => <Markdown description="A reference of Keystone’s field types, and the configuration options they accept.">{children}</Markdown>
diff --git a/docs/pages/docs/apis/filters.mdx b/docs/pages/docs/apis/filters.mdx
@@ -1,7 +1,11 @@
 import { Markdown } from '../../../components/Markdown';
+import { Well } from '../../../components/primitives/Well';
+import { RelatedContent } from '../../../components/RelatedContent';
 
 # Query Filter API
 
+?> We recently improved this API so it’s easier to program and reason about. If you were using it prior to August 17th 2021, [read this guide](/updates/new-graphql-api) for info on how to upgrade.
+
 Each field type provides its own set of filters which can be used with [queries](./graphql#all-users).
 This page lists all the filters available for each field type.
 For more details on how to use filters in queries please consult to the [GraphQL Queries - Filters](../guides/filters) guide.
@@ -147,4 +151,15 @@ The `file` field type does not support filters.
 
 The `image` field type does not support filters.
 
+## Related resources
+
+<RelatedContent>
+  <Well
+    heading="Query Filters Guide"
+    href="/docs/guides/filters"
+    >
+    Query filters are an integral part of Keystone’s powerful GraphQL APIs. This guide will show you how to use filters to get the data you need from your system.
+  </Well>
+</RelatedContent>
+
 export default ({ children }) => <Markdown description="A reference list of every filters available for every Keystone field type. Keystone filters are typically named after the field they are filtering.">{children}</Markdown>;
diff --git a/docs/pages/docs/apis/graphql.mdx b/docs/pages/docs/apis/graphql.mdx
@@ -1,7 +1,12 @@
 import { Markdown } from '../../../components/Markdown';
+import { Well } from '../../../components/primitives/Well';
+import { RelatedContent } from '../../../components/RelatedContent';
+import { InlineCode } from '../../../components/primitives/Code';
 
 # GraphQL API
 
+?> We recently improved this API so it’s easier to program and reason about. If you were using it prior to August 17th 2021, [read this guide](/updates/new-graphql-api) for info on how to upgrade.
+
 Keystone generates a CRUD (create, read, update, delete) GraphQL API based on the [schema](./schema) definition provided in the system [config](./config).
 
 Consider the following system definition:
@@ -407,4 +412,21 @@ type User {
 }
 ```
 
+## Related resources
+
+<RelatedContent>
+  <Well
+    heading="Schema API Reference"
+    href="/docs/apis/schema"
+    >
+    The API to configure your  options used with the <InlineCode>list()</InlineCode> function.
+  </Well>
+  <Well
+    heading="Config API Reference"
+    href="/docs/apis/config"
+    >
+    The API to configure all the parts parts of your Keystone system.
+  </Well>
+</RelatedContent>
+
 export default ({ children }) => <Markdown description="Reference docs for Keystone’s CRUD (create, read, update, delete) GraphQL API. Based on the schema definitions outlined in your system config.">{children}</Markdown>;
diff --git a/docs/pages/docs/apis/hooks.mdx b/docs/pages/docs/apis/hooks.mdx
@@ -1,4 +1,6 @@
 import { Markdown } from '../../../components/Markdown';
+import { Well } from '../../../components/primitives/Well';
+import { RelatedContent } from '../../../components/RelatedContent';
 
 # Hooks API
 
@@ -438,4 +440,15 @@ The data resolving steps are applied in the following order:
 5. Field hooks (user defined): A `resolveInput` field hook can return a new value for its field, which will the current field value on `resolvedData`.
 6. List hooks (user defined): A `resolveInput` list hook can return a new value for the entire `resolvedData` object.
 
+## Related resources
+
+<RelatedContent>
+  <Well
+    heading="Hooks Guide"
+    href="/docs/guides/hooks"
+    >
+    Learn how to use Hooks within your schema to extend Keystone’s powerful CRUD GraphQL APIs with your own business logic.
+  </Well>
+</RelatedContent>
+
 export default ({ children }) => <Markdown description="Hooks let you to execute code at different stages of the mutation lifecycle when performing create, update, and delete operations.">{children}</Markdown>;
diff --git a/docs/pages/docs/apis/list-items.mdx b/docs/pages/docs/apis/list-items.mdx
@@ -1,4 +1,6 @@
 import { Markdown } from '../../../components/Markdown';
+import { Well } from '../../../components/primitives/Well';
+import { RelatedContent } from '../../../components/RelatedContent';
 
 # List Items API
 
@@ -144,4 +146,21 @@ const users = await context.lists.User.deleteMany({
 });
 ```
 
+## Related resources
+
+<RelatedContent>
+  <Well
+    heading="Context API Reference"
+    href="/docs/apis/context"
+    >
+    The API for run-time functionality in your Keystone system. Use it to write business logic for access control, hooks, testing, GraphQL schema extensions, and more.
+  </Well>
+  <Well
+    heading="DB Items API Reference"
+    href="/docs/apis/db-items"
+    >
+    The API for running CRUD operations against the internal GraphQL resolvers in your system. It returns internal item objects, which can be returned from GraphQL resolvers.
+  </Well>
+</RelatedContent>
+
 export default ({ children }) => <Markdown description="Reference docs for Keystone‘s List Items API: a programmatic API for running CRUD operations against your GraphQL API.">{children}</Markdown>;