docs: scaffold for new documentation (#1721)

next-docs/.gitignore

@@ -0,0 +1,2 @@
+.next
+node_modules

next-docs/components/Aside.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+
+type Props = {
+  emoji?: string;
+  children: ReactNode;
+};
+
+export function Aside({ emoji, children }: Props) {
+  return (
+    <aside
+      style={{ padding: "1em", border: "2px dashed rgba(128, 128, 128, .3)", borderRadius: "1em", margin: "1em 0" }}
+    >
+      {emoji ? (
+        <div style={{ display: "grid", gridTemplateColumns: "max-content 1fr", gap: "0.75em" }}>
+          <div style={{ fontSize: "1.5em", marginLeft: "-.25em" }}>{emoji}</div>
+          <div>{children}</div>
+        </div>
+      ) : (
+        <>{children}</>
+      )}
+    </aside>
+  );
+}

next-docs/components/Card.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { useState } from "react";
+
+const Card = ({ title, text, iconSVG }) => {
+  const [hover, setHover] = useState(false);
+
+  const styles = {
+    cardBackground: {
+      display: "flex",
+      padding: "16px",
+      alignItems: "center",
+      gap: "12px",
+      flex: "1 0 0",
+      borderRadius: "4px",
+      border: "1px solid rgba(0, 0, 0, 0.08)",
+      transition: "background-color 0.3s, color 0.3s",
+      backgroundColor: hover ? "#F2F0EE" : "#FAFAF9",
+    },
+    cardContent: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: "4px",
+      flex: "1 0 0",
+    },
+    icon: {
+      display: "flex",
+      padding: "4px",
+      alignItems: "center",
+    },
+    header: {
+      color: "#000",
+      fontSize: "18px",
+      fontStyle: "normal",
+      fontWeight: "600",
+      lineHeight: "24px",
+    },
+    text: {
+      color: "rgba(0, 0, 0, 0.70)",
+      fontSize: "15px",
+      fontStyle: "normal",
+      fontWeight: "400",
+      lineHeight: "20px",
+    },
+  } as const;
+
+  return (
+    <div style={styles.cardBackground} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
+      <div style={styles.icon}>{iconSVG}</div>
+
+      <div style={styles.cardContent}>
+        <div style={styles.header}>{title}</div>
+        <div style={styles.text}>{text}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;

next-docs/components/CardGrid.module.css

@@ -0,0 +1,12 @@
+/* CardGrid.css */
+
+.cardGrid {
+  display: grid;
+  gap: 16px;
+}
+
+@media (min-width: 1024px) {
+  .cardGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

next-docs/components/CardGrid.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./CardGrid.module.css"; // Import the CSS module
+
+const CardGrid = ({ children }) => {
+  return <div className={styles.cardGrid}>{children}</div>;
+};
+
+export default CardGrid;

next-docs/components/CollapseCode.module.css

@@ -0,0 +1,36 @@
+/* Show zoom cursor if we have collapsible lines */
+.collapsed:has(:global(.line[data-highlight-distance="4"])) {
+  cursor: zoom-in;
+}
+.expanded:has(:global(.line[data-highlight-distance="4"])) {
+  cursor: zoom-out;
+}
+
+/* Hide any lines that are 4+ lines away from a highlighted one */
+.collapsed :global(.line[data-highlight-distance="4"]) {
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+/* Add a border between the lines hidden above */
+.collapsed
+  :global(
+    .line[data-highlight-distance="3"] ~ .line[data-highlight-distance="4"] + .line[data-highlight-distance="3"]
+  ) {
+  border-top: 1px dashed rgba(107, 114, 128, 0.5);
+  margin-top: 0.5ex;
+  padding-top: 0.5ex;
+}
+
+/* Fade out lines based on distance, but fade in on hover */
+.collapsed :global(.line[data-highlight-distance="3"]),
+.collapsed :global(.line[data-highlight-distance="2"]) {
+  transition: opacity 0.2s ease-in-out;
+}
+.collapsed:not(:hover) :global(.line[data-highlight-distance="3"]) {
+  opacity: 0.3;
+}
+.collapsed:not(:hover) :global(.line[data-highlight-distance="2"]) {
+  opacity: 0.6;
+}

next-docs/components/CollapseCode.tsx

@@ -0,0 +1,45 @@
+import { ReactNode, useRef, useEffect, useState } from "react";
+import styles from "./CollapseCode.module.css";
+
+type Props = {
+  children: ReactNode;
+};
+
+export function CollapseCode({ children }: Props) {
+  const ref = useRef<HTMLDivElement>();
+  const [collapsed, setCollapsed] = useState(true);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const lines = Array.from(ref.current.querySelectorAll(".line"));
+    const highlightedPositions = [];
+    lines.forEach((line, i) => {
+      if (line.matches(".highlighted")) {
+        highlightedPositions.push(i);
+      }
+      if (/^\s+$/g.test(line.innerHTML)) {
+        line.setAttribute("data-empty", "");
+      }
+    });
+    if (!highlightedPositions.length) return;
+    lines.forEach((line, i) => {
+      const distance = highlightedPositions.reduce((min, pos) => Math.min(min, Math.abs(pos - i)), Infinity);
+      line.setAttribute("data-highlight-distance", Math.min(distance, 4).toString());
+    });
+  }, [collapsed]);
+
+  return (
+    <div
+      ref={ref}
+      style={{ marginTop: "1.5rem" }}
+      className={collapsed ? styles.collapsed : styles.expanded}
+      onClick={(event) => {
+        if (event.target instanceof Element && event.target.closest(".line")) {
+          setCollapsed(!collapsed);
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+}

next-docs/components/Logo.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Logo() {
+  return <img src="/mud-cover-photo.png" alt="MUD logo" />;
+}

next-docs/components/NavLogo.tsx

@@ -0,0 +1,16 @@
+import { useTheme } from "nextra-theme-docs";
+
+export default function NavLogo() {
+  const { resolvedTheme } = useTheme();
+  return (
+    <div style={{ display: "grid", gridAutoFlow: "column", alignItems: "center" }}>
+      {/* TODO: figure out how to size Logo and use that here instead */}
+      <img
+        src={resolvedTheme === "light" ? "/logo512-black.png" : "/logo512-white.png"}
+        style={{ height: "calc(var(--nextra-navbar-height) - 25px)" }}
+        alt="MUD logo"
+      />
+      <p style={{ fontWeight: "bold", fontSize: "25px", marginTop: "6px", paddingLeft: "4px" }}>MUD</p>
+    </div>
+  );
+}

next-docs/components/Splash.module.css

@@ -0,0 +1,91 @@
+.splashOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(10px);
+}
+
+.splashContent {
+  background: #715845;
+  color: white;
+  padding: 20px;
+  max-width: 80vw;
+  max-height: 80vh;
+  overflow: auto;
+  position: relative;
+}
+
+.splashClose {
+  position: absolute;
+  top: 0px;
+  right: 10px;
+  border: none;
+  background: transparent;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+.content {
+  text-align: center;
+}
+
+.logo {
+  width: 200px;
+  margin: 0 auto;
+}
+
+.date {
+  margin-top: 10px;
+  font-size: 15px;
+  color: white;
+}
+
+.title {
+  font-size: 20px;
+  color: white;
+  font-weight: bold;
+}
+
+.signupButton {
+  display: inline-block;
+  color: white;
+  background-color: #7d7373;
+  border: none;
+  border-radius: 0;
+  padding: 5px 70px;
+  margin-top: 20px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.separator {
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  margin: 20px 0;
+  margin-top: 25px;
+}
+
+.info {
+  font-size: 15px;
+  color: white;
+  display: flex;
+  align-items: center;
+  padding: 0px 20px;
+  text-align: left;
+}
+
+.info span {
+  margin-right: 10px;
+  font-size: 25px;
+}
+
+.info a {
+  color: white;
+  text-decoration: underline;
+}

next-docs/components/WarningBox.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+const WarningBox = ({ title, message }) => {
+  const styles = {
+    container: {
+      backgroundColor: "#FDF2F3",
+      borderRadius: "4px",
+      border: "1px solid #E8D9DA",
+      padding: "12px 20px",
+      margin: "16px 0",
+      color: "#7D221C",
+    },
+    header: {
+      display: "flex",
+      alignItems: "center",
+      fontSize: "1rem",
+      fontWeight: "bold",
+      lineHeight: "1.43",
+    },
+    icon: {
+      marginRight: "12px",
+      fontSize: "22px",
+    },
+    message: {
+      fontSize: "1rem",
+      fontWeight: "400",
+      lineHeight: "1.43",
+      paddingLeft: "34px",
+      color: "#995A56",
+    },
+  };
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <span style={styles.icon}>⚠</span>
+        {title}
+      </div>
+      <div style={styles.message}>{message}</div>
+    </div>
+  );
+};
+
+export default WarningBox;

next-docs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next-docs/next.config.js

@@ -0,0 +1,8 @@
+import nextra from "nextra";
+
+const withNextra = nextra({
+  theme: "nextra-theme-docs",
+  themeConfig: "./theme.config.tsx",
+});
+
+export default withNextra();

next-docs/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "docs",
+  "version": "1.0.0",
+  "private": true,
+  "description": "mud.dev docs",
+  "license": "",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^13.3.0",
+    "nextra": "^2.10.0",
+    "nextra-theme-docs": "^2.10.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.11.10",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "5.1.6"
+  }
+}