relocate index page, add "use client", refactor layout

jonathanawesome · jonathanawesome · commit 25008324409d · 2025-11-06T19:00:05.000-06:00
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
@@ -0,0 +1,10 @@
+import type { Metadata } from "next"
+import { IndexPage } from "../../components/index-page"
+
+export const metadata: Metadata = {
+  title: "GraphQL | A query language for your API",
+}
+
+export default function Page() {
+  return <IndexPage />
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,15 @@ import { ReactElement, ReactNode } from "react"
 import { Metadata } from "next"
 import GoogleAnalytics from "@/app/ga"
 
+// @ts-expect-error: we want to import the same version as Nextra for the main page
+import { ThemeProvider } from "next-themes"
+
+import { Footer } from "../components/footer"
+import { NewFontsStyleTag } from "./fonts"
+import { Navbar } from "../components/navbar/navbar"
+import { topLevelNavbarItems } from "../components/navbar/top-level-items"
+import { MenuProvider } from "./(main)/menu-provider"
+
 import "../globals.css"
 
 export const metadata: Metadata = {
@@ -35,7 +44,16 @@ export default function RootLayout({
       </head>
       <body className="bg-neu-0">
         <GoogleAnalytics />
-        {children}
+        <NewFontsStyleTag />
+        <ThemeProvider attribute="class">
+          <MenuProvider>
+            <Navbar items={topLevelNavbarItems} />
+            <div className="isolate bg-neu-0 text-neu-900 antialiased">
+              {children}
+            </div>
+            <Footer />
+          </MenuProvider>
+        </ThemeProvider>
       </body>
     </html>
   )
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -7,7 +7,6 @@ import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 import stripesMask from "@/components/404-page/image.webp"
 
 import { Button } from "./conf/_design-system/button"
-import MainLayout from "./(main)/layout"
 
 import "@/globals.css"
 import "@/app/colors.css"
@@ -31,7 +30,7 @@ export default function NotFoundPage() {
   }/issues/new?title=${encodeURIComponent(title)}&labels=${labels}`
 
   return (
-    <MainLayout>
+    <>
       <style>{".nextra-nav-container.sticky { position: fixed }"}</style>
       <div className="relative">
         <Stripes />
@@ -48,7 +47,7 @@ export default function NotFoundPage() {
           </div>
         </div>
       </div>
-    </MainLayout>
+    </>
   )
 }
 
diff --git a/src/components/index-page/data-colocation/index.tsx b/src/components/index-page/data-colocation/index.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { clsx } from "clsx"
 import { Code } from "nextra/components"
diff --git a/src/components/index-page/graphql-advantages/consistency.tsx b/src/components/index-page/graphql-advantages/consistency.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useRef } from "react"
 import { Code } from "nextra/components"
 
diff --git a/src/components/index-page/graphql-advantages/precision.tsx b/src/components/index-page/graphql-advantages/precision.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { ComponentPropsWithoutRef, useEffect, useRef } from "react"
 import { Code } from "nextra/components"
 import { clsx } from "clsx"
diff --git a/src/components/index-page/graphql-advantages/versionless.tsx b/src/components/index-page/graphql-advantages/versionless.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useRef } from "react"
 import { Code } from "nextra/components"
 import { clsx } from "clsx"
diff --git a/src/components/index-page/how-it-works/index.tsx b/src/components/index-page/how-it-works/index.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { useRef, useState } from "react"
 import { useInView } from "motion/react"
 import dynamic from "next/dynamic"
diff --git a/src/components/index-page/how-it-works/interactive-editor.tsx b/src/components/index-page/how-it-works/interactive-editor.tsx
@@ -1,5 +1,7 @@
+"use client"
+
 import { graphql } from "graphql"
-import React, { useState } from "react"
+import { useRef, useState } from "react"
 
 import { getVariableToType } from "@/components/interactive-code-block/get-variable-to-type"
 import { QueryEditor } from "@/components/interactive-code-block/query-editor"
@@ -20,7 +22,7 @@ export default function InteractiveEditor() {
   const [results, setResults] = useState(INITIAL_RESULTS_TEXT)
   const [variableTypes, setVariableTypes] = useState<Record<string, string>>({})
   const [variables, setVariables] = useState("")
-  const editorQueryId = React.useRef(0)
+  const editorQueryId = useRef(0)
 
   async function runQuery(
     options: { manual: boolean },
diff --git a/src/components/index-page/what-is-graphql/wires.tsx b/src/components/index-page/what-is-graphql/wires.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import {
   ComponentPropsWithoutRef,
diff --git a/src/pages/index.mdx b/src/pages/index.mdx

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+"use client"`
	`2`	`+`
`1`	`3`	`import * as React from "react"`
`2`	`4`	`import { clsx } from "clsx"`
`3`	`5`	`import { Code } from "nextra/components"`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+"use client"`
	`2`	`+`
`1`	`3`	`import { useEffect, useRef } from "react"`
`2`	`4`	`import { Code } from "nextra/components"`
`3`	`5`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+"use client"`
	`2`	`+`
`1`	`3`	`import { ComponentPropsWithoutRef, useEffect, useRef } from "react"`
`2`	`4`	`import { Code } from "nextra/components"`
`3`	`5`	`import { clsx } from "clsx"`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+"use client"`
	`2`	`+`
`1`	`3`	`import { useRef, useState } from "react"`
`2`	`4`	`import { useInView } from "motion/react"`
`3`	`5`	`import dynamic from "next/dynamic"`