deps: start migrating next-ui to V2

.github/workflows/build.yaml

@@ -32,8 +32,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          # TODO - switch back to 22 https://github.com/actions/setup-node/issues/1112
-          node-version: 20
+          node-version: 22
           cache: "yarn"
 
       - name: Install Dependencies

package.json

@@ -21,11 +21,13 @@
     "@docusaurus/plugin-client-redirects": "^3.5.2",
     "@docusaurus/preset-classic": "^3.5.2",
     "@mdx-js/react": "^3.1.0",
-    "@nextui-org/react": "2.4.8",
+    "@nextui-org/react": "^2.4.8",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.11.9",
     "fuse.js": "^7.0.0",
     "luxon": "^3.5.0",
+    "next-themes": "^0.3.0",
     "postcss": "^8.4.47",
     "prism-react-renderer": "^2.4.0",
     "react": "^18.3.1",
@@ -34,6 +36,7 @@
     "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
     "recharts": "2.13.0",
+    "tailwindcss": "^3.4.14",
     "yaml": "^2.6.0"
   },
   "devDependencies": {

postcss.config.js

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

src/components/DownloadTable/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Table, Card, Text, Grid } from "@nextui-org/react";
+import { Table, Card } from "@nextui-org/react";
 import ReactMarkdown from "react-markdown";
 import { ReleaseDownloadButton } from "../ReleaseDownloadButton";
 import { GoPlus, GoDash } from "react-icons/go";

src/components/GoogleAd/index.js

@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from "react";
-import { Row, Col } from "@nextui-org/react";
 import { getCookieConsentValue } from "react-cookie-consent";
 
