Update docs to latest tailwind, react, and heroui, some formatting broken

.dockerignore

@@ -1,4 +1,9 @@
+# go-assets.sh downloads
 /server/assets/fs/**.zip
+/server/assets/fs/**/garble*
+/server/assets/fs/**/zig.tar.xz
+/server/assets/fs/**/zig.zip
+/server/assets/fs/src.zip
 
 /*.sdk.tar.xz
 
@@ -19,3 +24,5 @@
 /SECURITY.md
 /README.md
 /CONTRIBUTING.md
+
+.downloaded_assets

docs/sliver-docs/components/markdown.tsx

@@ -105,11 +105,12 @@ const MarkdownViewer = (props: MarkdownProps) => {
 
           img(props) {
             const { src, alt, ...rest } = props;
+            const imageSrc = typeof src === "string" ? src : "";
             return (
               // @ts-ignore
               <Image
                 {...rest}
-                src={src || ""}
+                src={imageSrc}
                 alt={alt || ""}
                 width={500}
                 height={500}

docs/sliver-docs/components/navbar.tsx

@@ -20,7 +20,7 @@ import {
   NavbarContent,
   NavbarItem,
   Tooltip,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
 import React from "react";

docs/sliver-docs/components/tutorial-card.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, CardFooter, CardHeader } from "@nextui-org/react";
+import { Button, Card, CardFooter, CardHeader } from "@heroui/react";
 import AsciinemaPlayer from "./asciinema";
 
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons";

docs/sliver-docs/package.json

@@ -10,35 +10,37 @@
     "offline": "next build && zip -r www.zip ./out"
   },
   "dependencies": {
-    "@fontsource/fira-code": "^5.0.16",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@monaco-editor/react": "^4.6.0",
-    "@nextui-org/react": "^2.2.9",
-    "@tanstack/react-query": "^5.13.4",
-    "asciinema-player": "^3.6.3",
-    "framer-motion": "^10.16.16",
-    "fuse.js": "^7.0.0",
+    "@fontsource/fira-code": "^5.2.7",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-brands-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.0",
+    "@heroui/react": "^2.8.5",
+    "@monaco-editor/react": "^4.7.0",
+    "@tailwindcss/postcss": "^4.1.14",
+    "@tanstack/react-query": "^5.90.2",
+    "asciinema-player": "^3.11.0",
+    "framer-motion": "^12.23.22",
+    "fuse.js": "^7.1.0",
     "lunr": "^2.3.9",
-    "next": "^14.2.22",
-    "next-themes": "^0.2.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-markdown": "^9.0.1",
-    "remark-gfm": "^4.0.0"
+    "next": "^15.5.4",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.19",
     "@types/lunr": "^2.3.7",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10.0.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.4",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0",
-    "typescript": "^5"
+    "@types/node": "^24.6.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.37.0",
+    "eslint-config-next": "^15.5.4",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.14",
+    "typescript": "^5.9.3"
   }
 }

docs/sliver-docs/pages/_app.tsx

@@ -6,28 +6,17 @@ import { SearchContext, SearchCtx } from "@/util/search-context";
 import { Themes } from "@/util/themes";
 import { faExternalLink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { NextUIProvider } from "@nextui-org/react";
+import { HeroUIProvider } from "@heroui/react";
 import {
   HydrationBoundary,
   QueryClient,
   QueryClientProvider,
 } from "@tanstack/react-query";
-import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
 import type { AppProps } from "next/app";
 import React from "react";
 
 export default function App({ Component, pageProps }: AppProps) {
-  // Initialize theme
-  const { theme, setTheme } = useTheme();
-  function getThemeState(): Themes {
-    if (typeof window !== "undefined") {
-      const loadedTheme = localStorage.getItem("theme");
-      const currentTheme = loadedTheme ? (loadedTheme as Themes) : Themes.DARK;
-      setTheme(currentTheme);
-    }
-    return Themes.DARK;
-  }
-
   // Initialize search
   const [search, setSearch] = React.useState(new SearchCtx());
 
@@ -54,8 +43,13 @@ export default function App({ Component, pageProps }: AppProps) {
   });
 
   return (
-    <NextUIProvider>
-      <NextThemesProvider attribute="class" defaultTheme={getThemeState()}>
+    <HeroUIProvider>
+      <NextThemesProvider
+        attribute="class"
+        defaultTheme={Themes.DARK}
+        enableSystem={false}
+        storageKey="theme"
+      >
         <QueryClientProvider client={queryClient}>
           <HydrationBoundary state={pageProps.dehydratedState}>
             <SearchContext.Provider value={search}>
@@ -101,6 +95,6 @@ export default function App({ Component, pageProps }: AppProps) {
           </HydrationBoundary>
         </QueryClientProvider>
       </NextThemesProvider>
-    </NextUIProvider>
+    </HeroUIProvider>
   );
 }

docs/sliver-docs/pages/_document.tsx

@@ -15,11 +15,11 @@ class MyDocument extends Document {
 
   render() {
     return (
-      <Html lang="en">
+      <Html lang="en" suppressHydrationWarning>
         <Head>
           <meta httpEquiv="Content-Security-Policy" content={CSP} />
         </Head>
-        <body>
+        <body className="bg-background text-foreground">
           <Main />
           <NextScript />
         </body>

docs/sliver-docs/pages/docs/index.tsx

@@ -12,7 +12,7 @@ import {
   Listbox,
   ListboxItem,
   ScrollShadow,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { useQuery } from "@tanstack/react-query";
 import Fuse from "fuse.js";
 import { NextPage } from "next";
@@ -102,7 +102,6 @@ const DocsIndexPage: NextPage = () => {
                 {visibleDocs.map((doc) => (
                   <ListboxItem
                     key={doc.name}
-                    value={doc.name}
                     onClick={() => {
                       router.push({
                         pathname: "/docs",

docs/sliver-docs/pages/index.tsx

@@ -2,7 +2,7 @@ import AsciinemaPlayer from "@/components/asciinema";
 import { SliversIcon } from "@/components/icons/slivers";
 import TutorialCard from "@/components/tutorial-card";
 import { Themes } from "@/util/themes";
-import { Card, CardBody, CardHeader, Divider } from "@nextui-org/react";
+import { Card, CardBody, CardHeader, Divider } from "@heroui/react";
 import { useRouter } from "next/router";
 
 export default function Home() {

docs/sliver-docs/pages/search/index.tsx

@@ -2,7 +2,7 @@ import MarkdownViewer from "@/components/markdown";
 import { useSearchContext } from "@/util/search-context";
 import { faChevronCircleRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button, Card, CardBody, Divider } from "@nextui-org/react";
+import { Button, Card, CardBody, Divider } from "@heroui/react";
 import { NextPage } from "next";
 import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/router";

docs/sliver-docs/pages/tutorials/index.tsx

@@ -12,7 +12,7 @@ import {
   Listbox,
   ListboxItem,
   ScrollShadow,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { useQuery } from "@tanstack/react-query";
 import Fuse from "fuse.js";
 import { NextPage } from "next";
@@ -102,7 +102,6 @@ const TutorialsIndexPage: NextPage = () => {
                 {visibleTutorials.map((tutorial) => (
                   <ListboxItem
                     key={tutorial.name}
-                    value={tutorial.name}
                     onClick={() => {
                       router.push({
                         pathname: "/tutorials",

docs/sliver-docs/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 }
+

docs/sliver-docs/styles/globals.css

@@ -1,7 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
+@config "../tailwind.config.js";
 
 .monospace {
   font-family: "Fira Code", monospace;

docs/sliver-docs/tailwind.config.ts

@@ -1,44 +0,0 @@
-import { nextui } from "@nextui-org/react";
-import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      typography: {
-        DEFAULT: {
-          css: {
-            maxWidth: '100ch', // add required value here
-          }
-        }
-      }
-    },
-  },
-  darkMode: "class",
-  plugins: [
-    require('@tailwindcss/typography'),
-    nextui({
-      prefix: "nextui", // prefix for themes variables
-      addCommonColors: false, // override common colors (e.g. "blue", "green", "pink").
-      defaultTheme: "light", // default theme from the themes object
-      defaultExtendTheme: "light", // default theme to extend on custom themes
-      layout: {}, // common layout tokens (applied to all themes)
-      themes: {
-        light: {
-          layout: {}, // light theme layout tokens
-          colors: {}, // light theme colors
-        },
-        dark: {
-          layout: {}, // dark theme layout tokens
-          colors: {}, // dark theme colors
-        },
-        // ... custom themes
-      },
-    }),],
-}
-export default config

docs/sliver-docs/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2015",
+    "target": "es2020",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,