Merge pull request #676 from reactjs/sync-8201e7e9

Sync with react.dev @ 8201e7e

Author: tdd

.github/workflows/analyze.yml

@@ -11,18 +11,26 @@ jobs:
   analyze:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
+          cache: yarn
+          cache-dependency-path: yarn.lock
 
-      - name: Install dependencies
-        uses: bahmutov/[email protected]
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        with:
+          path: "**/node_modules"
+          key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install deps
+        run: yarn install --frozen-lockfile
 
       - name: Restore next build
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: restore-build-cache
         env:
           cache-name: cache-next-build
@@ -41,7 +49,7 @@ jobs:
         run: npx -p [email protected] report
 
       - name: Upload bundle
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           path: .next/analyze/__bundle_analysis.json
           name: bundle_analysis.json
@@ -73,7 +81,7 @@ jobs:
         run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
 
       - name: Upload analysis comment
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: analysis_comment.txt
           path: .next/analyze/__bundle_analysis_comment.txt
@@ -82,7 +90,7 @@ jobs:
         run: echo ${{ github.event.number }} > ./pr_number
 
       - name: Upload PR number
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: pr_number
           path: ./pr_number

.github/workflows/site_lint.yml

@@ -14,14 +14,22 @@ jobs:
     name: Lint on node 20.x and ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
       - name: Use Node.js 20.x
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20.x
+          cache: yarn
+          cache-dependency-path: yarn.lock
 
-      - name: Install deps and build (with cache)
-        uses: bahmutov/[email protected]
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        with:
+          path: "**/node_modules"
+          key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install deps
+        run: yarn install --frozen-lockfile
 
       - name: Lint codebase
         run: yarn ci-check

src/components/Icon/IconBsky.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconBsky = memo<JSX.IntrinsicElements['svg']>(function IconBsky(
+  props
+) {
+  return (
+    <svg
+      aria-label="Bluesky"
+      viewBox="0 0 16 16"
+      height="1.25em"
+      width="1.25em"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path
+        className="x19hqcy"
+        d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z"></path>
+    </svg>
+  );
+});

src/components/Layout/Footer.tsx

@@ -8,6 +8,7 @@ import cn from 'classnames';
 import {ExternalLink} from 'components/ExternalLink';
 import {IconFacebookCircle} from 'components/Icon/IconFacebookCircle';
 import {IconTwitter} from 'components/Icon/IconTwitter';