-export function GoogleAd({ margins = "5em", alignment = "center" }) {
+export function GoogleAd() {
   const [displayAd, setDisplayAd] = useState(false);
 
   useEffect(() => {
@@ -16,12 +15,8 @@ export function GoogleAd({ margins = "5em", alignment = "center" }) {
   }, [displayAd]);
 
   return !displayAd ? null : (
-    <Row
-      justify={alignment}
-      css={{ mt: margins, mb: margins, width: "auto" }}
-      gap={2}
-    >
-      <Col span={12}>
+    <div className="flex justify-center mt-5 mb-5 gap-2">
+      <div className="flex-auto">
         <ins
           className="adsbygoogle"
           style={{
@@ -34,7 +29,7 @@ export function GoogleAd({ margins = "5em", alignment = "center" }) {
           data-ad-format="auto"
           data-full-width-responsive="true"
         ></ins>
-      </Col>
-    </Row>
+      </div>
+    </div>
   );
 }

src/css/custom.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to

src/mdx/BarChart.js

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import { Row, Col } from "@nextui-org/react";
 import {
   BarChart,
   Bar,

src/mdx/Image.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Grid } from "@nextui-org/react";
 
 export default function Image({ children, cols, src, alt }) {
   return (

src/mdx/ImageCompare.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Grid } from "@nextui-org/react";
 
 export default function ImageCompare({
   children,

src/mdx/PRLink/PCSX2PRLink.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { GoGitCommit, GoGitPullRequest } from "react-icons/go";
-import { Avatar, Grid, Tooltip } from "@nextui-org/react";
+import { Avatar, Tooltip } from "@nextui-org/react";
 import { IconContext } from "react-icons";
 import styles from "./PCSX2PRLink.module.css";
 

src/mdx/SliderCompare/SliderCompare.js

@@ -1,5 +1,4 @@
 import React, { useRef } from "react";
-import { Grid } from "@nextui-org/react";
 import styles from "./SliderCompare.module.css";
 
 export default function SliderCompare({ children, cols, before, after }) {

src/pages/compat/index.js

@@ -2,15 +2,10 @@ import React, { useState, useEffect } from "react";
 import Layout from "@theme/Layout";
 import {
   Table,
-  Grid,
   Tooltip,
   Badge,
   Link,
-  Loading,
   Input,
-  Container,
-  Row,
-  Col,
   Button,
 } from "@nextui-org/react";
 import { MdLibraryBooks, MdForum } from "react-icons/md";

src/pages/downloads/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Layout from "@theme/Layout";
-import { Container, Text, Grid, Switch } from "@nextui-org/react";
+import { Switch } from "@nextui-org/react";
 import Admonition from "@theme/Admonition";
 import { ReleaseDownloadButton } from "../../components/ReleaseDownloadButton";
 import { DownloadTable } from "../../components/DownloadTable";

src/pages/index.js

@@ -2,53 +2,47 @@ import React, { useState, useEffect } from "react";
 import Link from "@docusaurus/Link";
 import Layout from "@theme/Layout";
 import {
-  Text,
   Button,
-  Row,
-  Col,
   Card,
-  Grid,
-  Container,
-  Tooltip,
-  getDocumentTheme,
+  Tooltip
 } from "@nextui-org/react";
+import {useTheme} from "next-themes";
 import { NumberTicker } from "../components/NumberTicker";
 import { getLatestRelease } from "../components/ReleaseDownloadButton";
 import { ReleaseDownloadButton } from "../components/ReleaseDownloadButton";
 import { GoogleAd } from "../components/GoogleAd";
 import { useMediaQuery } from "../utils/mediaQuery";
-import { styled } from "@nextui-org/react";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
-const StyledTitle = styled("h1", {
-  display: "inline",
-  fontWeight: "$bold",
-  color: "$text",
-  lh: "1.2",
-  fs: "2.5rem",
-  "@sm": {
-    fs: "3rem",
-  },
-  "@lg": {
-    fs: "3.5rem",
-  },
-});
+// const StyledTitle = styled("h1", {
+//   display: "inline",
+//   fontWeight: "$bold",
+//   color: "$text",
+//   lh: "1.2",
+//   fs: "2.5rem",
+//   "@sm": {
+//     fs: "3rem",
+//   },
+//   "@lg": {
+//     fs: "3.5rem",
+//   },
+// });
 
-const StyledGradientTitle = styled(StyledTitle, {
-  textGradient: "180deg, #5099ff 25%, #465eae 100%",
-  "&::selection": {
-    WebkitTextFillColor: "$colors$text",
-  },
-});
+// const StyledGradientTitle = styled(StyledTitle, {
+//   textGradient: "180deg, #5099ff 25%, #465eae 100%",
+//   "&::selection": {
+//     WebkitTextFillColor: "$colors$text",
+//   },
+// });
 
-const StyledSubtitle = styled("p", {
-  pl: "$1",
-  fs: "$xl",
-  width: "100%",
-  display: "inline-flex",
-  fontWeight: "500",
-  color: "$accents9",
-});
+// const StyledSubtitle = styled("p", {
+//   pl: "$1",
+//   fs: "$xl",
+//   width: "100%",
+//   display: "inline-flex",
+//   fontWeight: "500",
+//   color: "$accents9",
+// });
 
 import CompatData from "@site/static/data/compat/data.min.json";
 
@@ -80,6 +74,7 @@ import {
 const baseApiUrl = "https://api.pcsx2.net/v1";
 
 export default function Home() {
+  const { theme, setTheme } = useTheme();
   const [latestStableRelease, setLatestStableRelease] = useState({});
   const [latestNightlyRelease, setLatestNightlyRelease] = useState({});
   const [apiErrorMsg, setApiErrorMsg] = useState(undefined);
@@ -113,14 +108,14 @@ export default function Home() {
   useEffect(() => {
     fetchLatestReleases();
     setHomeVideoPath(
-      getDocumentTheme(document?.documentElement) === "dark"
+      theme === "dark"
         ? "/videos/splash.webm"
         : "/videos/splash-light.mp4",
     );
 
     const observer = new MutationObserver((mutation) => {
       setHomeVideoPath(
-        getDocumentTheme(document?.documentElement) === "dark"
+        theme === "dark"
           ? "/videos/splash.webm"
           : "/videos/splash-light.mp4",
       );

src/theme/BlogPostItem/Header/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import BlogPostItemHeaderTitle from "@theme-original/BlogPostItem/Header/Title";
 import BlogPostItemHeaderInfo from "@theme-original/BlogPostItem/Header/Info";
 import BlogPostItemHeaderAuthors from "@theme-original/BlogPostItem/Header/Authors";
-import { useBlogPost } from "@docusaurus/theme-common/internal";
+import { useBlogPost } from '@docusaurus/plugin-content-blog/client';
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
 export default function BlogPostItemHeader() {

src/theme/Root.js

@@ -1,25 +1,11 @@
 import React, { useEffect, useState } from "react";
 import {
-  createTheme,
   NextUIProvider,
-  getDocumentTheme,
 } from "@nextui-org/react";
+import {ThemeProvider as NextThemesProvider} from "next-themes";
+import {useTheme} from "next-themes";
 import CookieConsent, { getCookieConsentValue } from "react-cookie-consent";
 
-const lightTheme = createTheme({
-  type: "light",
-  theme: {
-    // colors: {...}, // optional
-  },
-});
-
-const darkTheme = createTheme({
-  type: "dark",
-  theme: {
-    // colors: {...}, // optional
-  },
-});
-
 function loadGoogleAds() {
   if (
     getCookieConsentValue("pcsx2CookieConsent") === "true" &&
@@ -37,6 +23,7 @@ function loadGoogleAds() {
 
 // Default implementation, that you can customize
 export default function Root({ children }) {
+  const { theme, setTheme } = useTheme();
   const [isDark, setIsDark] = useState(false);
 
   useEffect(() => {
@@ -47,7 +34,7 @@ export default function Root({ children }) {
     setIsDark(theme === "dark");
 
     const observer = new MutationObserver((mutation) => {
-      let newTheme = getDocumentTheme(document?.documentElement);
+      let newTheme = theme;
       if (newTheme === "dark") {
         if (!document?.documentElement.classList.contains("dark-theme")) {
           document?.documentElement.classList.add("dark-theme");
@@ -74,25 +61,24 @@ export default function Root({ children }) {
   }, []);
 
   return (
-    <NextUIProvider
-      theme={isDark ? darkTheme : lightTheme}
-      disableBaseline={true}
-    >
-      <CookieConsent
-        location="bottom"
-        buttonText="Agree"
-        declineButtonText="Decline"
-        cookieName="pcsx2CookieConsent"
-        enableDeclineButton={true}
-        style={{ background: "#2B373B" }}
-        expires={150}
-        onAccept={() => {
-          loadGoogleAds();
-        }}
-      >
-        This website uses cookies to enhance the user experience.
-      </CookieConsent>
-      {children}
+    <NextUIProvider disableBaseline={true}>
+      <NextThemesProvider attribute="class" defaultTheme="dark">
+        <CookieConsent
+          location="bottom"
+          buttonText="Agree"
+          declineButtonText="Decline"
+          cookieName="pcsx2CookieConsent"
+          enableDeclineButton={true}
+          style={{ background: "#2B373B" }}
+          expires={150}
+          onAccept={() => {
+            loadGoogleAds();
+          }}
+        >
+          This website uses cookies to enhance the user experience.
+        </CookieConsent>
+        {children}
+      </NextThemesProvider>
     </NextUIProvider>
   );
 }

tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./app/**/*.{js,ts,jsx,tsx,mdx}",
+        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./components/**/*.{js,ts,jsx,tsx,mdx}",
+
+        // Or if using `src` directory:
+        "./src/**/*.{js,ts,jsx,tsx,mdx}",
+        // next-ui
+        "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}