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/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/components/ReleaseDownloadButton/index.js

@@ -1,10 +1,19 @@
 import React, { useState, useEffect } from "react";
-import { Dropdown } from "@nextui-org/react";
+import {
+  Button,
+  Dropdown,
+  DropdownTrigger,
+  DropdownItem,
+  DropdownSection,
+  DropdownMenu,
+} from "@nextui-org/react";
 import { BsWindows, BsApple } from "react-icons/bs";
 import { FaLinux } from "react-icons/fa";
 import { IoIosCloudyNight } from "react-icons/io";
 import { GiBrickWall } from "react-icons/gi";
 import { useMediaQuery } from "../../utils/mediaQuery";
+import { commonColors, semanticColors } from "@nextui-org/theme";
+import { useTheme } from "next-themes";
 
 // Function to get the latest release for a specific platform
 export function getLatestRelease(releases, platform) {
@@ -46,9 +55,10 @@ function generateDropdownItems(release, os, assets, textRemovals, isNightly) {
     return [];
   }
 
-  let fillColor = "var(--nextui-colors-primary)";
+  let fillColor = semanticColors.dark.primary.DEFAULT;
+  // TODO - based on theme!
   if (isNightly) {
-    fillColor = "var(--nextui-colors-warning)";
+    fillColor = semanticColors.dark.warning.DEFAULT;
   }
 
   let items = [];
@@ -99,14 +109,14 @@ function generateDropdownItems(release, os, assets, textRemovals, isNightly) {
     }
 
     items.push(
-      <Dropdown.Item
+      <DropdownItem
         key={asset.url}
         description={release.version}
-        icon={getOSIcon(os, fillColor)}
+        startContent={getOSIcon(os, fillColor)}
         css={{ transition: "none" }}
       >
         {displayName}
-      </Dropdown.Item>,
+      </DropdownItem>,
     );
   }
   return items;
@@ -129,6 +139,8 @@ export function ReleaseDownloadButton({
   isDisabled,
   placement,
 }) {
+  const { theme, setTheme } = useTheme();
+
   // Styling for the button
   const buttonStyling = {
     minWidth: "200px",
@@ -145,6 +157,7 @@ export function ReleaseDownloadButton({
 
   // Effect to generate dropdown items when the release or other inputs change
   useEffect(() => {
+    console.log(release);
     if ("windows" in release) {
       setWindowsItems(
         generateDropdownItems(
@@ -210,31 +223,55 @@ export function ReleaseDownloadButton({
     }
   }, [release]);
 
-  // Render the dropdown button and menu
   return (
     <Dropdown
-      isBordered
       placement={
-        placement ? placement : useMediaQuery(960) ? "bottom-left" : "right-top"
+        placement
+          ? placement
+          : useMediaQuery(960)
+            ? "bottom-end"
+            : "right-start"
       }
+      classNames={{
+        base: "before:bg-default-200", // change arrow background
+        content: "py-1 px-1 border border-default-200",
+      }}
     >
-      <Dropdown.Button
-        color={isNightly ? "warning" : "primary"}
-        css={buttonStyling}
-        bordered={bordered}
-        disabled={isDisabled}
-      >
-        {isNightly ? <IoIosCloudyNight size={22} /> : <GiBrickWall size={16} />}
-        &nbsp;
-        {buttonText}
-      </Dropdown.Button>
-      <Dropdown.Menu
+      <DropdownTrigger>
+        <Button
+          color={isNightly ? "warning" : "primary"}
+          variant="solid"
+          disabled={isDisabled}
+          className="border-none font-medium cursor-pointer"
+        >
+          {isNightly ? (
+            <IoIosCloudyNight size={22} />
+          ) : (
+            <GiBrickWall size={16} />
+          )}
+          &nbsp;
+          {buttonText}
+          <svg
+            fill="none"
+            height="14"
+            viewBox="0 0 24 24"
+            width="14"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z"
+              fill="currentColor"
+            />
+          </svg>
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu
         color={isNightly ? "warning" : "primary"}
-        aria-label="Actions"
-        css={{ $$dropdownMenuWidth: "100%" }}
+        variant="faded"
         onAction={(assetUrl) => openAssetLink(assetUrl)}
       >
-        <Dropdown.Section
+        <DropdownSection
+          showDivider
           title={
             errorMsg === undefined
               ? windowsItems.length > 0
@@ -244,8 +281,9 @@ export function ReleaseDownloadButton({
           }
         >
           {errorMsg === undefined ? windowsItems : null}
-        </Dropdown.Section>
-        <Dropdown.Section
+        </DropdownSection>
+        <DropdownSection
+          showDivider
           title={
             errorMsg === undefined
               ? linuxItems.length > 0
@@ -255,8 +293,8 @@ export function ReleaseDownloadButton({
           }
         >
           {errorMsg === undefined ? linuxItems : null}
-        </Dropdown.Section>
-        <Dropdown.Section
+        </DropdownSection>
+        <DropdownSection
           title={
             errorMsg === undefined
               ? macosItems.length > 0
@@ -266,8 +304,8 @@ export function ReleaseDownloadButton({
           }
         >
           {errorMsg === undefined ? macosItems : null}
-        </Dropdown.Section>
-      </Dropdown.Menu>
+        </DropdownSection>
+      </DropdownMenu>
     </Dropdown>
   );
 }