[pull] main from nodejs:main

CONTRIBUTING.md

@@ -128,7 +128,7 @@ Our documentation is organized in the [`docs/`](./docs/) directory, so check out
 
 ## Project Maintainers
 
-This project is maintained by the [Node.js Website Team](https://github.com/nodejs/nodejs.org#readme). For questions about governance or high-level project direction, you can:
+This project is maintained by the [Node.js Website Team](https://github.com/nodejs/web-team/blob/main/MEMBERS.md#nodejs-website-team-nodejsnodejs-website). For questions about governance or high-level project direction, you can:
 
 - Mention `@nodejs/nodejs-website` in issues or PRs
 - Contact team members directly for guidance

apps/site/components/Common/LinkTabs.tsx

@@ -1,15 +1,11 @@
-'use client';
-
 import BaseLinkTabs from '@node-core/ui-components/Common/BaseLinkTabs';
 import type { LinkTabsProps } from '@node-core/ui-components/Common/BaseLinkTabs';
 import type { FC } from 'react';
 
 import Link from '#site/components/Link';
-import { useRouter } from '#site/navigation.mjs';
 
-const LinkTabs: FC<Omit<LinkTabsProps, 'as' | 'onSelect'>> = props => {
-  const { push } = useRouter();
-  return <BaseLinkTabs onSelect={value => push(value)} as={Link} {...props} />;
+const LinkTabs: FC<Omit<LinkTabsProps, 'as'>> = props => {
+  return <BaseLinkTabs as={Link} {...props} />;
 };
 
 export default LinkTabs;

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

@@ -1,5 +1,3 @@
-'use client';
-
 import Avatar from '@node-core/ui-components/Common/AvatarGroup/Avatar';
 import type { FC } from 'react';
 

apps/site/components/Downloads/DownloadButton/index.tsx

@@ -1,11 +1,9 @@
-'use client';
-
 import { CloudArrowDownIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 import type { FC, PropsWithChildren } from 'react';
 
+import { getClientContext } from '#site/client-context';
 import Button from '#site/components/Common/Button';
-import { useClientContext } from '#site/hooks';
 import type { NodeRelease } from '#site/types';
 import { getNodeDownloadUrl } from '#site/util/url';
 import { getUserPlatform } from '#site/util/userAgent';
@@ -18,7 +16,7 @@ const DownloadButton: FC<PropsWithChildren<DownloadButtonProps>> = ({
   release: { versionWithPrefix },
   children,
 }) => {
-  const { os, bitness, architecture } = useClientContext();
+  const { os, bitness, architecture } = getClientContext();
 
   const platform = getUserPlatform(architecture, bitness);
   const downloadLink = getNodeDownloadUrl({ versionWithPrefix, os, platform });

apps/site/components/Downloads/DownloadLink.tsx

@@ -1,9 +1,7 @@
-'use client';
-
 import type { FC, PropsWithChildren } from 'react';
 
+import { getClientContext } from '#site/client-context';
 import LinkWithArrow from '#site/components/Common/LinkWithArrow';
-import { useClientContext } from '#site/hooks';
 import type { DownloadKind, NodeRelease } from '#site/types';
 import { getNodeDownloadUrl } from '#site/util/url';
 import { getUserPlatform } from '#site/util/userAgent';
@@ -15,7 +13,7 @@ const DownloadLink: FC<PropsWithChildren<DownloadLinkProps>> = ({
   kind = 'installer',
   children,
 }) => {
-  const { os, bitness, architecture } = useClientContext();
+  const { os, bitness, architecture } = getClientContext();
 
   const platform = getUserPlatform(architecture, bitness);
 

apps/site/pages/en/learn/command-line/how-to-read-environment-variables-from-nodejs.md

@@ -1,7 +1,7 @@
 ---
 title: How to read environment variables from Node.js
 layout: learn
-authors: flaviocopes, MylesBorins, fhemberger, LaRuaNa, ahmadawais, manishprivet, nikhilbhatt
+authors: flaviocopes, MylesBorins, fhemberger, LaRuaNa, ahmadawais, manishprivet, nikhilbhatt, ycmjason
 ---
 
 # How to read environment variables from Node.js
@@ -64,3 +64,34 @@ throwing an error if the file is missing using the `--env-file-if-exists` flag.
 ```bash
 node --env-file-if-exists=.env app.js
 ```
+
+## Loading `.env` files programmatically with `process.loadEnvFile(path)`
+
+Node.js provides a built-in API to load `.env` files directly from your code: [`process.loadEnvFile(path)`](https://nodejs.org/api/process.html#processloadenvfilepath).
+
+This method loads variables from a `.env` file into `process.env`, similar to how the `--env-file` flag works — but can be invoked programmatically.
+
+Because this method is invoked post-initialization, the setting of startup-related environment variables (i.e. `NODE_OPTIONS`) has no effect on the process (however, these variables can still be accessed via `process.env`).
+
+### Example
+
+```txt
+// .env file
+PORT=1234
+```
+
+```js
+const { loadEnvFile } = require('node:process');
+
+// Loads environment variables from the default .env file
+loadEnvFile();
+
+console.log(process.env.PORT); // Logs '1234'
+```
+
+You can also specify a custom path:
+
+```js
+const { loadEnvFile } = require('node:process');
+loadEnvFile('./config/.env');
+```

packages/ui-components/src/Common/BaseLinkTabs/index.module.css

@@ -38,13 +38,5 @@
 }
 
 .tabsSelect {
-  @apply sm:visible
-    md:hidden;
-
-  > span {
-    @apply max-xs:flex
-      my-6
-      hidden
-      w-full;
-  }
+  @apply md:hidden;
 }

packages/ui-components/src/Common/BaseLinkTabs/index.tsx

@@ -1,9 +1,9 @@
 import type { FC, PropsWithChildren } from 'react';
 
-import Select from '#ui/Common/Select';
 import type { LinkLike } from '#ui/types';
 
 import styles from './index.module.css';
+import StatelessSelect from '../Select/StatelessSelect';
 
 type LinkTab = { key: string; label: string; link: string };
 
@@ -12,7 +12,6 @@ export type LinkTabsProps = PropsWithChildren<{
   tabs: Array<LinkTab>;
   activeTab: string;
   as?: LinkLike;
-  onSelect: (value: string) => void;
 }>;
 
 const BaseLinkTabs: FC<LinkTabsProps> = ({
@@ -21,7 +20,6 @@ const BaseLinkTabs: FC<LinkTabsProps> = ({
   activeTab,
   children,
   as: Component = 'a',
-  onSelect,
 }) => (
   <>
     <div className={styles.tabsList}>
@@ -37,14 +35,12 @@ const BaseLinkTabs: FC<LinkTabsProps> = ({
       ))}
     </div>
 
-    <div className={styles.tabsSelect}>
-      <Select
-        label={label}
-        defaultValue={tabs.find(tab => tab.key === activeTab)?.link}
-        values={tabs.map(tab => ({ label: tab.label, value: tab.link }))}
-        onChange={onSelect}
-      />
-    </div>
+    <StatelessSelect
+      label={label}
+      className={styles.tabsSelect}
+      defaultValue={tabs.find(tab => tab.key === activeTab)?.link}
+      values={tabs.map(tab => ({ label: tab.label, value: tab.link }))}
+    />
 
     {children}
   </>

packages/ui-components/src/Common/Select/index.module.css

@@ -180,7 +180,8 @@
   }
 
   .dropdown {
-    @apply absolute
+    @apply z-99
+      absolute
       left-0
       mt-4;
   }

packages/ui-components/src/Common/Separator/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import classNames from 'classnames';
 import type { FC, ComponentProps } from 'react';

packages/ui-components/src/Containers/NavBar/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import Hamburger from '@heroicons/react/24/solid/Bars3Icon';
 import XMark from '@heroicons/react/24/solid/XMarkIcon';
 import * as Label from '@radix-ui/react-label';