docs: redesign

docs/app/DevconBanner.tsx

@@ -3,7 +3,7 @@
 export function DevconBanner() {
   if (Date.now() > 1731603600000) return null;
   return (
-    <div className="bg-black/20 text-white p-4 text-center">
+    <div className="bg-mud/20 text-white p-4 text-center">
       Hello Devcon! Come learn about MUD at{" "}
       <a href="https://mud.dev/day" className="underline font-semibold">
         MUD Day

docs/app/api/contributors/getContributors.ts

@@ -0,0 +1,17 @@
+import { headers } from "next/headers";
+
+export async function getContributors() {
+  const headersList = headers();
+  const host = headersList.get("host") || "";
+  const protocol = headersList.get("x-forwarded-proto") || "http";
+  const baseUrl = `${protocol}://${host}`;
+
+  try {
+    const response = await fetch(`${baseUrl}/api/contributors`);
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+}

docs/app/api/contributors/route.ts

@@ -0,0 +1,44 @@
+import { Octokit } from "octokit";
+
+const octokit = new Octokit();
+
+export async function GET() {
+  try {
+    const response = await octokit.request("GET /repos/{owner}/{repo}/contributors", {
+      owner: "latticexyz",
+      repo: "mud",
+    });
+
+    const allContributors = response.data;
+    if (!Array.isArray(allContributors)) {
+      return Response.json({
+        count: 0,
+        contributors: [],
+      });
+    }
+
+    const userContributors = allContributors
+      ?.filter((contributor: { type: string }) => contributor.type === "User")
+      .map((contributor) => {
+        const weightedContributions = Math.log(contributor.contributions + 1) * 10;
+        const index = Math.random() * weightedContributions;
+        const score = weightedContributions - index;
+        return {
+          ...contributor,
+          score,
+        };
+      })
+      .sort((a, b) => b.score - a.score);
+
+    return Response.json({
+      count: userContributors.length,
+      contributors: userContributors?.slice(0, 7),
+    });
+  } catch (error) {
+    console.error(error);
+    return Response.json({
+      count: 0,
+      contributors: [],
+    });
+  }
+}

docs/app/api/stargazers/getStargazers.ts

@@ -0,0 +1,17 @@
+import { headers } from "next/headers";
+
+export async function getStargazers() {
+  const headersList = headers();
+  const host = headersList.get("host") || "";
+  const protocol = headersList.get("x-forwarded-proto") || "http";
+  const baseUrl = `${protocol}://${host}`;
+
+  try {
+    const response = await fetch(`${baseUrl}/api/stargazers`);
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error(error);
+    return 0;
+  }
+}

docs/app/api/stargazers/route.ts

@@ -0,0 +1,19 @@
+import { Octokit } from "octokit";
+
+const octokit = new Octokit();
+
+export async function GET() {
+  try {
+    const {
+      data: { stargazers_count: totalStars },
+    } = await octokit.request("GET /repos/{owner}/{repo}", {
+      owner: "latticexyz",
+      repo: "mud",
+    });
+
+    return Response.json(totalStars);
+  } catch (error) {
+    console.error(error);
+    return Response.json(0);
+  }
+}

docs/app/globals.css

@@ -0,0 +1,88 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+body::-webkit-scrollbar,
+div::-webkit-scrollbar,
+pre::-webkit-scrollbar {
+  display: none;
+}
+
+body,
+div,
+pre {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+html {
+  background-color: black;
+}
+
+pre {
+  font-size: 0.5;
+  background-color: #222;
+  border-color: #222;
+  border-width: 1rem;
+  border-radius: 0.4rem;
+  overflow-x: scroll;
+  margin-bottom: 18px;
+}
+
+summary {
+  margin-bottom: 16px;
+}
+
+summary > p {
+  display: inline;
+}
+
+/* Substack subscribe widget */
+#custom-substack-embed {
+  max-width: 530px !important;
+  flex-direction: column !important;
+}
+
+#custom-substack-embed p {
+  position: absolute !important;
+  max-width: 530px !important;
+  font-family: var(--font-supply-mono) !important;
+  text-transform: uppercase !important;
+}
+
+.custom-substack-widget {
+  flex-wrap: nowrap !important;
+  max-width: 600px !important;
+  border: none !important;
+  border-radius: 0 !important;
+}
+
+.custom-substack-widget input {
+  flex-basis: 100% !important;
+  width: 100% !important;
+  padding-left: 20px !important;
+  padding-right: 20px !important;
+  font-size: 20px !important;
+  font-family: var(--font-supply-mono) !important;
+  text-transform: uppercase !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  box-sizing: border-box !important;
+}
+
+.custom-substack-widget input::placeholder {
+  opacity: 0.3 !important;
+}
+
+.custom-substack-widget button {
+  flex-shrink: 0 !important;
+  flex-grow: 0 !important;
+  width: 122px !important;
+  /* flex-basis: 122px !important; */
+  border: none !important;
+  padding: 23px 25px !important;
+  margin-left: 15px !important;
+  font-size: 20px !important;
+  font-family: var(--font-supply-mono) !important;
+  text-transform: uppercase !important;
+}

docs/app/layout.tsx

@@ -1,10 +1,30 @@
-import "tailwindcss/tailwind.css";
-
 import { Metadata } from "next";
 import { ReactNode } from "react";
-import { twMerge } from "tailwind-merge";
 import localFont from "next/font/local";
+import { cn } from "../lib/cn";
 import { DevconBanner } from "./DevconBanner";
+import "./globals.css";
+
+const basierCircle = localFont({
+  src: [
+    {
+      path: "../public/fonts/BasierCircle-Regular.otf",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../public/fonts/BasierCircle-SemiBold.otf",
+      weight: "600",
+      style: "normal",
+    },
+    {
+      path: "../public/fonts/BasierCircle-Bold.otf",
+      weight: "700",
+      style: "normal",
+    },
+  ],
+  variable: "--font-basier-circle",
+});
 
 const supplyMono = localFont({
   src: "../public/fonts/PPSupplyMono-Regular.woff2",
@@ -22,6 +42,13 @@ const supplyMono = localFont({
   ],
 });
 
+const berkeleyMono = localFont({
+  src: "../public/fonts/BerkeleyMono-Regular.otf",
+  preload: true,
+  variable: "--font-berkeley-mono",
+  fallback: ["ui-monospace"],
+});
+
 export const metadata: Metadata = {
   title: "MUD | Framework for onchain applications",
   description:
@@ -38,7 +65,14 @@ type Props = { children: ReactNode };
 export default function Layout({ children }: Props) {
   return (
     <html lang="en">
-      <body className={twMerge("bg-mud text-white", supplyMono.variable)}>
+      <body
+        className={cn(
+          "text-white font-sans overflow-x-hidden",
+          basierCircle.variable,
+          supplyMono.variable,
+          berkeleyMono.variable,
+        )}
+      >
         <DevconBanner />
         {children}
       </body>