Updating dependencies, specifically NextUI (#358)

* build(deps): bump the frontend-deps group across 1 directory with 14 updates

Bumps the frontend-deps group with 14 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [@docusaurus/core](https://github.com/facebook/docusaurus/tree/HEAD/packages/docusaurus) | `3.4.0` | `3.5.2` |
| [@docusaurus/plugin-client-redirects](https://github.com/facebook/docusaurus/tree/HEAD/packages/docusaurus-plugin-client-redirects) | `3.4.0` | `3.5.2` |
| [@docusaurus/preset-classic](https://github.com/facebook/docusaurus/tree/HEAD/packages/docusaurus-preset-classic) | `3.4.0` | `3.5.2` |
| [@mdx-js/react](https://github.com/mdx-js/mdx/tree/HEAD/packages/react) | `3.0.1` | `3.1.0` |
| [@nextui-org/react](https://github.com/nextui-org/nextui/tree/HEAD/packages/core/react) | `1.0.0-beta.13` | `2.4.8` |
| [autoprefixer](https://github.com/postcss/autoprefixer) | `10.4.19` | `10.4.20` |
| [luxon](https://github.com/moment/luxon) | `3.4.4` | `3.5.0` |
| [postcss](https://github.com/postcss/postcss) | `8.4.39` | `8.4.47` |
| [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) | `2.3.1` | `2.4.0` |
| [react-icons](https://github.com/react-icons/react-icons) | `5.2.1` | `5.3.0` |
| [recharts](https://github.com/recharts/recharts) | `2.12.7` | `2.13.0` |
| [yaml](https://github.com/eemeli/yaml) | `2.4.5` | `2.6.0` |
| [@docusaurus/module-type-aliases](https://github.com/facebook/docusaurus/tree/HEAD/packages/docusaurus-module-type-aliases) | `3.4.0` | `3.5.2` |
| [glob](https://github.com/isaacs/node-glob) | `10.4.1` | `11.0.0` |



Updates `@docusaurus/core` from 3.4.0 to 3.5.2
- [Release notes](https://github.com/facebook/docusaurus/releases)
- [Changelog](https://github.com/facebook/docusaurus/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/docusaurus/commits/v3.5.2/packages/docusaurus)

Updates `@docusaurus/plugin-client-redirects` from 3.4.0 to 3.5.2
- [Release notes](https://github.com/facebook/docusaurus/releases)
- [Changelog](https://github.com/facebook/docusaurus/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/docusaurus/commits/v3.5.2/packages/docusaurus-plugin-client-redirects)

Updates `@docusaurus/preset-classic` from 3.4.0 to 3.5.2
- [Release notes](https://github.com/facebook/docusaurus/releases)
- [Changelog](https://github.com/facebook/docusaurus/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/docusaurus/commits/v3.5.2/packages/docusaurus-preset-classic)

Updates `@mdx-js/react` from 3.0.1 to 3.1.0
- [Release notes](https://github.com/mdx-js/mdx/releases)
- [Changelog](https://github.com/mdx-js/mdx/blob/main/changelog.md)
- [Commits](https://github.com/mdx-js/mdx/commits/3.1.0/packages/react)

Updates `@nextui-org/react` from 1.0.0-beta.13 to 2.4.8
- [Release notes](https://github.com/nextui-org/nextui/releases)
- [Changelog](https://github.com/nextui-org/nextui/blob/canary/packages/core/react/CHANGELOG.md)
- [Commits](https://github.com/nextui-org/nextui/commits/@nextui-org/[email protected]/packages/core/react)

Updates `autoprefixer` from 10.4.19 to 10.4.20
- [Release notes](https://github.com/postcss/autoprefixer/releases)
- [Changelog](https://github.com/postcss/autoprefixer/blob/main/CHANGELOG.md)
- [Commits](postcss/autoprefixer@10.4.19...10.4.20)

Updates `luxon` from 3.4.4 to 3.5.0
- [Changelog](https://github.com/moment/luxon/blob/master/CHANGELOG.md)
- [Commits](moment/luxon@3.4.4...3.5.0)

Updates `postcss` from 8.4.39 to 8.4.47
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](postcss/postcss@8.4.39...8.4.47)

Updates `prism-react-renderer` from 2.3.1 to 2.4.0
- [Release notes](https://github.com/FormidableLabs/prism-react-renderer/releases)
- [Commits](https://github.com/FormidableLabs/prism-react-renderer/compare/[email protected]@2.4.0)

Updates `react-icons` from 5.2.1 to 5.3.0
- [Release notes](https://github.com/react-icons/react-icons/releases)
- [Commits](react-icons/react-icons@v5.2.1...v5.3.0)

Updates `recharts` from 2.12.7 to 2.13.0
- [Release notes](https://github.com/recharts/recharts/releases)
- [Changelog](https://github.com/recharts/recharts/blob/3.x/CHANGELOG.md)
- [Commits](recharts/recharts@v2.12.7...v2.13.0)

Updates `yaml` from 2.4.5 to 2.6.0
- [Release notes](https://github.com/eemeli/yaml/releases)
- [Commits](eemeli/yaml@v2.4.5...v2.6.0)

Updates `@docusaurus/module-type-aliases` from 3.4.0 to 3.5.2
- [Release notes](https://github.com/facebook/docusaurus/releases)
- [Changelog](https://github.com/facebook/docusaurus/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/docusaurus/commits/v3.5.2/packages/docusaurus-module-type-aliases)

Updates `glob` from 10.4.1 to 11.0.0
- [Changelog](https://github.com/isaacs/node-glob/blob/main/changelog.md)
- [Commits](isaacs/node-glob@v10.4.1...v11.0.0)

---
updated-dependencies:
- dependency-name: "@docusaurus/core"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: frontend-deps
- dependency-name: "@docusaurus/plugin-client-redirects"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: frontend-deps
- dependency-name: "@docusaurus/preset-classic"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: frontend-deps
- dependency-name: "@mdx-js/react"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: frontend-deps
- dependency-name: "@nextui-org/react"
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: frontend-deps
- dependency-name: autoprefixer
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: frontend-deps
- dependency-name: luxon
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: frontend-deps
- dependency-name: postcss
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: frontend-deps
- dependency-name: prism-react-renderer
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: frontend-deps
- dependency-name: react-icons
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: frontend-deps
- dependency-name: recharts
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: frontend-deps
- dependency-name: yaml
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: frontend-deps
- dependency-name: "@docusaurus/module-type-aliases"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: frontend-deps
- dependency-name: glob
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: frontend-deps
...

Signed-off-by: dependabot[bot] <[email protected]>

* deps: start migrating next-ui to V2

* next-ui2: home page mostly rendering

* fix css collision with docusaurus

* pretty much done fixing the homepage

* most of the compatibility page finished

* compatibility page largely completed

* download buttons working again, cleaned up navbar

* fix blog and documentation components and styling

* lint: formatting

* fix subheading color on compat page

* finish compat page and fix some mobile issues

* light theme adjustments

* just pagination on download page to go

* downloads page finished hopefully

* fix build issue

* fix footer color and previous versions link

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.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>
+  );
+}