refactor(docs): migrate to Nextra (latticexyz#635)

.prettierignore

@@ -1,2 +1,3 @@
 dist
 **/types/ethers-contracts
+**/.next

README.md

@@ -34,7 +34,7 @@ MUD is MIT-licensed, open source and free to use.
 
 ## Features
 
-![MUD features](./public/docs/features.png)
+![MUD features](./docs/public/features.png)
 
 ### Today
 
@@ -60,7 +60,7 @@ MUD is MIT-licensed, open source and free to use.
 pnpm create mud my-project
 ```
 
-![Scaffolding a new project with the MUD CLI.](./public/docs/mud-create.gif)
+![Scaffolding a new project with the MUD CLI.](./docs/public/mud-create.gif)
 
 ## Packages
 

docs/.gitignore

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

docs/components/Logo.tsx

@@ -0,0 +1,9 @@
+export default function Logo() {
+  // TODO: switch between dark and light logo depending on color theme
+  return (
+    <div style={{ display: "grid", gridAutoFlow: "column", alignItems: "center" }}>
+      <img src="/logo512.png" style={{ height: "calc(var(--nextra-navbar-height) - 25px)" }} />
+      <p style={{ fontWeight: "bold", fontSize: "25px", marginTop: "6px", paddingLeft: "4px" }}>MUD</p>
+    </div>
+  );
+}

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.

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();

docs/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "docs",
+  "version": "1.0.0",
+  "description": "mud.dev docs",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "start": "next start",
+    "build": "next build",
+    "build:prepare": "rm -rf pages/packages && mkdir pages/packages && for PKG in solecs network recs react services; do mv ../packages/$PKG/API ./pages/packages/$PKG; done"
+  },
+  "private": "true",
+  "license": "",
+  "dependencies": {
+    "next": "^13.3.0",
+    "nextra": "^2.4.0",
+    "nextra-theme-docs": "^2.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

docs/pages/_meta.js

@@ -0,0 +1,18 @@
+export default {
+  index: "MUD",
+  guides: "Guides",
+  tutorials: "Tutorials",
+  packages: "Packages",
+  community: {
+    title: "Community",
+    type: "page",
+    href: "https://community.mud.dev",
+    newWindow: true,
+  },
+  twitter: {
+    title: "Twitter",
+    type: "page",
+    href: "https://twitter.com/latticexyz",
+    newWindow: true,
+  },
+};

docs/pages/guides/_meta.js

@@ -0,0 +1,6 @@
+export default {
+  introduction: "Introduction",
+  getting_started: "Getting started",
+  deployment: "Deployment",
+  advanced: "Advanced",
+};

guides/deployment.md → docs/pages/guides/deployment.md

@@ -1,7 +1,3 @@
----
-order: 5
----
-
 # Deployment
 
 You can use the MUD CLI to deploy your MUD app to any EVM compatible chain. Just run the following command from your contracts' project directory:

guides/getting_started.md → docs/pages/guides/getting_started.md

@@ -1,7 +1,3 @@
----
-order: 10
----
-
 # Getting started
 
 ## Quickstart
@@ -33,7 +29,7 @@ Next, run `yarn dev` in the root directory of your new project to start the deve
 yarn dev
 ```
 
-![Starting a new MUD project with the MUD cli](../public/docs/mud-create.gif)
+![Starting a new MUD project with the MUD cli](/mud-create.gif)
 
 The minimal MUD project template is organized as a yarn monorepo.
 You can find the contract code in `packages/contracts` and then minimal client setup in `packages/client`.
@@ -194,7 +190,3 @@ For more information about anvil, head over to the [anvil documentation](https:/
 
 To deploy the contracts to the local node, run `yarn dev` from the root of the contracts directory (which calls `mud deploy-contracts --dev --watch` under the hood).
 After deploying, it will set up a watcher to detect file changes in system files or libraries and automatically redeploy impacted systems.
-
-## Client
-
-## Demo

guides/introduction.md → docs/pages/guides/introduction.md

@@ -1,7 +1,3 @@
----
-order: 20
----
-
 # Introduction
 
 MUD is a framework for Ethereum applications. At its core are a set of contract interfaces and conventions for using them. These core interfaces and libraries enable a broad set of peripheral tools, integrations, and libraries, to make the development of on-chain applications more streamlined.

docs/pages/index.mdx

@@ -0,0 +1,124 @@
+# MUD
+
+<div align="center">
+  <img src="/logo512.png" width="200" style={{ marginBottom: "30px" }} alt="MUD logo" />
+  <p>MUD - Engine for Autonomous Worlds</p>
+</div>
+
+MUD is a framework for complex Ethereum applications.
+
+It adds some conventions for organizing data and logic and abstracts away low-level complexities so you can focus on the features of your app.
+
+It standardizes the way data is stored on-chain.
+With this standard data model, MUD can provide all network code to synchronize contract and client state. This includes synchronizing state directly from an RPC node or a general-purpose MUD indexer.
+
+MUD is MIT-licensed, open source and free to use.
+
+## Features
+
+![MUD features](/features.png)
+
+### Today
+
+- State synchronization between contracts and clients without custom networking code
+- General purpose indexers (without custom indexing code)
+- Seamless contract upgrades (+ automatic contract upgrades during development)
+- Shared contract state
+- Optimistic updates
+- Automatic type generation for contracts and systems
+- Query language to interact with contract state
+- Data explorer to inspect and modify contract and local state
+- Bitpacking utilities
+
+### Soon
+
+- Local simulation of transactions (including optimistic state)
+- Built-in support for account abstraction
+- Contract package manager
+
+## Quickstart
+
+```
+pnpm create mud my-project
+```
+
+![Scaffolding a new project with the MUD CLI.](/mud-create.gif)
+
+## Packages
+
+MUD consists of several libraries. They can be used independently, but are best used together.
+
+| Package                                                                                                                   | Version                                                                                                                               |
+| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| **[@latticexyz/solecs](/packages/solecs)** <br />Solidity Entity Component System library                                 | [![npm version](https://img.shields.io/npm/v/@latticexyz/solecs.svg)](https://www.npmjs.org/package/@latticexyz/solecs)               |
+| **[@latticexyz/network](/packages/network)** <br />TypeScript networking library for automatic contract/client state sync | [![npm version](https://img.shields.io/npm/v/@latticexyz/network.svg)](https://www.npmjs.org/package/@latticexyz/network)             |
+| **[@latticexyz/recs](/packages/recs)** <br />TypeScript Reactive Entity Component System library                          | [![npm version](https://img.shields.io/npm/v/@latticexyz/recs.svg)](https://www.npmjs.org/package/@latticexyz/recs)                   |
+| **[@latticexyz/services](/packages/services)** <br />Go services for indexer, faucet, message relay                       | [![npm version](https://img.shields.io/npm/v/@latticexyz/services.svg)](https://www.npmjs.org/package/@latticexyz/services)           |
+| **[@latticexyz/cli](/packages/cli)** <br />Command line interface for types, testing, faucet, deployment and more         | [![npm version](https://img.shields.io/npm/v/@latticexyz/cli.svg)](https://www.npmjs.org/package/@latticexyz/cli)                     |
+| **[@latticexyz/std-contracts](/packages/std-contracts)** <br />Solidity standard library                                  | [![npm version](https://img.shields.io/npm/v/@latticexyz/std-contracts.svg)](https://www.npmjs.org/package/@latticexyz/std-contracts) |
+| **[@latticexyz/std-client](/packages/std-client)** <br />Typescript standard library                                      | [![npm version](https://img.shields.io/npm/v/@latticexyz/std-client.svg)](https://www.npmjs.org/package/@latticexyz/std-client)       |
+| **[@latticexyz/noise](/packages/noise)** <br />Solidity and AssemblyScript implementations of Perlin noise                | [![npm version](https://img.shields.io/npm/v/@latticexyz/noise.svg)](https://www.npmjs.org/package/@latticexyz/noise)                 |
+
+## Contribute
+
+We'd love your support in improving MUD! This monorepo includes all of MUD's source code, and pull requests are always welcome. To discuss new features or changes [join our Discord](https://lattice.xyz/discord).
+
+### Local development setup
+
+!!!
+The following steps are only necessary if you want to contribute to MUD. To use MUD in your project, install the [packages](#packages) from npm or [set up a new project with the MUD cli](#quickstart).
+!!!
+
+1. Install go (required to build [packages/services](packages/services/)): [https://go.dev/doc/install](https://go.dev/doc/install)
+
+2. Install the foundry toolkit (required to build and test MUD solidity packages): [https://getfoundry.sh/](https://getfoundry.sh/)
+
+3. Install pnpm
+
+```bash
+npm install pnpm --global
+```
+
+4. Clone the MUD monorepo
+
+```
+git clone https://github.com/latticexyz/mud
+```
+
+5. Install MUD dependencies and setup local environment
+
+```
+cd mud && pnpm install
+```
+
+### Pull requests
+
+MUD follows the [conventional commit specification](https://www.conventionalcommits.org/en/v1.0.0/) for commit messages and PR titles. Please keep the scope of your PR small (rather open multiple small PRs than one huge PR) and follow the conventional commit spec.
+
+## Library
+
+<iframe
+  src="https://www.youtube-nocookie.com/embed/j-_Zf8o5Wlo"
+  title="YouTube video player"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  allowFullScreen
+  style={{ width: "100%", maxWidth: "1000px", height: "400px", marginBottom: "50px" }}
+></iframe>
+
+<iframe
+  src="https://www.youtube-nocookie.com/embed/mv3jA4USZtg"
+  title="YouTube video player"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  allowFullScreen
+  style={{ width: "100%", maxWidth: "1000px", height: "400px" }}
+></iframe>
+
+## Community support
+
+[Join our Discord](https://lattice.xyz/discord) to get support and connect with the community!
+
+## License
+
+MUD is open-source software [licensed as MIT](LICENSE).