Update master with website_live (#6470)

* 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) * Typo (#6405) * Replaced absolute links with relative (#6406) * Fix broken link (#6407) To copy #6404 for `website_live` branch * Add missing <Link>'s in docs pages. (#6421) * Add `Edit on GitHub` button to all docs pages (#6423) * Progress commit. * Update EditButton.tsx * Update EditButton.tsx * Tab index improvements. (#6427) * Update EditButton.tsx (#6428) * Fix styles on document field demo on website live (#6447) * Content edits (#6451) * Changes to global header (#6452) 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 · Sep 6, 2021 · 06c5fca · 06c5fca
1 parent f1b3acf
commit 06c5fca
Show file tree

Hide file tree

Showing 15 changed files with 178 additions and 46 deletions.
diff --git a/docs/components/Header.tsx b/docs/components/Header.tsx
@@ -258,7 +258,6 @@ export function Header() {
 
         <LinkItem href="/why-keystone">Why Keystone</LinkItem>
         <LinkItem href="/updates">Updates</LinkItem>
-        <LinkItem href="/docs">Docs</LinkItem>
 
         {/* TODO: Add in search for mobile via this button */}
         {/*
@@ -277,8 +276,6 @@ export function Header() {
           <Search css={{ height: '1.4rem', marginTop: '0.2rem' }} />
         </button>
         */}
-
-        <DarkModeBtn />
         <Button
           as="a"
           href="/docs"
@@ -289,8 +286,9 @@ export function Header() {
             },
           })}
         >
-          Get Started
+          Documentation
         </Button>
+        <DarkModeBtn />
         <a
           href="https://github.com/keystonejs/keystone"
           target="_blank"

diff --git a/docs/components/Page.tsx b/docs/components/Page.tsx
@@ -10,8 +10,10 @@ import type { Heading } from '../lib/getHeadings';
 import { Announce } from '../components/Announce';
 import { TableOfContents } from './docs/TableOfContents';
 import { Wrapper } from './primitives/Wrapper';
+import { EditButton } from './primitives/EditButton';
 import { Breadcrumbs } from './Breadcrumbs';
 import { Sidebar } from './docs/Sidebar';
+import { Stack } from './primitives/Stack';
 import { Header } from './Header';
 import { Footer } from './Footer';
 
