Change documentation website to new layout (keystonejs#7987)

Co-authored-by: Daniel Cousens <413395+dcousens@users.noreply.github.com>
fkrauthan · Oct 13, 2022 · f1dcd89 · f1dcd89
1 parent aef70b8
commit f1dcd89
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 48 deletions.
diff --git a/docs/components/Footer.tsx b/docs/components/Footer.tsx
@@ -264,3 +264,54 @@ export function Footer() {
     </footer>
   );
 }
+
+export function DocsFooter() {
+  const mq = useMediaQuery();
+
+  return (
+    <footer
+      css={{
+        borderTop: '1px solid var(--border)',
+        gridArea: 'footer',
+        padding: '1rem 0',
+        zIndex: 2,
+        color: 'var(--muted)',
+        gridColumn: '2 / 3',
+        gridRow: '2 / 3',
+      }}
+    >
+      <div
+        css={mq({
+          display: 'grid',
+          gridTemplateColumns: ['1fr', '1fr 4.375rem auto'],
+          gap: '1rem',
+          alignItems: 'center',
+          justifyItems: ['center', 'end'],
+          margin: '1rem 0 1rem 0',
+          '& p': {
+            display: 'inline-block',
+            margin: ['0 auto', 0],
+            // textAlign: 'center',
+          },
+        })}
+      >
+        <Type look="body14" as="p" css={{ justifySelf: 'start' }}>
+          Made in Australia <Emoji symbol="🇦🇺" alt="Australia" /> by{' '}
+          <a href="https://www.thinkmill.com.au" target="_blank" rel="noopener noreferrer">
+            Thinkmill
+          </a>
+          , with contributions from around the world <Emoji symbol="🌏" alt="Globe" />
+        </Type>
+        <Socials
+          css={mq({
+            fontSize: '0.75rem',
+            gap: '0.5rem',
+            color: 'var(--muted)',
+            margin: ['0 auto', 0],
+          })}
+        />
+        <GitHubButton repo="keystonejs/keystone" />
+      </div>
+    </footer>
+  );
+}
diff --git a/docs/components/Header.tsx b/docs/components/Header.tsx
@@ -230,13 +230,12 @@ export function Header() {
           ],
           justifyItems: 'start',
           alignItems: 'center',
-          paddingTop: 'var(--space-xlarge)',
-          paddingBottom: 'var(--space-xlarge)',
+          paddingTop: 'var(--space-large)',
+          paddingBottom: 'var(--space-large)',
           color: 'var(--muted)',
           '& a:hover': {
             color: 'var(--link)',
           },
-          marginBottom: '2rem',
         })}
       >
         <Logo />

diff --git a/docs/components/Page.tsx b/docs/components/Page.tsx
@@ -14,7 +14,7 @@ import { Breadcrumbs } from './Breadcrumbs';
 import { Sidebar } from './docs/Sidebar';
 import { Stack } from './primitives/Stack';
 import { Header } from './Header';
