docs: replace landing page (#1937)

latticexyz · Nov 14, 2023 · d5a2bcf · d5a2bcf
1 parent 5de7601
commit d5a2bcf
Show file tree

Hide file tree

Showing 39 changed files with 1,253 additions and 217 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,3 @@
 node_modules
 dist
-templates/phaser/packages/art
+templates/phaser/packages/art
diff --git a/docs/.vscode/settings.json b/docs/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -0,0 +1,38 @@
+import "tailwindcss/tailwind.css";
+
+import { Metadata } from "next";
+import { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import localFont from "next/font/local";
+
+const supplyMono = localFont({
+  src: "../public/fonts/PPSupplyMono-Regular.woff2",
+  preload: true,
+  variable: "--font-supply-mono",
+  fallback: [
+    "ui-monospace",
+    "SFMono-Regular",
+    "Menlo",
+    "Monaco",
+    "Consolas",
+    '"Liberation Mono"',
+    '"Courier New"',
+    "monospace",
+  ],
+});
+
+export const metadata: Metadata = {
+  title: "Redstone",
+  description: "A super low-cost chain for games and autonomous worlds.",
+  icons: "/icons/redstone.svg",
+};
+
+type Props = { children: ReactNode };
+
+export default function Layout({ children }: Props) {
+  return (
+    <html lang="en">
+      <body className={twMerge("bg-mud text-white", supplyMono.variable)}>{children}</body>
+    </html>
+  );
+}
diff --git a/docs/app/page.tsx b/docs/app/page.tsx
@@ -0,0 +1,236 @@
+import { LatticeIcon } from "../src/icons/LatticeIcon";
+import { Metadata } from "next";
+import Link from "next/link";
+import { twMerge } from "tailwind-merge";
+import { SourceIcon } from "../src/icons/SourceIcon";
+import { DocsIcon } from "../src/icons/DocsIcon";
+import { StatusIcon } from "../src/icons/StatusIcon";
+import { CalendarIcon } from "../src/icons/CalendarIcon";
+import { ContributeIcon } from "../src/icons/ContributeIcon";
+import { ChangelogIcon } from "../src/icons/ChangelogIcon";
+
+export const metadata: Metadata = {
+  title: "MUD",
+  description: "Battle-tested onchain framework for developers.",
+  icons: "/icons/redstone.svg",
+};
+
+export default async function HomePage() {
+  return (
+    <>
+      <div className="bg-mud">
+        <div
+          className={twMerge(
+            "min-h-screen flex flex-col animate-in animate-duration-500 fade-in",
+            "gap-12 p-8",
+            "sm:justify-between",
+            "md:gap-16 md:p-16"
+          )}
+        >
+          <div className="flex items-center justify-between">
+            <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"
+            >
+              <span>
+                Built by
+                <span className="hidden md:inline"> Lattice</span>
+              </span>
+              <LatticeIcon />
+            </a>
+          </div>
+          <div className={twMerge("grow flex flex-col md:flex-row-reverse", "gap-12", "md:gap-y-16")}>
+            <div className="grow md:grow-0 flex items-center md:items-end justify-center">
+              <img
+                src="/images/logos/mud-white.svg"
+                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]">
+                  Battle-tested onchain framework for developers.
+                </div>
+                <p className="max-w-lg text-xl md:text-2xl [text-wrap:balance]">
+                  MUD provides you with the tools to build ambitious onchain applications.
+                </p>
+              </div>
+              <div className="flex gap-4">
+                <Link
+                  href="/introduction"
+                  className="bg-white p-4 font-mono uppercase leading-none text-mud transition hover:bg-black hover:text-white"
+                >
+                  Documentation
+                </Link>
+                <a
+                  href="https://github.com/latticexyz/mud"
+                  className="hover: bg-white/20 p-4 font-mono uppercase leading-none transition hover:bg-black hover:text-white"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Source
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className={twMerge("bg-black flex flex-col", "gap-12 p-8", "md:gap-16 md:p-16")}>
+        <div className="space-y-6">
+          <div className="space-y-2">
+            <div className="font-mono uppercase text-2xl">Resources</div>
+            <p className="text-lg text-white/60">
+              Discover more about the open source framework powering complex games & apps on Ethereum.
+            </p>
+          </div>
+          <div className="grid md:grid-cols-2 gap-4">
+            <a
+              href="#"
+              // 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"
+            >
+              <SourceIcon />
+              Source code
+            </a>
+            <a
+              href="#"
+              // 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"
+            >
+              <ChangelogIcon />
+              Changelog
+            </a>
+            <a
+              href="#"
+              // 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"
+            >
+              <DocsIcon />
+              Documentation
+            </a>
+            <a
+              href="#"
+              // 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"
+            >
+              <ContributeIcon />
+              Contribute
+            </a>
+            <a
+              href="#"
+              // 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"
+            >
+              <StatusIcon />
+              Status
+            </a>
+            <a
+              href="#"
+              // 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"
+            >
+              <CalendarIcon />
+              Calendar
+            </a>
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          <div className="space-y-2">
+            <div className="font-mono uppercase text-2xl">Projects</div>
+            <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">
+                <span className="text-2xl leading-none">Sky Strife</span>
+                <span>An onchain strategy game</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/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">
+                <span className="text-2xl leading-none">OPCraft</span>
+                <span>Voxel crafting game on OP Stack</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/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">
+                <span className="text-2xl leading-none">Primodium</span>
+                <span>An onchain city-building game</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/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">
+                <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')" }}
+              />
+            </a>
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          <div className="space-y-2">
+            <div className="font-mono uppercase text-2xl">Find us</div>
+            <p className="text-lg text-white/60">Discover more MUD resources, and join our community online.</p>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <a
+              href="#"
+              // 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"
+            >
+              Magazine
+            </a>
+            <a
+              href="#"
+              // 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"
+            >
+              Discord
+            </a>
+            <a
+              href="#"
+              // 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"
+            >
+              Twitter
+            </a>
+            <a
+              href="#"
+              // 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"
+            >
+              YouTube
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/docs/components/CollapseCode.tsx b/docs/components/CollapseCode.tsx
@@ -6,13 +6,13 @@ type Props = {
 };
 
 export function CollapseCode({ children }: Props) {
-  const ref = useRef<HTMLDivElement>();
+  const ref = useRef<HTMLDivElement | null>(null);
   const [collapsed, setCollapsed] = useState(true);
 
   useEffect(() => {
     if (!ref.current) return;
     const lines = Array.from(ref.current.querySelectorAll(".line"));
-    const highlightedPositions = [];
+    const highlightedPositions: number[] = [];
     lines.forEach((line, i) => {
       if (line.matches(".highlighted")) {
         highlightedPositions.push(i);

diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.