Update site dependencies (#129)

* Make sandbox component SSR-safe

* Update dependencies

GIT_VALID_PII_OVERRIDE

* Add comment about dev bug in the editor component

* Move global styles to global CSS file

New versions of Next.js aren't working with <styled jsx global> well.
Instead of debugging, this commit moves those global styles to our
global.css file.

Also changes around some border colors in dark mode to reduce their
prominence.

Tested by poking around in dev mode and release mode.

* Revert docsearch/react change

Author: jil-stripe

components/Sandbox.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Controlled as CodeMirror } from 'react-codemirror2';
 import { useRouter } from 'next/router';
 import Markdoc from '@markdoc/markdoc';
 import { getSchema } from '@markdoc/next.js/runtime';
@@ -89,9 +88,14 @@ export function useMarkdocCode(code) {
   return { ast, content, config, errors };
 }
 
+// NOTE: In development mode, you may see two CodeMirror editors rendered, one
+// on top of another. I don't know why this happens, but it does not occur in
+// production builds. You can verify this by running `npm run build && npm run
+// start`.
 function EditorInternal({ code, onChange, options, errors, cursor }) {
   const ref = React.useRef();
   const [key, setKey] = React.useState(0);
+  const [CodeMirror, setCodeMirror] = React.useState(null);
 
   const codeMirrorOptions = React.useMemo(
     () => ({
@@ -149,14 +153,20 @@ function EditorInternal({ code, onChange, options, errors, cursor }) {
   }, [errors]);
 
   React.useEffect(() => {
+    const { Controlled } = require('react-codemirror2');
     require('codemirror/mode/markdown/markdown');
     require('codemirror/mode/javascript/javascript');
     require('codemirror/mode/xml/xml');
     require('codemirror/addon/selection/mark-selection');
     require('./codemirror/markdoc.js');
+    setCodeMirror(() => Controlled);
     setKey((k) => k + 1);
   }, []);
 
+  if (!CodeMirror) {
+    return null;
+  }
+
   return (
     <>
       <CodeMirror

components/Shell/Footer.js

@@ -139,7 +139,7 @@ export function Footer({ children: links, landing }) {
             display: block;
             width: 100%;
             border: none;
-            border-bottom: 1px solid var(--dark);
+            border-bottom: 1px solid var(--page-border);
           }
 
           .try-link {

components/Shell/TopNav.js

@@ -85,7 +85,7 @@ export function TopNav({ children }) {
             margin: 0 auto;
             align-items: center;
             justify-content: space-between;
-            border-bottom: 1px solid var(--dark);
+            border-bottom: 1px solid var(--page-border);
             padding: 1rem 2rem 1.1rem;
             font-size: 15px;
             font-family: var(--sans);