-import { Footer } from './Footer';
+import { Footer, DocsFooter } from './Footer';
 
 function OpenGraph({
   title,
@@ -81,51 +81,64 @@ export function DocsPage({
         css={{
           gridArea: 'main',
           position: 'relative',
-          paddingBottom: 'var(--space-xxlarge)',
+          display: 'grid',
+          gridTemplateRows: '4.5rem calc(100vh - 4.5rem)',
         }}
       >
         <Header />
         <Wrapper
           css={mq({
+            borderTop: '1px solid var(--border)',
+            overflowY: 'auto',
             display: ['block', null, 'grid'],
-            marginTop: '2.5rem',
-            gridTemplateColumns: noRightNav
-              ? '15rem minmax(0, auto)'
-              : [
-                  '15rem minmax(0, auto)',
-                  null,
-                  null,
-                  '10rem minmax(0, auto) 10rem',
-                  '15rem minmax(0, auto) 15rem',
-                ],
+            marginTop: '0rem',
+            gridTemplateColumns: '15rem minmax(0, 1fr)',
+            gridTemplateRows: '1fr auto',
             gap: ['var(--space-medium)', null, null, 'var(--space-large)', 'var(--space-xlarge)'],
           })}
         >
           <Sidebar isUpdatesPage={isUpdatesPage} />
-
-          <main
-            id="skip-link-content"
-            tabIndex={0}
-            ref={contentRef}
-            className={noProse ? '' : 'prose'}
+          <div
+            id="content-and-toc"
+            css={mq({
+              gridColumn: '2 / 3',
+              gridRow: '1 / 2',
+              display: ['block', null, 'grid'],
+              gridTemplateColumns: noRightNav
+                ? 'minmax(0, 1fr)'
+                : ['minmax(0, 1fr)', null, null, 'minmax(0, 1fr) 10rem', 'minmax(0, 1fr) 15rem'],
+              gap: ['var(--space-medium)', null, null, 'var(--space-large)', 'var(--space-xlarge)'],
+            })}
           >
-            <Stack
-              orientation="horizontal"
-              block
-              css={{ justifyContent: 'space-between', alignItems: 'baseline' }}
+            <main
+              id="skip-link-content"
+              tabIndex={0}
+              ref={contentRef}
+              className={noProse ? '' : 'prose'}
+              css={{
+                paddingTop: '2rem',
+              }}
             >
-              <Breadcrumbs />
+              <Stack
+                orientation="horizontal"
+                block
+                css={{ justifyContent: 'space-between', alignItems: 'baseline' }}
+              >
+                <Breadcrumbs />
 
-              <EditButton pathName={pathname} isIndexPage={isIndexPage} editPath={editPath} />
-            </Stack>
-            {children}
-          </main>
-          {!!headings.length && !noRightNav && (
-            <TableOfContents container={contentRef} headings={headings} />
-          )}
+                <EditButton pathName={pathname} isIndexPage={isIndexPage} editPath={editPath} />
+              </Stack>
+              <div id="content" css={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)' }}>
+                {children}
+              </div>
+            </main>
+            {!!headings.length && !noRightNav && (
+              <TableOfContents container={contentRef} headings={headings} />
+            )}
+          </div>
+          <DocsFooter />
         </Wrapper>
       </div>
-      <Footer />
     </Fragment>
   );
 }

diff --git a/docs/components/Socials.tsx b/docs/components/Socials.tsx
@@ -12,7 +12,7 @@ export function Socials(props: HTMLAttributes<HTMLElement>) {
     <div
       css={{
         display: 'inline-grid',
-        gridTemplateColumns: '1fr 1fr 1fr',
+        gridTemplateColumns: '1fr 1fr',
         gap: 'var(--space-large)',
         alignItems: 'center',
         marginLeft: 'auto',

diff --git a/docs/components/docs/Sidebar.tsx b/docs/components/docs/Sidebar.tsx
@@ -16,26 +16,34 @@ export function Sidebar({ isUpdatesPage }: SidebarProps) {
   return (
     <aside
       css={mq({
+        borderRight: '1px solid var(--border)',
+        display: ['none', null, 'block'],
         fontSize: 'var(--font-xsmall)',
+        gridColumn: '1 / 2',
+        gridRow: '1 / 3',
+        position: 'sticky',
+        top: '0',
+        overflow: 'auto',
+        height: 'calc(100vh - 4.5rem)',
       })}
     >
       <div
         id="skip-link-navigation"
         tabIndex={0}
         css={mq({
-          display: ['none', null, 'block'],
-          padding: ['0 0 var(--space-large) var(--space-large)', null, 0],
+          padding: ['2rem 0 var(--space-large) var(--space-large)', null, 0],
           borderBottom: ['1px solid var(--muted)', null, 'none'],
-          position: 'sticky',
-          top: 16,
-          bottom: 16,
           alignSelf: 'start',
-          overflow: 'auto',
-          height: '100vh',
-          paddingBottom: '2rem',
         })}
       >
-        <Navigation />
+        <div
+          css={{
+            paddingTop: '2rem',
+            paddingBottom: '2rem',
+          }}
+        >
+          <Navigation />
+        </div>
       </div>
     </aside>
   );

diff --git a/docs/components/docs/TableOfContents.tsx b/docs/components/docs/TableOfContents.tsx
@@ -64,17 +64,15 @@ export function TableOfContents({
   let activeId = visibleIds[0] || lastVisibleId;
 
   return (
-    <div>
+    <div id="toc">
       <div
         css={mq({
           position: 'sticky',
           display: ['none', null, null, 'block'],
           boxSizing: 'border-box',
           overflowY: 'auto',
-          top: '1rem',
+          top: '2rem',
           WebkitOverflowScrolling: 'touch',
-
-          // [media.sm]: { display: 'block' },
         })}
       >
         <Type