feat: ✨ add banner

src/components/HomepageFeatures.jsx

@@ -47,42 +47,44 @@ const StatsList = [
 
 export default function HomepageFeatures() {
   return (
-    <section className={styles.second}>
-      <div>
-        <h1 className="header hero__title tracking-tight sm:text-3xl text-center">
-          Generating Data to Boost Future AI-driven Research in Type 2 Diabetes
-        </h1>
-        <p
-          className="mt-6 pl-[2rem] pr-9 mb-4 text-xl max-w-[70rem] text-justify
+    <div className="bg-[#e0f2fe]">
+      <section className={styles.second}>
+        <div>
+          <h1 className="header hero__title tracking-tight sm:text-3xl text-center">
+            Generating Data to Boost Future AI-driven Research in Type 2 Diabetes
+          </h1>
+          <p
+            className="mt-6 pl-[2rem] pr-9 mb-4 text-xl max-w-[70rem] text-justify
         font-medium text-slate-600"
-        >
-          This is the documentation for the AI-READI dataset called &quot;Flagship Dataset of Type 2
-          Diabetes from the AI-READI Project&quot;. AI-READI is one of the data generation project
-          of the National Institutes of Health funded Bridge2AI Program. One of the major goals of
-          AI-READI is to collect and share a multimodal, AI-ready dataset for studying salutogenesis
-          in Type 2 Diabetes Mellitus.
-        </p>
-      </div>
+          >
+            This is the documentation for the AI-READI dataset called &quot;Flagship Dataset of Type
+            2 Diabetes from the AI-READI Project&quot;. AI-READI is one of the data generation
+            project of the National Institutes of Health funded Bridge2AI Program. One of the major
+            goals of AI-READI is to collect and share a multimodal, AI-ready dataset for studying
+            salutogenesis in Type 2 Diabetes Mellitus.
+          </p>
+        </div>
 
-      <div className={styles.snapshot}>
-        <h1 className="snapshot mb-2 text-3xl font-bold tracking-tight sm:text-3xl">
-          Snapshot of the AI-READI dataset
-        </h1>
+        <div className={styles.snapshot}>
+          <h1 className="snapshot mb-2 text-3xl font-bold tracking-tight sm:text-3xl">
+            Snapshot of the AI-READI dataset
+          </h1>
 
-        <p className="snapshot mb-12 text-xl font-medium text-slate-600">
-          Key numbers from the current version of the dataset (v2.0.0)
-        </p>
+          <p className="snapshot mb-12 text-xl font-medium text-slate-600">
+            Key numbers from the current version of the dataset (v2.0.0)
+          </p>
 
-        <div className={styles.stat}>
-          {StatsList.map((stat) => (
-            <dl className="max-w-[17rem] flex flex-col gap-[1rem]" key={stat.text}>
-              <dt className="text-5xl font-bold text-sky-600">{stat.heading}</dt>
+          <div className={styles.stat}>
+            {StatsList.map((stat) => (
+              <dl className="max-w-[17rem] flex flex-col gap-[1rem]" key={stat.text}>
+                <dt className="text-5xl font-bold text-sky-600">{stat.heading}</dt>
 
-              <dd className="text-lg font-medium m-0 text-gray-700">{stat.text}</dd>
-            </dl>
-          ))}
+                <dd className="text-lg font-medium m-0 text-gray-700">{stat.text}</dd>
+              </dl>
+            ))}
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </div>
   );
 }

src/theme/Footer/Copyright/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+export default function FooterCopyright({ copyright }) {
+  return (
+    <div
+      className="footer__copyright mt-4 mb-3"
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: copyright }}
+    />
+  );
+}

src/theme/Footer/Layout/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+
+export default function FooterLayout({ style, links, logo, copyright }) {
+  return (
+    <footer
+      className={clsx('footer relative', {
+        'footer--dark': style === 'dark',
+      })}
+    >
+      <div className="container container-fluid">
+        {links}
+
+        {(logo || copyright) && (
+          <div className="footer__bottom text--center">
+            {logo && <div className="margin-bottom--sm">{logo}</div>}
+            {copyright}
+          </div>
+        )}
+      </div>
+
+      <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">
+        This repository is under review for potential modification in compliance with Administration
+        directives.
+      </div>
+    </footer>
+  );
+}

