Merge branch 'main' into eol

Signed-off-by: Brian Muenzenmeyer <[email protected]>

Author: bmuenzenmeyer

.github/workflows/playwright-cloudflare-open-next.yml

@@ -51,12 +51,6 @@ jobs:
       - name: Install packages
         run: pnpm install --frozen-lockfile
 
-      - name: Downgrade Next.js
-        # Open-next does not yet support [email protected], so temporarily in order to have
-        # this workflow working we force install the latest Next.js 15.3 version instead
-        run: pnpm i [email protected]
-        working-directory: apps/site
-
       - name: Get Playwright version
         id: playwright-version
         working-directory: apps/site

apps/site/app/[locale]/not-found.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { ArrowRightIcon } from '@heroicons/react/24/solid';
-import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import Button from '#site/components/Common/Button';
+import Turtle from '#site/components/Common/Turtle';
 import GlowingBackdropLayout from '#site/layouts/GlowingBackdrop';
 
 const NotFoundPage: FC = () => {
@@ -20,14 +20,7 @@ const NotFoundPage: FC = () => {
       </h1>
 
       <div className="my-4 flex h-[150px] items-center justify-center md:h-[300px]">
-        <div className="turtle motion-safe:animate-surf motion-reduce:animate-none">
-          <Image
-            src="/static/images/node-mascot.svg"
-            alt="The Node.js mascot"
-            height={114.69}
-            width={100}
-          />
-        </div>
+        <Turtle />
       </div>
 
       <p className="-mt-4 max-w-sm text-center text-lg">

apps/site/styles/effects.css …omponents/Common/Turtle/index.module.cssapps/site/styles/effects.css renamed to apps/site/components/Common/Turtle/index.module.css apps/site/styles/effects.css renamed to apps/site/components/Common/Turtle/index.module.css

@@ -1,5 +1,8 @@
-@utility turtle {
-  @apply animate-surf
+@reference "../../../styles/index.css";
+
+.turtle {
+  @apply motion-safe:animate-surf
+    animate-surf
     absolute
     z-10
     translate-x-0
@@ -16,12 +19,13 @@
     after:bg-[url('/static/images/smoke.gif')]
     after:opacity-[0.15]
     after:content-['']
+    motion-reduce:animate-none
     after:md:-left-1/2
     after:md:top-1/2;
+}
 
-  & img {
-    @apply h-auto
-      w-24
-      md:w-48;
-  }
+.image {
+  @apply h-auto
+    w-24
+    md:w-48;
 }

apps/site/components/Common/Turtle/index.tsx

@@ -0,0 +1,18 @@
+import Image from 'next/image';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+const Turtle: FC = () => (
+  <div className={styles.turtle}>
+    <Image
+      className={styles.image}
+      src="/static/images/node-mascot.svg"
+      alt="The Node.js mascot"
+      height={115}
+      width={100}
+    />
+  </div>
+);
+
+export default Turtle;

apps/site/components/Downloads/Release/VersionDropdown.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import Select from '@node-core/ui-components/Common/Select';
+import WithNoScriptSelect from '@node-core/ui-components/Common/Select/NoScriptSelect';
 import { useLocale, useTranslations } from 'next-intl';
 import type { FC } from 'react';
 import { useContext } from 'react';
@@ -51,7 +51,7 @@ const VersionDropdown: FC = () => {
   };
 
   return (
-    <Select
+    <WithNoScriptSelect
       ariaLabel={t('layouts.download.dropdown.version')}
       values={releases.map(({ status, versionWithPrefix }) => ({
         value: versionWithPrefix,

apps/site/components/withNavBar.tsx

@@ -2,7 +2,6 @@
 
 import LanguageDropdown from '@node-core/ui-components/Common/LanguageDropDown';
 import Skeleton from '@node-core/ui-components/Common/Skeleton';
-import ThemeToggle from '@node-core/ui-components/Common/ThemeToggle';
 import NavBar from '@node-core/ui-components/Containers/NavBar';
 // TODO(@AvivKeller): I don't like that we are importing styles from another module
 import styles from '@node-core/ui-components/Containers/NavBar/index.module.css';
@@ -27,6 +26,16 @@ const SearchButton = dynamic(() => import('#site/components/Common/Search'), {
   ),
 });
 
+const ThemeToggle = dynamic(
+  () => import('@node-core/ui-components/Common/ThemeToggle'),
+  {
+    ssr: false,
+    loading: () => (
+      <Skeleton className={styles.themeToggleSkeleton} loading={true} />
+    ),
+  }
+);
+
 const WithNavBar: FC = () => {
   const { navigationItems } = useSiteNavigation();
   const { resolvedTheme, setTheme } = useTheme();
@@ -39,6 +48,11 @@ const WithNavBar: FC = () => {
   const toggleCurrentTheme = () =>
     setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
 
+  const themeToggleAriaLabel =
+    resolvedTheme === 'dark'
+      ? t('components.common.themeToggle.light')
+      : t('components.common.themeToggle.dark');
+
   const changeLanguage = (locale: SimpleLocaleConfig) =>
     replace(pathname!, { locale: locale.code });
 
@@ -63,7 +77,7 @@ const WithNavBar: FC = () => {
 
         <ThemeToggle
           onClick={toggleCurrentTheme}
-          aria-label={t('components.common.themeToggle.label')}
+          aria-label={themeToggleAriaLabel}
         />
 
         <LanguageDropdown

apps/site/navigation.json

@@ -65,7 +65,7 @@
     },
     {
       "icon": "discord",
-      "link": "https://nodejs.org/discord",
+      "link": "https://discord.gg/nodejs",
       "alt": "Discord"
     },
     {

apps/site/package.json

@@ -14,11 +14,14 @@
     "deploy": "cross-env NEXT_PUBLIC_STATIC_EXPORT=true node --run build:default -- --turbo",
     "predev": "node --run build:blog-data",
     "dev": "cross-env NODE_NO_WARNINGS=1 next dev --turbo",
-    "lint": "turbo run lint:md lint:js lint:css",
+    "lint": "node --run lint:js && node --run lint:css && node --run lint:md",
+    "lint:fix": "node --run lint:js:fix && node --run lint:css:fix && node --run lint:md:fix",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
-    "lint:fix": "node --run lint -- -- --fix",
+    "lint:css:fix": "node --run lint:css -- --fix",
     "lint:js": "eslint \"**/*.{js,mjs,ts,tsx}\"",
+    "lint:js:fix": "node --run lint:js -- --fix",
     "lint:md": "eslint \"**/*.md?(x)\" --cache --cache-strategy=content --cache-location=.eslintmdcache",
+    "lint:md:fix": "node --run lint:md -- --fix",
     "lint:types": "tsc --noEmit",
     "playwright": "playwright test",
     "scripts:release-post": "cross-env NODE_NO_WARNINGS=1 node scripts/release-post/index.mjs",
@@ -62,7 +65,7 @@
     "next-themes": "~0.4.6",
     "postcss-calc": "~10.1.1",
     "react": "catalog:",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.1.1",
     "reading-time": "~1.5.0",
     "rehype-autolink-headings": "~7.1.0",
     "rehype-slug": "~6.0.0",
@@ -79,12 +82,12 @@
     "@eslint/eslintrc": "~3.3.1",
     "@flarelabs-net/wrangler-build-time-fs-assets-polyfilling": "^0.0.1",
     "@next/eslint-plugin-next": "15.4.4",
-    "@opennextjs/cloudflare": "^1.6.0",
+    "@opennextjs/cloudflare": "^1.6.4",
     "@playwright/test": "^1.54.1",
     "@testing-library/user-event": "~14.6.1",
     "@types/mdx": "^2.0.13",
     "@types/semver": "~7.7.0",
-    "eslint-config-next": "15.4.3",
+    "eslint-config-next": "15.4.4",
     "eslint-import-resolver-typescript": "~4.4.4",
     "eslint-plugin-mdx": "~3.6.2",
     "eslint-plugin-react": "~7.37.4",
@@ -103,15 +106,15 @@
     "remark-lint-prohibited-strings": "^4.0.0",
     "remark-lint-unordered-list-marker-style": "^4.0.1",
     "remark-preset-lint-node": "5.1.2",
-    "stylelint": "16.22.0",
-    "stylelint-config-standard": "38.0.0",
+    "stylelint": "16.23.0",
+    "stylelint-config-standard": "39.0.0",
     "stylelint-order": "7.0.0",
     "stylelint-selector-bem-pattern": "4.0.1",
     "tsx": "^4.20.3",
     "typescript": "catalog:",
     "typescript-eslint": "~8.38.0",
     "user-agent-data-types": "0.4.2",
-    "wrangler": "^4.25.1"
+    "wrangler": "^4.26.1"
   },
   "imports": {
     "#site/*": [

apps/site/pages/en/about/get-involved/index.md

@@ -11,7 +11,7 @@ If you are interested in getting involved with the Node.js community, there are
 
 - The [`nodejs/node` GitHub repository](https://github.com/nodejs/node/issues) is the place to discuss Node.js core features and reporting issues.
 - The [`nodejs/help` GitHub repository](https://github.com/nodejs/help/issues) is the official place to ask questions about Node.js.
-- Node.js's [official Discord server](/discord) is a place to chat with other Node.js developers and get official news from the Node.js project.
+- Node.js's [official Discord server](https://discord.gg/nodejs) is a place to chat with other Node.js developers and get official news from the Node.js project.
 - Node.js's [project calendar](https://nodejs.org/calendar) with all public Node.js team meetings.
 
 ## Learning Materials

apps/site/pages/en/blog/announcements/official-discord-launch-announcement.md

@@ -6,7 +6,7 @@ layout: blog-post
 author: Carl Vitullo, Claudio Wunder
 ---
 
-First, the news: [The OpenJS Foundation](https://openjsf.org/) and [Reactiflux](https://reactiflux.com/) have collaborated to bring forth an official Discord community for Node.js 🎉 You can [join the Node.js Discord](/discord) now.
+First, the news: [The OpenJS Foundation](https://openjsf.org/) and [Reactiflux](https://reactiflux.com/) have collaborated to bring forth an official Discord community for Node.js 🎉 You can [join the Node.js Discord](https://discord.gg/nodejs) now.
 
 Over the past several years, Discord has become the de-facto platform for communities to connect and communicate. Many Node.js community members already use Discord to discuss Node.js, seek advice, and share their projects. By establishing an official Node.js Discord server, we aim to gather these conversations and provide a safe and well-moderated space for our online community to congregate. Lots of other open-source projects, such as [TypeScript](https://discord.gg/typescript), [Rust](https://discord.gg/rust-lang), and [Python](https://discord.gg/python), have successfully built their communities on Discord.
 
@@ -27,7 +27,7 @@ Reactiflux was one of the first large commuinities on Discord, joining the platf
 
 Now, 7 years on, the Nodeiflux server has joined up with the OpenJS Foundation to serve as the official Node.js Discord server. We are excited to see how our community will thrive in this new environment — the server will be jointly managed by the Node.js project and the Nodeiflux community, with the Node.js Technical Steering Committee (TSC) providing advisory support. The Nodeiflux community will handle the day-to-day administration of the server.
 
-For all intents and purposes, this is an official Node.js space, and we are eager to see how it will grow and evolve. [Join the Node.js Discord](/discord) and become part of our growing community. See you there!
+For all intents and purposes, this is an official Node.js space, and we are eager to see how it will grow and evolve. [Join the Node.js Discord](https://discord.gg/nodejs) and become part of our growing community. See you there!
 
 ### Looking Ahead