1
1
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" ;
7
3
import Heading from "@theme/Heading" ;
4
+ import ThemedImage from "@theme/ThemedImage" ;
8
5
import clsx from "clsx" ;
9
6
import { type ComponentProps } from "react" ;
10
7
11
8
import styles from "./styles.module.css" ;
12
9
13
10
interface FeatureItem {
14
11
title : string ;
15
- Svg : React . ComponentType < React . ComponentProps < "svg" > > ;
12
+ light_img_path : string ;
13
+ dark_img_path : string ;
16
14
description : React . ReactNode ;
17
15
to ?: ComponentProps < typeof Link > [ "to" ] ;
18
16
}
19
17
20
18
const FeatureList : FeatureItem [ ] = [
21
19
{
22
20
title : "High Performance Computing" ,
23
- Svg : HPCSvg ,
21
+ light_img_path : "img/hpc.svg" ,
22
+ dark_img_path : "img/hpc.svg" ,
24
23
description : (
25
24
< >
26
25
Seamless access to advanced computing resources, consultation services
@@ -31,7 +30,8 @@ const FeatureList: FeatureItem[] = [
31
30
} ,
32
31
{
33
32
title : "High Speed Research Network" ,
34
- Svg : HSRNSvg ,
33
+ light_img_path : "img/hsrn.svg" ,
34
+ dark_img_path : "img/hsrn.svg" ,
35
35
description : (
36
36
< >
37
37
The High Speed Research Network (HSRN) is NYU's high-throughput,
@@ -43,7 +43,8 @@ const FeatureList: FeatureItem[] = [
43
43
} ,
44
44
{
45
45
title : "GenAI" ,
46
- Svg : ReactSvg ,
46
+ light_img_path : "img/undraw_docusaurus_react.svg" ,
47
+ dark_img_path : "img/undraw_docusaurus_tree.svg" ,
47
48
description : (
48
49
< >
49
50
The Pythia Platform is a suite of tools for researchers to harness
@@ -55,7 +56,8 @@ const FeatureList: FeatureItem[] = [
55
56
} ,
56
57
{
57
58
title : "Cloud Computing" ,
58
- Svg : CloudSvg ,
59
+ light_img_path : "img/cloud.svg" ,
60
+ dark_img_path : "img/cloud_dark.svg" ,
59
61
description : (
60
62
< >
61
63
We facilitate access to Google Cloud Platform and also host an on-prem
@@ -66,7 +68,8 @@ const FeatureList: FeatureItem[] = [
66
68
} ,
67
69
{
68
70
title : "SRDE" ,
69
- Svg : SRDESvg ,
71
+ light_img_path : "img/srde.svg" ,
72
+ dark_img_path : "img/srde.svg" ,
70
73
description : (
71
74
< >
72
75
The Secure Research Data Environment (SRDE) is a centralized secure
@@ -78,13 +81,26 @@ const FeatureList: FeatureItem[] = [
78
81
} ,
79
82
] ;
80
83
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 ) {
82
91
const Wrapper = to ? Link : "div" ;
83
92
84
93
return (
85
94
< Wrapper className = { clsx ( "col col--4" , to && styles . featureLink ) } to = { to } >
86
95
< 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
+ />
88
104
</ div >
89
105
< div className = "text--center padding-horiz--md" >
90
106
< Heading as = "h3" > { title } </ Heading >
0 commit comments