chore: adding homepage and docs using nextra (#249)

Adding docs and homepage using nextra. Need to push this through to
setup config in next.

pnpm-workspace.yaml

@@ -2,3 +2,5 @@ packages:
   - "packages/*"
   - "examples/*"
   - "docs"
+  - "website/docs"
+  - "website/home"

website/docs/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+.next
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

website/docs/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

website/docs/mdx-components.js

@@ -0,0 +1,8 @@
+import { useMDXComponents as getDocsMDXComponents } from "nextra-theme-docs";
+
+const docsComponents = getDocsMDXComponents();
+
+export const useMDXComponents = (components) => ({
+  ...docsComponents,
+  ...components,
+});

website/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/app/api-reference/config/typescript for more information.

website/docs/next.config.ts

@@ -0,0 +1,14 @@
+import nextra from "nextra";
+
+const withNextra = nextra({
+  latex: true,
+  search: {
+    codeblocks: false,
+  },
+  contentDirBasePath: "/docs",
+});
+
+export default withNextra({
+  reactStrictMode: true,
+  assetPrefix: "/docs-static",
+});

website/docs/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "gensx-docs",
+  "license": "Apache-2.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev --turbopack -p 4000",
+    "postbuild": "pagefind --site .next/server/app --output-path public/_pagefind",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.0.6",
+    "next": "^15.1.6",
+    "nextra": "^4.2.12",
+    "nextra-theme-docs": "^4.2.12",
+    "postcss": "^8",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tailwindcss": "^4.0.6",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/node": "^22.13.4",
+    "@types/react": "^19",
+    "pagefind": "^1.3.0",
+    "typescript": "^5.7.3"
+  }
+}

website/docs/postcss.config.mjs

@@ -0,0 +1,6 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+export default config;

website/docs/src/app/_ignored/_meta.js

@@ -0,0 +1,2 @@
+// This file will be NOT treated as `_meta` file, since directory starts with underscore
+export default {};

website/docs/src/app/_ignored/page.mdx

@@ -0,0 +1 @@
+This file will be NOT treated as page, since directory starts with underscore

website/docs/src/app/_meta.ts

@@ -0,0 +1 @@
+export default {};

website/docs/src/app/components/Logo.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import Image from "next/image";
+import { useTheme } from "nextra-theme-docs";
+
+const Logo = () => {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <Image
+      src={resolvedTheme === "dark" ? "/logo.svg" : "/logo.svg"}
+      alt="GenSX Logo"
+      width={150}
+      height={50}
+      style={{ height: "50px" }}
+    />
+  );
+};
+
+export default Logo;

website/docs/src/app/docs/[[...mdxPath]]/page.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable react-hooks/rules-of-hooks -- false positive, useMDXComponents isn't react hooks */
+
+import { generateStaticParamsFor, importPage } from "nextra/pages";
+import { useMDXComponents } from "../../../../mdx-components";
+
+export const generateStaticParams = generateStaticParamsFor("mdxPath");
+
+export async function generateMetadata(props) {
+  const params = await props.params;
+  const { metadata } = await importPage(params.mdxPath);
+  return metadata;
+}
+
+const Wrapper = useMDXComponents().wrapper;
+
+export default async function Page(props) {
+  const params = await props.params;
+  const result = await importPage(params.mdxPath);
+  const { default: MDXContent, toc, metadata } = result;
+  return (
+    <Wrapper toc={toc} metadata={metadata}>
+      <MDXContent {...props} params={params} />
+    </Wrapper>
+  );
+}

website/docs/src/app/globals.css

@@ -0,0 +1,135 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: "Figtree", Helvetica, sans-serif;
+  background-color: hsl(var(--background)) !important;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%; /* For light mode - white */
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+  .dark {
+    --background: 240 10% 3.9%; /* For dark mode - very dark gray */
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.shimmer {
+  animation: shimmer 2s infinite;
+}
+
+/* Hide the breadcrumb */
+.nextra-breadcrumb {
+  display: none !important;
+}
+
+/* Hide the breadcrumb */
+.nextra-breadcrumb {
+  display: none !important;
+}
+
+.nextra-navbar-blur {
+  background-color: hsl(0, 0%, 100%) !important;
+}
+
+.dark .nextra-navbar-blur {
+  background-color: hsl(240, 10%, 3.9%) !important;
+}
+
+/* Add this new style */
+.x\:bg-nextra-bg {
+  background-color: hsl(var(--background)) !important;
+}
+/* Add this new style */
+.x\:bg-nextra-bg {
+  background-color: hsl(var(--background)) !important;
+}
+
+.x\:rounded {
+  border-radius: 0 !important;
+}
+
+.x\:text-primary-800 {
+  color: black !important;
+}
+
+.dark .x\:text-primary-800 {
+  color: white !important;
+}
+
+.x\:text-primary-600 {
+  color: black !important;
+}
+
+.dark .x\:text-primary-600 {
+  color: white !important;
+}
+.x\:bg-primary-100 {
+  background-color: rgba(255, 224, 102, 0.2) !important;
+  border: 1px solid #ffde59 !important;
+}
+
+.x\:bg-primary-100:hover {
+  background-color: rgba(255, 224, 102, 0.4) !important;
+}
+
+.dark .x\:bg-primary-100 {
+  background-color: rgba(255, 222, 89, 0.2) !important;
+}

website/docs/src/app/layout.tsx

@@ -0,0 +1,63 @@
+/* eslint-env node */
+import { Footer, Layout, Navbar } from "nextra-theme-docs";
+import { Banner, Head } from "nextra/components";
+import { getPageMap } from "nextra/page-map";
+
+import "nextra-theme-docs/style.css";
+import "./globals.css";
+import { Figtree } from "next/font/google";
+import Logo from "./components/Logo";
+
+export const metadata = {
+  metadataBase: new URL("https://gensx.com/docs"),
+  title: {
+    template: "%s - GenSX",
+  },
+  description: "GenSX: the framework for building TS LLM applications",
+  applicationName: "GenSX",
+  generator: "Next.js",
+  appleWebApp: {
+    title: "GenSX",
+  },
+  twitter: {
+    site: "https://gensx.com",
+  },
+};
+
+const figtree = Figtree({
+  subsets: ["latin"],
+  variable: "--font-figtree",
+});
+
+export default async function RootLayout({ children }) {
+  const navbar = (
+    <Navbar
+      logo={<Logo />}
+      logoLink="/docs"
+      // GenSX discord server
+      chatLink="https://discord.gg/wRmwfz5tCy"
+      projectLink="https://github.com/gensx-inc/gensx"
+    />
+  );
+  const pageMap = await getPageMap("/docs");
+  return (
+    <html lang="en" dir="ltr" suppressHydrationWarning>
+      <Head faviconGlyph="✦" />
+      <body className={`${figtree.variable}`}>
+        <Layout
+          banner={<Banner storageKey="GenSX">GenSX</Banner>}
+          navbar={navbar}
+          footer={
+            <Footer>Apache 2.0 {new Date().getFullYear()} © GenSX.</Footer>
+          }
+          editLink="Edit this page on GitHub"
+          docsRepositoryBase="https://github.com/gensx-inc/gensx/blob/main/website/docs"
+          sidebar={{ defaultMenuCollapseLevel: 2 }}
+          pageMap={pageMap}
+        >
+          {children}
+        </Layout>
+      </body>
+    </html>
+  );
+}