docs: various tweaks/fixes (latticexyz#1938)

docs/app/layout.tsx

@@ -22,9 +22,9 @@ const supplyMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Redstone",
-  description: "A super low-cost chain for games and autonomous worlds.",
-  icons: "/icons/redstone.svg",
+  title: "MUD",
+  description: "Battle-tested onchain framework for developers.",
+  icons: "/images/logos/circle/mud.svg",
 };
 
 type Props = { children: ReactNode };

docs/app/page.tsx

@@ -12,7 +12,7 @@ import { ChangelogIcon } from "../src/icons/ChangelogIcon";
 export const metadata: Metadata = {
   title: "MUD",
   description: "Battle-tested onchain framework for developers.",
-  icons: "/icons/redstone.svg",
+  icons: "/images/logos/circle/mud.svg",
 };
 
 export default async function HomePage() {
@@ -31,7 +31,7 @@ export default async function HomePage() {
             <div className="font-mono text-3xl uppercase sm:text-4xl">MUD</div>
             <a
               href="https://lattice.xyz"
-              className="shrink-0 flex md:flex-row-reverse items-center gap-3 p-4 -m-4 font-mono md:text-lg uppercase leading-none transition hover:bg-white hover:text-mud"
+              className="shrink-0 flex md:flex-row-reverse items-center gap-3 p-3 -m-3 font-mono md:text-lg uppercase leading-none transition hover:bg-white hover:text-mud"
             >
               <span>
                 Built by
@@ -47,14 +47,6 @@ export default async function HomePage() {
                 className="aspect-square max-w-none w-[12rem] sm:w-[16rem] md:w-[14rem] lg:w-[18rem]"
               />
             </div>
-            {/* <Logo className="self-center my-auto w-full h-full max-w-[16rem]" /> */}
-            {/* <div className="grow"> */}
-            {/* <svg className=""></svg> */}
-            {/* <div className="w-full h-full"></div> */}
-            {/* logo */}
-            {/* <div className="block object-contain">hello</div> */}
-            {/* <Logo className="-my-0 w-auto h-auto" preserveAspectRatio="none" /> */}
-            {/* </div> */}
             <div className="space-y-8 md:grow md:self-end">
               <div className="space-y-4">
                 <div className="max-w-2xl font-mono text-3xl sm:text-3xl md:text-4xl lg:text-5xl uppercase [text-wrap:balance]">
@@ -95,52 +87,60 @@ export default async function HomePage() {
           </div>
           <div className="grid md:grid-cols-2 gap-4">
             <a
-              href="#"
+              href="https://github.com/latticexyz/mud"
+              target="_blank"
+              rel="noopener noreferrer"
               // eslint-disable-next-line max-len
-              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-white hover:text-black hover:border-white"
+              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-mud hover:border-transparent"
             >
               <SourceIcon />
               Source code
             </a>
-            <a
-              href="#"
+            <Link
+              href="/changelog"
               // eslint-disable-next-line max-len
-              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-white hover:text-black hover:border-white"
+              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-mud hover:border-transparent"
             >
               <ChangelogIcon />
               Changelog
-            </a>
-            <a
-              href="#"
+            </Link>
+            <Link
+              href="/introduction"
               // eslint-disable-next-line max-len
-              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-white hover:text-black hover:border-white"
+              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-mud hover:border-transparent"
             >
               <DocsIcon />
               Documentation
-            </a>
+            </Link>
             <a
-              href="#"
+              href="https://contribute.mud.dev/"
+              target="_blank"
+              rel="noopener noreferrer"
               // eslint-disable-next-line max-len
-              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-white hover:text-black hover:border-white"
+              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-mud hover:border-transparent"
             >
               <ContributeIcon />
               Contribute
             </a>
             <a
-              href="#"
+              href="https://status.mud.dev/"
+              target="_blank"
+              rel="noopener noreferrer"
               // eslint-disable-next-line max-len
-              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-white hover:text-black hover:border-white"
+              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-mud hover:border-transparent"
             >
               <StatusIcon />
               Status
             </a>
             <a
-              href="#"
+              href="https://roadmap.mud.dev/"
+              target="_blank"
+              rel="noopener noreferrer"
               // eslint-disable-next-line max-len
-              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-white hover:text-black hover:border-white"
+              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-mud hover:border-transparent"
             >
               <CalendarIcon />
-              Calendar
+              Roadmap
             </a>
           </div>
         </div>
@@ -151,8 +151,16 @@ export default async function HomePage() {
             <p className="text-lg text-white/60">Start using a wide ecosystem of projects powered by MUD.</p>
           </div>
           <div className="grid md:grid-cols-2 gap-4">
-            <a href="#" className="group border border-white/20 grid overflow-hidden">
-              <span className="z-10 row-start-1 col-start-1 flex flex-col gap-4 p-12 font-mono uppercase leading-none">
+            <a
+              href="https://skystrife.xyz/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group border border-white/20 grid overflow-hidden"
+            >
+              <span
+                className="z-10 row-start-1 col-start-1 flex flex-col gap-4 p-12 font-mono uppercase leading-none"
+                style={{ textShadow: "0 3px 6px #000" }}
+              >
                 <span className="text-2xl leading-none">Sky Strife</span>
                 <span>An onchain strategy game</span>
               </span>
@@ -161,8 +169,16 @@ export default async function HomePage() {
                 style={{ backgroundImage: "url('/images/projects/sky-strife.png')" }}
               />
             </a>
-            <a href="#" className="group border border-white/20 grid overflow-hidden">
-              <span className="z-10 row-start-1 col-start-1 flex flex-col gap-4 p-12 font-mono uppercase leading-none">
+            <a
+              href="https://craft.mud.dev/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group border border-white/20 grid overflow-hidden"
+            >
+              <span
+                className="z-10 row-start-1 col-start-1 flex flex-col gap-4 p-12 font-mono uppercase leading-none"
+                style={{ textShadow: "0 3px 6px #000" }}
+              >
                 <span className="text-2xl leading-none">OPCraft</span>
                 <span>Voxel crafting game on OP Stack</span>
               </span>
@@ -171,8 +187,16 @@ export default async function HomePage() {
                 style={{ backgroundImage: "url('/images/projects/opcraft.png')" }}
               />
             </a>
-            <a href="#" className="group border border-white/20 grid overflow-hidden">
-              <span className="z-10 row-start-1 col-start-1 flex flex-col gap-4 p-12 font-mono uppercase leading-none">
+            <a
+              href="https://www.primodium.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group border border-white/20 grid overflow-hidden"
+            >
+              <span
+                className="z-10 row-start-1 col-start-1 flex flex-col gap-4 p-12 font-mono uppercase leading-none"
+                style={{ textShadow: "0 3px 6px #000" }}
+              >
                 <span className="text-2xl leading-none">Primodium</span>
                 <span>An onchain city-building game</span>
               </span>
@@ -181,14 +205,22 @@ export default async function HomePage() {
                 style={{ backgroundImage: "url('/images/projects/primodium.png')" }}
               />
             </a>
-            <a href="#" className="group border border-white/20 grid overflow-hidden">
-              <span className="z-10 row-start-1 col-start-1 flex flex-col gap-4 p-12 font-mono uppercase leading-none">
+            <a
+              href="https://www.words3.xyz/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group border border-white/20 grid overflow-hidden"
+            >
+              <span
+                className="z-10 row-start-1 col-start-1 flex flex-col gap-4 p-12 font-mono uppercase leading-none"
+                style={{ textShadow: "0 3px 6px #000" }}
+              >
                 <span className="text-2xl leading-none">Words3</span>
                 <span>Onchain scrabble</span>
               </span>
               <span
                 className="row-start-1 col-start-1 bg-cover bg-center grayscale opacity-30 transition group-hover:grayscale-0 group-hover:opacity-50 group-hover:scale-105"
-                style={{ backgroundImage: "url('/images/projects/kamigotchi.png')" }}
+                style={{ backgroundImage: "url('/images/projects/words3.png')" }}
               />
             </a>
           </div>
@@ -201,30 +233,36 @@ export default async function HomePage() {
           </div>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
             <a
-              href="#"
+              href="https://world.mirror.xyz/"
               // eslint-disable-next-line max-len
-              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-white hover:text-black hover:border-white"
+              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-mud hover:border-transparent"
             >
               Magazine
             </a>
             <a
-              href="#"
+              href="https://discord.lattice.xyz/"
+              target="_blank"
+              rel="noopener noreferrer"
               // eslint-disable-next-line max-len
-              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-white hover:text-black hover:border-white"
+              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-mud hover:border-transparent"
             >
               Discord
             </a>
             <a
-              href="#"
+              href="https://twitter.com/latticexyz"
+              target="_blank"
+              rel="noopener noreferrer"
               // eslint-disable-next-line max-len
-              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-white hover:text-black hover:border-white"
+              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-mud hover:border-transparent"
             >
               Twitter
             </a>
             <a
-              href="#"
+              href="https://www.youtube.com/@latticexyz"
+              target="_blank"
+              rel="noopener noreferrer"
               // eslint-disable-next-line max-len
-              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-white hover:text-black hover:border-white"
+              className="flex items-center gap-4 bg-white/10 border border-white/20 p-6 font-mono uppercase text-lg leading-none transition hover:bg-mud hover:border-transparent"
             >
               YouTube
             </a>

docs/components/NavLogo.tsx

@@ -1,15 +1,22 @@
-import { useTheme } from "nextra-theme-docs";
-
 export default function NavLogo() {
-  const { resolvedTheme } = useTheme();
   return (
-    <div style={{ display: "grid", gridAutoFlow: "column", alignItems: "center" }}>
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "0.25em",
+        fontSize: "32px",
+        fontFamily: "PP Supply Mono",
+        textTransform: "uppercase",
+      }}
+    >
       {/* TODO: figure out how to size Logo and use that here instead */}
       <img
-        src={resolvedTheme === "light" ? "/logo512-black.svg" : "/logo512-white.svg"}
+        src="/images/logos/mud-white.svg"
         style={{ height: "calc(var(--nextra-navbar-height) - 35px)" }}
         alt="MUD logo"
       />
+      MUD
     </div>
   );
 }

docs/pages/_document.tsx

@@ -0,0 +1,16 @@
+import { Head, Html, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link rel="apple-touch-icon" href="/images/logos/circle/mud.svg" />
+        <link rel="shortcut icon" type="image/svg" href="/images/logos/circle/mud.svg" />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

docs/pages/_meta.js

@@ -15,7 +15,7 @@ export default {
     type: "separator",
   },
   cli: "CLI",
-  "state-synchronization": "State Sync",
+  "state-sync": "State Sync",
   "state-query": "State Query",
   services: "Services",
   plugins: "Plugins",