src/theme/Footer/LinkItem/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import IconExternalLink from '@theme/Icon/ExternalLink';
+export default function FooterLinkItem({item}) {
+  const {to, href, label, prependBaseUrlToHref, ...props} = item;
+  const toUrl = useBaseUrl(to);
+  const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
+  return (
+    <Link
+      className="footer__link-item"
+      {...(href
+        ? {
+            href: prependBaseUrlToHref ? normalizedHref : href,
+          }
+        : {
+            to: toUrl,
+          })}
+      {...props}>
+      {label}
+      {href && !isInternalUrl(href) && <IconExternalLink />}
+    </Link>
+  );
+}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import LinkItem from '@theme/Footer/LinkItem';
+function ColumnLinkItem({item}) {
+  return item.html ? (
+    <li
+      className="footer__item"
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: item.html}}
+    />
+  ) : (
+    <li key={item.href ?? item.to} className="footer__item">
+      <LinkItem item={item} />
+    </li>
+  );
+}
+function Column({column}) {
+  return (
+    <div className="col footer__col">
+      <div className="footer__title">{column.title}</div>
+      <ul className="footer__items clean-list">
+        {column.items.map((item, i) => (
+          <ColumnLinkItem key={i} item={item} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+export default function FooterLinksMultiColumn({columns}) {
+  return (
+    <div className="row footer__links">
+      {columns.map((column, i) => (
+        <Column key={i} column={column} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import LinkItem from '@theme/Footer/LinkItem';
+function Separator() {
+  return <span className="footer__link-separator">·</span>;
+}
+function SimpleLinkItem({item}) {
+  return item.html ? (
+    <span
+      className="footer__link-item"
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: item.html}}
+    />
+  ) : (
+    <LinkItem item={item} />
+  );
+}
+export default function FooterLinksSimple({links}) {
+  return (
+    <div className="footer__links text--center">
+      <div className="footer__links">
+        {links.map((item, i) => (
+          <React.Fragment key={i}>
+            <SimpleLinkItem item={item} />
+            {links.length !== i + 1 && <Separator />}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}

src/theme/Footer/Links/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {isMultiColumnFooterLinks} from '@docusaurus/theme-common';
+import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn';
+import FooterLinksSimple from '@theme/Footer/Links/Simple';
+export default function FooterLinks({links}) {
+  return isMultiColumnFooterLinks(links) ? (
+    <FooterLinksMultiColumn columns={links} />
+  ) : (
+    <FooterLinksSimple links={links} />
+  );
+}

src/theme/Footer/Logo/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
+import styles from './styles.module.css';
+function LogoImage({logo}) {
+  const {withBaseUrl} = useBaseUrlUtils();
+  const sources = {
+    light: withBaseUrl(logo.src),
+    dark: withBaseUrl(logo.srcDark ?? logo.src),
+  };
+  return (
+    <ThemedImage
+      className={clsx('footer__logo', logo.className)}
+      alt={logo.alt}
+      sources={sources}
+      width={logo.width}
+      height={logo.height}
+      style={logo.style}
+    />
+  );
+}
+export default function FooterLogo({logo}) {
+  return logo.href ? (
+    <Link
+      href={logo.href}
+      className={styles.footerLogoLink}
+      target={logo.target}>
+      <LogoImage logo={logo} />
+    </Link>
+  ) : (
+    <LogoImage logo={logo} />
+  );
+}

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

@@ -0,0 +1,9 @@
+.footerLogoLink {
+  opacity: 0.5;
+  transition: opacity var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.footerLogoLink:hover {
+  opacity: 1;
+}

src/theme/Footer/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import FooterLinks from '@theme/Footer/Links';
+import FooterLogo from '@theme/Footer/Logo';
+import FooterCopyright from '@theme/Footer/Copyright';
+import FooterLayout from '@theme/Footer/Layout';
+function Footer() {
+  const {footer} = useThemeConfig();
+  if (!footer) {
+    return null;
+  }
+  const {copyright, links, logo, style} = footer;
+  return (
+    <FooterLayout
+      style={style}
+      links={links && links.length > 0 && <FooterLinks links={links} />}
+      logo={logo && <FooterLogo logo={logo} />}
+      copyright={copyright && <FooterCopyright copyright={copyright} />}
+    />
+  );
+}
+export default React.memo(Footer);