(docs-infra-5) Rest of docs scaffolding

Summary: This diff introduces the most of the rest of the scaffolding for the new site, including versioning, MDX rendering, sidebar logic, and design.

Test Plan: unit

Reviewers: yuhan

Reviewed By: yuhan

Differential Revision: https://dagster.phacility.com/D6176

docs/Makefile

@@ -1,2 +1,6 @@
 build:
-	cd sphinx; make clean; make json; cd ..; python pack_json.py
+	cd sphinx; make clean; make json; cd ..; python pack_json.py
+
+update_version:
+	echo "Saving version $(version)"
+	python update_version.py --version $(version)

docs/next/components/Icons.tsx

@@ -0,0 +1,58 @@
+const BookOpenIcon = (
+  <path
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+  />
+);
+
+const MenuIcon = (
+  <path
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    d="M4 6h16M4 10h16M4 14h16M4 18h16"
+  />
+);
+
+const AcademicCapIcon = (
+  <>
+    <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
+    <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+    ></path>
+  </>
+);
+
+const CodeIcon = (
+  <path
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+  ></path>
+);
+
+const CloudUploadIcon = (
+  <path
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+  ></path>
+);
+
+const Icons = {
+  BookOpen: BookOpenIcon,
+  Menu: MenuIcon,
+  AcademicCap: AcademicCapIcon,
+  Code: CodeIcon,
+  CloudUpload: CloudUploadIcon,
+};
+
+export default Icons;

docs/next/components/MDXComponents.tsx

@@ -0,0 +1,52 @@
+// This file contains components used by MDX files. It is important to be careful when changing these,
+// because these components need to be backwards compatible. If you need to udpate a component with a
+// breaking change, rename the existing component across the codebase and save a copy.
+
+// For example, if you need to update `PyObject`, rename the existing component to `PyObjectLegacy`
+// and update all existing usage of it
+
+import { useState } from "react";
+
+const ExampleComponent = () => {
+  return <span className="text-red-400 font-bold">Hello!</span>;
+};
+
+const AlertComponent = ({ children }) => {
+  return <div className="flex bg-yellow-200 items-center">{children}</div>;
+};
+
+const PyObject = ({ object, displayText }) => {
+  return (
+    <a className="no-underline hover:underline" href="#">
+      <code className="bg-blue-100 p-1">{displayText || object}</code>
+    </a>
+  );
+};
+
+const Counter = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="flex items-center space-x-4">
+      <div>{count}</div>
+      <div>
+        <button
+          className="p-4 bg-green-100"
+          onClick={() => setCount(count + 1)}
+        >
+          +
+        </button>
+        <button className="p-4 bg-red-100" onClick={() => setCount(count - 1)}>
+          -
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  ExampleComponent,
+  AlertComponent,
+  PyObject,
+  Counter,
+};

docs/next/components/Pagination.tsx

@@ -0,0 +1,83 @@
+import { useRouter } from "next/router";
+import React from "react";
+import navigation from "../content/_navigation.json";
+import VersionedLink from "./VersionedLink";
+
+function flatten(yx: any) {
+  const xs = JSON.parse(JSON.stringify(yx));
+
+  return xs.reduce((acc: any, x: any) => {
+    acc = acc.concat(x);
+    if (x.children) {
+      acc = acc.concat(flatten(x.children));
+      x.children = [];
+    }
+    return acc;
+  }, []);
+}
+
+const flattenedNavigation = flatten(navigation).filter(
+  (n: { path: any }) => n.path
+);
+
+const Pagination = () => {
+  const { asPath } = useRouter();
+  const currentIndex = flattenedNavigation.findIndex(
+    (n: { path: string }) => n.path === asPath
+  );
+  const prev = flattenedNavigation[currentIndex - 1];
+  const next = flattenedNavigation[currentIndex + 1];
+
+  return (
+    <nav className="mt-12 border-t border-gray-200 px-4 flex items-center justify-between sm:px-0">
+      <div className="-mt-px w-0 flex-1 flex">
+        {prev && (
+          <VersionedLink href={prev.path}>
+            <a className="border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
+              {/* Heroicon name: arrow-narrow-left */}
+              <svg
+                className="mr-3 h-5 w-5 text-gray-400"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              {prev.title}
+            </a>
+          </VersionedLink>
+        )}
+      </div>
+      <div className="-mt-px w-0 flex-1 flex justify-end">
+        {next && (
+          <VersionedLink href={next.path}>
+            <a className="border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
+              {next.title}
+              {/* Heroicon name: arrow-narrow-right */}
+              <svg
+                className="ml-3 h-5 w-5 text-gray-400"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </a>
+          </VersionedLink>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Pagination;