+import {IconBsky} from 'components/Icon/IconBsky';
 import {IconGitHub} from 'components/Icon/IconGitHub';
 
 export function Footer() {
@@ -368,6 +369,12 @@ export function Footer() {
               className={socialLinkClasses}>
               <IconTwitter />
             </ExternalLink>
+            <ExternalLink
+              aria-label="React sur Bluesky"
+              href="https://bsky.app/profile/react.dev"
+              className={socialLinkClasses}>
+              <IconBsky />
+            </ExternalLink>
             <ExternalLink
               aria-label="React sur Github"
               href="https://github.com/facebook/react"

src/components/MDX/TeamMember.tsx

@@ -3,14 +3,14 @@
  */
 
 import * as React from 'react';
-
+import Image from 'next/image';
+import {IconTwitter} from '../Icon/IconTwitter';
+import {IconThreads} from '../Icon/IconThreads';
+import {IconBsky} from '../Icon/IconBsky';
+import {IconGitHub} from '../Icon/IconGitHub';
 import {ExternalLink} from '../ExternalLink';
 import {H3} from './Heading';
-import {IconGitHub} from '../Icon/IconGitHub';
 import {IconLink} from 'components/Icon/IconLink';
-import {IconThreads} from '../Icon/IconThreads';
-import {IconTwitter} from '../Icon/IconTwitter';
-import Image from 'next/image';
 
 interface TeamMemberProps {
   name: string;
@@ -20,6 +20,7 @@ interface TeamMemberProps {
   photo: string;
   twitter?: string;
   threads?: string;
+  bsky?: string;
   github?: string;
   personal?: string;
 }
@@ -34,6 +35,7 @@ export function TeamMember({
   github,
   twitter,
   threads,
+  bsky,
   personal,
 }: TeamMemberProps) {
   if (name == null || title == null || permalink == null || children == null) {
@@ -63,11 +65,11 @@ export function TeamMember({
           </H3>
           {title && <div>{title}</div>}
           {children}
-          <div className="sm:flex sm:flex-row flex-wrap">
+          <div className="sm:flex sm:flex-row flex-wrap text-secondary dark:text-secondary-dark">
             {twitter && (
               <div className="me-4">
                 <ExternalLink
-                  aria-label="Réagissez sur Twitter"
+                  aria-label={`${name} on Twitter`}
                   href={`https://twitter.com/${twitter}`}
                   className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
                   <IconTwitter className="pe-1" />
@@ -78,14 +80,25 @@ export function TeamMember({
             {threads && (
               <div className="me-4">
                 <ExternalLink
-                  aria-label="Réagissez sur Threads"
+                  aria-label={`${name} sur Threads`}
                   href={`https://threads.net/${threads}`}
                   className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
                   <IconThreads className="pe-1" />
                   {threads}
                 </ExternalLink>
               </div>
             )}
+            {bsky && (
+              <div className="me-4">
+                <ExternalLink
+                  aria-label={`${name} sur Bluesky`}
+                  href={`https://bsky.app/profile/${bsky}`}
+                  className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
+                  <IconBsky className="pe-1" />
+                  {bsky}
+                </ExternalLink>
+              </div>
+            )}
             {github && (
               <div className="me-4">
                 <ExternalLink

src/content/community/acknowledgements.md

@@ -4,7 +4,7 @@ title: Remerciements
 
 <Intro>
 
-React a été créé à l'origine par [Jordan Walke](https://github.com/jordwalke). Aujourd'hui, React dispose d'une [équipe dédiée travaillant dessus à temps plein](/community/team), ainsi que de plus d'un millier de [contributeurs en logiciel libre](https://github.com/facebook/react/blob/main/AUTHORS).
+React a été créé à l'origine par [Jordan Walke](https://github.com/jordwalke). Aujourd'hui, React dispose d'une [équipe dédiée travaillant dessus à temps plein](/community/team), ainsi que de plus d'un millier de [contributeurs en logiciel libre](https://github.com/facebook/react/graphs/contributors).
 
 </Intro>
 

src/content/community/team.md

@@ -18,7 +18,7 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
     Andrew a commencé le développement web en faisant des sites avec Wordpress, puis il a fini par se persuader de faire du JavaScript.  Son passe-temps favori est le karaoké.  Selon son humeur du jour, Andrew est soit un méchant Disney, soit une princesse Disney.
 </TeamMember>
 
-<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov2" title="Ingénieur indépendant">
+<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" bsky="danabra.mov" title="Ingénieur indépendant">
     Dan a commencé à programmer lorsqu'il a découvert par hasard qu'il y avait Visual Basic dans Microsoft Powerpoint.  Il a découvert que sa véritable vocation consistait à transformer les tweets de [Sebastian](#sebastian-markbåge) en billets de blog interminables. Dan gagne parfois à Fortnite en se cachant dans un buisson jusqu'à la fin de la partie.
 </TeamMember>
 
@@ -42,7 +42,7 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
     Josh a étudié les Mathématiques et découvert la programmation pendant ses études.  Son premier boulot de développeur professionnel consistait à calculer des taux d'assurance dans Microsoft Excel, ce parangon de Programmation Réactive, ce qui explique probablement pourquoi il bosse désormais sur React. Entre les deux Josh a été contributeur, manager voire directeur dans quelques startups.  Hors du boulot, il aime se lancer des défis de cuisine.
 </TeamMember>
 
-<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" personal="no.lol" title="Ingénieure chez Meta">
+<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" bsky="no.lol" title="Ingénieure chez Meta">
     La carrière de développeuse de Lauren a atteint son sommet lorsqu'elle a découvert la balise `<marquee>`. Depuis, elle cherche à retrouver cette extase.  Elle a étudié la finance à la fac plutôt que l'informatique, de sorte qu'elle a paris à coder avec Excel plutôt que Java. Lauren aime balancer des mèmes audacieux dans les forums internes, jouer à des jeux vidéos avec l'amour de sa vie, et poutouter son chien Zelda.
 </TeamMember>
 
@@ -62,7 +62,7 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
     Noah a commencé à s'intéresser à la programmation d'UI lors de ses études en technologies musicales à NYU. Chez Meta, il a travaillé sur des outils internes, des navigateurs, la performance web, et se concentre actuellement sur React.  Quand il n'est pas au boulot, Noah est généralement en train de triturer des synthétiseurs ou de passer du temps avec son chat.
 </TeamMember>
 
-<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" threads="rickhanlonii" personal="rickhanlon.codes" title="Ingénieur chez Meta">
+<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" threads="rickhanlonii" bsky="ricky.fm" title="Ingénieur chez Meta">
     Ricky a étudié les maths théoriques puis s'est retrouvé on ne sait comment dans l'équipe React Native quelques années avant de rejoindre l'équipe React. Lorsqu'il n'est pas en train de coder, vous le trouverez à faire du snowboard, du vélo, de l'escalade, du golf, ou à fermer les tickets GitHub qui violent le gabarit demandé.
 </TeamMember>