Replace ThemeImage with ThemedImage and update image sources to use useBaseUrl

website/src/pages/Home/Framework/index.tsx → website/src/components/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>
@@ -82,4 +89,4 @@ function Framework() {
   );
 }
 
-export default Framework;
+export {Framework};

website/src/pages/Home/Hero/index.tsx → website/src/components/Home/Hero/index.tsx

@@ -62,4 +62,4 @@ function Hero() {
   );
 }
 
-export default Hero;
+export {Hero};

website/src/pages/Home/Native/index.tsx → website/src/components/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>
   );

website/src/pages/Home/Platforms/index.tsx → website/src/components/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>
@@ -75,4 +78,4 @@ function Platforms() {
   );
 }
 
-export default Platforms;
+export {Platforms};

website/src/pages/Home/index.tsx → 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';

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 (