Update master from website live (#6402)

* Update index.tsx (#6278) * Fix updates bit on the website (#6287) * Content management update (#6282) * Add Wes Testimonial. Cleanup. * Typos * Fixed whitespace (#6283) * Update Header.tsx (#6289) * Add CTA block for Web Box eCommerce Course (#6273) * Content update (#6290) * Style fixes (#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 (#6300) * Update fields.mdx (#6304) * Fixed typo (#6322) * Added top margin to docs page component (#6301) * Added styles to table (#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. (#6327) * Fixed link value (#6328) * Update `website_live` (#6336) * Update patch dependencies (patch) (#6253) * Update search config to match new DocSearch config (#6255) * Update dependency/apollo client (#6259) * update apolloclient dependency to latest * changeset * Update dependency @graphql-tools/merge to v7 (#6246) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Rename first to take (#6266) * Expose stacktraces from exceptions thrown in before/after hooks. (#6263) * 6268/next typescript config error (#6269) * add typescript ignoreBuildErrors flag * changeset * Updated /updates with new things (#6272) * Check exceptions returned from GraphQL (#6271) * Lock file maintenance (#6277) * Allow bearer auth in header using sessionToken (#6276) * Use Next 11 in the website (#6256) * 6223/custom pages guide improvements (#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 (#6285) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Fix updates bit on the website (#6288) * Include stacktrace flag (#6267) * Remove `gqlType` option on `autoIncrement` field type (#6280) * Use playwright install-deps (#6294) * Update patch dependencies (patch) (#6284) * Update prisma monorepo to v2.29.0 (minor) (#6292) * Nested filters (#6095) * GraphQL API docs changes (#6297) * Update dependency @types/jest to v27 (#6293) * Ignore generated files in prisma-utils (#6305) * Move import of mergeSchemas (#6310) * Update resolveInput error handling (#6316) * Upgrade Next to 11.1.0 for the website (#6311) * Update @graphql-ts/schema (#6312) * Lock file maintenance (#6320) * Split create/update field input resolvers for relationship fields (#6317) * Expand editable area (#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 (#6308) Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update text filter API table (#6330) * Update the tags in the docs navigation (#6329) * Update patch dependencies (patch) (#6331) * Add a GraphQL API upgrade guide (#6281) * Fix issue with VisuallyHidden checkbox interactions in table (#6334) * resolve CHROME BUG * changeset * 6261/fix delete alert (#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 (#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> * Release notes for 2021-08-17 release (#6345) * New release notes. * Update index.tsx * Update 2021-08-17.mdx * Update next-env.d.ts * Update index.mdx * Update 2021-08-17.mdx * Fixed markdown for bold styles (#6346) * Update wording on upgrade guide and release notes (#6353) * Updates nav additions (#6366) * Relocated "K5 vs K6" guidance * Updated sidebar navigation content for `/updates` * Update new-graphql-api.mdx (#6375) * Updated URLs (#6374) * Tweaking docs for Next.js walkthrough for latest version (#6383) * Tweaking docs for Next.js walkthrough. * Update next-env.d.ts * Added upgrade notices to GraphQL API related pages (#6387) * Fixed link color inconsistency (#6388) * Add note to use `yarn` in the embedded Next.js guide (#6384) * Tweaking docs for Next.js walkthrough. * Update next-env.d.ts * Update embedded-mode-with-sqlite-nextjs.mdx * [WIP] Related content links (#6360) * WIP: get well in bottom of page * New RelatedContent component. * Added related content for POC * Added more related content cards * Updated guides index * Styles fix for inline code within <Well> component Co-authored-by: Thomas Walker <bladey@me.com> * Added 2x testimonials (#6400) 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>
keystonejs · Aug 25, 2021 · af71f07 · af71f07
1 parent 2263ef9
commit af71f07
Show file tree

Hide file tree

Showing 43 changed files with 762 additions and 51 deletions.
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>;