Docs: Sticky Layout (#2579)

- align the header columns with the content columns - introduce heading-based page nav - drawer-style navigation on small device - optimised layout for larger devices
keystonejs · Mar 25, 2020 · 6458ffa · 6458ffa
1 parent d798f58
commit 6458ffa
Show file tree

Hide file tree

Showing 25 changed files with 600 additions and 683 deletions.
diff --git a/.changeset/nervous-horses-juggle.md b/.changeset/nervous-horses-juggle.md
@@ -0,0 +1,5 @@
+---
+'@keystonejs/website': minor
+---
+
+Added heading navigation to the docs pages
diff --git a/.changeset/thick-cobras-hammer.md b/.changeset/thick-cobras-hammer.md
@@ -0,0 +1,5 @@
+---
+'@keystonejs/website': patch
+---
+
+Made the header and sidebar sticky
diff --git a/docs/quick-start/README.md b/docs/quick-start/README.md
@@ -57,7 +57,7 @@ cd my-app
 npm run dev
 ```
 
-## Congratulations! 🎉
+## Congratulations!
 
 You are now running your very own Keystone application! Here's what you get out of the box:
 

diff --git a/website/gatsby-config.js b/website/gatsby-config.js
@@ -80,7 +80,7 @@ async function getGatsbyConfig() {
         options: {
           extensions: ['.mdx', '.md'],
           defaultLayouts: {
-            default: require.resolve('./src/components/mdx-renderer.js'),
+            default: require.resolve('./src/components/markdown/mdx-renderer.js'),
           },
           gatsbyRemarkPlugins: [
             {

diff --git a/website/gatsby-node.js b/website/gatsby-node.js
@@ -42,7 +42,6 @@ exports.createPages = ({ actions, graphql }) => {
 
   const template = path.resolve(`src/templates/docs.js`);
   const indexTemplate = path.resolve(`src/templates/index.js`);
-  const packageTemplate = path.resolve(`src/templates/packages.js`);
 
   // The 'fields' values are injected during the `onCreateNode` call below
   return graphql(`
@@ -91,12 +90,7 @@ exports.createPages = ({ actions, graphql }) => {
     pages.forEach(({ node: { id, fields } }) => {
       createPage({
         path: `${fields.slug}`,
-        component:
-          fields.slug === '/packages/'
-            ? packageTemplate
-            : fields.isIndex
-            ? indexTemplate
-            : template,
+        component: fields.isIndex ? indexTemplate : template,
         context: {
           mdPageId: id,
           ...fields,

diff --git a/website/src/components/Container.js b/website/src/components/Container.js
@@ -1,22 +1,21 @@
 /** @jsx jsx */
 
-import React from 'react'; // eslint-disable-line no-unused-vars
 import { jsx } from '@emotion/core';
 import { mq } from '../utils/media';
 import { gridSize } from '@arch-ui/theme';
 
 export const CONTAINER_GUTTERS = [gridSize * 2, gridSize * 3, gridSize * 4];
-export const CONTAINER_WIDTH = 1140;
+export const DEFAULT_WIDTH = 1440;
 
-export const Container = props => (
+export const Container = ({ width = DEFAULT_WIDTH, hasGutters = true, ...props }) => (
   <div
     css={mq({
       boxSizing: 'border-box',
       marginLeft: 'auto',
       marginRight: 'auto',
-      maxWidth: CONTAINER_WIDTH,
-      paddingLeft: CONTAINER_GUTTERS,
-      paddingRight: CONTAINER_GUTTERS,
+      maxWidth: width,
+      paddingLeft: hasGutters ? CONTAINER_GUTTERS : null,
+      paddingRight: hasGutters ? CONTAINER_GUTTERS : null,
     })}
     {...props}
   />

diff --git a/website/src/components/Footer.js b/website/src/components/Footer.js
diff --git a/website/src/components/Header.js b/website/src/components/Header.js
@@ -1,37 +1,101 @@
 /** @jsx jsx */
 
-import React, { forwardRef } from 'react'; // eslint-disable-line no-unused-vars
+import { forwardRef } from 'react'; // eslint-disable-line no-unused-vars
 import { Link } from 'gatsby';
 import { jsx } from '@emotion/core';
 import { colors, gridSize } from '@arch-ui/theme';
 
 import logosvg from '../assets/logo.svg';
 import { Container, SocialIconsNav, Search } from '../components';
-import { media, mediaOnly, mediaMax } from '../utils/media';
+import { SIDEBAR_WIDTH } from '../components/Sidebar';
+import { media, mediaMax, mq } from '../utils/media';
 
 export const HEADER_HEIGHT = 60;
 
 export const Header = forwardRef(({ toggleMenu, ...props }, ref) => (
-  <header ref={ref} {...props}>
-    <Container>
+  <header
+    ref={ref}
+    css={{
+      backgroundColor: colors.page,
+      boxShadow: `0 1px 0 ${colors.N10}`,
+      position: 'sticky',
+      top: 0,
+      zIndex: 1,
+    }}
+    {...props}
+  >
+    <Container hasGutters={false}>
       <div
         css={{
           alignItems: 'center',
-          boxShadow: `0 1px 0 ${colors.N10}`,
-          display: 'grid',
-          gridTemplateColumns: '150px 1fr auto',
-          gridGap: '1rem',
+          display: 'flex',
           fontWeight: 500,
           height: HEADER_HEIGHT,
-
-          [media.sm]: {
-            gridTemplateColumns: '220px 1fr 220px',
-          },
         }}
       >
+        {toggleMenu && (
+          <button
+            onClick={toggleMenu}
+            css={{
+              background: 0,
+              border: 0,
+              cursor: 'pointer',
+              padding: gridSize * 2,
+
+              [media.md]: { display: 'none' },
+            }}
+          >
+            <svg viewBox="0 0 24 24" focusable="false" width="24" height="24" role="presentation">
+              <g
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.5"
+              >
+                <path d="M2.25 18.003h19.5M2.25 12.003h19.5M2.25 6.003h19.5" />
+              </g>
+            </svg>
+          </button>
+        )}
         <Logo />
-        <Search />
-        <Nav toggleMenu={toggleMenu} />
+        <div
+          css={{
+            display: 'flex',
+            flex: 1,
+
+            [media.md]: {
+              paddingLeft: gridSize * 4,
+            },
+          }}
+        >
+          <div
+            css={{
+              flex: 1,
+
+              [mediaMax.md]: {
+                paddingRight: gridSize * 2,
+              },
+            }}
+          >
+            <Search />
+          </div>
+          <div
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+              paddingLeft: gridSize * 4,
+              paddingRight: gridSize * 3,
+              width: 240,
+
+              [mediaMax.sm]: {
+                display: 'none',
+              },
+            }}
+          >
+            <SocialIconsNav />
+          </div>
+        </div>
       </div>
     </Container>
   </header>
@@ -41,124 +105,51 @@ export const Header = forwardRef(({ toggleMenu, ...props }, ref) => (
 // Styled Components
 // ==============================
 
-const Logo = () => (
-  <div css={{ alignItems: 'center', display: 'inline-flex' }}>
-    <Link
-      to="/"
+export const Logo = () => (
+  <Link
+    to="/"
+    css={mq({
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      color: 'inherit',
+      display: 'inline-flex',
+      fontSize: '0.9rem',
+      padding: [gridSize * 2, null, gridSize * 3],
+
+      [mediaMax.md]: {
+        paddingLeft: 0,
+      },
+      [media.md]: {
+        width: SIDEBAR_WIDTH,
+      },
+
+      ':hover': {
+        textDecoration: 'none',
+        span: {
+          textDecoration: 'underline',
+        },
+      },
+    })}
+  >
+    <img
+      alt="KeystoneJS Logo"
+      src={logosvg}
+      css={mq({
+        display: 'block',
+        width: [32, null, null, 40],
+      })}
+    />
+    <span
       css={{
-        alignItems: 'center',
-        color: 'inherit',
-        display: 'inline-flex',
-        fontSize: '0.9rem',
+        display: 'none',
+        marginLeft: '0.66rem',
 
-        ':hover': {
-          textDecoration: 'none',
-          span: {
-            textDecoration: 'underline',
-          },
+        [media.md]: {
+          display: 'block',
         },
       }}
     >
-      <img alt="KeystoneJS Logo" src={logosvg} css={{ display: 'block', width: 40 }} />
-      <span
-        css={{
-          marginLeft: '0.66rem',
-
-          [mediaOnly.sm]: {
-            display: 'none',
-          },
-        }}
-      >
-        KeystoneJS
-      </span>
-      <span
-        css={{
-          display: 'inline-block',
-          color: colors.N40,
-          fontStyle: 'italic',
-          marginLeft: '0.5em',
-        }}
-      >
-        v5
-      </span>
-    </Link>
-  </div>
-);
-const NavItem = ({ as, lgOnly, ...props }) => {
-  const Tag = props.to ? Link : as;
-  return (
-    <li>
-      <Tag
-        css={{
-          alignItems: 'center',
-          background: 0,
-          border: 0,
-          color: colors.N60,
-          cursor: 'pointer',
-          display: 'flex',
-          outline: 0,
-          padding: `${gridSize / 2}px ${gridSize}px`,
-          textDecoration: 'none',
-
-          [mediaMax.xs]: {
-            display: lgOnly ? 'none' : 'block',
-          },
-
-          ':hover, :focus': {
-            color: colors.N80,
-            textDecoration: 'none',
-          },
-        }}
-        {...props}
-      />
-    </li>
-  );
-};
-NavItem.defaultProps = {
-  as: 'a',
-};
-const List = props => (
-  <ul
-    css={{
-      alignItems: 'center',
-      display: 'flex',
-      justifyContent: 'center',
-      listStyle: 'none',
-      margin: 0,
-      padding: 0,
-    }}
-    {...props}
-  />
-);
-const Nav = ({ toggleMenu }) => (
-  <nav>
-    <List>
-      <li>
-        <SocialIconsNav
-          css={{
-            [mediaMax.sm]: {
-              display: 'none',
-            },
-          }}
-        />
-      </li>
-      {toggleMenu && (
-        <NavItem
-          as="button"
-          onClick={toggleMenu}
-          css={{
-            [media.sm]: { display: 'none' },
-          }}
-        >
-          <svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation">
-            <path
-              d="M5 15h14v2H5zm0-8h14v2H5zm0 4h14v2H5z"
-              fill="currentColor"
-              fillRule="evenodd"
-            />
-          </svg>
-        </NavItem>
-      )}
-    </List>
-  </nav>
+      KeystoneJS
+    </span>
+  </Link>
 );