New Website (keystonejs#5895)

* removed old include

* setup new structure, added some primitives

* prettier

* added Type components

* tweaked body text

* quick test if this maks the cypress tests run again

* made highlight example more good

* fixed last test

* fixed cypress test

* enabled webpack5 and fixed header

* added dark mode

* fixed linter

* fixed some tiny bits

* removed old keystone packages, added Field

* added pages in scope for release (maybe)

* added footer. half way

* added github star counter

* Added new footer design

* fixed footer links

* saturday work

* fixed wells hover state

* removed console log

* tweaks

* made table of contents go away in smaller breakpoints

* fixed margin in document-field

* Fixed changes after merge

* fixed more stuff

* Adding TypeScript to the new site (keystonejs#5933)

* Adding forwardRefWithAs utility

* Typing Icons properly

* Typed Alert component

* Using classnames for Alert

* Fixed types for primitives

* Fixed remaining TypeScript errors in the DS page, including more fixes to primitives

* broken

* GOT IT WORKING for the love of webpack and all things bundler

* Removing unnecessary comment

* Fix syntax problem with 2021-03-30 mdx

* disabled cypress for now

* fixed head nav active links

* More TypeScript fixes

* added nav for uddate pages, added some emojis

* tweaked layout

* converted releases pages to tsx

* trying different way to get to folder

* finished releases page

* add missing content for docs landing page (keystonejs#5934)

* fixed links

* update apis landing page (keystonejs#5935)

* removed line height

* fixed emoji bug in getHeadings

* complete missing guides landing content (keystonejs#5936)

* complete missing content for docs/tutorials (keystonejs#5937)

* fixed content pages

* made github button thingo nicer

* added resize observer polyfill, more styles

* fixed releases in dark mode

* added mobile nav

* made 404 better

* made image bigger

* fixed color of logo

* fixed nav, emojis

* fixed size

* added more a11y to menu

* TypeScript improvements

* added new label to new virtual fields

* fixed nav

* Updates Nav changes

* Rearranged Updates nav & cleanup

* Update roadmap.mdx

* Simplifying Nav selection logic

* More docs cleanup including Walkthroughs rename

* Fixed all TypeScript problems

* added alt text back

* fixed inline code wrapping

* fixed mobile nav

* fixed word-break

* Fix link in roadmap

* Fix main section label in mobile nav

* moved to context for nav

* added skip links, focus lock to menu

* moving redirects into file

* push for pushing sake

* prettier

* disabled rough cypress test

* fixed header layout

* added mobile nav top links

* fixed clipboard functions

* added first homepage components

* prettier

* added more icons

* added more homepage stuff

* added icon section to homepage

* added CodeWindow

* added more CodeWindow examples

* more lines

* added more content to homepage

* more sections

* Fixed color prop

* Minor Thinkmill homepage content tweak

* Small content tweaks on homepage

* finished website

* added id

* added cta

* replace emoji and hoist headings (keystonejs#5956)

* added more stuff

* added more logos

* added stuff, to tired to type commit messags

* Started for-developers page

* pushed

* Fixed Node.js casing

* changed alt text case to sentence for emojis. (keystonejs#5959)

* replaced deploy targets image in homepage (keystonejs#5960)

* fixed header nav alignment

* fixed Pill

* added more content

* more content

* Intro copy tweak

* updated links, CTAS, and fixed apostrophes (keystonejs#5962)

* added more content

* Site TypeScript fixes (keystonejs#5958)

* Fixed a bunch of TypeScript errors (and some bugs)

* Update FrontEndLogos.tsx

* Fixed missing mq calls

* finished for-developers page

* fixed icons

* fixed icon sizes, content for org page

* OCD

* more fixes

* updaed images

* content for content page

* fixed code snippet for marketing purposes (keystonejs#5963)

* fixed typescript icon

* logos and stuff

* Updating tweets and fixing links

* Footer tweaks

* Rename marketing > content

* Tightening layout a bit

* Minor content tweaks

* Page consistency

* Fix mobile nav

* Updated links in Footer

* added images and missing image alt text to marketing pages (keystonejs#5965)

* Nav transition tweaks

* Fixed content ordering issue for mobile viewport

* Major Navigation & Consistency cleanup

* Minor typography improvements

* Major mobile nav cleanup

* Minor timeline cleanup

* fixed how-it-works pseudo element bug (keystonejs#5967)

* Fix incorrect footer links (keystonejs#5968)

* Wrapped gradient text fix for Safari

* Update FrontEndLogos.tsx

* Search coming soon

* Fix (now unused) imports

* (temporarily) disable dark mode autodetect

* added soft shadows to code snippet cards (keystonejs#5970)

* added fragment IDs and more to make intra-page links work (keystonejs#5969)

* Layout fixes

* Fixed code examples on the homepage

* made frontend logo array more readible (keystonejs#5973)

* Moved links to sub why-keystone pages

* aligned line height (and some whitespace) closer to Figma (keystonejs#5974)

* Small content tweaks

* Increasing grid spacing

* Adding redirects

Co-authored-by: Jed Watson <[email protected]>
Co-authored-by: Jed Watson <[email protected]>
Co-authored-by: Ronald Aveling <[email protected]>
Co-authored-by: mitchellhamilton <[email protected]>
Co-authored-by: Tim Leslie <[email protected]>
Co-authored-by: Matt Barron <[email protected]>

.eslintignore

@@ -2,3 +2,4 @@ node_modules
 coverage
 dist
 reports
+docs/public/assets/

.prettierignore

@@ -6,4 +6,5 @@ coverage
 **/dist
 **/.next
 **/.keystone
+docs/public/assets/
 .keystone/tests

design-system/packages/core/package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "@emotion/react": "11.4.0",
+    "@emotion/react": "^11.4.0",
     "facepaint": "^1.2.1"
   },
   "engines": {

docs/components/Announce.tsx

@@ -1,17 +1,30 @@
 /** @jsx jsx */
-import { jsx } from '@keystone-ui/core';
-import { HTMLAttributes } from 'react';
+import { jsx } from '@emotion/react';
+import { HTMLAttributes, ReactNode } from 'react';
 
-export function Announce(props: HTMLAttributes<HTMLElement>) {
+import { Wrapper } from './primitives/Wrapper';
+
+type AnnounceProps = {
+  children: ReactNode;
+} & HTMLAttributes<HTMLElement>;
+
+export function Announce({ children, ...props }: AnnounceProps) {
   return (
     <div
       css={{
-        background: 'var(--black)',
-        color: 'var(--white)',
-        padding: '0.7rem',
+        '--focus': '#fff',
+        background: 'var(--brand-bg)',
+        color: 'var(--brand-text)',
+        padding: '1rem',
         textAlign: 'center',
+        '& a': {
+          color: 'var(--brand-text)',
+          textDecoration: 'underline',
+        },
       }}
       {...props}
-    />
+    >
+      <Wrapper>{children}</Wrapper>
+    </div>
   );
 }

docs/components/Breadcrumbs.tsx

@@ -0,0 +1,93 @@
+/** @jsx jsx */
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { jsx } from '@emotion/react';
+import Link from 'next/link';
+
+import { Type } from './primitives/Type';
+
+type Path = { title: string; href: string };
+
+export function Breadcrumbs() {
+  const [breadcrumbs, setBreadcrumbs] = useState<Path[]>([]);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router) {
+      const linkPath = router.pathname.split('/');
+      linkPath.shift();
+
+      const pathArray = linkPath.map((path, i): Path => {
+        return { title: path.replace(/-/g, ' '), href: '/' + linkPath.slice(0, i + 1).join('/') };
+      });
+
+      setBreadcrumbs(pathArray);
+    }
+  }, [router]);
+
+  if (breadcrumbs.length < 2) {
+    return null;
+  }
+
+  return (
+    <nav
+      aria-label="breadcrumbs"
+      css={{
+        marginBottom: '1rem',
+      }}
+    >
+      <ul
+        css={{
+          margin: '0 !important',
+          padding: '0 !important',
+          fontSize: '0.75rem',
+          '& li': {
+            position: 'relative',
+            display: 'inline-block',
+            paddingLeft: '0 !important',
+            marginTop: 0,
+          },
+          '& li a': {
+            textDecoration: 'none',
+          },
+          '& li a:hover span, & li a:focus span': {
+            color: 'var(--link)',
+          },
+          '& li + li': {
+            marginLeft: '0.5em',
+            paddingLeft: '0.875em !important',
+          },
+          '&& li:before': {
+            position: 'absolute',
+            content: '"/"',
+            top: 0,
+            left: 0,
+            width: 'auto',
+            height: 'auto',
+            backgroundColor: 'transparent',
+          },
+          '& li:first-child:before': {
+            display: 'none',
+          },
+        }}
+      >
+        {breadcrumbs.map(({ title, href }) => (
+          <li key={href}>
+            <Link href={href}>
+              <a>
+                <Type
+                  look="body12"
+                  css={{
+                    textTransform: 'uppercase',
+                  }}
+                >
+                  {title}
+                </Type>
+              </a>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

docs/components/DarkModeBtn.tsx

@@ -0,0 +1,84 @@
+/** @jsx jsx */
+import { Fragment, useState, useEffect, HTMLAttributes } from 'react';
+import { jsx, Global } from '@emotion/react';
+
+import { COLORS } from '../lib/TOKENS';
+import { LightMode } from './icons/LightMode';
+import { DarkMode } from './icons/DarkMode';
+
+// NOTE: We are disabling auto-detect dark mode while we make some design tweaks and are happy
+// to ship it by default for "system is dark mode" users. IT WILL RETURN
+const AUTO_DETECT = false;
+
+export function DarkModeBtn(props: HTMLAttributes<HTMLButtonElement>) {
+  const [theme, setTheme] = useState<keyof typeof COLORS>('light');
+
+  useEffect(() => {
+    // first we check local storage, then fall back to system preferences until falling back to default 'light'
+    // in the end we sanitize the strings as who knows what systems give us what...
+    const detectedTheme =
+      (localStorage.getItem('theme') ||
+        (AUTO_DETECT && window.matchMedia('(prefers-color-scheme: dark)').matches) ||
+        'light') === 'dark'
+        ? 'dark'
+        : 'light';
+    setTheme(detectedTheme);
+    localStorage.setItem('theme', detectedTheme);
+
+    const changer = (event: { matches: boolean }) => {
+      const detectedTheme = event.matches ? 'dark' : 'light';
+      setTheme(detectedTheme);
+      localStorage.setItem('theme', detectedTheme);
+    };
+
+    if (AUTO_DETECT) window.matchMedia('(prefers-color-scheme: dark)').addListener(changer);
+    return () => {
+      if (AUTO_DETECT) window.matchMedia('(prefers-color-scheme: dark)').removeListener(changer);
+    };
+  }, [setTheme]);
+
+  const handleThemeChange = () => {
+    const newTheme = theme === 'dark' ? 'light' : 'dark';
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+  };
+
+  return (
+    <Fragment>
+      <Global
+        styles={{
+          ':root': {
+            ...COLORS[theme],
+          },
+        }}
+      />
+      <button
+        onClick={handleThemeChange}
+        css={{
+          display: 'inline-flex',
+          appearance: 'none',
+          background: 'transparent',
+          boxShadow: 'none',
+          border: '0 none',
+          borderRadius: '100%',
+          lineHeight: 1,
+          padding: 0,
+          margin: 0,
+          color: 'var(--muted)',
+          cursor: 'pointer',
+          transition: 'color 0.3s ease',
+          '&:hover, &:focus': {
+            color: 'var(--link)',
+          },
+        }}
+        {...props}
+      >
+        {theme === 'dark' ? (
+          <LightMode css={{ height: 'var(--space-xlarge)' }} />
+        ) : (
+          <DarkMode css={{ height: 'var(--space-xlarge)' }} />
+        )}
+      </button>
+    </Fragment>
+  );
+}