Documentation re-organisation

README.md

@@ -31,10 +31,10 @@ Keystone 6 is published to npm under the `@keystone-6/*` namespace.
 You can find our extended documentation on our [website](https://keystonejs.com/docs), but some quick links that might be helpful:
 
 - Read [Why Keystone](https://keystonejs.com/why-keystone) to learn about our vision and what's in the box.
-- [Getting Started](https://keystonejs.com/docs/walkthroughs/getting-started-with-create-keystone-app) walks you through first steps with the `create-keystone-app` CLI.
+- [Getting Started](https://keystonejs.com/docs/getting-started) walks you through first steps with the `create-keystone-app` CLI.
 - Our [Examples](./examples) contain a growing collection of projects you can run locally to learn more about a [Keystone feature](https://keystonejs.com/why-keystone#features).
 - An [API Reference](https://keystonejs.com/docs/apis) contains the details on Keystone's foundational building blocks.
-- Some [Guides](https://keystonejs.com/docs/guides) offer practical walkthroughs on how to build with those blocks.
+- Some [Guides](https://keystonejs.com/docs/guides/overview) offer practical walkthroughs on how to build with those blocks.
 
 > 💡 While our `API Reference` is generally complete, we are are still working hard on increasing the fidelity of our `guides` and `examples`. If you have an example you'd like see, please [open a GitHub discussion](https://github.com/keystonejs/keystone/discussions/new)!
 

docs/components/Footer.tsx

@@ -90,7 +90,7 @@ export function Footer() {
             </Type>
             <List>
               <li>
-                <Link href="/docs/walkthroughs/getting-started-with-create-keystone-app">
+                <Link href="/docs/getting-started">
                   <a>Getting started</a>
                 </Link>
               </li>

docs/components/MobileMenu.tsx

@@ -9,7 +9,7 @@ import FocusLock from 'react-focus-lock';
 import { useHeaderContext } from './Header';
 import { Highlight } from './primitives/Highlight';
 
-import { DocsNavigation, NavItem, PrimaryNavItem } from './docs/Navigation';
+import { DocsNavigation, NavItem } from './docs/Navigation';
 import { Keystone } from './icons/Keystone';
 import { Close } from './icons/Close';
 
@@ -44,7 +44,7 @@ export function MobileMenu({ handleClose }: MobileMenuProps) {
               borderBottom: '1px solid var(--border)',
             }}
           >
-            <PrimaryNavItem href="/why-keystone">Why Keystone</PrimaryNavItem>
+            <NavItem href="/why-keystone">Why Keystone</NavItem>
 
             <NavItem href="/for-developers">For Developers</NavItem>
             <NavItem href="/for-organisations">For Organisations</NavItem>
@@ -56,11 +56,11 @@ export function MobileMenu({ handleClose }: MobileMenuProps) {
               borderBottom: '1px solid var(--border)',
             }}
           >
-            <PrimaryNavItem href="/updates">Updates</PrimaryNavItem>
-            <PrimaryNavItem href="/updates/roadmap">Roadmap</PrimaryNavItem>
-            <PrimaryNavItem href="https://github.com/keystonejs/keystone/releases">
+            <NavItem href="/updates">Updates</NavItem>
+            <NavItem href="/updates/roadmap">Roadmap</NavItem>
+            <NavItem href="https://github.com/keystonejs/keystone/releases">
               GitHub Releases
-            </PrimaryNavItem>
+            </NavItem>
           </div>
           <div css={{ padding: '1rem 2rem 2rem' }}>
             <DocsNavigation />

docs/components/Page.tsx

@@ -4,55 +4,18 @@ import { useRef, Fragment, ReactNode } from 'react';
 import { useRouter } from 'next/router';
 import { jsx } from '@emotion/react';
 import Head from 'next/head';
-import Link from 'next/link';
 
 import { useMediaQuery } from '../lib/media';
 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 { 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>
-      <strong>
-        Keystone 6 is now in <Link href="/updates/general-availability">General Availability</Link>!
-      </strong>
-    </Announce>
-  );
-}
-
 function OpenGraph({
   title,
   description,
@@ -121,7 +84,6 @@ export function DocsPage({
           paddingBottom: 'var(--space-xxlarge)',
         }}
       >
-        <Announcement />
         <Header />
         <Wrapper
           css={mq({
@@ -190,7 +152,6 @@ export function Page({
           paddingBottom: 'var(--space-xxlarge)',
         }}
       >
-        <Announcement />
         <Header />
         <Wrapper as="main" id="skip-link-content" tabIndex={0}>
           {children}

docs/components/docs/ExamplesList.tsx

@@ -101,8 +101,7 @@ export function Examples() {
         target="_blank"
         rel="noopener noreferrer"
       >
-        Illustrates how to use the <InlineCode>json</InlineCode> field type. Builds on the Task
-        Manager starter project.
+        Illustrates how to use the <InlineCode>json</InlineCode> field type.
       </Well>
       <Well
         grad="grad3"
@@ -112,7 +111,7 @@ export function Examples() {
         rel="noopener noreferrer"
       >
         Adds a custom Admin UI view to a <InlineCode>json</InlineCode> field which provides a
-        customised editing experience for users. Builds on the Task Manager starter project.
+        customised editing experience for users.
       </Well>
       <Well
         grad="grad3"
@@ -122,7 +121,7 @@ export function Examples() {
         rel="noopener noreferrer"
       >
         Adds a custom field type based on the <InlineCode>integer</InlineCode> field type which lets
-        users rate items on a 5-star scale. Builds on the Blog starter project.
+        users rate items on a 5-star scale.
       </Well>
       <Well
         grad="grad3"
@@ -131,7 +130,7 @@ export function Examples() {
         target="_blank"
         rel="noopener noreferrer"
       >
-        Adds a custom page in the Admin UI. Builds on the Task Manager starter project.
+        Adds a custom page in the Admin UI.
       </Well>
       <Well
         grad="grad3"
@@ -140,15 +139,21 @@ export function Examples() {
         target="_blank"
         rel="noopener noreferrer"
       >
-        Adds a custom logo component in the Admin UI. Builds on the Task Manager starter project.
+        Adds a custom logo component in the Admin UI.
       </Well>
       <Well
         grad="grad3"
         heading="Custom Admin UI Navigation"
-        href="/docs/guides/custom-admin-ui-navigation"
+        href="https://github.com/keystonejs/keystone/tree/main/examples/custom-admin-ui-navigation"
       >
-        Adds a custom Navigation component to the Admin UI. Builds on the Task Manager starter
-        project.
+        Adds a custom Navigation component to the Admin UI.
+      </Well>
+      <Well
+        grad="grad3"
+        heading="Document Field Customisation"
+        href="https://github.com/keystonejs/keystone/tree/main/examples/document-field-customisation"
+      >
+        Example to demonstrate customisation of Keystone's document field and document renderer.
       </Well>
     </div>
   );