Skip to content

Commit 0c1a2ba

Browse files
committed
switch icon based on theme using ThemedImage
1 parent 8681aa9 commit 0c1a2ba

File tree

3 files changed

+175
-14
lines changed

3 files changed

+175
-14
lines changed

src/components/HomepageFeatures/index.tsx

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
import Link from "@docusaurus/Link";
2-
import CloudSvg from "@site/static/img/cloud.svg";
3-
import HPCSvg from "@site/static/img/hpc.svg";
4-
import HSRNSvg from "@site/static/img/hsrn.svg";
5-
import SRDESvg from "@site/static/img/srde.svg";
6-
import ReactSvg from "@site/static/img/undraw_docusaurus_react.svg";
2+
import useBaseUrl from "@docusaurus/useBaseUrl";
73
import Heading from "@theme/Heading";
4+
import ThemedImage from "@theme/ThemedImage";
85
import clsx from "clsx";
96
import { type ComponentProps } from "react";
107

118
import styles from "./styles.module.css";
129

1310
interface FeatureItem {
1411
title: string;
15-
Svg: React.ComponentType<React.ComponentProps<"svg">>;
12+
light_img_path: string;
13+
dark_img_path: string;
1614
description: React.ReactNode;
1715
to?: ComponentProps<typeof Link>["to"];
1816
}
1917

2018
const FeatureList: FeatureItem[] = [
2119
{
2220
title: "High Performance Computing",
23-
Svg: HPCSvg,
21+
light_img_path: "img/hpc.svg",
22+
dark_img_path: "img/hpc.svg",
2423
description: (
2524
<>
2625
Seamless access to advanced computing resources, consultation services
@@ -31,7 +30,8 @@ const FeatureList: FeatureItem[] = [
3130
},
3231
{
3332
title: "High Speed Research Network",
34-
Svg: HSRNSvg,
33+
light_img_path: "img/hsrn.svg",
34+
dark_img_path: "img/hsrn.svg",
3535
description: (
3636
<>
3737
The High Speed Research Network (HSRN) is NYU&apos;s high-throughput,
@@ -43,7 +43,8 @@ const FeatureList: FeatureItem[] = [
4343
},
4444
{
4545
title: "GenAI",
46-
Svg: ReactSvg,
46+
light_img_path: "img/undraw_docusaurus_react.svg",
47+
dark_img_path: "img/undraw_docusaurus_tree.svg",
4748
description: (
4849
<>
4950
The Pythia Platform is a suite of tools for researchers to harness
@@ -55,7 +56,8 @@ const FeatureList: FeatureItem[] = [
5556
},
5657
{
5758
title: "Cloud Computing",
58-
Svg: CloudSvg,
59+
light_img_path: "img/cloud.svg",
60+
dark_img_path: "img/cloud_dark.svg",
5961
description: (
6062
<>
6163
We facilitate access to Google Cloud Platform and also host an on-prem
@@ -66,7 +68,8 @@ const FeatureList: FeatureItem[] = [
6668
},
6769
{
6870
title: "SRDE",
69-
Svg: SRDESvg,
71+
light_img_path: "img/srde.svg",
72+
dark_img_path: "img/srde.svg",
7073
description: (
7174
<>
7275
The Secure Research Data Environment (SRDE) is a centralized secure
@@ -78,13 +81,26 @@ const FeatureList: FeatureItem[] = [
7881
},
7982
];
8083

81-
function Feature({ title, Svg, description, to }: FeatureItem) {
84+
function Feature({
85+
title,
86+
light_img_path,
87+
dark_img_path,
88+
description,
89+
to,
90+
}: FeatureItem) {
8291
const Wrapper = to ? Link : "div";
8392

8493
return (
8594
<Wrapper className={clsx("col col--4", to && styles.featureLink)} to={to}>
8695
<div className="text--center">
87-
<Svg className={styles.featureSvg} role="img" />
96+
<ThemedImage
97+
alt="Docusaurus themed image"
98+
className={styles.featureSvg}
99+
sources={{
100+
light: useBaseUrl(light_img_path),
101+
dark: useBaseUrl(dark_img_path),
102+
}}
103+
/>
88104
</div>
89105
<div className="text--center padding-horiz--md">
90106
<Heading as="h3">{title}</Heading>

src/components/HomepageFeatures/styles.module.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
.featureSvg {
99
width: 200px;
1010
height: 200px;
11-
background-color: white;
1211
}
1312

1413
.featureLink {

static/img/cloud_dark.svg

Lines changed: 146 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)