Merge upstream/main into main

Author: ItsAbir005

package.json

@@ -75,6 +75,7 @@
   "dependencies": {
     "@docsearch/react": "^4.6.0",
     "@react-spring/web": "^10.0.3",
+    "clsx": "^2.1.1",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.8.1",
     "react": "^19.2.4",
@@ -84,6 +85,7 @@
     "react-router-dom": "^7.13.1",
     "react-tiny-popover": "^8.1.6",
     "react-use": "^17.6.0",
+    "tailwind-merge": "^3.5.0",
     "webpack-pwa-manifest": "^4.3.0",
     "workbox-window": "^7.4.0"
   },

src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { useEffect, useRef, useState } from "react";
-import "./CodeBlockWithCopy.scss";
+import { cn } from "../../utilities/cn.mjs";
 
 export default function CodeBlockWithCopy({ children }) {
   const preRef = useRef(null);
@@ -115,10 +115,22 @@ export default function CodeBlockWithCopy({ children }) {
   );
 
   return (
-    <div className="code-block-wrapper">
+    <div className="code-block-wrapper relative mb-6 group">
       <button
         onClick={handleCopy}
-        className={`copy-button ${copyStatus}`}
+        className={cn(
+          "copy-button",
+          "absolute top-2 right-2 z-10 px-[0.7rem] py-[0.4rem] rounded-[0.35rem] border-none cursor-pointer text-xs font-medium text-slate-200",
+          "opacity-0 group-hover:opacity-100",
+          "transition-[background-color,transform,opacity] duration-200",
+          "active:scale-95",
+          "focus-visible:outline-none focus-visible:opacity-100",
+          copyStatus === "copied"
+            ? "bg-green-600 hover:bg-green-700"
+            : copyStatus === "error"
+              ? "bg-red-500 hover:bg-red-700"
+              : "bg-[#175d96] hover:bg-[#2f85d0]",
+        )}
         aria-label="Copy code to clipboard"
       >
         {copyStatus === "copied"

src/components/CodeBlockWithCopy/CodeBlockWithCopy.scss

@@ -6,21 +6,21 @@ import Container from "../Container/Container.jsx";
 import Link from "../Link/Link.jsx";
 
 const footerLinkClasses =
-  "text-[11px] uppercase text-[#777676] hover:text-[#333333]";
+  "text-[11px] uppercase text-[#777676] dark:text-[#cccccc] hover:text-[#333333] dark:hover:text-[#ffffff]";
 
 const Footer = () => (
   <footer className="w-full flex-[0_0_auto] print:hidden">
     <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#3b7eb5]">
       <div className="mb-[24px] flex justify-center">
         <a href="https://openjsf.org" target="_blank" rel="noopener noreferrer">
           <img
-            className="h-[40px] w-auto"
+            className="h-[40px] w-auto dark:invert"
             src={OpenJSLogo}
             alt="OpenJS Foundation Logo"
           />
         </a>
       </div>
-      <p className="mx-auto text-[15px] leading-[1.6] text-[#333333]">
+      <p className="mx-auto text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
         Copyright <a href="https://openjsf.org">OpenJS Foundation</a> and
         webpack contributors. All rights reserved. The{" "}
         <a href="https://openjsf.org">OpenJS Foundation</a> has registered
@@ -36,7 +36,7 @@ const Footer = () => (
         holders. Use of them does not imply any affiliation with or endorsement
         by them.
       </p>
-      <p className="mx-auto mt-[18px] text-[15px] leading-[1.6] text-[#333333]">
+      <p className="mx-auto mt-[18px] text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
         <a href="https://openjsf.org">The OpenJS Foundation</a> |{" "}
         <a href="https://terms-of-use.openjsf.org">Terms of Use</a> |{" "}
         <a href="https://privacy-policy.openjsf.org">Privacy Policy</a> |{" "}

src/components/Footer/Footer.jsx

@@ -12,7 +12,6 @@ import { placeholderString } from "../Placeholder/Placeholder.jsx";
 import AdjacentPages from "./AdjacentPages.jsx";
 
 // Load Styling
-import "./Page.scss";
 
 export default function Page(props) {
   const {
@@ -117,7 +116,10 @@ export default function Page(props) {
     );
   }
   return (
-    <main id="main-content" className="page">
+    <main
+      id="main-content"
+      className="flex-auto relative overflow-x-hidden py-[1.5em] px-[1em] md:flex-[3] md:p-[1.5em]"
+    >
       <Markdown>
         <h1>{title}</h1>
         {rest.date && pathname.startsWith("/blog/") && !isBlogIndex && (
@@ -136,19 +138,34 @@ export default function Page(props) {
         <div id="md-content">{contentRender}</div>
 
         {rest.url === "/blog/" && (
-          <div className="blog-list">
+          <div className="mt-8">
             {(props.pages || [])
               .filter((post) => post.url !== "/blog/")
               .map((post) => (
-                <div key={post.url} className="blog-post-item">
-                  <h2>
-                    <Link to={post.url}>{post.title}</Link>
+                <div
+                  key={post.url}
+                  className="mb-[3rem] pb-[2rem] border-b border-gray-100 last:border-b-0 dark:border-gray-800"
+                >
+                  <h2 className="mt-0 mb-[0.5rem] text-[1.8rem] font-bold leading-[1.2]">
+                    <Link
+                      to={post.url}
+                      className="text-blue-800 no-underline hover:text-blue-400 dark:!text-[#9ab3c0] dark:hover:!text-blue-200"
+                    >
+                      {post.title}
+                    </Link>
                   </h2>
                   {post.date && (
-                    <div className="blog-post-date">{post.date}</div>
+                    <div className="text-gray-500 text-[1.2rem] font-semibold mt-[0.25rem] mb-[1rem] italic dark:text-[#bbb]">
+                      {post.date}
+                    </div>
                   )}
-                  <p>{post.teaser}</p>
-                  <Link to={post.url} className="read-more">
+                  <p className="text-gray-600 leading-[1.4] mb-[1rem] dark:text-gray-200">
+                    {post.teaser}
+                  </p>
+                  <Link
+                    to={post.url}
+                    className="text-blue-400 font-semibold no-underline hover:underline dark:text-blue-200"
+                  >
                     Read More &rarr;
                   </Link>
                 </div>

src/components/Page/Page.jsx

@@ -1,5 +1,4 @@
 import PropTypes from "prop-types";
-import "./Print.scss";
 import icon from "../../assets/icon-print.svg";
 import BarIcon from "../../styles/icons/vertical-bar.svg";
 
@@ -40,14 +39,14 @@ export default function Print(props) {
         fill="#175d96"
       />
       <a
-        className="sidebar-item__title sidebar-link__print"
+        className="sidebar-item__title flex items-center flex-nowrap"
         href={printUrl}
         rel="nofollow noopener noreferrer"
         title="Print"
         target="_blank"
       >
         Print Section
-        <img src={icon} width={27} height={20} alt="Printer Icon" />
+        <img src={icon} alt="Printer Icon" className="h-[20px] w-[27px]" />
       </a>
     </div>
   );