Merge branch 'main' into main

Author: iblawal

.github/workflows/dependabot.yml

@@ -20,7 +20,7 @@ jobs:
 
       - name: Dependabot metadata
         id: dependabot-metadata
-        uses: dependabot/fetch-metadata@21025c705c08248db411dc16f3619e6b5f9ea21a # v2.5.0
+        uses: dependabot/fetch-metadata@ffa630c65fa7e0ecfa0625b5ceda64399aea1b36 # v3.0.0
         with:
           github-token: "${{ steps.app-token.outputs.token }}"
 

.github/workflows/testing.yml

@@ -96,7 +96,7 @@ jobs:
         uses: ./.github/actions/webpack-persistent-cache
 
       - name: Cypress run
-        uses: cypress-io/github-action@82482149c343a5dee155d22104111b9319f9dd45 # v7.1.6
+        uses: cypress-io/github-action@783cb3f07983868532cabaedaa1e6c00ff4786a8 # v7.1.9
         with:
           browser: chrome
           config-file: cypress.config.js

README.md

@@ -49,7 +49,7 @@ The content is available under the [Creative Commons BY 4.0][license-url] licens
 
 ## Special Thanks
 
-If you want reach from us at webpack, contact us and we can arrange something in return for your donations!
+If you want to reach us at webpack, contact us and we can arrange something in return for your donations!
 
 _Vercel_ has given us a Pro account.
 

cypress/e2e/click-menu-scroll-top.cy.js

@@ -7,7 +7,8 @@ describe("Click menu", () => {
     // note that there's no hash in url
     cy.get('[data-testid="contributors"]').scrollIntoView();
 
-    const selector = '.sidebar-item__title[href="/concepts/modules/"]';
+    const selector =
+      '[data-testid="sidebar-item-title"][href="/concepts/modules/"]';
 
     cy.get(selector).click();
     cy.window().then((win) => {

cypress/e2e/pr_4435.cy.js

@@ -10,13 +10,16 @@ describe("Open page in new tab", { scrollBehavior: false }, () => {
       },
     });
     // wait for page content to load before asserting scroll
-    cy.get('.sidebar-item__title[href="/concepts/plugins/"]').should("exist");
+    cy.get(
+      '[data-testid="sidebar-item-title"][href="/concepts/plugins/"]',
+    ).should("exist");
     // there's one call in Page.jsx when componentDidMount
     cy.window().should((win) => {
       expect(win.scrollTo).to.be.calledOnce;
     });
 
-    const selector = '.sidebar-item__title[href="/concepts/plugins/"]';
+    const selector =
+      '[data-testid="sidebar-item-title"][href="/concepts/plugins/"]';
 
     // we click the menu
     cy.get(selector).click();

jest.config.mjs

@@ -3,11 +3,12 @@ export default {
   testEnvironment: "node",
   setupFiles: ["./src/setupTests.js"],
   transform: {
-    "^.+\\.jsx?$": "babel-jest",
+    "^.+\\.(m|c)?jsx?$": "babel-jest",
   },
   moduleNameMapper: {
     "\\.(scss|css)$": "<rootDir>/src/components/__mocks__/styleMock.js",
     "\\.svg$": "<rootDir>/src/components/__mocks__/svgMock.js",
+    "\\.(png|jpg|jpeg|ico)$": "<rootDir>/src/components/__mocks__/fileMock.js",
   },
   moduleFileExtensions: [
     "js",

package.json

@@ -22,9 +22,9 @@
   "main": "n/a",
   "scripts": {
     "clean-dist": "rimraf ./dist",
-    "clean-printable": "rimraf src/content/**/printable.mdx",
+    "clean-printable": "rimraf \"src/content/**/printable.mdx\"",
     "preclean": "run-s clean-dist clean-printable",
-    "clean": "rimraf src/content/**/_*.mdx src/**/_*.json repositories/*.json",
+    "clean": "rimraf \"src/content/**/_*.mdx\" \"src/**/_*.json\" \"repositories/*.json\"",
     "start": "npm run clean-dist && webpack serve --config webpack.dev.mjs --env dev --progress --config-node-env development",
     "content": "node src/scripts/build-content-tree.mjs ./src/content ./src/_content.json",
     "bundle-analyze": "run-s clean fetch content && webpack --config webpack.prod.mjs --config-node-env production && run-s printable content && webpack --config webpack.ssg.mjs --config-node-env production --env ssg --profile --json > stats.json && webpack-bundle-analyzer stats.json",
@@ -64,7 +64,7 @@
     "*.{md,mdx}": [
       "npm run lint:markdown"
     ],
-    "*.{js,mjs,jsx,css,scss,md,mdx,json}": [
+    "*.{js,mjs,jsx,css,md,mdx,json}": [
       "prettier --write"
     ]
   },
@@ -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"
   },
@@ -131,7 +133,6 @@
     "mdast-util-to-string": "^4.0.0",
     "mini-css-extract-plugin": "^2.10.1",
     "mkdirp": "^3.0.1",
-    "modularscale-sass": "^3.0.3",
     "npm-run-all": "^4.1.1",
     "postcss": "^8.5.8",
     "postcss-loader": "^8.2.0",
@@ -148,8 +149,6 @@
     "remark-gfm": "^4.0.1",
     "remark-html": "^16.0.1",
     "rimraf": "^6.1.2",
-    "sass": "^1.97.3",
-    "sass-loader": "^16.0.6",
     "sirv-cli": "^3.0.1",
     "sitemap-static": "^0.4.2",
     "static-site-generator-webpack-plugin": "^3.4.1",

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"