Updating dependencies, specifically NextUI

.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

docusaurus.config.js

@@ -6,6 +6,20 @@ const lightCodeTheme = themes.github;
 const darkCodeTheme = themes.dracula;
 const redirects = require("./redirects");
 
+function tailwindPlugin(context, options) {
+  return {
+    name: "tailwind-plugin",
+    configurePostCss(postcssOptions) {
+      postcssOptions.plugins = [
+        require("postcss-import"),
+        require("tailwindcss"),
+        require("autoprefixer"),
+      ];
+      return postcssOptions;
+    },
+  };
+}
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: "PCSX2",
@@ -92,6 +106,7 @@ const config = {
           editUrl: "https://github.com/PCSX2/pcsx2-net-www/tree/main/",
         },
         blog: {
+          onUntruncatedBlogPosts: "ignore",
           path: "blog",
           blogSidebarCount: 0,
           showReadingTime: true,
@@ -114,7 +129,7 @@ const config = {
     ({
       // announcementBar: {
       //   id: "announcementBar-1", // Increment on change (2.0 was 0, next announcement should be 1)
-      //   content: `<a href="/blog/2024/pcsx2-2-release/">PCSX2 2.0 is finally here, check out our new blog post!</a>`,
+      //   content: `<a class="no-underline font-medium" href="/blog/2024/pcsx2-2-release/">PCSX2 2.0 is finally here, check out our new blog post!</a>`,
       //   backgroundColor: "#4765c8",
       //   textColor: "#fafbfc",
       //   isCloseable: true,
@@ -346,6 +361,7 @@ const config = {
         };
       },
     }),
+    tailwindPlugin,
   ],
 };
 

package.json

@@ -17,28 +17,31 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.3.2",
-    "@docusaurus/plugin-client-redirects": "^3.3.2",
-    "@docusaurus/preset-classic": "^3.3.2",
-    "@mdx-js/react": "^3.0.1",
-    "@nextui-org/react": "1.0.0-beta.13",
-    "autoprefixer": "^10.4.17",
+    "@docusaurus/core": "^3.5.2",
+    "@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",
+    "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.11.9",
     "fuse.js": "^7.0.0",
-    "luxon": "^3.4.4",
-    "postcss": "^8.4.31",
-    "prism-react-renderer": "^2.3.1",
+    "luxon": "^3.5.0",
+    "next-themes": "^0.3.0",
+    "postcss": "^8.4.47",
+    "prism-react-renderer": "^2.4.0",
     "react": "^18.3.1",
     "react-cookie-consent": "^9.0.0",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
-    "recharts": "2.12.7",
-    "yaml": "^2.4.2"
+    "recharts": "2.13.0",
+    "tailwindcss": "^3.4.14",
+    "yaml": "^2.6.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.3.2",
-    "glob": "10.4.1",
+    "@docusaurus/module-type-aliases": "^3.5.2",
+    "glob": "11.0.0",
     "prettier": "3.3.3",
     "prompts": "2.4.2",
     "webp-converter": "2.3.3"

postcss.config.js

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

src/components/CompatibilityButton/index.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { Button } from "@nextui-org/react";
+
+const categoryColorMapping = {
+  perfect: {
+    on: "bg-[#ba68c8] border-none",
+    off: "bg-transparent text-[#ba68c8] !border-[#ba68c8] border-solid",
+  },
+  playable: {
+    on: "bg-[#9CCC65] text-black border-none",
+    off: "bg-transparent text-[#9CCC65] !border-[#9CCC65] border-solid",
+  },
+  ingame: {
+    on: "bg-[#29B6F6] text-black border-none",
+    off: "bg-transparent text-[#29B6F6] !border-[#29B6F6] border-solid",
+  },
+  menus: {
+    on: "bg-[#FBC02D] text-black border-none",
+    off: "bg-transparent text-[#FBC02D] !border-[#FBC02D] border-solid",
+  },
+  intro: {
+    on: "bg-[#F57C00] text-black border-none",
+    off: "bg-transparent text-[#F57C00] !border-[#F57C00] border-solid",
+  },
+  nothing: {
+    on: "bg-[#D32F2F] border-none",
+    off: "bg-transparent text-[#D32F2F] !border-[#D32F2F] border-solid",
+  },
+};
+
+export function CompatibilityButton({
+  categoryFiltered,
+  disabledOrLoading,
+  category,
+  onPress,
+  children,
+}) {
+  return (
+    <Button
+      variant={"bordered"}
+      disabled={disabledOrLoading}
+      isLoading={disabledOrLoading}
+      onPress={onPress}
+      className={
+        categoryColorMapping[category][categoryFiltered ? "off" : "on"]
+      }
+    >
+      {children}
+    </Button>
+  );
+}