Skip to content

Commit ca9d3f1

Browse files
megasanjayAydawka
megasanjay
and
Aydawka
authored
feat: ✨ add banner (#26)
* feat: ✨ add banner * fix: 🐛 banner theme * fix: 🐛 typo --------- Co-authored-by: aydawka <[email protected]>
1 parent 43ed73b commit ca9d3f1

File tree

10 files changed

+242
-31
lines changed

10 files changed

+242
-31
lines changed

‎src/components/HomepageFeatures.jsx

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -47,42 +47,44 @@ const StatsList = [
4747

4848
export default function HomepageFeatures() {
4949
return (
50-
<section className={styles.second}>
51-
<div>
52-
<h1 className="header hero__title tracking-tight sm:text-3xl text-center">
53-
Generating Data to Boost Future AI-driven Research in Type 2 Diabetes
54-
</h1>
55-
<p
56-
className="mt-6 pl-[2rem] pr-9 mb-4 text-xl max-w-[70rem] text-justify
50+
<div className="bg-[#e0f2fe]">
51+
<section className={styles.second}>
52+
<div>
53+
<h1 className="header hero__title tracking-tight sm:text-3xl text-center">
54+
Generating Data to Boost Future AI-driven Research in Type 2 Diabetes
55+
</h1>
56+
<p
57+
className="mt-6 pl-[2rem] pr-9 mb-4 text-xl max-w-[70rem] text-justify
5758
font-medium text-slate-600"
58-
>
59-
This is the documentation for the AI-READI dataset called &quot;Flagship Dataset of Type 2
60-
Diabetes from the AI-READI Project&quot;. AI-READI is one of the data generation project
61-
of the National Institutes of Health funded Bridge2AI Program. One of the major goals of
62-
AI-READI is to collect and share a multimodal, AI-ready dataset for studying salutogenesis
63-
in Type 2 Diabetes Mellitus.
64-
</p>
65-
</div>
59+
>
60+
This is the documentation for the AI-READI dataset called &quot;Flagship Dataset of Type
61+
2 Diabetes from the AI-READI Project&quot;. AI-READI is one of the data generation
62+
project of the National Institutes of Health funded Bridge2AI Program. One of the major
63+
goals of AI-READI is to collect and share a multimodal, AI-ready dataset for studying
64+
salutogenesis in Type 2 Diabetes Mellitus.
65+
</p>
66+
</div>
6667

67-
<div className={styles.snapshot}>
68-
<h1 className="snapshot mb-2 text-3xl font-bold tracking-tight sm:text-3xl">
69-
Snapshot of the AI-READI dataset
70-
</h1>
68+
<div className={styles.snapshot}>
69+
<h1 className="snapshot mb-2 text-3xl font-bold tracking-tight sm:text-3xl">
70+
Snapshot of the AI-READI dataset
71+
</h1>
7172

72-
<p className="snapshot mb-12 text-xl font-medium text-slate-600">
73-
Key numbers from the current version of the dataset (v2.0.0)
74-
</p>
73+
<p className="snapshot mb-12 text-xl font-medium text-slate-600">
74+
Key numbers from the current version of the dataset (v2.0.0)
75+
</p>
7576

76-
<div className={styles.stat}>
77-
{StatsList.map((stat) => (
78-
<dl className="max-w-[17rem] flex flex-col gap-[1rem]" key={stat.text}>
79-
<dt className="text-5xl font-bold text-sky-600">{stat.heading}</dt>
77+
<div className={styles.stat}>
78+
{StatsList.map((stat) => (
79+
<dl className="max-w-[17rem] flex flex-col gap-[1rem]" key={stat.text}>
80+
<dt className="text-5xl font-bold text-sky-600">{stat.heading}</dt>
8081

81-
<dd className="text-lg font-medium m-0 text-gray-700">{stat.text}</dd>
82-
</dl>
83-
))}
82+
<dd className="text-lg font-medium m-0 text-gray-700">{stat.text}</dd>
83+
</dl>
84+
))}
85+
</div>
8486
</div>
85-
</div>
86-
</section>
87+
</section>
88+
</div>
8789
);
8890
}

‎src/theme/Footer/Copyright/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
export default function FooterCopyright({ copyright }) {
3+
return (
4+
<div
5+
className="footer__copyright mt-4 mb-3"
6+
// Developer provided the HTML, so assume it's safe.
7+
// eslint-disable-next-line react/no-danger
8+
dangerouslySetInnerHTML={{ __html: copyright }}
9+
/>
10+
);
11+
}

‎src/theme/Footer/Layout/index.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
4+
export default function FooterLayout({ style, links, logo, copyright }) {
5+
return (
6+
<footer
7+
className={clsx('footer relative', {
8+
'footer--dark': style === 'dark',
9+
})}
10+
>
11+
<div className="container container-fluid">
12+
{links}
13+
14+
{(logo || copyright) && (
15+
<div className="footer__bottom text--center">
16+
{logo && <div className="margin-bottom--sm">{logo}</div>}
17+
{copyright}
18+
</div>
19+
)}
20+
</div>
21+
22+
<div className="fixed bottom-0 inset-x-0 z-50 w-screen bg-sky-300 p-2 text-center text-sm text-gray-900 max-sm:bottom-2">
23+
This repository is under review for potential modification in compliance with Administration
24+
directives.
25+
</div>
26+
</footer>
27+
);
28+
}

‎src/theme/Footer/LinkItem/index.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
import useBaseUrl from '@docusaurus/useBaseUrl';
4+
import isInternalUrl from '@docusaurus/isInternalUrl';
5+
import IconExternalLink from '@theme/Icon/ExternalLink';
6+
export default function FooterLinkItem({item}) {
7+
const {to, href, label, prependBaseUrlToHref, ...props} = item;
8+
const toUrl = useBaseUrl(to);
9+
const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
10+
return (
11+
<Link
12+
className="footer__link-item"
13+
{...(href
14+
? {
15+
href: prependBaseUrlToHref ? normalizedHref : href,
16+
}
17+
: {
18+
to: toUrl,
19+
})}
20+
{...props}>
21+
{label}
22+
{href && !isInternalUrl(href) && <IconExternalLink />}
23+
</Link>
24+
);
25+
}

‎src/theme/Footer/Links/MultiColumn/index.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import LinkItem from '@theme/Footer/LinkItem';
3+
function ColumnLinkItem({item}) {
4+
return item.html ? (
5+
<li
6+
className="footer__item"
7+
// Developer provided the HTML, so assume it's safe.
8+
// eslint-disable-next-line react/no-danger
9+
dangerouslySetInnerHTML={{__html: item.html}}
10+
/>
11+
) : (
12+
<li key={item.href ?? item.to} className="footer__item">
13+
<LinkItem item={item} />
14+
</li>
15+
);
16+
}
17+
function Column({column}) {
18+
return (
19+
<div className="col footer__col">
20+
<div className="footer__title">{column.title}</div>
21+
<ul className="footer__items clean-list">
22+
{column.items.map((item, i) => (
23+
<ColumnLinkItem key={i} item={item} />
24+
))}
25+
</ul>
26+
</div>
27+
);
28+
}
29+
export default function FooterLinksMultiColumn({columns}) {
30+
return (
31+
<div className="row footer__links">
32+
{columns.map((column, i) => (
33+
<Column key={i} column={column} />
34+
))}
35+
</div>
36+
);
37+
}

‎src/theme/Footer/Links/Simple/index.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import LinkItem from '@theme/Footer/LinkItem';
3+
function Separator() {
4+
return <span className="footer__link-separator">·</span>;
5+
}
6+
function SimpleLinkItem({item}) {
7+
return item.html ? (
8+
<span
9+
className="footer__link-item"
10+
// Developer provided the HTML, so assume it's safe.
11+
// eslint-disable-next-line react/no-danger
12+
dangerouslySetInnerHTML={{__html: item.html}}
13+
/>
14+
) : (
15+
<LinkItem item={item} />
16+
);
17+
}
18+
export default function FooterLinksSimple({links}) {
19+
return (
20+
<div className="footer__links text--center">
21+
<div className="footer__links">
22+
{links.map((item, i) => (
23+
<React.Fragment key={i}>
24+
<SimpleLinkItem item={item} />
25+
{links.length !== i + 1 && <Separator />}
26+
</React.Fragment>
27+
))}
28+
</div>
29+
</div>
30+
);
31+
}

‎src/theme/Footer/Links/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import {isMultiColumnFooterLinks} from '@docusaurus/theme-common';
3+
import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn';
4+
import FooterLinksSimple from '@theme/Footer/Links/Simple';
5+
export default function FooterLinks({links}) {
6+
return isMultiColumnFooterLinks(links) ? (
7+
<FooterLinksMultiColumn columns={links} />
8+
) : (
9+
<FooterLinksSimple links={links} />
10+
);
11+
}

‎src/theme/Footer/Logo/index.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import Link from '@docusaurus/Link';
4+
import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
5+
import ThemedImage from '@theme/ThemedImage';
6+
import styles from './styles.module.css';
7+
function LogoImage({logo}) {
8+
const {withBaseUrl} = useBaseUrlUtils();
9+
const sources = {
10+
light: withBaseUrl(logo.src),
11+
dark: withBaseUrl(logo.srcDark ?? logo.src),
12+
};
13+
return (
14+
<ThemedImage
15+
className={clsx('footer__logo', logo.className)}
16+
alt={logo.alt}
17+
sources={sources}
18+
width={logo.width}
19+
height={logo.height}
20+
style={logo.style}
21+
/>
22+
);
23+
}
24+
export default function FooterLogo({logo}) {
25+
return logo.href ? (
26+
<Link
27+
href={logo.href}
28+
className={styles.footerLogoLink}
29+
target={logo.target}>
30+
<LogoImage logo={logo} />
31+
</Link>
32+
) : (
33+
<LogoImage logo={logo} />
34+
);
35+
}

‎src/theme/Footer/Logo/styles.module.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.footerLogoLink {
2+
opacity: 0.5;
3+
transition: opacity var(--ifm-transition-fast)
4+
var(--ifm-transition-timing-default);
5+
}
6+
7+
.footerLogoLink:hover {
8+
opacity: 1;
9+
}

‎src/theme/Footer/index.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import {useThemeConfig} from '@docusaurus/theme-common';
3+
import FooterLinks from '@theme/Footer/Links';
4+
import FooterLogo from '@theme/Footer/Logo';
5+
import FooterCopyright from '@theme/Footer/Copyright';
6+
import FooterLayout from '@theme/Footer/Layout';
7+
function Footer() {
8+
const {footer} = useThemeConfig();
9+
if (!footer) {
10+
return null;
11+
}
12+
const {copyright, links, logo, style} = footer;
13+
return (
14+
<FooterLayout
15+
style={style}
16+
links={links && links.length > 0 && <FooterLinks links={links} />}
17+
logo={logo && <FooterLogo logo={logo} />}
18+
copyright={copyright && <FooterCopyright copyright={copyright} />}
19+
/>
20+
);
21+
}
22+
export default React.memo(Footer);

0 commit comments

Comments
 (0)