Core repos as tiles

docs/50_data_publication/20_choose_repository/10_choose_repository.mdx

@@ -3,9 +3,17 @@ title: "Choose a Repository"
 slug: "/choose_repository"
 ---
 
+import FloatImage from "@site/src/components/commons/FloatImage.js";
+
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import DecisionTree from "@site/src/components/repos/DecisionTree";
 
+import {
+  BulletContainer,
+  BulletBox,
+} from "@site/src/components/commons/BulletBox";
+import { repositoryData, repositoryStyle, RepoDiv } from "./repoCardData";
+
 The NFDI4Chem aims to support researchers in collecting, storing, processing, analysing, publishing, and reusing research data. Based on the [NFDI4Chem Community Survey](https://doi.org/10.1002/zaac.202000339), a list of the most [common data types and formats](/docs/pub_data_types_formats) of the community has been compiled to suggests suitable trusted chemistry-friendly repositories.
 
 This decision tree will guide users to quickly select a suitable repository for publishing their research data. Click on the repositories to learn more!
@@ -20,14 +28,24 @@ Based on the [criteria](https://doi.org/10.3897/rio.6.e55852) chosen by Task Are
 
 ## Core Repositories
 
-- [Chemotion Repository](/docs/chemotion_repository)<br/>Field-specific sample and reaction-centric repository including analysis data such as NMR, UV-VIS, IR, and MS data.
-- [MassBank EU](/docs/massbank_eu/)\*<br/>Field-specific ecosystem of databases and tools for mass spectrometry reference spectra.
-- [nmrXiv](/docs/nmrxiv/)<br/>Field-specific repository for NMR data.
-- [RADAR4Chem](/docs/radar4chem/)<br/>Generic, multidisciplinary repository that offers a free and reliable home for all chemical research data that do not fulfil the specifications of field-specific repositories.
-- [STRENDA DB](/docs/strenda_db/)<br/>Field-specific repository for enzymology data, which incorporates the STRENDA Guidelines for reporting enzymology data.
-- [SUPRABANK](/docs/suprabank/)<br/>Field-specific repository for intermolecular interactions data.
-
-\*Resource which does not accept direct submission of MS data in vendor or mzML format, but data in MassBank format, see [RMassBank](https://bioconductor.org/packages/release/bioc/html/RMassBank.html).
+<BulletContainer>
+  {repositoryData.map((repo, index) => (
+    <BulletBox key={index} secondary {...repositoryStyle}>
+      <RepoDiv img>
+        <FloatImage url={repo.url} alt={repo.name} />
+      </RepoDiv>
+      <RepoDiv>{repo.description}</RepoDiv>
+    </BulletBox>
+  ))}
+</BulletContainer>
+
+<small>
+  <em>
+    \*Resource which does not accept direct submission of MS data in vendor or
+    mzML format, but data in MassBank format, see
+    [RMassBank](https://bioconductor.org/packages/release/bioc/html/RMassBank.html).
+  </em>
+</small>
 
 ## Associated repositories
 

docs/50_data_publication/20_choose_repository/repoCardData.js

@@ -0,0 +1,80 @@
+import Translate from "@docusaurus/Translate";
+
+export const repositoryData = [
+    {
+        name: "Chemotion Repository",
+        url: "/img/data_pub/repos/ChemotionRepo_Logo.svg",
+        alt: "Chemotion Repository Logo",
+        description:
+            <Translate>
+                Field-specific sample and reaction-centric repository including analysis data such as NMR, UV-VIS, IR, and MS data.
+            </Translate>
+    },
+    {
+        name: "MassBank",
+        url: "/img/data_pub/repos/Massbank_logo.svg",
+        alt: "Massbank Logo",
+        description:
+            <Translate>
+                Field-specific ecosystem of databases and tools for mass spectrometry reference spectra.*
+            </Translate>
+    },
+    {
+        name: "nmrXiv",
+        url: "/img/data_pub/repos/nmrXiv.svg",
+        alt: "nmrXiv Logo",
+        description:
+            <Translate>
+                Field-specific repository for NMR data.
+            </Translate>
+    },
+    {
+        name: "RADAR4Chem",
+        url: "/img/data_pub/repos/radar4chem_Logo.svg",
+        alt: "RADAR4Chem Logo",
+        description:
+            <Translate>
+                Generic, multidisciplinary repository that offers a free and reliable home for all chemical research data that do not fulfil the specifications of field-specific repositories.
+            </Translate>
+    },
+    {
+        name: "STRENDA",
+        url: "/img/data_pub/repos/Logo_Beilstein_STRENDA_sRGB.png",
+        alt: "Strenda DB Logo",
+        description:
+            <Translate>
+                Field-specific repository for enzymology data, which incorporates the STRENDA Guidelines for reporting enzymology data.
+            </Translate>
+    },
+    {
+        name: "Suprabank",
+        url: "/img/data_pub/repos/Suprabank_logo.svg",
+        alt: "Suprabank Logo",
+        description:
+            <Translate>
+                Field-specific repository for intermolecular interactions data.
+            </Translate>
+    },
+];
+
+export const repositoryStyle = {
+    "--ifm-button-size-multiplier": "1",
+    flex: "250px",
+    fontWeight: "unset",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "space-evenly",
+};
+
+const imgStyle = { display: "flex", flex: "50%", width: "100%", padding: "0.5rem 0", alignItems: "end", justifyContent: "center" }
+
+const descStyle = {
+    display: "flex", flexGrow: 1, flex: "50%", width: "100%", padding: "0.5rem", alignItems: "start", justifyContent: "center"
+}
+
+export function RepoDiv(props) {
+    return (
+        <div style={props.img ? imgStyle : descStyle}>{props.children}</div>
+    )
+}

src/components/commons/BulletBox.js

@@ -5,13 +5,20 @@ function BulletContainer({ children }) {
   return <div className={styles.bulletContainer}>{children}</div>;
 }
 
-function BulletBox({ children, secondary }) {
-  let boxStyle = secondary ? "button--secondary" : "button--primary";
+function BulletBox({ children, secondary, ...props }) {
+  let boxClass = secondary ? "button--secondary" : "button--primary";
+  let customStyle = {};
+
+  Object.keys(props).forEach((key) => {
+    if (key !== "children" && key !== "secondary" && key !== "boxClass") {
+      customStyle[key] = props[key];
+    }
+  });
 
   return (
     <div
-      className={clsx("col", "button", "button--lg", boxStyle)}
-      style={{ padding: "0.75em", margin: "0.4em", flexGrow: 1 }}
+      className={clsx("col", "button", "button--lg", boxClass)}
+      style={{ padding: "0.75em", margin: "0.4em", flexGrow: 1, ...customStyle }}
     >
       {children}
     </div>

src/css/custom.css

@@ -234,10 +234,8 @@
 
 /********** Buttons ************/
 
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.button {
+  white-space: normal;
 }
 
 /*  .button--primary {
@@ -263,58 +261,27 @@
   transition: transform var(--n4c-transform-time) ease-in-out;
 }
 
-.button.button--secondary h1,
-.button.button--secondary h2,
-.button.button--secondary h3,
-.button.button--secondary h4,
-.button.button--secondary h5,
-.button.button--secondary h6,
-.button.button--secondary a {
-  color: var(--ifm-color-primary);
-  text-align: left;
-  white-space: normal;
-  word-wrap: break-word;
-}
-
-.button.button--secondary li,
-.button.button--secondary em {
-  color: var(--ifm-color-primary);
+.button * {
   text-align: left;
-  font-weight: 400;
-  white-space: normal;
-  word-wrap: break-word;
 }
 
-.button.button--primary {
+.button.button--primary * {
   color: var(--ifm-color-white);
 }
 
-.button.button--primary h1,
-.button.button--primary h2,
-.button.button--primary h3,
-.button.button--primary h4,
-.button.button--primary h5,
-.button.button--primary h6 {
-  color: white;
-  text-align: left;
-  white-space: normal;
-  word-wrap: break-word;
+.button.button--secondary * {
+  color: var(--ifm-color-primary);
 }
 
-.button.button--primary li,
-.button.button--primary em {
+.button.button--primary {
   color: var(--ifm-color-white);
-  text-align: left;
-  font-weight: 400;
-  white-space: normal;
-  word-wrap: break-word;
 }
 
 .button--negative {
-  --ifm-button-background-color: var(--ifm-color-white);
+  background-color: var(--ifm-color-white);
   border-radius: 10px;
   color: var(--ifm-color-primary);
-  font-weight: 400;
+  font-weight: unset;
 }
 
 .button--negative:hover {