@@ -66,6 +68,8 @@ export function DocsPage({
   title,
   description,
   ogImage,
+  isIndexPage,
+  editPath,
 }: {
   children: ReactNode;
   headings?: Heading[];
@@ -75,6 +79,8 @@ export function DocsPage({
   title: string;
   description: string;
   ogImage?: string;
+  isIndexPage?: boolean;
+  editPath?: string;
 }) {
   const contentRef = useRef<HTMLDivElement | null>(null);
   const mq = useMediaQuery();
@@ -119,7 +125,16 @@ export function DocsPage({
             ref={contentRef}
             className={noProse ? '' : 'prose'}
           >
-            <Breadcrumbs />
+            <Stack
+              orientation="horizontal"
+              block
+              css={{ justifyContent: 'space-between', alignItems: 'baseline' }}
+            >
+              <Breadcrumbs />
+              {!isUpdatesPage && (
+                <EditButton pathName={pathname} isIndexPage={isIndexPage} editPath={editPath} />
+              )}
+            </Stack>
             {children}
           </main>
           {!!headings.length && !noRightNav && (

diff --git a/docs/components/primitives/Button.tsx b/docs/components/primitives/Button.tsx
@@ -95,6 +95,12 @@ const sizeMap = {
     height: '2.2rem',
     padding: '0 14px',
   },
+  xsmall: {
+    fontSize: '.75rem',
+    borderRadius: '4px',
+    height: '2rem',
+    padding: '0 12px',
+  },
 };
 
 type ButtonProps = {

diff --git a/docs/components/primitives/EditButton.tsx b/docs/components/primitives/EditButton.tsx
@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+import { Edit } from '../../components/icons/Edit';
+import { Button } from './Button';
+
+export function EditButton({
+  pathName,
+  isIndexPage,
+  editPath,
+}: {
+  pathName: string;
+  isIndexPage?: boolean;
+  editPath?: string;
+}) {
+  let fileUrl = `https://github.com/keystonejs/keystone/edit/website_live/docs/pages`;
+
+  if (editPath) {
+    fileUrl += `/${editPath}`;
+  } else if (isIndexPage) {
+    fileUrl += `${pathName}/index.tsx`;
+  } else {
+    fileUrl += `${pathName}.mdx`;
+  }
+
+  return (
+    <Button
+      as="a"
+      href={fileUrl}
+      look="text"
+      size="xsmall"
+      target="_blank"
+      rel="noopener noreferrer"
+      css={{
+        textTransform: 'uppercase',
+      }}
+    >
+      <Edit
+        css={{
+          color: 'var(--muted)',
+          marginRight: '0.35rem',
+        }}
+      />
+      Edit on GitHub
+    </Button>
+  );
+}
diff --git a/docs/pages/docs/apis/index.tsx b/docs/pages/docs/apis/index.tsx
@@ -17,6 +17,7 @@ export default function Docs() {
       noProse
       title={'APIs'}
       description={'Index for Keystone’s API reference docs.'}
+      isIndexPage
     >
       <Type as="h1" look="heading64">
         API Reference

diff --git a/docs/pages/docs/examples.tsx b/docs/pages/docs/examples.tsx
@@ -16,6 +16,7 @@ export default function Docs() {
       description={
         'A growing collection of projects you can run locally to learn more about Keystone’s many features. Use them as a reference for best practice, and springboard when adding features to your own project.'
       }
+      editPath={'docs/examples.tsx'}
     >
       <Type as="h1" look="heading64">
         Examples

diff --git a/docs/pages/docs/guides/document-field-demo.mdx b/docs/pages/docs/guides/document-field-demo.mdx
@@ -34,11 +34,6 @@ export default ({ children }) => {
           id: 'document-field-demo',
           depth: 1,
         },
-        {
-          label: 'Try the demo',
-          id: 'try-the-demo',
-          depth: 2,
-        },
         ...headings,
       ]}
     >

diff --git a/docs/pages/docs/guides/document-fields.mdx b/docs/pages/docs/guides/document-fields.mdx
@@ -375,7 +375,7 @@ export default config({
 <details>
 
 <summary>
-  In the document editor at the top of this page, the Quote(shown above), Notice and Hero are
+  In the [document editor demo](/docs/guides/document-field-demo), the insertable Quote, Notice and Hero items are
   implemented as component blocks, see the implementation for Notice and Hero by expanding this.
 </summary>
 
@@ -641,9 +641,10 @@ fields.conditional(fields.checkbox({ label: 'Show Call to action' }), {
 
 ### Chromeless
 
-If you want to give your component blocks a more native feel in the editor, you can set `chromeless: true`.
-When you disable it, the generated form is disabled.
-In the editor at the top of this page, the Notice and Quote blocks are chromeless and the Hero has the chrome enabled.
+If you want to give your component blocks a more native feel in the editor, you can set `chromeless: true` to disable Keystone's standard generated edit form. In the [document editor demo](/docs/guides/document-field-demo), the Notice and Quote blocks are chromeless, but the Hero block has the standard chrome styling:
+
+![Notice, Quote, and Hero component blocks demonstrating chrome, and chromeless styling](/assets/guides/document-fields/chomeless-example-docs-demo.png)
+
 You will likely want to provide a custom [toolbar](#toolbar) when you set `chromeless: true`.
 
 ```tsx

diff --git a/docs/pages/docs/guides/index.tsx b/docs/pages/docs/guides/index.tsx
@@ -19,6 +19,7 @@ export default function Docs() {
       description={
         'Practical explanations of Keystone’s fundamental building blocks. Learn how to think about, and get the most out of Keystone’s many features.'
       }
+      isIndexPage
     >
       <Type as="h1" look="heading64">
         Keystone Guides

diff --git a/docs/pages/docs/index.tsx b/docs/pages/docs/index.tsx
@@ -1,6 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import Link from 'next/link';
 
 import { CommunitySlackCTA } from '../../components/docs/CommunitySlackCTA';
 import { Examples } from '../../components/docs/ExamplesList';
@@ -19,6 +20,7 @@ export default function Docs() {
       noProse
       title={'Keystone Docs Home'}
       description={'Developer docs for KeystoneJS: The superpowered headless CMS for developers.'}
+      isIndexPage
     >
       <Type as="h1" look="heading64">
         Keystone Docs
@@ -41,7 +43,10 @@ export default function Docs() {
             Watch Jed's Prisma Day talk to learn about what’s driving the development of Keystone 6,
             and how it delivers a developer experience that combines features, flexibility, and the
             perfect amount of abstraction to get started fast, and grow as you learn.{' '}
-            <a href="/updates/prisma-day-2021">Read the full transcript</a>.
+            <Link href="/updates/prisma-day-2021">
+              <a>Read the full transcript</a>
+            </Link>
+            .
           </Type>
         </div>
         <div>

diff --git a/docs/pages/docs/walkthroughs/embedded-mode-with-sqlite-nextjs.mdx b/docs/pages/docs/walkthroughs/embedded-mode-with-sqlite-nextjs.mdx
@@ -40,13 +40,19 @@ Here's what we're going to do:
 
 ## Setup a Next.js app
 
-Create a basic Next.js project with the `--typescript` option in an empty directory.
+x> **Warning:** We normally advise to set up a new Next.js app with `yarn create next-app --typescript my-project`, however this will install Next.js `11.x`. This version isn't compatible with this guide until we upgrade Keystone's Next.js internals to `11.x`.
+
+x> To continue, you'll need to use Next.js `10.x` until this upgrade is completed. We've set up a repository below using Next.js `10.x` you can clone in the mean time.
+
+Clone the basic Next.js project below.
 
 ```bash
-yarn create next-app --typescript my-project
-cd my-project
+git clone https://github.com/keystonejs/embedded-mode-with-sqlite-nextjs
+cd embedded-mode-with-sqlite-nextjs
 ```
 
+Then run `yarn` to install the dependencies.
+
 !> Keystone 6 has great TypeScript support. Including it in your project will make it easier to use Keystone’s APIs later.
 
 Delete the `/pages/api` directory. We’ll add a GraphQL API later in the tutorial. Your `/pages` directory should now look like this:

diff --git a/docs/pages/docs/walkthroughs/index.tsx b/docs/pages/docs/walkthroughs/index.tsx
@@ -15,6 +15,7 @@ export default function Docs() {
       description={
         'Explore tutorials with step-by-step instruction on building solutions with Keystone.'
       }
+      isIndexPage
     >
       <Type as="h1" look="heading64">
         Walkthroughs

diff --git a/docs/pages/for-developers.tsx b/docs/pages/for-developers.tsx
@@ -484,7 +484,7 @@ export default function ForDevelopers() {
                 @KeystoneJS
               </a>{' '}
               is almost too good to be open source. I can’t stress enough how awesome the dev
-              experience is. This is what I wish Wordpress was.
+              experience is. This is what I wish WordPress was.
             </TweetBox>
             <TweetBox user="_kud" img="/assets/_kud.jpg" grad="grad3">
               I think I'm in love. Keystone‘s just what I needed: a dashboard &amp; GraphQL API that