From 68196c934320944976a8387863cfa85841a244f3 Mon Sep 17 00:00:00 2001
From: Hichem Fantar <fantar.hichem@gmail.com>
Date: Sun, 16 Feb 2025 16:12:29 +0100
Subject: [PATCH 1/3] Replace ThemeImage with ThemedImage and update image
 sources to use useBaseUrl

---
 website/src/pages/Home/Framework/index.tsx | 33 +++++++++++++---------
 website/src/pages/Home/Native/index.tsx    | 13 +++++----
 website/src/pages/Home/Platforms/index.tsx | 13 +++++----
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/website/src/pages/Home/Framework/index.tsx b/website/src/pages/Home/Framework/index.tsx
index 4dd1d0984e9..c3a46f3b571 100644
--- a/website/src/pages/Home/Framework/index.tsx
+++ b/website/src/pages/Home/Framework/index.tsx
@@ -7,11 +7,12 @@
 
 import React from 'react';
 
-import ThemeImage from '../components/ThemeImage';
 import Section from '../components/Section';
 import SectionTitle from '../components/SectionTitle';
 
 import styles from './styles.module.css';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 function Framework() {
   return (
@@ -30,11 +31,13 @@ function Framework() {
       />
       <div className={styles.cardContainer}>
         <div className={styles.card}>
-          <ThemeImage
-            lightSrc="/img/homepage/file-based-routing.png"
-            darkSrc="/img/homepage/file-based-routing-dark.png"
-            className={styles.cardImage}
+          <ThemedImage
             alt="File system with folders and files representing screens and navigation"
+            className={styles.cardImage}
+            sources={{
+              light: useBaseUrl('/img/homepage/file-based-routing.png'),
+              dark: useBaseUrl('/img/homepage/file-based-routing-dark.png'),
+            }}
           />
           <div className={styles.cardContent}>
             <h4 className={styles.cardTitle}>File-based routing</h4>
@@ -45,11 +48,13 @@ function Framework() {
           </div>
         </div>
         <div className={styles.card}>
-          <ThemeImage
-            lightSrc="/img/homepage/libraries.png"
-            darkSrc="/img/homepage/libraries-dark.png"
-            className={styles.cardImage}
+          <ThemedImage
             alt="Grid of icons representing libraries, SDKs, and native code"
+            className={styles.cardImage}
+            sources={{
+              light: useBaseUrl('/img/homepage/libraries.png'),
+              dark: useBaseUrl('/img/homepage/libraries-dark.png'),
+            }}
           />
           <div className={styles.cardContent}>
             <h4 className={styles.cardTitle}>
@@ -62,11 +67,13 @@ function Framework() {
           </div>
         </div>
         <div className={styles.card}>
-          <ThemeImage
-            lightSrc="/img/homepage/tools.png"
-            darkSrc="/img/homepage/tools-dark.png"
-            className={styles.cardImage}
+          <ThemedImage
             alt="List of developer tool toggles for debugging, performance, and more"
+            className={styles.cardImage}
+            sources={{
+              light: useBaseUrl('/img/homepage/tools.png'),
+              dark: useBaseUrl('/img/homepage/tools-dark.png'),
+            }}
           />
           <div className={styles.cardContent}>
             <h4 className={styles.cardTitle}>Developer tools</h4>
diff --git a/website/src/pages/Home/Native/index.tsx b/website/src/pages/Home/Native/index.tsx
index f8c84882d17..05251eb00f1 100644
--- a/website/src/pages/Home/Native/index.tsx
+++ b/website/src/pages/Home/Native/index.tsx
@@ -9,9 +9,10 @@ import React from 'react';
 
 import Section from '../components/Section';
 import SectionTitle from '../components/SectionTitle';
-import ThemeImage from '../components/ThemeImage';
 
 import styles from './styles.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
 
 function Native() {
   return (
@@ -28,11 +29,13 @@ function Native() {
           </>
         }
       />
-      <ThemeImage
-        lightSrc="/img/homepage/dissection.png"
-        darkSrc="/img/homepage/dissection-dark.png"
-        className={styles.flyoutIllustration}
+      <ThemedImage
         alt="A React Native UI pointing out native elements like Views, ScrollViews, and more"
+        className={styles.flyoutIllustration}
+        sources={{
+          light: useBaseUrl('/img/homepage/dissection.png'),
+          dark: useBaseUrl('/img/homepage/dissection-dark.png'),
+        }}
       />
     </Section>
   );
diff --git a/website/src/pages/Home/Platforms/index.tsx b/website/src/pages/Home/Platforms/index.tsx
index 031229b1968..756c6ab59c2 100644
--- a/website/src/pages/Home/Platforms/index.tsx
+++ b/website/src/pages/Home/Platforms/index.tsx
@@ -9,10 +9,11 @@ import React from 'react';
 
 import Section from '../components/Section';
 import SectionTitle from '../components/SectionTitle';
-import ThemeImage from '../components/ThemeImage';
+import ThemedImage from '@theme/ThemedImage';
 
 import FoxFact from './FoxFact';
 import styles from './styles.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 function Platforms() {
   return (
@@ -54,11 +55,13 @@ function Platforms() {
             </div>
           </div>
           <div className={styles.deviceContainer}>
-            <ThemeImage
-              lightSrc="/img/homepage/devices.png"
-              darkSrc="/img/homepage/devices-dark.png"
-              className={styles.devices}
+            <ThemedImage
               alt="Android device and iOS device"
+              className={styles.devices}
+              sources={{
+                light: useBaseUrl('/img/homepage/devices.png'),
+                dark: useBaseUrl('/img/homepage/devices-dark.png'),
+              }}
             />
           </div>
         </div>

From d73c4631dd95e033907a0173e2463bdabb11ca9c Mon Sep 17 00:00:00 2001
From: Hichem Fantar <fantar.hichem@gmail.com>
Date: Sun, 16 Feb 2025 16:13:51 +0100
Subject: [PATCH 2/3] Remove ThemeImage component and its associated code

---
 .../Home/components/ThemeImage/index.tsx      | 43 -------------------
 1 file changed, 43 deletions(-)
 delete mode 100644 website/src/pages/Home/components/ThemeImage/index.tsx

diff --git a/website/src/pages/Home/components/ThemeImage/index.tsx b/website/src/pages/Home/components/ThemeImage/index.tsx
deleted file mode 100644
index 1b50f92d5af..00000000000
--- a/website/src/pages/Home/components/ThemeImage/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, {useState, useEffect} from 'react';
-
-function ThemeImage({lightSrc, darkSrc, className, alt}) {
-  const [theme, setTheme] = useState('light');
-
-  useEffect(() => {
-    const themeObserver = new MutationObserver(mutations => {
-      mutations.forEach(mutation => {
-        if (
-          mutation.type === 'attributes' &&
-          mutation.attributeName === 'data-theme' &&
-          mutation.target instanceof Element
-        ) {
-          setTheme(mutation.target.getAttribute('data-theme'));
-        }
-      });
-    });
-
-    const htmlElement = document.documentElement;
-    themeObserver.observe(htmlElement, {
-      attributes: true,
-    });
-
-    return () => themeObserver.disconnect();
-  }, []);
-
-  return (
-    <img
-      src={theme === 'dark' ? darkSrc : lightSrc}
-      alt={alt}
-      className={className}
-    />
-  );
-}
-
-export default ThemeImage;

From 025676eaa79cd4ebbcd28d6aa2e8d7b3c8753d02 Mon Sep 17 00:00:00 2001
From: Hichem Fantar <fantar.hichem@gmail.com>
Date: Sun, 16 Feb 2025 17:08:58 +0100
Subject: [PATCH 3/3] Refactor Home component structure and styles; move styles
 to dedicated components

---
 .../src/{pages => components}/Home/CallToAction/index.tsx   | 0
 .../Home/CallToAction/styles.module.css                     | 0
 website/src/{pages => components}/Home/Community/index.tsx  | 0
 .../{pages => components}/Home/Community/styles.module.css  | 0
 website/src/{pages => components}/Home/Framework/index.tsx  | 2 +-
 .../{pages => components}/Home/Framework/styles.module.css  | 0
 website/src/{pages => components}/Home/Hero/Devices.tsx     | 0
 .../src/{pages => components}/Home/Hero/FloorBackground.tsx | 0
 .../src/{pages => components}/Home/Hero/GridBackground.tsx  | 0
 website/src/{pages => components}/Home/Hero/index.tsx       | 2 +-
 .../src/{pages => components}/Home/Hero/styles.module.css   | 0
 website/src/{pages => components}/Home/Logo.tsx             | 0
 website/src/{pages => components}/Home/Native/index.tsx     | 0
 .../src/{pages => components}/Home/Native/styles.module.css | 0
 .../src/{pages => components}/Home/Platforms/FoxFact.tsx    | 0
 website/src/{pages => components}/Home/Platforms/index.tsx  | 2 +-
 .../{pages => components}/Home/Platforms/styles.module.css  | 0
 website/src/{pages => components}/Home/Watch/index.tsx      | 0
 .../src/{pages => components}/Home/Watch/styles.module.css  | 0
 .../{pages => components}/Home/components/Section/index.tsx | 0
 .../Home/components/Section/styles.module.css               | 0
 .../Home/components/SectionTitle/index.tsx                  | 0
 .../Home/components/SectionTitle/styles.module.css          | 0
 website/src/{pages => components}/Home/index.tsx            | 6 +++---
 website/src/pages/index.tsx                                 | 2 +-
 25 files changed, 7 insertions(+), 7 deletions(-)
 rename website/src/{pages => components}/Home/CallToAction/index.tsx (100%)
 rename website/src/{pages => components}/Home/CallToAction/styles.module.css (100%)
 rename website/src/{pages => components}/Home/Community/index.tsx (100%)
 rename website/src/{pages => components}/Home/Community/styles.module.css (100%)
 rename website/src/{pages => components}/Home/Framework/index.tsx (99%)
 rename website/src/{pages => components}/Home/Framework/styles.module.css (100%)
 rename website/src/{pages => components}/Home/Hero/Devices.tsx (100%)
 rename website/src/{pages => components}/Home/Hero/FloorBackground.tsx (100%)
 rename website/src/{pages => components}/Home/Hero/GridBackground.tsx (100%)
 rename website/src/{pages => components}/Home/Hero/index.tsx (98%)
 rename website/src/{pages => components}/Home/Hero/styles.module.css (100%)
 rename website/src/{pages => components}/Home/Logo.tsx (100%)
 rename website/src/{pages => components}/Home/Native/index.tsx (100%)
 rename website/src/{pages => components}/Home/Native/styles.module.css (100%)
 rename website/src/{pages => components}/Home/Platforms/FoxFact.tsx (100%)
 rename website/src/{pages => components}/Home/Platforms/index.tsx (99%)
 rename website/src/{pages => components}/Home/Platforms/styles.module.css (100%)
 rename website/src/{pages => components}/Home/Watch/index.tsx (100%)
 rename website/src/{pages => components}/Home/Watch/styles.module.css (100%)
 rename website/src/{pages => components}/Home/components/Section/index.tsx (100%)
 rename website/src/{pages => components}/Home/components/Section/styles.module.css (100%)
 rename website/src/{pages => components}/Home/components/SectionTitle/index.tsx (100%)
 rename website/src/{pages => components}/Home/components/SectionTitle/styles.module.css (100%)
 rename website/src/{pages => components}/Home/index.tsx (83%)

diff --git a/website/src/pages/Home/CallToAction/index.tsx b/website/src/components/Home/CallToAction/index.tsx
similarity index 100%
rename from website/src/pages/Home/CallToAction/index.tsx
rename to website/src/components/Home/CallToAction/index.tsx
diff --git a/website/src/pages/Home/CallToAction/styles.module.css b/website/src/components/Home/CallToAction/styles.module.css
similarity index 100%
rename from website/src/pages/Home/CallToAction/styles.module.css
rename to website/src/components/Home/CallToAction/styles.module.css
diff --git a/website/src/pages/Home/Community/index.tsx b/website/src/components/Home/Community/index.tsx
similarity index 100%
rename from website/src/pages/Home/Community/index.tsx
rename to website/src/components/Home/Community/index.tsx
diff --git a/website/src/pages/Home/Community/styles.module.css b/website/src/components/Home/Community/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Community/styles.module.css
rename to website/src/components/Home/Community/styles.module.css
diff --git a/website/src/pages/Home/Framework/index.tsx b/website/src/components/Home/Framework/index.tsx
similarity index 99%
rename from website/src/pages/Home/Framework/index.tsx
rename to website/src/components/Home/Framework/index.tsx
index c3a46f3b571..8599e4857b9 100644
--- a/website/src/pages/Home/Framework/index.tsx
+++ b/website/src/components/Home/Framework/index.tsx
@@ -89,4 +89,4 @@ function Framework() {
   );
 }
 
-export default Framework;
+export {Framework};
diff --git a/website/src/pages/Home/Framework/styles.module.css b/website/src/components/Home/Framework/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Framework/styles.module.css
rename to website/src/components/Home/Framework/styles.module.css
diff --git a/website/src/pages/Home/Hero/Devices.tsx b/website/src/components/Home/Hero/Devices.tsx
similarity index 100%
rename from website/src/pages/Home/Hero/Devices.tsx
rename to website/src/components/Home/Hero/Devices.tsx
diff --git a/website/src/pages/Home/Hero/FloorBackground.tsx b/website/src/components/Home/Hero/FloorBackground.tsx
similarity index 100%
rename from website/src/pages/Home/Hero/FloorBackground.tsx
rename to website/src/components/Home/Hero/FloorBackground.tsx
diff --git a/website/src/pages/Home/Hero/GridBackground.tsx b/website/src/components/Home/Hero/GridBackground.tsx
similarity index 100%
rename from website/src/pages/Home/Hero/GridBackground.tsx
rename to website/src/components/Home/Hero/GridBackground.tsx
diff --git a/website/src/pages/Home/Hero/index.tsx b/website/src/components/Home/Hero/index.tsx
similarity index 98%
rename from website/src/pages/Home/Hero/index.tsx
rename to website/src/components/Home/Hero/index.tsx
index 265c0966d84..399ab2b240a 100644
--- a/website/src/pages/Home/Hero/index.tsx
+++ b/website/src/components/Home/Hero/index.tsx
@@ -62,4 +62,4 @@ function Hero() {
   );
 }
 
-export default Hero;
+export {Hero};
diff --git a/website/src/pages/Home/Hero/styles.module.css b/website/src/components/Home/Hero/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Hero/styles.module.css
rename to website/src/components/Home/Hero/styles.module.css
diff --git a/website/src/pages/Home/Logo.tsx b/website/src/components/Home/Logo.tsx
similarity index 100%
rename from website/src/pages/Home/Logo.tsx
rename to website/src/components/Home/Logo.tsx
diff --git a/website/src/pages/Home/Native/index.tsx b/website/src/components/Home/Native/index.tsx
similarity index 100%
rename from website/src/pages/Home/Native/index.tsx
rename to website/src/components/Home/Native/index.tsx
diff --git a/website/src/pages/Home/Native/styles.module.css b/website/src/components/Home/Native/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Native/styles.module.css
rename to website/src/components/Home/Native/styles.module.css
diff --git a/website/src/pages/Home/Platforms/FoxFact.tsx b/website/src/components/Home/Platforms/FoxFact.tsx
similarity index 100%
rename from website/src/pages/Home/Platforms/FoxFact.tsx
rename to website/src/components/Home/Platforms/FoxFact.tsx
diff --git a/website/src/pages/Home/Platforms/index.tsx b/website/src/components/Home/Platforms/index.tsx
similarity index 99%
rename from website/src/pages/Home/Platforms/index.tsx
rename to website/src/components/Home/Platforms/index.tsx
index 756c6ab59c2..3778b66c7bb 100644
--- a/website/src/pages/Home/Platforms/index.tsx
+++ b/website/src/components/Home/Platforms/index.tsx
@@ -78,4 +78,4 @@ function Platforms() {
   );
 }
 
-export default Platforms;
+export {Platforms};
diff --git a/website/src/pages/Home/Platforms/styles.module.css b/website/src/components/Home/Platforms/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Platforms/styles.module.css
rename to website/src/components/Home/Platforms/styles.module.css
diff --git a/website/src/pages/Home/Watch/index.tsx b/website/src/components/Home/Watch/index.tsx
similarity index 100%
rename from website/src/pages/Home/Watch/index.tsx
rename to website/src/components/Home/Watch/index.tsx
diff --git a/website/src/pages/Home/Watch/styles.module.css b/website/src/components/Home/Watch/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Watch/styles.module.css
rename to website/src/components/Home/Watch/styles.module.css
diff --git a/website/src/pages/Home/components/Section/index.tsx b/website/src/components/Home/components/Section/index.tsx
similarity index 100%
rename from website/src/pages/Home/components/Section/index.tsx
rename to website/src/components/Home/components/Section/index.tsx
diff --git a/website/src/pages/Home/components/Section/styles.module.css b/website/src/components/Home/components/Section/styles.module.css
similarity index 100%
rename from website/src/pages/Home/components/Section/styles.module.css
rename to website/src/components/Home/components/Section/styles.module.css
diff --git a/website/src/pages/Home/components/SectionTitle/index.tsx b/website/src/components/Home/components/SectionTitle/index.tsx
similarity index 100%
rename from website/src/pages/Home/components/SectionTitle/index.tsx
rename to website/src/components/Home/components/SectionTitle/index.tsx
diff --git a/website/src/pages/Home/components/SectionTitle/styles.module.css b/website/src/components/Home/components/SectionTitle/styles.module.css
similarity index 100%
rename from website/src/pages/Home/components/SectionTitle/styles.module.css
rename to website/src/components/Home/components/SectionTitle/styles.module.css
diff --git a/website/src/pages/Home/index.tsx b/website/src/components/Home/index.tsx
similarity index 83%
rename from website/src/pages/Home/index.tsx
rename to website/src/components/Home/index.tsx
index 70ccca3181c..ec9434ac20b 100644
--- a/website/src/pages/Home/index.tsx
+++ b/website/src/components/Home/index.tsx
@@ -7,10 +7,10 @@
 
 import React from 'react';
 
-import Hero from './Hero';
-import Platforms from './Platforms';
+import {Hero} from './Hero';
+import {Platforms} from './Platforms';
 import Native from './Native';
-import Framework from './Framework';
+import {Framework} from './Framework';
 import Watch from './Watch';
 import Community from './Community';
 import CallToAction from './CallToAction';
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 93c5718ce30..6d61c95272b 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -11,7 +11,7 @@ import Head from '@docusaurus/Head';
 
 import Layout from '@theme/Layout';
 
-import Home from './Home';
+import Home from '../components/Home';
 
 const Index = () => {
   return (