From adae08eac2562bcac3003350e7f0037c2247d095 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Wed, 17 Dec 2025 18:33:47 +0100 Subject: [PATCH 01/23] refactor: reorganize component structure --- .../51_lbe/10_datasets.mdx | 5 +- src/components/LeadByExample.js | 130 --------------- src/components/lbe/Lbe.js | 152 ++++++++++++++++++ 3 files changed, 154 insertions(+), 133 deletions(-) delete mode 100644 src/components/LeadByExample.js create mode 100644 src/components/lbe/Lbe.js diff --git a/docs/50_data_publication/51_lbe/10_datasets.mdx b/docs/50_data_publication/51_lbe/10_datasets.mdx index 7c41c46e..ea93f648 100644 --- a/docs/50_data_publication/51_lbe/10_datasets.mdx +++ b/docs/50_data_publication/51_lbe/10_datasets.mdx @@ -4,8 +4,7 @@ hide_table_of_contents: true slug: "/datasets" --- -import Lbe from '@site/src/components/LeadByExample.js'; - +import Lbe from "@site/src/components/lbe/Lbe.js"; # Lead by Example Datasets @@ -13,6 +12,6 @@ import Lbe from '@site/src/components/LeadByExample.js'; :::note -*This list will be continuously updated with further publication dataset pairs.* +_This list will be continuously updated with further publication dataset pairs._ ::: diff --git a/src/components/LeadByExample.js b/src/components/LeadByExample.js deleted file mode 100644 index 06600797..00000000 --- a/src/components/LeadByExample.js +++ /dev/null @@ -1,130 +0,0 @@ -import React,{ useState, useEffect } from "react"; -import { useLocation } from "react-router-dom" - - -// Custom functions - -import FilterSection from "./lbe/FilterSection.js"; -import LbeBody from "./lbe/LbeBody.js"; - - -// Import global data - -import { lbeTable } from "./lbe/Data.js"; - - -// Main function - -function Lbe() { - - // Get URL params - const location = useLocation() - const queryParameters = new URLSearchParams(location.search); - const queryText = queryParameters.get("text"); - const querySubd = queryParameters.get("subd"); - const queryDoi = queryParameters.get("doi"); - - - // Define React state object - const [lbeState, setLbeState] = useState({}); - - - // Conditions for initial states - - if (queryText !== null) { - useEffect(() => {setLbeState({ - search: queryText, - switch: "text" - }); },[]); - - } else if (querySubd !== null) { - useEffect(() => {setLbeState({ - subd: querySubd, - switch: "subd" - }); },[]); - - } else if (queryDoi !== null) { - useEffect(() => {setLbeState({ - switch: "doi" - }); },[]); - - } else { - useEffect(() => {setLbeState({ - repo: "All", - subd: "All", - journal: "All", - switch: "subd" - })},[]); - } - - - // Get list of subdisciplines - var subdiscs = Array.from(new Set(lbeTable.map(obj => obj.subdiscipline).flat())).sort((a, b) => a.localeCompare(b, undefined, {sensitivity: 'base'})); - subdiscs.unshift("All"); // Add "All" option at the beginning - - - // Get list of tags - var categories = Array.from(new Set(lbeTable.map(obj => obj.tags).flat())).sort((a, b) => a.localeCompare(b, undefined, {sensitivity: 'base'})); - categories.unshift("All"); // Add "All" option at the beginning - - - // Get list of journals - var journals = Array.from(new Set(lbeTable.map(obj => obj.journal))).sort((a, b) => a.localeCompare(b, undefined, {sensitivity: 'base'})); - journals.unshift("All"); // Add "All" option at the beginning - - - // Get list of repos - var repos = Array.from(new Set(lbeTable.map(obj => obj.linkdata.map(obj => obj.name)).flat())).sort((a, b) => a.localeCompare(b, undefined, {sensitivity: 'base'})); - repos.unshift("All"); // Add "All" option at the beginning - - - var result = []; - - // Render all datasets if "All" is selected - - if (lbeState.repo == "All" || lbeState.subd == "All") { - result = lbeTable; - } else { - - // Determine result set based on lbeState.switch states - switch ( lbeState.switch ) { - case "tag": - result = lbeTable.filter(n => n.tags.includes(tagFilter)); - break; - case "repo": - result = lbeTable.filter(n => n.linkdata.map(n => n.name).includes(lbeState.repo)); - break; - case "subd": - result = lbeTable.filter(n => n.subdiscipline.includes(lbeState.subd)); - break; - case "journal": - result = lbeTable.filter(n => n.journal.includes(lbeState.journal)); - break; - case "search": - result = lbeTable.filter(obj => JSON.stringify(obj).toLowerCase().includes(lbeState.search.toLowerCase())); // Squash object with JSON.stringify() for better searchability - if ( lbeState.search == "" ) { - var resultOutput = ""; - } else if (result.length == 1) { - var resultOutput = result.length+" entry found..."; - } else { - var resultOutput = result.length+" entries found..."; - } - break; - case "doi": - result = lbeTable.filter(n => n.linkpub.includes(queryDoi)); - } - } - - if (lbeState.switch !== "search") { - result.sort((a, b) => b.pubyear - a.pubyear); - } - - return ( -
- - -
- ) -} - -export default Lbe; \ No newline at end of file diff --git a/src/components/lbe/Lbe.js b/src/components/lbe/Lbe.js new file mode 100644 index 00000000..77a0bcd1 --- /dev/null +++ b/src/components/lbe/Lbe.js @@ -0,0 +1,152 @@ +import React, {useState, useEffect} from "react"; +import {useLocation} from "react-router-dom"; + +// Custom functions + +import FilterSection from "./FilterSection.js"; +import LbeBody from "./LbeBody.js"; + +// Import global data + +import {lbeTable} from "./Data.js"; + +// Main function + +function Lbe() { + // Get URL params + const location = useLocation(); + const queryParameters = new URLSearchParams(location.search); + const queryText = queryParameters.get("text"); + const querySubd = queryParameters.get("subd"); + const queryDoi = queryParameters.get("doi"); + + // Define React state object + const [lbeState, setLbeState] = useState({}); + + // Conditions for initial states + + if (queryText !== null) { + useEffect(() => { + setLbeState({ + search: queryText, + switch: "text", + }); + }, []); + } else if (querySubd !== null) { + useEffect(() => { + setLbeState({ + subd: querySubd, + switch: "subd", + }); + }, []); + } else if (queryDoi !== null) { + useEffect(() => { + setLbeState({ + switch: "doi", + }); + }, []); + } else { + useEffect(() => { + setLbeState({ + repo: "All", + subd: "All", + journal: "All", + switch: "subd", + }); + }, []); + } + + // Get list of subdisciplines + var subdiscs = Array.from( + new Set(lbeTable.map((obj) => obj.subdiscipline).flat()), + ).sort((a, b) => a.localeCompare(b, undefined, {sensitivity: "base"})); + subdiscs.unshift("All"); // Add "All" option at the beginning + + // Get list of tags + var categories = Array.from( + new Set(lbeTable.map((obj) => obj.tags).flat()), + ).sort((a, b) => a.localeCompare(b, undefined, {sensitivity: "base"})); + categories.unshift("All"); // Add "All" option at the beginning + + // Get list of journals + var journals = Array.from(new Set(lbeTable.map((obj) => obj.journal))).sort( + (a, b) => a.localeCompare(b, undefined, {sensitivity: "base"}), + ); + journals.unshift("All"); // Add "All" option at the beginning + + // Get list of repos + var repos = Array.from( + new Set( + lbeTable.map((obj) => obj.linkdata.map((obj) => obj.name)).flat(), + ), + ).sort((a, b) => a.localeCompare(b, undefined, {sensitivity: "base"})); + repos.unshift("All"); // Add "All" option at the beginning + + var result = []; + + // Render all datasets if "All" is selected + + if (lbeState.repo == "All" || lbeState.subd == "All") { + result = lbeTable; + } else { + // Determine result set based on lbeState.switch states + switch (lbeState.switch) { + case "tag": + result = lbeTable.filter((n) => n.tags.includes(tagFilter)); + break; + case "repo": + result = lbeTable.filter((n) => + n.linkdata.map((n) => n.name).includes(lbeState.repo), + ); + break; + case "subd": + result = lbeTable.filter((n) => + n.subdiscipline.includes(lbeState.subd), + ); + break; + case "journal": + result = lbeTable.filter((n) => + n.journal.includes(lbeState.journal), + ); + break; + case "search": + result = lbeTable.filter((obj) => + JSON.stringify(obj) + .toLowerCase() + .includes(lbeState.search.toLowerCase()), + ); // Squash object with JSON.stringify() for better searchability + if (lbeState.search == "") { + var resultOutput = ""; + } else if (result.length == 1) { + var resultOutput = result.length + " entry found..."; + } else { + var resultOutput = result.length + " entries found..."; + } + break; + case "doi": + result = lbeTable.filter((n) => n.linkpub.includes(queryDoi)); + } + } + + if (lbeState.switch !== "search") { + result.sort((a, b) => b.pubyear - a.pubyear); + } + + return ( +
+ + +
+ ); +} + +export default Lbe; From 043081bb27ceebe7a6b80ba9512c1502806e52d2 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Wed, 17 Dec 2025 18:33:57 +0100 Subject: [PATCH 02/23] refactor: add module css --- src/components/lbe/lbe.module.css | 259 ++++++++++++++++++++++++++++++ 1 file changed, 259 insertions(+) create mode 100644 src/components/lbe/lbe.module.css diff --git a/src/components/lbe/lbe.module.css b/src/components/lbe/lbe.module.css new file mode 100644 index 00000000..101e422c --- /dev/null +++ b/src/components/lbe/lbe.module.css @@ -0,0 +1,259 @@ +/********** Lead by Example ************/ + +.lbe-intro { + margin: 1rem 0; +} + +.lbe { + display: flex; + flex-direction: row-reverse; +} + +/* Search / Filter section */ + +.lbe__searchfilter { + padding-left: 0.5rem; + width: 35%; +} + +.lbe__searchfilter__container { + padding: 0.75rem; + border: 1px dashed var(--ifm-color-primary); + margin-bottom: 0.75rem; +} + +.lbe__searchfilter__section p { + margin: unset; +} + +.lbe__searchfilter__section h4, +h5 { + margin: 0.5rem 0; +} + +.lbe__body { + padding-right: 0.5rem; + width: 65%; +} + +@media screen and (max-width: 1200px) { + .lbe { + display: flex; + flex-direction: column; + } + + .lbe__searchfilter { + padding: 0; + width: 100%; + } + + .lbe__body { + padding: 0; + width: 100%; + } +} + +.lbe__searchfilter input:focus { + width: calc(5 / 12 * 100%); +} + +.lbe__searchfilter__search { + padding: 0.5rem 0; +} + +.lbe__searchfilter__search > em { + color: var(--ifm-color-primary); +} + +/* Filter buttons */ + +.lbe__filterbutton { + display: grid; + align-items: center; + border-radius: var(--ifm-breadcrumb-border-radius); + color: white; + display: inline-block; + font-size: calc(0.6rem * var(--ifm-breadcrumb-size-multiplier)); + font-weight: 600; + padding: calc( + var(--ifm-breadcrumb-padding-vertical) * + var(--ifm-breadcrumb-size-multiplier) + ) + calc( + var(--ifm-breadcrumb-padding-horizontal) * + var(--ifm-breadcrumb-size-multiplier) + ); + border: none; + margin: 0.2em; + background: var(--ifm-color-primary); +} + +.lbe__filterbutton.lbe__filterbutton_secondary { + background: var(--ifm-breadcrumb-item-background-active); + color: var(--ifm-color-primary); +} + +.lbe__chip { + background: var(--ifm-breadcrumb-item-background-active); + color: var(--ifm-color-primary); + font-size: calc(0.8rem * var(--ifm-breadcrumb-size-multiplier)); + font-weight: 300; + justify-self: left; + margin-bottom: 1rem; +} + +.lbe__filterbutton.lbe__filterbutton--active { + background: var(--ifm-color-danger); + color: white; +} + +.lbe__filterbutton:hover, +.lbe__filterbutton--active:hover { + cursor: pointer; + transform: scale(var(--lbe-hover-scale)); + transition: transform var(--lbe-transform-time) ease-in-out; +} + +.lbe__filterbutton__content { + display: flex; + align-items: center; +} + +.lbe__filterbutton__funnel { + height: calc(var(--ifm-font-size-base) * 0.6); + fill: white; +} + +/* LBE blocks */ + +.lbe__block { + padding: 0.75rem; + border: 1px dashed var(--ifm-color-primary); + margin-bottom: 0.75rem; + transition: all var(--n4c-transform-time) ease-in-out; +} + +.lbe__block__header { + display: flex; + align-items: center; +} + +.lbe__block__header__title { + width: 85%; + padding: 0.3rem; + display: flex; + align-items: center; +} + +.lbe__block__author-trigger { + border: none; + background: none; + scale: 90%; + color: var(--ifm-color-primary); + padding: 0 0.5em; + margin: 0; +} + +.lbe__block__header__link { + width: 15%; + display: flex; + justify-content: right; +} + +.lbe__block > h4, +.lbe__block > p { + margin: 0.5rem; + margin-top: 0.8rem; +} + +.lbe__block p:nth-of-type(-n + 2), +.lbe__block__header__title h3 { + margin-bottom: calc(0.5 * var(--ifm-leading)); + text-align: left; +} + +@media screen and (max-width: 966px) { + .lbe__block__header { + display: flex; + flex-wrap: wrap-reverse; + } + + .lbe__block__header__title, + .lbe__block__header__link { + width: 100%; + justify-content: left; + } +} + +.lbe__block__hr { + border-top: 1px solid var(--ifm-color-primary); + background-color: unset; + margin: 0.8rem 0.4rem; +} + +.lbe__details { + display: flex; + overflow: hidden; + border: none; + /* border: 1px solid var(--ifm-color-primary); */ + padding: 0 1rem; + transition: all var(--n4c-transform-time) ease-in-out; +} + +.lbe__details h4 { + color: var(--ifm-color-primary); + padding-top: 15px; + transition: all var(--n4c-transform-time) ease-in-out; +} + +.lbe__details summary { + font-size: var(--ifm-h4-font-size); + color: var(--ifm-heading-color); + font-family: var(--ifm-heading-font-family); + font-weight: var(--ifm-heading-font-weight); + line-height: var(--ifm-heading-line-height); + cursor: pointer; +} + +.lbe__details[open] summary { + padding-bottom: 15px; +} + +.lbe__details summary::marker { + color: var(--ifm-color-primary); +} + +.lbe__block__link { + border: 0.5px solid var(--ifm-color-primary); + padding: 0.5em; + border-radius: 5px; + margin: 0.2em; + font-size: 11pt; + background: none; +} + +.lbe__block__link:hover { + transform: scale(var(--lbe-hover-scale)); + transition: all var(--lbe-transform-time) ease-in-out; +} + +.lbe__block__link a:hover { + text-decoration: none; +} + +/********** Tag Cloud ************/ + +.tag-cloud { + text-align: center; + color: var(--ifm-color-primary); +} + +.tag-cloud-tag { + padding: 0.2em; +} + +.tag-cloud-tag:hover { + transform: scale(1.1); + color: var(--ifm-color-danger); + transition: all var(--lbe-transform-time) ease-in-out; +} From def78a3f82b02855766a3c485016284ca70d5934 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Wed, 17 Dec 2025 18:36:06 +0100 Subject: [PATCH 03/23] refactor: integrate CSS modules for Lbe component and clean up unused styles --- src/components/lbe/Lbe.js | 6 +++++- src/components/lbe/lbe.module.css | 4 ---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/lbe/Lbe.js b/src/components/lbe/Lbe.js index 77a0bcd1..12e3084e 100644 --- a/src/components/lbe/Lbe.js +++ b/src/components/lbe/Lbe.js @@ -6,6 +6,10 @@ import {useLocation} from "react-router-dom"; import FilterSection from "./FilterSection.js"; import LbeBody from "./LbeBody.js"; +// Import CSS + +import styles from "./lbe.module.css"; + // Import global data import {lbeTable} from "./Data.js"; @@ -133,7 +137,7 @@ function Lbe() { } return ( -
+
Date: Wed, 17 Dec 2025 18:39:50 +0100 Subject: [PATCH 04/23] refactor: update CSS class names to use modules in FilterSection component --- src/components/lbe/FilterSection.js | 132 ++++++++++++++-------------- src/components/lbe/lbe.module.css | 16 ++-- 2 files changed, 76 insertions(+), 72 deletions(-) diff --git a/src/components/lbe/FilterSection.js b/src/components/lbe/FilterSection.js index 51828178..06605156 100644 --- a/src/components/lbe/FilterSection.js +++ b/src/components/lbe/FilterSection.js @@ -2,77 +2,81 @@ import React from "react"; // Custom functions -import { TextSearch, FilterButton } from "./LbeElements.js"; +import {TextSearch, FilterButton} from "./LbeElements.js"; + +// Import CSS + +import styles from "./lbe.module.css"; // Assemble buttons for filtering section -function LbeButtons({ repos, subdiscs, journals, lbeState, setLbeState }) { - return ( - -
-

Filter by repositories

-

- {repos.map((props, idx) => ( - - ))} -

-
-
-

Filter by subdisciplines

-

- {subdiscs.map((props, idx) => ( - - ))} -

-
-
-

Filter by journals

-

- {journals.map((props, idx) => ( - - ))} -

-
- - ); +function LbeButtons({repos, subdiscs, journals, lbeState, setLbeState}) { + return ( + +
+

Filter by repositories

+

+ {repos.map((props, idx) => ( + + ))} +

+
+
+

Filter by subdisciplines

+

+ {subdiscs.map((props, idx) => ( + + ))} +

+
+
+

Filter by journals

+

+ {journals.map((props, idx) => ( + + ))} +

+
+ + ); } function FilterSection({ - repos, - subdiscs, - journals, - lbeState, - setLbeState, - resultOutput, + repos, + subdiscs, + journals, + lbeState, + setLbeState, + resultOutput, }) { - return ( -
-
- - -
-
- ); + return ( +
+
+ + +
+
+ ); } export default FilterSection; diff --git a/src/components/lbe/lbe.module.css b/src/components/lbe/lbe.module.css index 6b0e829f..dc37971a 100644 --- a/src/components/lbe/lbe.module.css +++ b/src/components/lbe/lbe.module.css @@ -7,22 +7,22 @@ /* Search / Filter section */ -.lbe__searchfilter { +.lbeSearchfilter { padding-left: 0.5rem; width: 35%; } -.lbe__searchfilter__container { +.lbeSearchfilterContainer { padding: 0.75rem; border: 1px dashed var(--ifm-color-primary); margin-bottom: 0.75rem; } -.lbe__searchfilter__section p { +.lbeSearchfilterSection p { margin: unset; } -.lbe__searchfilter__section h4, +.lbeSearchfilterSection h4, h5 { margin: 0.5rem 0; } @@ -38,7 +38,7 @@ h5 { flex-direction: column; } - .lbe__searchfilter { + .lbeSearchfilter { padding: 0; width: 100%; } @@ -49,15 +49,15 @@ h5 { } } -.lbe__searchfilter input:focus { +.lbeSearchfilter input:focus { width: calc(5 / 12 * 100%); } -.lbe__searchfilter__search { +.lbeSearchfilter__search { padding: 0.5rem 0; } -.lbe__searchfilter__search > em { +.lbeSearchfilter__search > em { color: var(--ifm-color-primary); } From eaa24971e1c8542163ad4182f4706b68f18f855d Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Wed, 17 Dec 2025 18:50:49 +0100 Subject: [PATCH 05/23] refactor: update CSS class names to use modules in LbeElements and lbe.module.css --- src/components/lbe/LbeElements.js | 237 +++++++++++++++--------------- src/components/lbe/lbe.module.css | 79 ++++------ 2 files changed, 152 insertions(+), 164 deletions(-) diff --git a/src/components/lbe/LbeElements.js b/src/components/lbe/LbeElements.js index 8254eb3f..f13523e0 100644 --- a/src/components/lbe/LbeElements.js +++ b/src/components/lbe/LbeElements.js @@ -1,144 +1,149 @@ import React from "react"; -import { Link } from "react-router-dom"; +import {Link} from "react-router-dom"; import useBaseUrl from "@docusaurus/useBaseUrl"; import Funnel from "@site/static/img/funnel.svg"; +// Import CSS + +import styles from "./lbe.module.css"; + // Import global data -import { lbeTable, filterAttr } from "./Data.js"; +import {lbeTable, filterAttr} from "./Data.js"; // Button for Repo Links -function RepoButton({ name, url }) { - return ( - - ); +function RepoButton({name, url}) { + return ( + + ); } // Handles text input -function TextSearch({ lbeState, setLbeState, resultOutput }) { - const handleChange = (e) => - setLbeState( - e.target.value === "" - ? { - repo: "All", - subd: "All", - journal: "All", - switch: "subd", - } - : { - search: e.target.value, - switch: "search", - }, - [e.target.value] - ); - - return ( -
- {" "} -   {resultOutput} -
- ); +function TextSearch({lbeState, setLbeState, resultOutput}) { + const handleChange = (e) => + setLbeState( + e.target.value === "" + ? { + repo: "All", + subd: "All", + journal: "All", + switch: "subd", + } + : { + search: e.target.value, + switch: "search", + }, + [e.target.value], + ); + + return ( +
+ {" "} +   {resultOutput} +
+ ); } // Function for handling button clicks -function HandleClick({ name, newState, setLbeState }) { - if (name == "All") { - setLbeState({ - journal: "All", - subd: "All", - repo: "All", - switch: "subd", - }); - } else { - setLbeState(newState); - } +function HandleClick({name, newState, setLbeState}) { + if (name == "All") { + setLbeState({ + journal: "All", + subd: "All", + repo: "All", + switch: "subd", + }); + } else { + setLbeState(newState); + } } // Function for filtering buttons function FilterButton({ - type, - name, - numbered, - funnel, - title, - lbeState, - setLbeState, + type, + name, + numbered, + funnel, + title, + lbeState, + setLbeState, }) { - // type and name are strings, numbered is boolean - - // Initialize variables - - var buttonClass = "lbe__filterbutton"; - var number = 0; - var label = ""; - - // Define how the state object should be set when clicked - - var newState = { [type]: name, switch: type }; - - // Styling of active button - - if (name === lbeState[type]) { - buttonClass = "lbe__filterbutton lbe__filterbutton--active"; - } - - // Determine number (when needed) - - if (numbered) { - if (name === "All") { - number = lbeTable.length; - } else { - number = lbeTable - .map((m) => JSON.stringify(m[filterAttr[type]])) - .filter((m) => m.includes(name)).length; - } - label = name + " (" + number + ")"; - } else { - label = name; - } - - return ( - - ); + // type and name are strings, numbered is boolean + + // Initialize variables + + var buttonClass = styles.lbeFilterbutton; + var number = 0; + var label = ""; + + // Define how the state object should be set when clicked + + var newState = {[type]: name, switch: type}; + + // Styling of active button + + if (name === lbeState[type]) { + buttonClass = + styles.lbeFilterbutton + " " + styles.lbeFilterbuttonActive; + } + + // Determine number (when needed) + + if (numbered) { + if (name === "All") { + number = lbeTable.length; + } else { + number = lbeTable + .map((m) => JSON.stringify(m[filterAttr[type]])) + .filter((m) => m.includes(name)).length; + } + label = name + " (" + number + ")"; + } else { + label = name; + } + + return ( + + ); } -function LbeChip({ title }) { - return ( - - - - ); +function LbeChip({title}) { + return ( + + + + ); } -export { RepoButton, TextSearch, FilterButton, LbeChip }; +export {RepoButton, TextSearch, FilterButton, LbeChip}; diff --git a/src/components/lbe/lbe.module.css b/src/components/lbe/lbe.module.css index dc37971a..c58fd2b7 100644 --- a/src/components/lbe/lbe.module.css +++ b/src/components/lbe/lbe.module.css @@ -53,17 +53,17 @@ h5 { width: calc(5 / 12 * 100%); } -.lbeSearchfilter__search { +.lbeSearchfilterSearch { padding: 0.5rem 0; } -.lbeSearchfilter__search > em { +.lbeSearchfilterSearch > em { color: var(--ifm-color-primary); } /* Filter buttons */ -.lbe__filterbutton { +.lbeFilterbutton { display: grid; align-items: center; border-radius: var(--ifm-breadcrumb-border-radius); @@ -84,12 +84,12 @@ h5 { background: var(--ifm-color-primary); } -.lbe__filterbutton.lbe__filterbutton_secondary { +.lbeFilterbuttonSecondary { background: var(--ifm-breadcrumb-item-background-active); color: var(--ifm-color-primary); } -.lbe__chip { +.lbeChip { background: var(--ifm-breadcrumb-item-background-active); color: var(--ifm-color-primary); font-size: calc(0.8rem * var(--ifm-breadcrumb-size-multiplier)); @@ -98,50 +98,50 @@ h5 { margin-bottom: 1rem; } -.lbe__filterbutton.lbe__filterbutton--active { +.lbeFilterbuttonActive { background: var(--ifm-color-danger); color: white; } -.lbe__filterbutton:hover, -.lbe__filterbutton--active:hover { +.lbeFilterbutton:hover, +.lbeFilterbuttonActive:hover { cursor: pointer; transform: scale(var(--lbe-hover-scale)); transition: transform var(--lbe-transform-time) ease-in-out; } -.lbe__filterbutton__content { +.lbeFilterbuttonContent { display: flex; align-items: center; } -.lbe__filterbutton__funnel { +.lbeFilterbuttonFunnel { height: calc(var(--ifm-font-size-base) * 0.6); fill: white; } /* LBE blocks */ -.lbe__block { +.lbeBlock { padding: 0.75rem; border: 1px dashed var(--ifm-color-primary); margin-bottom: 0.75rem; transition: all var(--n4c-transform-time) ease-in-out; } -.lbe__block__header { +.lbeBlockHeader { display: flex; align-items: center; } -.lbe__block__header__title { +.lbeBlockHeaderTitle { width: 85%; padding: 0.3rem; display: flex; align-items: center; } -.lbe__block__author-trigger { +.lbeBlockAuthorTrigger { border: none; background: none; scale: 90%; @@ -150,44 +150,44 @@ h5 { margin: 0; } -.lbe__block__header__link { +.lbeBlockHeaderLink { width: 15%; display: flex; justify-content: right; } -.lbe__block > h4, -.lbe__block > p { +.lbeBlock > h4, +.lbeBlock > p { margin: 0.5rem; margin-top: 0.8rem; } -.lbe__block p:nth-of-type(-n + 2), -.lbe__block__header__title h3 { +.lbeBlock p:nth-of-type(-n + 2), +.lbeBlockHeaderTitle h3 { margin-bottom: calc(0.5 * var(--ifm-leading)); text-align: left; } @media screen and (max-width: 966px) { - .lbe__block__header { + .lbeBlockHeader { display: flex; flex-wrap: wrap-reverse; } - .lbe__block__header__title, - .lbe__block__header__link { + .lbeBlockHeaderTitle, + .lbeBlockHeaderLink { width: 100%; justify-content: left; } } -.lbe__block__hr { +.lbeBlockHr { border-top: 1px solid var(--ifm-color-primary); background-color: unset; margin: 0.8rem 0.4rem; } -.lbe__details { +.lbeDetails { display: flex; overflow: hidden; border: none; @@ -196,13 +196,13 @@ h5 { transition: all var(--n4c-transform-time) ease-in-out; } -.lbe__details h4 { +.lbeDetails h4 { color: var(--ifm-color-primary); padding-top: 15px; transition: all var(--n4c-transform-time) ease-in-out; } -.lbe__details summary { +.lbeDetails summary { font-size: var(--ifm-h4-font-size); color: var(--ifm-heading-color); font-family: var(--ifm-heading-font-family); @@ -211,15 +211,15 @@ h5 { cursor: pointer; } -.lbe__details[open] summary { +.lbeDetails[open] summary { padding-bottom: 15px; } -.lbe__details summary::marker { +.lbeDetails summary::marker { color: var(--ifm-color-primary); } -.lbe__block__link { +.lbeBlockLink { border: 0.5px solid var(--ifm-color-primary); padding: 0.5em; border-radius: 5px; @@ -228,28 +228,11 @@ h5 { background: none; } -.lbe__block__link:hover { +.lbeBlockLink:hover { transform: scale(var(--lbe-hover-scale)); transition: all var(--lbe-transform-time) ease-in-out; } -.lbe__block__link a:hover { +.lbeBlockLink a:hover { text-decoration: none; } - -/********** Tag Cloud ************/ - -.tag-cloud { - text-align: center; - color: var(--ifm-color-primary); -} - -.tag-cloud-tag { - padding: 0.2em; -} - -.tag-cloud-tag:hover { - transform: scale(1.1); - color: var(--ifm-color-danger); - transition: all var(--lbe-transform-time) ease-in-out; -} From 159b5ce93e10c517f0bcc77a62d8ea1e58b21300 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Wed, 17 Dec 2025 18:52:30 +0100 Subject: [PATCH 06/23] refactor: remove unused imports in LbeBody component --- src/components/lbe/LbeBody.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/lbe/LbeBody.js b/src/components/lbe/LbeBody.js index e6acaa8c..4eb12db6 100644 --- a/src/components/lbe/LbeBody.js +++ b/src/components/lbe/LbeBody.js @@ -1,11 +1,7 @@ -import React from "react"; - // Custom functions import { RepoButton, FilterButton } from "./LbeElements.js"; import Authors from "./Authors.js"; -import ShortenDesc from "../commons/ShortenDesc.js"; -import ShortenButtons from "./ShortenButtons.js"; // Function for single lbe dataset block From fbacb5b82b23848f64341d85595629127496eb8c Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Wed, 17 Dec 2025 18:56:11 +0100 Subject: [PATCH 07/23] refactor: update LbeBody component to use CSS modules and clean up class names --- src/components/lbe/LbeBody.js | 183 ++++++++++++++++-------------- src/components/lbe/lbe.module.css | 2 +- 2 files changed, 96 insertions(+), 89 deletions(-) diff --git a/src/components/lbe/LbeBody.js b/src/components/lbe/LbeBody.js index 4eb12db6..40ce3af7 100644 --- a/src/components/lbe/LbeBody.js +++ b/src/components/lbe/LbeBody.js @@ -1,103 +1,110 @@ // Custom functions -import { RepoButton, FilterButton } from "./LbeElements.js"; +import {RepoButton, FilterButton} from "./LbeElements.js"; import Authors from "./Authors.js"; +// Import CSS + +import styles from "./lbe.module.css"; + // Function for single lbe dataset block function LbeBlock({ - title, - authors, - journal, - pubyear, - linkpub, - linkdata, - linkcomment, - description, - lbeState, - setLbeState, + title, + authors, + journal, + pubyear, + linkpub, + linkdata, + linkcomment, + description, + lbeState, + setLbeState, }) { - // Extract DOI from link by cutting right of "doi.org" - var doi = linkpub.slice(linkpub.indexOf("doi.org") + 8); - - // Define set of repos in this dataset - var myRepos = Array.from(new Set(linkdata.map((obj) => obj.name))) - .flat() - .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" })); - - return ( -
-
-
-

{title}

-
-
- -
-
- -

- - - -

- -

- {journal} {pubyear}, DOI:{" "} - - {doi} - - . -

- -

- {myRepos.map((m, idx) => ( - - ))} -

- -
- -
- Description -

{description}

-
- -
- -
- Links to datasets -

- {linkdata.map((props, idx) => ( - - ))} -

-

- {linkcomment} -

-
-
- ); + // Extract DOI from link by cutting right of "doi.org" + var doi = linkpub.slice(linkpub.indexOf("doi.org") + 8); + + // Define set of repos in this dataset + var myRepos = Array.from(new Set(linkdata.map((obj) => obj.name))) + .flat() + .sort((a, b) => a.localeCompare(b, undefined, {sensitivity: "base"})); + + return ( +
+
+
+

{title}

+
+
+ +
+
+ +

+ + + +

+ +

+ {journal} {pubyear}, DOI:{" "} + + {doi} + + . +

+ +

+ {myRepos.map((m, idx) => ( + + ))} +

+ +
+ +
+ Description +

{description}

+
+ +
+ +
+ Links to datasets +

+ {linkdata.map((props, idx) => ( + + ))} +

+

+ {linkcomment} +

+
+
+ ); } // Render LBE entry list -function LbeBody({ list, lbeState, setLbeState }) { - return ( -
- {list.map((props, idx) => ( - - ))} -
- ); +function LbeBody({list, lbeState, setLbeState}) { + return ( +
+ {list.map((props, idx) => ( + + ))} +
+ ); } export default LbeBody; diff --git a/src/components/lbe/lbe.module.css b/src/components/lbe/lbe.module.css index c58fd2b7..dd6a0cc4 100644 --- a/src/components/lbe/lbe.module.css +++ b/src/components/lbe/lbe.module.css @@ -27,7 +27,7 @@ h5 { margin: 0.5rem 0; } -.lbe__body { +.lbeBody { padding-right: 0.5rem; width: 65%; } From 2d344eaffb17b8d0ee451e15c5a849bff89aa588 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Wed, 17 Dec 2025 18:56:54 +0100 Subject: [PATCH 08/23] refactor: use CSS modules in Authors.js --- src/components/lbe/Authors.js | 62 +++++++++++++++++++++-------------- 1 file changed, 38 insertions(+), 24 deletions(-) diff --git a/src/components/lbe/Authors.js b/src/components/lbe/Authors.js index 085c28ab..d38c2c53 100644 --- a/src/components/lbe/Authors.js +++ b/src/components/lbe/Authors.js @@ -1,29 +1,43 @@ -import React,{ useState } from "react"; +import React, {useState} from "react"; + +// Import CSS + +import styles from "./lbe.module.css"; // Function for expandible author list -function Authors( { authors, length } ) { +function Authors({authors, length}) { + const [listOpen, ToggleListOpen] = useState(false); // Define state for author list, default "false" + var shortlist = authors.split(", ", length).join(", "); // List of authors with elements given by length + + // If there are less than {length} authors, do not display button - const [listOpen,ToggleListOpen] = useState(false); // Define state for author list, default "false" - var shortlist = authors.split(", ",length).join(", "); // List of authors with elements given by length - - // If there are less than {length} authors, do not display button - - if ( shortlist == authors ) { - return ( - {authors} - ) - } - - else if (listOpen) { - return( - {authors} - ) - } - - else return ( - {shortlist}, ... - ) - } + if (shortlist == authors) { + return {authors}; + } else if (listOpen) { + return ( + + {authors}{" "} + + + ); + } else + return ( + + {shortlist}, ...{" "} + + + ); +} - export default Authors; \ No newline at end of file +export default Authors; From 7fbc37b67b3eb57777ffb8283ebdc6c408de9ec9 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Wed, 17 Dec 2025 18:58:48 +0100 Subject: [PATCH 09/23] refactor: update class names to use CSS modules --- src/components/lbe/ShortenButtons.js | 94 +++++++++++++++------------- 1 file changed, 49 insertions(+), 45 deletions(-) diff --git a/src/components/lbe/ShortenButtons.js b/src/components/lbe/ShortenButtons.js index a4c0f6ba..8059db70 100644 --- a/src/components/lbe/ShortenButtons.js +++ b/src/components/lbe/ShortenButtons.js @@ -1,54 +1,58 @@ -import React, { useState } from "react"; +import React, {useState} from "react"; -import { RepoButton } from "./LbeElements"; +import {RepoButton} from "./LbeElements"; + +import styles from "./lbe.module.css"; function ShortenButtons(props) { - const [less, setLess] = useState(true); + const [less, setLess] = useState(true); - let number = props.number || 3; - let items = props.items || []; + let number = props.number || 3; + let items = props.items || []; - if (items.length <= number) { - return ( - - {items.map((item, idx) => ( - - ))} - - ); - } + if (items.length <= number) { + return ( + + {items.map((item, idx) => ( + + ))} + + ); + } - return ( - - {less ? ( - - {items.map((item, idx) => - idx < number ? : null - )} - setLess(!less)} - style={{ cursor: "pointer" }} - > - show all ⏵ - - - ) : ( - - {items.map((item, idx) => ( - - ))} - setLess(!less)} - style={{ cursor: "pointer" }} - > - ⏴ collapse - - - )} - - ); + return ( + + {less ? ( + + {items.map((item, idx) => + idx < number ? ( + + ) : null, + )} + setLess(!less)} + style={{cursor: "pointer"}} + > + show all ⏵ + + + ) : ( + + {items.map((item, idx) => ( + + ))} + setLess(!less)} + style={{cursor: "pointer"}} + > + ⏴ collapse + + + )} + + ); } export default ShortenButtons; From 3ae27d0240f87a3bf4e6359586409098a9d76803 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Wed, 17 Dec 2025 19:06:05 +0100 Subject: [PATCH 10/23] refactor: clean up unused classes --- src/components/lbe/lbe.module.css | 7 +- src/css/custom.css | 259 ------------------------------ 2 files changed, 1 insertion(+), 265 deletions(-) diff --git a/src/components/lbe/lbe.module.css b/src/components/lbe/lbe.module.css index dd6a0cc4..996ad004 100644 --- a/src/components/lbe/lbe.module.css +++ b/src/components/lbe/lbe.module.css @@ -43,7 +43,7 @@ h5 { width: 100%; } - .lbe__body { + .lbeBody { padding: 0; width: 100%; } @@ -84,11 +84,6 @@ h5 { background: var(--ifm-color-primary); } -.lbeFilterbuttonSecondary { - background: var(--ifm-breadcrumb-item-background-active); - color: var(--ifm-color-primary); -} - .lbeChip { background: var(--ifm-breadcrumb-item-background-active); color: var(--ifm-color-primary); diff --git a/src/css/custom.css b/src/css/custom.css index e00a20e4..d0624f9f 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -583,262 +583,3 @@ table thead tr { } } -/********** Lead by Example ************/ - -.lbe-intro { - margin: 1rem 0; -} - -.lbe { - display: flex; - flex-direction: row-reverse; -} - -/* Search / Filter section */ - -.lbe__searchfilter { - padding-left: 0.5rem; - width: 35%; -} - -.lbe__searchfilter__container { - padding: 0.75rem; - border: 1px dashed var(--ifm-color-primary); - margin-bottom: 0.75rem; -} - -.lbe__searchfilter__section p { - margin: unset; -} - -.lbe__searchfilter__section h4, -h5 { - margin: 0.5rem 0; -} - -.lbe__body { - padding-right: 0.5rem; - width: 65%; -} - -@media screen and (max-width: 1200px) { - .lbe { - display: flex; - flex-direction: column; - } - - .lbe__searchfilter { - padding: 0; - width: 100%; - } - - .lbe__body { - padding: 0; - width: 100%; - } -} - -.lbe__searchfilter input:focus { - width: calc(5 / 12 * 100%); -} - -.lbe__searchfilter__search { - padding: 0.5rem 0; -} - -.lbe__searchfilter__search > em { - color: var(--ifm-color-primary); -} - -/* Filter buttons */ - -.lbe__filterbutton { - display: grid; - align-items: center; - border-radius: var(--ifm-breadcrumb-border-radius); - color: white; - display: inline-block; - font-size: calc(0.6rem * var(--ifm-breadcrumb-size-multiplier)); - font-weight: 600; - padding: calc( - var(--ifm-breadcrumb-padding-vertical) * - var(--ifm-breadcrumb-size-multiplier) - ) - calc( - var(--ifm-breadcrumb-padding-horizontal) * - var(--ifm-breadcrumb-size-multiplier) - ); - border: none; - margin: 0.2em; - background: var(--ifm-color-primary); -} - -.lbe__filterbutton.lbe__filterbutton_secondary { - background: var(--ifm-breadcrumb-item-background-active); - color: var(--ifm-color-primary); -} - -.lbe__chip { - background: var(--ifm-breadcrumb-item-background-active); - color: var(--ifm-color-primary); - font-size: calc(0.8rem * var(--ifm-breadcrumb-size-multiplier)); - font-weight: 300; - justify-self: left; - margin-bottom: 1rem; -} - -.lbe__filterbutton.lbe__filterbutton--active { - background: var(--ifm-color-danger); - color: white; -} - -.lbe__filterbutton:hover, -.lbe__filterbutton--active:hover { - cursor: pointer; - transform: scale(var(--lbe-hover-scale)); - transition: transform var(--lbe-transform-time) ease-in-out; -} - -.lbe__filterbutton__content { - display: flex; - align-items: center; -} - -.lbe__filterbutton__funnel { - height: calc(var(--ifm-font-size-base) * 0.6); - fill: white; -} - -/* LBE blocks */ - -.lbe__block { - padding: 0.75rem; - border: 1px dashed var(--ifm-color-primary); - margin-bottom: 0.75rem; - transition: all var(--n4c-transform-time) ease-in-out; -} - -.lbe__block__header { - display: flex; - align-items: center; -} - -.lbe__block__header__title { - width: 85%; - padding: 0.3rem; - display: flex; - align-items: center; -} - -.lbe__block__author-trigger { - border: none; - background: none; - scale: 90%; - color: var(--ifm-color-primary); - padding: 0 0.5em; - margin: 0; -} - -.lbe__block__header__link { - width: 15%; - display: flex; - justify-content: right; -} - -.lbe__block > h4, -.lbe__block > p { - margin: 0.5rem; - margin-top: 0.8rem; -} - -.lbe__block p:nth-of-type(-n + 2), -.lbe__block__header__title h3 { - margin-bottom: calc(0.5 * var(--ifm-leading)); - text-align: left; -} - -@media screen and (max-width: 966px) { - .lbe__block__header { - display: flex; - flex-wrap: wrap-reverse; - } - - .lbe__block__header__title, - .lbe__block__header__link { - width: 100%; - justify-content: left; - } -} - -.lbe__block__hr { - border-top: 1px solid var(--ifm-color-primary); - background-color: unset; - margin: 0.8rem 0.4rem; -} - -.lbe__details { - display: flex; - overflow: hidden; - border: none; - /* border: 1px solid var(--ifm-color-primary); */ - padding: 0 1rem; - transition: all var(--n4c-transform-time) ease-in-out; -} - -.lbe__details h4 { - color: var(--ifm-color-primary); - padding-top: 15px; - transition: all var(--n4c-transform-time) ease-in-out; -} - -.lbe__details summary { - font-size: var(--ifm-h4-font-size); - color: var(--ifm-heading-color); - font-family: var(--ifm-heading-font-family); - font-weight: var(--ifm-heading-font-weight); - line-height: var(--ifm-heading-line-height); - cursor: pointer; -} - -.lbe__details[open] summary { - padding-bottom: 15px; -} - -.lbe__details summary::marker { - color: var(--ifm-color-primary); -} - -.lbe__block__link { - border: 0.5px solid var(--ifm-color-primary); - padding: 0.5em; - border-radius: 5px; - margin: 0.2em; - font-size: 11pt; - background: none; -} - -.lbe__block__link:hover { - transform: scale(var(--lbe-hover-scale)); - transition: all var(--lbe-transform-time) ease-in-out; -} - -.lbe__block__link a:hover { - text-decoration: none; -} - -/********** Tag Cloud ************/ - -.tag-cloud { - text-align: center; - color: var(--ifm-color-primary); -} - -.tag-cloud-tag { - padding: 0.2em; -} - -.tag-cloud-tag:hover { - transform: scale(1.1); - color: var(--ifm-color-danger); - transition: all var(--lbe-transform-time) ease-in-out; -} From 5bd52603d72c92a13db405eed122ecac48e2cded Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Thu, 18 Dec 2025 16:40:05 +0100 Subject: [PATCH 11/23] style: prettierrc formatting --- src/css/custom.css | 633 +++++++++++++++++++++++---------------------- 1 file changed, 318 insertions(+), 315 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index d0624f9f..4f3d8046 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -19,125 +19,125 @@ /********** Global variables ************/ :root { - --ifm-color-primary: #00617c; - --ifm-color-primary-dark: var(--ifm-color-primary); - --ifm-color-primary-darker: var(--ifm-color-primary); - --ifm-color-primary-darkest: var(--ifm-color-primary); - --ifm-color-primary-light: #009cbc; - --ifm-color-primary-lighter: var(--ifm-color-primary); - --ifm-color-primary-lightest: var(--ifm-color-primary); - --ifm-code-font-size: 95%; - --ifm-font-family-base: "IBM Plex Sans", sans-serif; - --ifm-heading-color: var(--ifm-color-primary); - --ifm-color-secondary: #873593; - --ifm-color-secondary-dark: var(--ifm-color-secondary); - --ifm-color-secondary-darker: var(--ifm-color-secondary); - --ifm-color-secondary-darkest: var(--ifm-color-secondary); - --ifm-color-secondary-light: var(--ifm-color-secondary); - --ifm-color-secondary-lighter: var(--ifm-color-secondary); - --ifm-color-secondary-lightest: var(--ifm-color-secondary); - --ifm-color-danger: #e30613; - --ifm-color-danger-dark: var(--ifm-color-danger); - --ifm-color-danger-darker: var(--ifm-color-danger); - --ifm-color-danger-darkest: var(--ifm-color-danger); - --ifm-color-danger-light: var(--ifm-color-danger); - --ifm-color-danger-lighter: var(--ifm-color-danger); - --ifm-color-danger-lightest: var(--ifm-color-danger); - --ifm-color-success: var(--ifm-color-secondary); - --ifm-color-success-dark: var(--ifm-color-success); - --ifm-color-success-darker: var(--ifm-color-success); - --ifm-color-success-darkest: var(--ifm-color-success); - --ifm-color-success-light: var(--ifm-color-success); - --ifm-color-success-lighter: var(--ifm-color-success); - --ifm-color-success-lightest: var(--ifm-color-success); - --ifm-color-info: #009cbc; - --ifm-color-info-dark: var(--ifm-color-info); - --ifm-color-info-darker: var(--ifm-color-info); - --ifm-color-info-darkest: var(--ifm-color-info); - --ifm-color-info-light: var(--ifm-color-info); - --ifm-color-info-lighter: var(--ifm-color-info); - --ifm-color-info-lightest: var(--ifm-color-info); - --ifm-color-caution: #f1de1e; - --ifm-color-caution-dark: var(--ifm-color-caution); - --ifm-color-caution-darker: var(--ifm-color-caution); - --ifm-color-caution-darkest: var(--ifm-color-caution); - --ifm-color-caution-light: var(--ifm-color-caution); - --ifm-color-caution-lighter: var(--ifm-color-caution); - --ifm-color-caution-lightest: var(--ifm-color-caution); - --ifm-global-shadow-lw: 0 3px 4px 0 rgba(0, 0, 0, 0.3); - --ifm-link-color: var(--ifm-color-primary); - --ifm-link-decoration: bold; - --ifm-link-hover-color: var(--ifm-link-color); - --ifm-link-hover-decoration: underline; - --ifm-footer-link-hover-color: var(--ifm-color-danger); - - --ifm-table-border-width: 0; - --ifm-table-head-background: var(--ifm-color-primary); - --ifm-table-head-color: white; - - --ifm-hero-text-color: white; - - --ifm-navbar-search-input-placeholder-color: var(--ifm-color-emphasis-800); - - --ifm-font-size-base: 13pt; - - --ifm-button-border-radius: 0; - - --ifm-navbar-height: 5rem; - --ifm-navbar-shadow: transparent; - --n4c-navbar-border: #e0e0e0; - - --ifm-alert-border-left-width: 1pt; - --ifm-alert-border-width: 1pt; - --ifm-alert-border-radius: 0; - --ifm-alert-shadow: transparent; - - --n4c-col-width: 250px; - - --n4c-button-width: 280px; - --n4c-button-height: 240px; - - --n4c-button-secondary-width: 300px; - - --n4c-button-vpad: 10px; - --n4c-button-hpad: 5px; - - --n4c-hover-scale: 105%; - --n4c-transform-time: 175ms; - - /* Lead by example */ - - --lbe-hover-scale: 104%; - --lbe-transform-time: 175ms; - - /* Repos */ - --repo-data-box: #f0f0f0; - --repo-line: #7f7f7f; + --ifm-color-primary: #00617c; + --ifm-color-primary-dark: var(--ifm-color-primary); + --ifm-color-primary-darker: var(--ifm-color-primary); + --ifm-color-primary-darkest: var(--ifm-color-primary); + --ifm-color-primary-light: #009cbc; + --ifm-color-primary-lighter: var(--ifm-color-primary); + --ifm-color-primary-lightest: var(--ifm-color-primary); + --ifm-code-font-size: 95%; + --ifm-font-family-base: "IBM Plex Sans", sans-serif; + --ifm-heading-color: var(--ifm-color-primary); + --ifm-color-secondary: #873593; + --ifm-color-secondary-dark: var(--ifm-color-secondary); + --ifm-color-secondary-darker: var(--ifm-color-secondary); + --ifm-color-secondary-darkest: var(--ifm-color-secondary); + --ifm-color-secondary-light: var(--ifm-color-secondary); + --ifm-color-secondary-lighter: var(--ifm-color-secondary); + --ifm-color-secondary-lightest: var(--ifm-color-secondary); + --ifm-color-danger: #e30613; + --ifm-color-danger-dark: var(--ifm-color-danger); + --ifm-color-danger-darker: var(--ifm-color-danger); + --ifm-color-danger-darkest: var(--ifm-color-danger); + --ifm-color-danger-light: var(--ifm-color-danger); + --ifm-color-danger-lighter: var(--ifm-color-danger); + --ifm-color-danger-lightest: var(--ifm-color-danger); + --ifm-color-success: var(--ifm-color-secondary); + --ifm-color-success-dark: var(--ifm-color-success); + --ifm-color-success-darker: var(--ifm-color-success); + --ifm-color-success-darkest: var(--ifm-color-success); + --ifm-color-success-light: var(--ifm-color-success); + --ifm-color-success-lighter: var(--ifm-color-success); + --ifm-color-success-lightest: var(--ifm-color-success); + --ifm-color-info: #009cbc; + --ifm-color-info-dark: var(--ifm-color-info); + --ifm-color-info-darker: var(--ifm-color-info); + --ifm-color-info-darkest: var(--ifm-color-info); + --ifm-color-info-light: var(--ifm-color-info); + --ifm-color-info-lighter: var(--ifm-color-info); + --ifm-color-info-lightest: var(--ifm-color-info); + --ifm-color-caution: #f1de1e; + --ifm-color-caution-dark: var(--ifm-color-caution); + --ifm-color-caution-darker: var(--ifm-color-caution); + --ifm-color-caution-darkest: var(--ifm-color-caution); + --ifm-color-caution-light: var(--ifm-color-caution); + --ifm-color-caution-lighter: var(--ifm-color-caution); + --ifm-color-caution-lightest: var(--ifm-color-caution); + --ifm-global-shadow-lw: 0 3px 4px 0 rgba(0, 0, 0, 0.3); + --ifm-link-color: var(--ifm-color-primary); + --ifm-link-decoration: bold; + --ifm-link-hover-color: var(--ifm-link-color); + --ifm-link-hover-decoration: underline; + --ifm-footer-link-hover-color: var(--ifm-color-danger); + + --ifm-table-border-width: 0; + --ifm-table-head-background: var(--ifm-color-primary); + --ifm-table-head-color: white; + + --ifm-hero-text-color: white; + + --ifm-navbar-search-input-placeholder-color: var(--ifm-color-emphasis-800); + + --ifm-font-size-base: 13pt; + + --ifm-button-border-radius: 0; + + --ifm-navbar-height: 5rem; + --ifm-navbar-shadow: transparent; + --n4c-navbar-border: #e0e0e0; + + --ifm-alert-border-left-width: 1pt; + --ifm-alert-border-width: 1pt; + --ifm-alert-border-radius: 0; + --ifm-alert-shadow: transparent; + + --n4c-col-width: 250px; + + --n4c-button-width: 280px; + --n4c-button-height: 240px; + + --n4c-button-secondary-width: 300px; + + --n4c-button-vpad: 10px; + --n4c-button-hpad: 5px; + + --n4c-hover-scale: 105%; + --n4c-transform-time: 175ms; + + /* Lead by example */ + + --lbe-hover-scale: 104%; + --lbe-transform-time: 175ms; + + /* Repos */ + --repo-data-box: #f0f0f0; + --repo-line: #7f7f7f; } /********** Algolia Search ************/ [data-theme="light"] .DocSearch { - /* --docsearch-primary-color: var(--ifm-color-primary); */ - /* --docsearch-text-color: var(--ifm-font-color-base); */ - --docsearch-muted-color: var(--ifm-color-primary); - --docsearch-container-background: rgba(94, 100, 112, 0.7); - --docsearch-focus-color: var(--ifm-color-primary); - --docsearch-highlight-color: var(--ifm-color-primary); - --docsearch-secondary-text-color: var(--ifm-color-primary); - /* Modal */ - --docsearch-modal-background: var(--ifm-color-white); - /* Search box */ - --docsearch-searchbox-background: var(--ifm-color-white); - --docsearch-searchbox-focus-background: var(--ifm-color-white); - --docsearch-icon-color: var(--ifm-color-primary); - /* Hit */ - --docsearch-hit-color: var(--ifm-color-primary); - --docsearch-hit-active-color: var(--ifm-color-white); - --docsearch-hit-background: var(--ifm-color-white); - --docsearch-hit-highlight-color: var(--ifm-menu-color-background-hover); - /* Footer */ - --docsearch-footer-background: var(--ifm-color-white); + /* --docsearch-primary-color: var(--ifm-color-primary); */ + /* --docsearch-text-color: var(--ifm-font-color-base); */ + --docsearch-muted-color: var(--ifm-color-primary); + --docsearch-container-background: rgba(94, 100, 112, 0.7); + --docsearch-focus-color: var(--ifm-color-primary); + --docsearch-highlight-color: var(--ifm-color-primary); + --docsearch-secondary-text-color: var(--ifm-color-primary); + /* Modal */ + --docsearch-modal-background: var(--ifm-color-white); + /* Search box */ + --docsearch-searchbox-background: var(--ifm-color-white); + --docsearch-searchbox-focus-background: var(--ifm-color-white); + --docsearch-icon-color: var(--ifm-color-primary); + /* Hit */ + --docsearch-hit-color: var(--ifm-color-primary); + --docsearch-hit-active-color: var(--ifm-color-white); + --docsearch-hit-background: var(--ifm-color-white); + --docsearch-hit-highlight-color: var(--ifm-menu-color-background-hover); + /* Footer */ + --docsearch-footer-background: var(--ifm-color-white); } /********** General and Landing page ************/ @@ -155,172 +155,176 @@ } */ .theme-announcement-bar { - font-size: 20px; - --site-announcement-bar-stripe-color1: rgba(227, 6, 19, 0.15); - --site-announcement-bar-stripe-color2: white; - background: repeating-linear-gradient( - -35deg, - var(--site-announcement-bar-stripe-color1), - var(--site-announcement-bar-stripe-color1) 20px, - var(--site-announcement-bar-stripe-color2) 10px, - var(--site-announcement-bar-stripe-color2) 40px - ); + font-size: 20px; + --site-announcement-bar-stripe-color1: rgba(227, 6, 19, 0.15); + --site-announcement-bar-stripe-color2: white; + background: repeating-linear-gradient( + -35deg, + var(--site-announcement-bar-stripe-color1), + var(--site-announcement-bar-stripe-color1) 20px, + var(--site-announcement-bar-stripe-color2) 10px, + var(--site-announcement-bar-stripe-color2) 40px + ); } .navbar__logo img { - margin-bottom: 0%; - height: 110%; - margin-top: -6px; + margin-bottom: 0%; + height: 110%; + margin-top: -6px; } .navbar { - border-bottom: 1px solid var(--n4c-navbar-border); + border-bottom: 1px solid var(--n4c-navbar-border); } .main-wrapper { - display: flex; + display: flex; } .hero { - display: flex; - flex-grow: 1; - padding: 2rem 0; - text-align: center; - width: 100%; - overflow: hidden; - --ifm-hero-background-color: var(--ifm-color-primary); - --ifm-hero-text-color: var(--ifm-color-white); - background-image: url("/img/Background.png"), - url("/img/Background_right.png"); - background-repeat: no-repeat; - background-position: left top, right top; + display: flex; + flex-grow: 1; + padding: 2rem 0; + text-align: center; + width: 100%; + overflow: hidden; + --ifm-hero-background-color: var(--ifm-color-primary); + --ifm-hero-text-color: var(--ifm-color-white); + background-image: + url("/img/Background.png"), url("/img/Background_right.png"); + background-repeat: no-repeat; + background-position: + left top, + right top; } @media screen and (max-width: 966px) { - .hero { - padding: 2rem; - background-image: url("/img/Background.png"); - background-repeat: no-repeat; - background-position: left top, right top; - } + .hero { + padding: 2rem; + background-image: url("/img/Background.png"); + background-repeat: no-repeat; + background-position: + left top, + right top; + } } .hero__container { - position: center; - width: 100%; + position: center; + width: 100%; } .hero__title { - color: var(--ifm-hero-text-color); - text-align: left; - font-size: 2.5rem; + color: var(--ifm-hero-text-color); + text-align: left; + font-size: 2.5rem; } .hero__subtitle { - font-size: 1.2rem; + font-size: 1.2rem; } .footer__link-item { - color: var(--ifm-footer-link-color); - line-height: 2; - font-weight: unset; + color: var(--ifm-footer-link-color); + line-height: 2; + font-weight: unset; } .footer--dark { - --ifm-footer-background-color: var(--ifm-color-primary); - --ifm-footer-color: var(--ifm-footer-link-color); - --ifm-footer-link-color: var(--ifm-color-white); - --ifm-footer-title-color: var(--ifm-color-white); - font-weight: unset; - border-top: 1px solid white; + --ifm-footer-background-color: var(--ifm-color-primary); + --ifm-footer-color: var(--ifm-footer-link-color); + --ifm-footer-link-color: var(--ifm-color-white); + --ifm-footer-title-color: var(--ifm-color-white); + font-weight: unset; + border-top: 1px solid white; } .footer__title { - color: var(--ifm-footer-title-color); - font: bold var(--ifm-h3-font-size) / var(--ifm-heading-line-height) - var(--ifm-font-family-base); - margin-bottom: var(--ifm-heading-margin-bottom); + color: var(--ifm-footer-title-color); + font: bold var(--ifm-h3-font-size) / var(--ifm-heading-line-height) + var(--ifm-font-family-base); + margin-bottom: var(--ifm-heading-margin-bottom); } /* N4C Feature styles */ .features { - align-items: center; - padding: 2px; - width: 100%; + align-items: center; + padding: 2px; + width: 100%; } .featureSvg { - padding: 2px; - width: 110px; - height: 110px; - margin-top: 5px; + padding: 2px; + width: 110px; + height: 110px; + margin-top: 5px; } .feature__col { - display: flex; - width: var(--n4c-col-width); - /* height: var(--n4c-button-height); */ - padding: var(--n4c-button-vpad) var(--n4c-button-hpad); - align-items: center; - justify-content: center; + display: flex; + width: var(--n4c-col-width); + /* height: var(--n4c-button-height); */ + padding: var(--n4c-button-vpad) var(--n4c-button-hpad); + align-items: center; + justify-content: center; } .intro__col { - display: flex; - width: var(--n4c-col-width); - /* height: var(--n4c-button-height); */ - padding: var(--n4c-button-vpad) var(--n4c-button-hpad); - align-items: center; - justify-content: left; + display: flex; + width: var(--n4c-col-width); + /* height: var(--n4c-button-height); */ + padding: var(--n4c-button-vpad) var(--n4c-button-hpad); + align-items: center; + justify-content: left; } .feature__button { - background-color: unset; - border: none; - width: var(--n4c-button-width); - padding: var(--n4c-button-vpad) var(--n4c-button-hpad); - font-size: 1.1rem; + background-color: unset; + border: none; + width: var(--n4c-button-width); + padding: var(--n4c-button-vpad) var(--n4c-button-hpad); + font-size: 1.1rem; } .feature__button--secondary { - display: flex; - flex-direction: column; - align-items: center; - width: var(--n4c-button-secondary-width); - font-size: 13pt; + display: flex; + flex-direction: column; + align-items: center; + width: var(--n4c-button-secondary-width); + font-size: 13pt; } .feature__button--secondary > * { - text-align: center; - word-wrap: break-word; + text-align: center; + word-wrap: break-word; } .buttons { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } .heroBanner { - padding: 2rem 0; - text-align: center; - position: center; - overflow: hidden; - --ifm-hero-background-color: var(--ifm-color-primary); - --ifm-hero-text-color: var(--ifm-color-white); + padding: 2rem 0; + text-align: center; + position: center; + overflow: hidden; + --ifm-hero-background-color: var(--ifm-color-primary); + --ifm-hero-text-color: var(--ifm-color-white); } @media screen and (max-width: 966px) { - .heroBanner { - padding: 2rem; - } + .heroBanner { + padding: 2rem; + } } .buttons { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } /* .button--primary { @@ -328,22 +332,22 @@ } */ .button--primary:hover { - /* --ifm-button-background-color: var(--ifm-color-danger); */ - /* --ifm-button-border-color: white; */ - transform: scale(var(--n4c-hover-scale)); - transition: transform var(--n4c-transform-time) ease-in-out; + /* --ifm-button-background-color: var(--ifm-color-danger); */ + /* --ifm-button-border-color: white; */ + transform: scale(var(--n4c-hover-scale)); + transition: transform var(--n4c-transform-time) ease-in-out; } .button.button--secondary { - color: var(--ifm-color-primary); - --ifm-button-background-color: white; - --ifm-button-border-color: var(--ifm-color-primary); + color: var(--ifm-color-primary); + --ifm-button-background-color: white; + --ifm-button-border-color: var(--ifm-color-primary); } .button--secondary:hover { - /* --ifm-button-background-color: var(--ifm-color-danger); */ - transform: scale(var(--n4c-hover-scale)); - transition: transform var(--n4c-transform-time) ease-in-out; + /* --ifm-button-background-color: var(--ifm-color-danger); */ + transform: scale(var(--n4c-hover-scale)); + transition: transform var(--n4c-transform-time) ease-in-out; } .button.button--secondary h1, @@ -353,23 +357,23 @@ .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; + 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); - text-align: left; - font-weight: 400; - white-space: normal; - word-wrap: break-word; + color: var(--ifm-color-primary); + text-align: left; + font-weight: 400; + white-space: normal; + word-wrap: break-word; } .button.button--primary { - color: var(--ifm-color-white); + color: var(--ifm-color-white); } .button.button--primary h1, @@ -378,32 +382,32 @@ .button.button--primary h4, .button.button--primary h5, .button.button--primary h6 { - color: white; - text-align: left; - white-space: normal; - word-wrap: break-word; + color: white; + text-align: left; + white-space: normal; + word-wrap: break-word; } .button.button--primary li, .button.button--primary em { - color: var(--ifm-color-white); - text-align: left; - font-weight: 400; - white-space: normal; - word-wrap: break-word; + 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); - border-radius: 10px; - color: var(--ifm-color-primary); - font-weight: 400; + --ifm-button-background-color: var(--ifm-color-white); + border-radius: 10px; + color: var(--ifm-color-primary); + font-weight: 400; } .button--negative:hover { - /* --ifm-button-background-color: var(--ifm-color-danger); */ - transform: scale(var(--n4c-hover-scale)); - transition: transform var(--n4c-transform-time) ease-in-out; + /* --ifm-button-background-color: var(--ifm-color-danger); */ + transform: scale(var(--n4c-hover-scale)); + transition: transform var(--n4c-transform-time) ease-in-out; } .button.button--negative h1, @@ -413,173 +417,172 @@ .button.button--negative h5, .button.button--negative h6, .button.button--negative a { - color: var(--ifm-color-primary); - text-align: left; - white-space: normal; - word-wrap: break-word; + color: var(--ifm-color-primary); + text-align: left; + white-space: normal; + word-wrap: break-word; } .n4c-logo { - margin-top: -5; - padding: 0; + margin-top: -5; + padding: 0; } /********** Links ************/ a { - font-weight: bold; + font-weight: bold; } a.button.button--primary:not(.button--outline):hover { - color: white; - text-decoration: unset; + color: white; + text-decoration: unset; } a.button.button--secondary:not(.button--outline):hover, a.button.button--negative:not(.button--outline):hover { - color: var(--ifm-color-primary); - text-decoration: unset; + color: var(--ifm-color-primary); + text-decoration: unset; } a:not([href]) { - text-decoration: none; + text-decoration: none; } p, .markdown > p, .markdown > pre, .markdown > ul { - margin-bottom: var(--ifm-leading); - text-align: justify; + margin-bottom: var(--ifm-leading); + text-align: justify; } .menu__link { - font-weight: unset; + font-weight: unset; } .pagination-nav__link { - border: none; - border-radius: var(--ifm-pagination-nav-border-radius); - padding: var(--ifm-global-spacing); - transition: background-color var(--ifm-button-transition-duration) - var(--ifm-transition-timing-default); + border: none; + border-radius: var(--ifm-pagination-nav-border-radius); + padding: var(--ifm-global-spacing); + transition: background-color var(--ifm-button-transition-duration) + var(--ifm-transition-timing-default); } .pagination-nav__link:hover { - background-color: var(--ifm-menu-color-background-hover); + background-color: var(--ifm-menu-color-background-hover); } .table-of-contents__link { - color: black; - font-weight: unset; + color: black; + font-weight: unset; } .table-of-contents__link--active, .table-of-contents__link--active code, .table-of-contents__link:hover, .table-of-contents__link:hover code { - color: var(--ifm-color-primary); - text-decoration: none; + color: var(--ifm-color-primary); + text-decoration: none; } /********** Search tool ************/ .searchResultItem_18XW a, .searchResultItem_18XW h2 { - /* color: unset;*/ - color: var(--ifm-color-primary); - font-size: unset; + /* color: unset;*/ + color: var(--ifm-color-primary); + font-size: unset; } mark { - color: white; - background: var(--ifm-color-danger); - /* background: var(--ifm-color-primary);*/ + color: white; + background: var(--ifm-color-danger); + /* background: var(--ifm-color-primary);*/ } /********** Bullets ************/ ul { - list-style-type: "\2B22\ "; + list-style-type: "\2B22\ "; } ul li::marker { - position: absolute; - font-size: 0.9em; - color: var(--ifm-color-primary); + position: absolute; + font-size: 0.9em; + color: var(--ifm-color-primary); } .button li::marker { - color: unset; + color: unset; } ul ul { - list-style-type: "\2B21\ "; + list-style-type: "\2B21\ "; } /********** Alerts ************/ .alert { - color: black; - --ifm-alert-foreground-color: black; - --ifm-alert-background-color: white; - border-style: dashed; - text-align: justify; + color: black; + --ifm-alert-foreground-color: black; + --ifm-alert-background-color: white; + border-style: dashed; + text-align: justify; } .alert a { - color: var(--ifm-color-primary); - text-decoration: none; + color: var(--ifm-color-primary); + text-decoration: none; } .alert a:hover { - color: var(--ifm-color-primary); - text-decoration: var(--ifm-link-decoration); + color: var(--ifm-color-primary); + text-decoration: var(--ifm-link-decoration); } /********** Tables ************/ table { - border: 0.5px solid var(--ifm-color-primary); + border: 0.5px solid var(--ifm-color-primary); } table thead tr { - border-bottom: 1px solid var(--ifm-color-primary); + border-bottom: 1px solid var(--ifm-color-primary); } /********** Methods Table ************/ .methods__searchfilter { - padding: 10px; - margin: 15px 0px; - border: 1px dashed var(--ifm-color-primary); - display: flex; + padding: 10px; + margin: 15px 0px; + border: 1px dashed var(--ifm-color-primary); + display: flex; } .methods__searchfilter__row { - align-items: center; - flex-wrap: wrap; + align-items: center; + flex-wrap: wrap; } .methods__searchfilter__filter { - width: calc(8 / 12 * 100%); - padding: 0 var(--ifm-spacing-horizontal); + width: calc(8 / 12 * 100%); + padding: 0 var(--ifm-spacing-horizontal); } .methods__searchfilter__search { - width: calc(4 / 12 * 100%); - padding: 0var (--ifm-spacing-horizontal); + width: calc(4 / 12 * 100%); + padding: 0var (--ifm-spacing-horizontal); } @media screen and (max-width: 1350px) { - .methods__searchfilter__filter { - width: unset; - padding: 0 var(--ifm-spacing-horizontal); - } + .methods__searchfilter__filter { + width: unset; + padding: 0 var(--ifm-spacing-horizontal); + } - .methods__searchfilter__search { - width: unset; - padding: var(--ifm-spacing-horizontal); - } + .methods__searchfilter__search { + width: unset; + padding: var(--ifm-spacing-horizontal); + } } - From 3dd8179d9feec8a68d40098ca94b668cb8e3382e Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Thu, 18 Dec 2025 16:40:27 +0100 Subject: [PATCH 12/23] style: remove deprecated CSS for announcement bar --- src/css/custom.css | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 4f3d8046..309f533c 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -142,18 +142,6 @@ /********** General and Landing page ************/ -/* div[class^='announcementBar_'] { - --site-announcement-bar-stripe-color1: rgba(0, 156, 188, 0.15); - --site-announcement-bar-stripe-color2: white; - background: repeating-linear-gradient( - -35deg, - var(--site-announcement-bar-stripe-color1), - var(--site-announcement-bar-stripe-color1) 20px, - var(--site-announcement-bar-stripe-color2) 10px, - var(--site-announcement-bar-stripe-color2) 40px - ); -} */ - .theme-announcement-bar { font-size: 20px; --site-announcement-bar-stripe-color1: rgba(227, 6, 19, 0.15); From cc364b8a8a5f176461a87e932457600b28ba8168 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Thu, 18 Dec 2025 16:42:10 +0100 Subject: [PATCH 13/23] style: add button styles section and remove unused logo styles --- src/css/custom.css | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 309f533c..fa0def14 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -309,6 +309,8 @@ } } +/********** Buttons ************/ + .buttons { display: flex; align-items: center; @@ -411,11 +413,6 @@ word-wrap: break-word; } -.n4c-logo { - margin-top: -5; - padding: 0; -} - /********** Links ************/ a { From f59f0d8ccf864aed60fa8f2f4fe7ee4cef409d28 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Thu, 18 Dec 2025 16:50:09 +0100 Subject: [PATCH 14/23] style: prettierrc formatting --- src/components/N4CFeatures.js | 274 +++++++++++++++++----------------- 1 file changed, 135 insertions(+), 139 deletions(-) diff --git a/src/components/N4CFeatures.js b/src/components/N4CFeatures.js index 171346f3..c6173041 100644 --- a/src/components/N4CFeatures.js +++ b/src/components/N4CFeatures.js @@ -3,151 +3,147 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; import Translate from "@docusaurus/Translate"; const features = { - entry: [ - { - title: Domains, - svg: "/img/nfdi4chem_Domains_white.svg", - link: "/docs/domain_guide", - }, - { - title: Roles, - svg: "/img/nfdi4chem_Roles_white.svg", - link: "/docs/role_guide", - }, - { - title: Handling Data, - svg: "/img/nfdi4chem_Handling_Data_white.svg", - link: "/docs/data_guide", - }, - { - title: Electronic Lab Notebooks, - svg: "/img/nfdi4chem_SmartLab_white.svg", - link: "/docs/smartlab", - }, - { - title: Data Publishing, - svg: "/img/nfdi4chem_Data_Publication_white.svg", - link: "/docs/data_publishing", - }, - ], - domains: [ - { - title: Analytical Chemistry, - svg: "/img/nfdi4chem_Analytical_Chemistry.svg", - link: "/docs/analytical_chemistry", - }, - { - title: Electrochemistry, - svg: "/img/nfdi4chem_Electrochemistry.svg", - link: "/docs/electrochemistry", - }, - { - title: Pharmaceutical Chemistry, - svg: "/img/nfdi4chem_Medicinal-Pharmaceutical_Chemistry.svg", - link: "/docs/pharmaceutical_chemistry", - }, - { - title: Physical Chemistry, - svg: "/img/nfdi4chem_Physial_Chemistry.svg", - link: "/docs/physical_chemistry", - }, - { - title: Synthetic Chemistry, - svg: "/img/nfdi4chem_Synthetic_Chemistry.svg", - link: "/docs/synthetic_chemistry", - }, - ], - roles: [ - { - title: Research Group Leader, - svg: "/img/nfdi4chem_Research_Group_Leader.svg", - link: "/docs/research_group_leader", - }, - { - title: Research Group Member, - svg: "/img/nfdi4chem_Research_Group_Member.svg", - link: "/docs/research_group_member", - }, - { - title: Student, - svg: "/img/nfdi4chem_Student.svg", - link: "/docs/student", - }, - { - title: Data Steward, - svg: "/img/nfdi4chem_Data_Steward.svg", - link: "/docs/data_steward", - }, - { - title: Core Facility Manager, - svg: "/img/nfdi4chem_Core_Facility_Manager.svg", - link: "/docs/core_facility_manager", - }, - ], - stakeholders_data_publishing: [ - { - title: Authors, - svg: "/img/nfdi4chem_Research_Group_Member.svg", - link: "/docs/publishing_standards_authors", - }, - { - title: Academic Publishers, - svg: "/img/nfdi4chem_Student.svg", - link: "/docs/publishing_standards_publishers", - }, - { - title: Infrastructure Providers, - svg: "/img/nfdi4chem_Core_Facility_Manager.svg", - link: "/docs/publishing_standards_infrastructure", - }, - ], + entry: [ + { + title: Domains, + svg: "/img/nfdi4chem_Domains_white.svg", + link: "/docs/domain_guide", + }, + { + title: Roles, + svg: "/img/nfdi4chem_Roles_white.svg", + link: "/docs/role_guide", + }, + { + title: Handling Data, + svg: "/img/nfdi4chem_Handling_Data_white.svg", + link: "/docs/data_guide", + }, + { + title: Electronic Lab Notebooks, + svg: "/img/nfdi4chem_SmartLab_white.svg", + link: "/docs/smartlab", + }, + { + title: Data Publishing, + svg: "/img/nfdi4chem_Data_Publication_white.svg", + link: "/docs/data_publishing", + }, + ], + domains: [ + { + title: Analytical Chemistry, + svg: "/img/nfdi4chem_Analytical_Chemistry.svg", + link: "/docs/analytical_chemistry", + }, + { + title: Electrochemistry, + svg: "/img/nfdi4chem_Electrochemistry.svg", + link: "/docs/electrochemistry", + }, + { + title: Pharmaceutical Chemistry, + svg: "/img/nfdi4chem_Medicinal-Pharmaceutical_Chemistry.svg", + link: "/docs/pharmaceutical_chemistry", + }, + { + title: Physical Chemistry, + svg: "/img/nfdi4chem_Physial_Chemistry.svg", + link: "/docs/physical_chemistry", + }, + { + title: Synthetic Chemistry, + svg: "/img/nfdi4chem_Synthetic_Chemistry.svg", + link: "/docs/synthetic_chemistry", + }, + ], + roles: [ + { + title: Research Group Leader, + svg: "/img/nfdi4chem_Research_Group_Leader.svg", + link: "/docs/research_group_leader", + }, + { + title: Research Group Member, + svg: "/img/nfdi4chem_Research_Group_Member.svg", + link: "/docs/research_group_member", + }, + { + title: Student, + svg: "/img/nfdi4chem_Student.svg", + link: "/docs/student", + }, + { + title: Data Steward, + svg: "/img/nfdi4chem_Data_Steward.svg", + link: "/docs/data_steward", + }, + { + title: Core Facility Manager, + svg: "/img/nfdi4chem_Core_Facility_Manager.svg", + link: "/docs/core_facility_manager", + }, + ], + stakeholders_data_publishing: [ + { + title: Authors, + svg: "/img/nfdi4chem_Research_Group_Member.svg", + link: "/docs/publishing_standards_authors", + }, + { + title: Academic Publishers, + svg: "/img/nfdi4chem_Student.svg", + link: "/docs/publishing_standards_publishers", + }, + { + title: Infrastructure Providers, + svg: "/img/nfdi4chem_Core_Facility_Manager.svg", + link: "/docs/publishing_standards_infrastructure", + }, + ], }; function Feature({ title, svg, link, style }) { - return ( -
-
- {link ? ( - - {title} -
- {title} - - ) : ( -

{title}

- )} -
-
- ); + return ( +
+
+ {link ? ( + + {title} +
+ {title} + + ) : ( +

{title}

+ )} +
+
+ ); } export default function N4CFeatures({ feature }) { - var style = ""; - const featureList = features[feature]; + var style = ""; + const featureList = features[feature]; - if (feature == "entry") { - style = "button button--primary feature__button"; - } else { - style = "button button--secondary feature__button--secondary"; - } + if (feature == "entry") { + style = "button button--primary feature__button"; + } else { + style = "button button--secondary feature__button--secondary"; + } - return ( -
-
-
- {featureList.map((props, idx) => ( - - ))} -
-
-
- ); + return ( +
+
+
+ {featureList.map((props, idx) => ( + + ))} +
+
+
+ ); } From be2f2b1af006459db53f6525a9bba8580493c607 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Thu, 18 Dec 2025 17:06:01 +0100 Subject: [PATCH 15/23] style: refactor feature styles into N4CFeatures.module.css and update component classes --- src/components/IntroButton.js | 33 +++++++----- src/components/N4CFeatures.js | 16 ++++-- src/components/N4CFeatures.module.css | 53 +++++++++++++++++++ src/css/custom.css | 75 --------------------------- 4 files changed, 84 insertions(+), 93 deletions(-) create mode 100644 src/components/N4CFeatures.module.css diff --git a/src/components/IntroButton.js b/src/components/IntroButton.js index 644eb017..1ea56e22 100644 --- a/src/components/IntroButton.js +++ b/src/components/IntroButton.js @@ -1,17 +1,24 @@ import React from "react"; -import useBaseUrl from '@docusaurus/useBaseUrl'; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import styles from "./N4CFeatures.module.css"; -export default function IntroButton( props ) { - return ( - - ) +export default function IntroButton(props) { + return ( + + ); } - diff --git a/src/components/N4CFeatures.js b/src/components/N4CFeatures.js index c6173041..04beb372 100644 --- a/src/components/N4CFeatures.js +++ b/src/components/N4CFeatures.js @@ -2,6 +2,8 @@ import Link from "@docusaurus/Link"; import useBaseUrl from "@docusaurus/useBaseUrl"; import Translate from "@docusaurus/Translate"; +import styles from "./N4CFeatures.module.css"; + const features = { entry: [ { @@ -105,7 +107,7 @@ const features = { function Feature({ title, svg, link, style }) { return ( -
+
{link ? ( - {title} + {title}
{title} @@ -130,13 +136,13 @@ export default function N4CFeatures({ feature }) { const featureList = features[feature]; if (feature == "entry") { - style = "button button--primary feature__button"; + style = "button button--primary " + styles.featureButton; } else { - style = "button button--secondary feature__button--secondary"; + style = "button button--secondary " + styles.featureButtonSecondary; } return ( -
+
{featureList.map((props, idx) => ( diff --git a/src/components/N4CFeatures.module.css b/src/components/N4CFeatures.module.css new file mode 100644 index 00000000..b7cdb26e --- /dev/null +++ b/src/components/N4CFeatures.module.css @@ -0,0 +1,53 @@ +/* N4C Feature styles */ + +.features { + align-items: center; + padding: 2px; + width: 100%; +} + +.featureSvg { + padding: 2px; + width: 110px; + height: 110px; + margin-top: 5px; +} + +.featureCol { + display: flex; + width: var(--n4c-col-width); + /* height: var(--n4c-button-height); */ + padding: var(--n4c-button-vpad) var(--n4c-button-hpad); + align-items: center; + justify-content: center; +} + +.introCol { + display: flex; + width: var(--n4c-col-width); + /* height: var(--n4c-button-height); */ + padding: var(--n4c-button-vpad) var(--n4c-button-hpad); + align-items: center; + justify-content: left; +} + +.featureButton { + background-color: unset; + border: none; + width: var(--n4c-button-width); + padding: var(--n4c-button-vpad) var(--n4c-button-hpad); + font-size: 1.1rem; +} + +.featureButtonSecondary { + display: flex; + flex-direction: column; + align-items: center; + width: var(--n4c-button-secondary-width); + font-size: 13pt; +} + +.featureButtonSecondary > * { + text-align: center; + word-wrap: break-word; +} diff --git a/src/css/custom.css b/src/css/custom.css index fa0def14..bcdc9887 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -234,81 +234,6 @@ margin-bottom: var(--ifm-heading-margin-bottom); } -/* N4C Feature styles */ - -.features { - align-items: center; - padding: 2px; - width: 100%; -} - -.featureSvg { - padding: 2px; - width: 110px; - height: 110px; - margin-top: 5px; -} - -.feature__col { - display: flex; - width: var(--n4c-col-width); - /* height: var(--n4c-button-height); */ - padding: var(--n4c-button-vpad) var(--n4c-button-hpad); - align-items: center; - justify-content: center; -} - -.intro__col { - display: flex; - width: var(--n4c-col-width); - /* height: var(--n4c-button-height); */ - padding: var(--n4c-button-vpad) var(--n4c-button-hpad); - align-items: center; - justify-content: left; -} - -.feature__button { - background-color: unset; - border: none; - width: var(--n4c-button-width); - padding: var(--n4c-button-vpad) var(--n4c-button-hpad); - font-size: 1.1rem; -} - -.feature__button--secondary { - display: flex; - flex-direction: column; - align-items: center; - width: var(--n4c-button-secondary-width); - font-size: 13pt; -} - -.feature__button--secondary > * { - text-align: center; - word-wrap: break-word; -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} - -.heroBanner { - padding: 2rem 0; - text-align: center; - position: center; - overflow: hidden; - --ifm-hero-background-color: var(--ifm-color-primary); - --ifm-hero-text-color: var(--ifm-color-white); -} - -@media screen and (max-width: 966px) { - .heroBanner { - padding: 2rem; - } -} - /********** Buttons ************/ .buttons { From 569faed66fd313e633d71f77f3535b248bb8d324 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Thu, 18 Dec 2025 17:10:50 +0100 Subject: [PATCH 16/23] style: prettierrc formatting --- src/pages/index.js | 76 ++++++++++++++++++++++------------------------ 1 file changed, 37 insertions(+), 39 deletions(-) diff --git a/src/pages/index.js b/src/pages/index.js index 72db0a59..3eee7826 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -6,44 +6,42 @@ import N4CFeatures from "../components/N4CFeatures"; import Translate from "@docusaurus/Translate"; export default function Home() { - const { siteConfig } = useDocusaurusContext(); - return ( - -
-
-
-
-

- {siteConfig.title} -

-
-
-
-
-

- - A place for all knowledge regarding Research - Data Management (RDM) in Chemistry - -

-
-
-
- - Get started - -
-
-
- -
+ const { siteConfig } = useDocusaurusContext(); + return ( + +
+
+
+
+

{siteConfig.title}

- - ); +
+
+
+

+ + A place for all knowledge regarding Research Data Management + (RDM) in Chemistry + +

+
+
+
+ + Get started + +
+
+
+ +
+
+ + ); } From dcae9ec9cc76e5911b4878fd3d01341ff5c6e8ab Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Thu, 18 Dec 2025 17:25:27 +0100 Subject: [PATCH 17/23] style: refactor hero styles into index.module.css and update component classes --- src/css/custom.css | 45 ----------------------------- src/pages/index.js | 10 ++++--- src/pages/index.module.css | 59 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 49 deletions(-) create mode 100644 src/pages/index.module.css diff --git a/src/css/custom.css b/src/css/custom.css index bcdc9887..42e0809b 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -75,8 +75,6 @@ --ifm-table-head-background: var(--ifm-color-primary); --ifm-table-head-color: white; - --ifm-hero-text-color: white; - --ifm-navbar-search-input-placeholder-color: var(--ifm-color-emphasis-800); --ifm-font-size-base: 13pt; @@ -169,49 +167,6 @@ display: flex; } -.hero { - display: flex; - flex-grow: 1; - padding: 2rem 0; - text-align: center; - width: 100%; - overflow: hidden; - --ifm-hero-background-color: var(--ifm-color-primary); - --ifm-hero-text-color: var(--ifm-color-white); - background-image: - url("/img/Background.png"), url("/img/Background_right.png"); - background-repeat: no-repeat; - background-position: - left top, - right top; -} - -@media screen and (max-width: 966px) { - .hero { - padding: 2rem; - background-image: url("/img/Background.png"); - background-repeat: no-repeat; - background-position: - left top, - right top; - } -} - -.hero__container { - position: center; - width: 100%; -} - -.hero__title { - color: var(--ifm-hero-text-color); - text-align: left; - font-size: 2.5rem; -} - -.hero__subtitle { - font-size: 1.2rem; -} - .footer__link-item { color: var(--ifm-footer-link-color); line-height: 2; diff --git a/src/pages/index.js b/src/pages/index.js index 3eee7826..9829479f 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -5,6 +5,8 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import N4CFeatures from "../components/N4CFeatures"; import Translate from "@docusaurus/Translate"; +import styles from "./index.module.css"; + export default function Home() { const { siteConfig } = useDocusaurusContext(); return ( @@ -12,16 +14,16 @@ export default function Home() { title={`${siteConfig.title}`} description={`${siteConfig.customFields.description}`} > -
-
+
+
-

{siteConfig.title}

+

{siteConfig.title}

-

+

A place for all knowledge regarding Research Data Management (RDM) in Chemistry diff --git a/src/pages/index.module.css b/src/pages/index.module.css new file mode 100644 index 00000000..9e51b277 --- /dev/null +++ b/src/pages/index.module.css @@ -0,0 +1,59 @@ +.hero { + display: flex; + flex-grow: 1; + padding: 2rem 0; + text-align: center; + width: 100%; + overflow: hidden; + background-color: var(--ifm-color-primary); + color: var(--ifm-color-white); + background-image: + url("/img/Background.png"), url("/img/Background_right.png"); + background-repeat: no-repeat; + background-position: + left top, + right top; +} + +@media screen and (max-width: 966px) { + .hero { + padding: 2rem; + background-image: url("/img/Background.png"); + background-repeat: no-repeat; + background-position: + left top, + right top; + } +} + +.heroContainer { + margin: 0 auto; + max-width: var(--ifm-container-width); + padding: 0 var(--ifm-spacing-horizontal); + width: 100%; +} + +.heroTitle { + color: var(--ifm-color-white); + text-align: left; + font-size: 2.5rem; +} + +.heroSubtitle { + font-size: 1.2rem; +} + +.heroBanner { + padding: 2rem 0; + text-align: center; + position: center; + overflow: hidden; + --ifm-hero-background-color: var(--ifm-color-primary); + --ifm-hero-text-color: var(--ifm-color-white); +} + +@media screen and (max-width: 966px) { + .heroBanner { + padding: 2rem; + } +} From e04dc2dd36a3078deedc50e3ccc2ed766971eefc Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Thu, 18 Dec 2025 17:39:21 +0100 Subject: [PATCH 18/23] style: prettierrc formatting --- src/components/lbe/lbe.module.css | 240 +++++++++++++++--------------- 1 file changed, 120 insertions(+), 120 deletions(-) diff --git a/src/components/lbe/lbe.module.css b/src/components/lbe/lbe.module.css index 996ad004..dfe0cf18 100644 --- a/src/components/lbe/lbe.module.css +++ b/src/components/lbe/lbe.module.css @@ -1,233 +1,233 @@ /********** Lead by Example ************/ .lbe { - display: flex; - flex-direction: row-reverse; + display: flex; + flex-direction: row-reverse; } /* Search / Filter section */ .lbeSearchfilter { - padding-left: 0.5rem; - width: 35%; + padding-left: 0.5rem; + width: 35%; } .lbeSearchfilterContainer { - padding: 0.75rem; - border: 1px dashed var(--ifm-color-primary); - margin-bottom: 0.75rem; + padding: 0.75rem; + border: 1px dashed var(--ifm-color-primary); + margin-bottom: 0.75rem; } .lbeSearchfilterSection p { - margin: unset; + margin: unset; } .lbeSearchfilterSection h4, h5 { - margin: 0.5rem 0; + margin: 0.5rem 0; } .lbeBody { - padding-right: 0.5rem; - width: 65%; + padding-right: 0.5rem; + width: 65%; } @media screen and (max-width: 1200px) { - .lbe { - display: flex; - flex-direction: column; - } + .lbe { + display: flex; + flex-direction: column; + } - .lbeSearchfilter { - padding: 0; - width: 100%; - } + .lbeSearchfilter { + padding: 0; + width: 100%; + } - .lbeBody { - padding: 0; - width: 100%; - } + .lbeBody { + padding: 0; + width: 100%; + } } .lbeSearchfilter input:focus { - width: calc(5 / 12 * 100%); + width: calc(5 / 12 * 100%); } .lbeSearchfilterSearch { - padding: 0.5rem 0; + padding: 0.5rem 0; } .lbeSearchfilterSearch > em { - color: var(--ifm-color-primary); + color: var(--ifm-color-primary); } /* Filter buttons */ .lbeFilterbutton { - display: grid; - align-items: center; - border-radius: var(--ifm-breadcrumb-border-radius); - color: white; - display: inline-block; - font-size: calc(0.6rem * var(--ifm-breadcrumb-size-multiplier)); - font-weight: 600; - padding: calc( - var(--ifm-breadcrumb-padding-vertical) * - var(--ifm-breadcrumb-size-multiplier) - ) - calc( - var(--ifm-breadcrumb-padding-horizontal) * - var(--ifm-breadcrumb-size-multiplier) - ); - border: none; - margin: 0.2em; - background: var(--ifm-color-primary); + display: grid; + align-items: center; + border-radius: var(--ifm-breadcrumb-border-radius); + color: white; + display: inline-block; + font-size: calc(0.6rem * var(--ifm-breadcrumb-size-multiplier)); + font-weight: 600; + padding: calc( + var(--ifm-breadcrumb-padding-vertical) * + var(--ifm-breadcrumb-size-multiplier) + ) + calc( + var(--ifm-breadcrumb-padding-horizontal) * + var(--ifm-breadcrumb-size-multiplier) + ); + border: none; + margin: 0.2em; + background: var(--ifm-color-primary); } .lbeChip { - background: var(--ifm-breadcrumb-item-background-active); - color: var(--ifm-color-primary); - font-size: calc(0.8rem * var(--ifm-breadcrumb-size-multiplier)); - font-weight: 300; - justify-self: left; - margin-bottom: 1rem; + background: var(--ifm-breadcrumb-item-background-active); + color: var(--ifm-color-primary); + font-size: calc(0.8rem * var(--ifm-breadcrumb-size-multiplier)); + font-weight: 300; + justify-self: left; + margin-bottom: 1rem; } .lbeFilterbuttonActive { - background: var(--ifm-color-danger); - color: white; + background: var(--ifm-color-danger); + color: white; } .lbeFilterbutton:hover, .lbeFilterbuttonActive:hover { - cursor: pointer; - transform: scale(var(--lbe-hover-scale)); - transition: transform var(--lbe-transform-time) ease-in-out; + cursor: pointer; + transform: scale(var(--lbe-hover-scale)); + transition: transform var(--lbe-transform-time) ease-in-out; } .lbeFilterbuttonContent { - display: flex; - align-items: center; + display: flex; + align-items: center; } .lbeFilterbuttonFunnel { - height: calc(var(--ifm-font-size-base) * 0.6); - fill: white; + height: calc(var(--ifm-font-size-base) * 0.6); + fill: white; } /* LBE blocks */ .lbeBlock { - padding: 0.75rem; - border: 1px dashed var(--ifm-color-primary); - margin-bottom: 0.75rem; - transition: all var(--n4c-transform-time) ease-in-out; + padding: 0.75rem; + border: 1px dashed var(--ifm-color-primary); + margin-bottom: 0.75rem; + transition: all var(--n4c-transform-time) ease-in-out; } .lbeBlockHeader { - display: flex; - align-items: center; + display: flex; + align-items: center; } .lbeBlockHeaderTitle { - width: 85%; - padding: 0.3rem; - display: flex; - align-items: center; + width: 85%; + padding: 0.3rem; + display: flex; + align-items: center; } .lbeBlockAuthorTrigger { - border: none; - background: none; - scale: 90%; - color: var(--ifm-color-primary); - padding: 0 0.5em; - margin: 0; + border: none; + background: none; + scale: 90%; + color: var(--ifm-color-primary); + padding: 0 0.5em; + margin: 0; } .lbeBlockHeaderLink { - width: 15%; - display: flex; - justify-content: right; + width: 15%; + display: flex; + justify-content: right; } .lbeBlock > h4, .lbeBlock > p { - margin: 0.5rem; - margin-top: 0.8rem; + margin: 0.5rem; + margin-top: 0.8rem; } .lbeBlock p:nth-of-type(-n + 2), .lbeBlockHeaderTitle h3 { - margin-bottom: calc(0.5 * var(--ifm-leading)); - text-align: left; + margin-bottom: calc(0.5 * var(--ifm-leading)); + text-align: left; } @media screen and (max-width: 966px) { - .lbeBlockHeader { - display: flex; - flex-wrap: wrap-reverse; - } + .lbeBlockHeader { + display: flex; + flex-wrap: wrap-reverse; + } - .lbeBlockHeaderTitle, - .lbeBlockHeaderLink { - width: 100%; - justify-content: left; - } + .lbeBlockHeaderTitle, + .lbeBlockHeaderLink { + width: 100%; + justify-content: left; + } } .lbeBlockHr { - border-top: 1px solid var(--ifm-color-primary); - background-color: unset; - margin: 0.8rem 0.4rem; + border-top: 1px solid var(--ifm-color-primary); + background-color: unset; + margin: 0.8rem 0.4rem; } .lbeDetails { - display: flex; - overflow: hidden; - border: none; - /* border: 1px solid var(--ifm-color-primary); */ - padding: 0 1rem; - transition: all var(--n4c-transform-time) ease-in-out; + display: flex; + overflow: hidden; + border: none; + /* border: 1px solid var(--ifm-color-primary); */ + padding: 0 1rem; + transition: all var(--n4c-transform-time) ease-in-out; } .lbeDetails h4 { - color: var(--ifm-color-primary); - padding-top: 15px; - transition: all var(--n4c-transform-time) ease-in-out; + color: var(--ifm-color-primary); + padding-top: 15px; + transition: all var(--n4c-transform-time) ease-in-out; } .lbeDetails summary { - font-size: var(--ifm-h4-font-size); - color: var(--ifm-heading-color); - font-family: var(--ifm-heading-font-family); - font-weight: var(--ifm-heading-font-weight); - line-height: var(--ifm-heading-line-height); - cursor: pointer; + font-size: var(--ifm-h4-font-size); + color: var(--ifm-heading-color); + font-family: var(--ifm-heading-font-family); + font-weight: var(--ifm-heading-font-weight); + line-height: var(--ifm-heading-line-height); + cursor: pointer; } .lbeDetails[open] summary { - padding-bottom: 15px; + padding-bottom: 15px; } .lbeDetails summary::marker { - color: var(--ifm-color-primary); + color: var(--ifm-color-primary); } .lbeBlockLink { - border: 0.5px solid var(--ifm-color-primary); - padding: 0.5em; - border-radius: 5px; - margin: 0.2em; - font-size: 11pt; - background: none; + border: 0.5px solid var(--ifm-color-primary); + padding: 0.5em; + border-radius: 5px; + margin: 0.2em; + font-size: 11pt; + background: none; } .lbeBlockLink:hover { - transform: scale(var(--lbe-hover-scale)); - transition: all var(--lbe-transform-time) ease-in-out; + transform: scale(var(--lbe-hover-scale)); + transition: all var(--lbe-transform-time) ease-in-out; } .lbeBlockLink a:hover { - text-decoration: none; + text-decoration: none; } From 5241d1ac7742d2844f061e8858cda7fccc73e663 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Thu, 18 Dec 2025 18:33:54 +0100 Subject: [PATCH 19/23] style: format code for consistency and readability in LbeBody.js --- src/components/lbe/LbeBody.js | 179 +++++++++++++++++----------------- 1 file changed, 88 insertions(+), 91 deletions(-) diff --git a/src/components/lbe/LbeBody.js b/src/components/lbe/LbeBody.js index 40ce3af7..b99dd25f 100644 --- a/src/components/lbe/LbeBody.js +++ b/src/components/lbe/LbeBody.js @@ -1,6 +1,6 @@ // Custom functions -import {RepoButton, FilterButton} from "./LbeElements.js"; +import { RepoButton, FilterButton } from "./LbeElements.js"; import Authors from "./Authors.js"; // Import CSS @@ -10,101 +10,98 @@ import styles from "./lbe.module.css"; // Function for single lbe dataset block function LbeBlock({ - title, - authors, - journal, - pubyear, - linkpub, - linkdata, - linkcomment, - description, - lbeState, - setLbeState, + title, + authors, + journal, + pubyear, + linkpub, + linkdata, + linkcomment, + description, + lbeState, + setLbeState, }) { - // Extract DOI from link by cutting right of "doi.org" - var doi = linkpub.slice(linkpub.indexOf("doi.org") + 8); - - // Define set of repos in this dataset - var myRepos = Array.from(new Set(linkdata.map((obj) => obj.name))) - .flat() - .sort((a, b) => a.localeCompare(b, undefined, {sensitivity: "base"})); - - return ( -

-
-
-

{title}

-
-
- -
-
- -

- - - -

- -

- {journal} {pubyear}, DOI:{" "} - - {doi} - - . -

- -

- {myRepos.map((m, idx) => ( - - ))} -

- -
- -
- Description -

{description}

-
- -
- -
- Links to datasets -

- {linkdata.map((props, idx) => ( - - ))} -

-

- {linkcomment} -

-
-
- ); + // Extract DOI from link by cutting right of "doi.org" + var doi = linkpub.slice(linkpub.indexOf("doi.org") + 8); + + // Define set of repos in this dataset + var myRepos = Array.from(new Set(linkdata.map((obj) => obj.name))) + .flat() + .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" })); + + return ( +
+
+
+

{title}

+
+
+ +
+
+ +

+ + + +

+ +

+ {journal} {pubyear}, DOI:{" "} + + {doi} + + . +

+ +

+ {myRepos.map((m, idx) => ( + + ))} +

+ +
+ +
+ Description +

{description}

+
+ +
+ +
+ Links to datasets +

+ {linkdata.map((props, idx) => ( + + ))} +

+

+ {linkcomment} +

+
+
+ ); } // Render LBE entry list -function LbeBody({list, lbeState, setLbeState}) { - return ( -
- {list.map((props, idx) => ( - - ))} -
- ); +function LbeBody({ list, lbeState, setLbeState }) { + return ( +
+ {list.map((props, idx) => ( + + ))} +
+ ); } export default LbeBody; From ce20fa902e64c221b7c11fd3be272a5eaf4f4766 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Thu, 18 Dec 2025 19:54:10 +0100 Subject: [PATCH 20/23] style: remove unused CSS variables --- src/css/custom.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 42e0809b..189af505 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -103,11 +103,6 @@ --n4c-hover-scale: 105%; --n4c-transform-time: 175ms; - /* Lead by example */ - - --lbe-hover-scale: 104%; - --lbe-transform-time: 175ms; - /* Repos */ --repo-data-box: #f0f0f0; --repo-line: #7f7f7f; From c7715b42069612403b148e29baa7f1d88f03dab2 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Thu, 18 Dec 2025 19:56:09 +0100 Subject: [PATCH 21/23] feat: refactor to use swizzled details component from Docusaurus theme --- src/components/lbe/LbeBody.js | 22 +++-- src/components/lbe/lbe.module.css | 20 ++--- src/theme/Details/index.tsx | 125 ++++++++++++++++++++++++++++ src/theme/Details/styles.module.css | 64 ++++++++++++++ 4 files changed, 213 insertions(+), 18 deletions(-) create mode 100644 src/theme/Details/index.tsx create mode 100644 src/theme/Details/styles.module.css diff --git a/src/components/lbe/LbeBody.js b/src/components/lbe/LbeBody.js index b99dd25f..48874db6 100644 --- a/src/components/lbe/LbeBody.js +++ b/src/components/lbe/LbeBody.js @@ -3,6 +3,8 @@ import { RepoButton, FilterButton } from "./LbeElements.js"; import Authors from "./Authors.js"; +import { Details } from "@site/src/theme/Details"; + // Import CSS import styles from "./lbe.module.css"; @@ -70,15 +72,23 @@ function LbeBlock({
-
- Description +

{description}

-
+
-
- Links to datasets +

{linkdata.map((props, idx) => ( @@ -87,7 +97,7 @@ function LbeBlock({

{linkcomment}

-
+
); } diff --git a/src/components/lbe/lbe.module.css b/src/components/lbe/lbe.module.css index dfe0cf18..63afacfb 100644 --- a/src/components/lbe/lbe.module.css +++ b/src/components/lbe/lbe.module.css @@ -183,18 +183,18 @@ h5 { } .lbeDetails { + --docusaurus-details-transition: transform 200ms ease; + --docusaurus-details-decoration-color: var(--ifm-color-primary); display: flex; - overflow: hidden; - border: none; - /* border: 1px solid var(--ifm-color-primary); */ + flex-direction: column; padding: 0 1rem; - transition: all var(--n4c-transform-time) ease-in-out; + margin: unset; + border: none; } -.lbeDetails h4 { - color: var(--ifm-color-primary); - padding-top: 15px; - transition: all var(--n4c-transform-time) ease-in-out; +.lbeDetailsCollapsible { + margin-top: unset; + border-top: none; } .lbeDetails summary { @@ -210,10 +210,6 @@ h5 { padding-bottom: 15px; } -.lbeDetails summary::marker { - color: var(--ifm-color-primary); -} - .lbeBlockLink { border: 0.5px solid var(--ifm-color-primary); padding: 0.5em; diff --git a/src/theme/Details/index.tsx b/src/theme/Details/index.tsx new file mode 100644 index 00000000..33a749bc --- /dev/null +++ b/src/theme/Details/index.tsx @@ -0,0 +1,125 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React, { + useRef, + useState, + type ComponentProps, + type ReactElement, + type ReactNode, +} from "react"; +import clsx from "clsx"; +import useBrokenLinks from "@docusaurus/useBrokenLinks"; +import useIsBrowser from "@docusaurus/useIsBrowser"; +import { useCollapsible, Collapsible } from "@docusaurus/theme-common"; +import styles from "./styles.module.css"; + +function isInSummary(node: HTMLElement | null): boolean { + if (!node) { + return false; + } + return node.tagName === "SUMMARY" || isInSummary(node.parentElement); +} + +function hasParent(node: HTMLElement | null, parent: HTMLElement): boolean { + if (!node) { + return false; + } + return node === parent || hasParent(node.parentElement, parent); +} + +export type DetailsProps = { + /** + * Summary is provided as props, optionally including the wrapping + * `` tag + */ + summary?: ReactElement | string; + contentClassName?: string; +} & ComponentProps<"details">; + +/** + * A mostly un-styled `
` element with smooth collapsing. Provides some + * very lightweight styles, but you should bring your UI. + */ +export function Details({ + summary, + children, + ...props +}: DetailsProps): ReactNode { + useBrokenLinks().collectAnchor(props.id); + + const isBrowser = useIsBrowser(); + const detailsRef = useRef(null); + + const { collapsed, setCollapsed } = useCollapsible({ + initialState: !props.open, + }); + // Use a separate state for the actual details prop, because it must be set + // only after animation completes, otherwise close animations won't work + const [open, setOpen] = useState(props.open); + + const summaryElement = React.isValidElement(summary) ? ( + summary + ) : ( + {summary ?? "Details"} + ); + + return ( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions +
{ + const target = e.target as HTMLElement; + // Prevent a double-click to highlight summary text + if (isInSummary(target) && e.detail > 1) { + e.preventDefault(); + } + }} + onClick={(e) => { + e.stopPropagation(); // For isolation of multiple nested details/summary + const target = e.target as HTMLElement; + const shouldToggle = + isInSummary(target) && hasParent(target, detailsRef.current!); + if (!shouldToggle) { + return; + } + e.preventDefault(); + if (collapsed) { + setCollapsed(false); + setOpen(true); + } else { + setCollapsed(true); + // Don't do this, it breaks close animation! + // setOpen(false); + } + }} + > + {summaryElement} + + { + setCollapsed(newCollapsed); + setOpen(!newCollapsed); + }} + > +
+ {children} +
+ +
+ ); +} diff --git a/src/theme/Details/styles.module.css b/src/theme/Details/styles.module.css new file mode 100644 index 00000000..f384e48d --- /dev/null +++ b/src/theme/Details/styles.module.css @@ -0,0 +1,64 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/* +CSS variables, meant to be overridden by final theme + */ +.details { + --docusaurus-details-summary-arrow-size: 0.38rem; +} + +.details > summary { + position: relative; + cursor: pointer; + list-style: none; + padding-left: 1rem; +} + +/* TODO: deprecation, need to remove this after Safari will support `::marker` */ +.details > summary::-webkit-details-marker { + display: none; +} + +.details > summary::before { + position: absolute; + top: 0.3rem; + left: 0; + + /* CSS-only Arrow */ + content: ""; + border-width: var(--docusaurus-details-summary-arrow-size); + border-style: solid; + border-color: transparent transparent transparent + var(--docusaurus-details-decoration-color); + + /* Arrow rotation anim */ + transform: rotate(0deg); + transition: var(--docusaurus-details-transition); + transform-origin: calc(var(--docusaurus-details-summary-arrow-size) / 2) 50%; +} + +/* When JS disabled/failed to load: we use the open property for arrow animation: */ +.details[open]:not(.isBrowser) > summary::before, +/* When JS works: we use the data-attribute for arrow animation */ +.details[data-collapsed='false'].isBrowser > summary::before { + transform: rotate(90deg); +} + +.collapsibleContent { + margin-top: 1rem; + border-top: 1px solid var(--docusaurus-details-decoration-color); + padding-top: 1rem; +} + +.collapsibleContent p:last-child { + margin-bottom: 0; +} + +.details > summary > p:last-child { + margin-bottom: 0; +} From 3a78b7ad10c4bd8171bec0837d3a677e2e63f90f Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Thu, 18 Dec 2025 20:03:13 +0100 Subject: [PATCH 22/23] fix: move component to avoid theme component mismatch --- src/components/lbe/LbeBody.js | 2 +- src/theme/{ => common}/Details/index.tsx | 0 src/theme/{ => common}/Details/styles.module.css | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename src/theme/{ => common}/Details/index.tsx (100%) rename src/theme/{ => common}/Details/styles.module.css (100%) diff --git a/src/components/lbe/LbeBody.js b/src/components/lbe/LbeBody.js index 48874db6..bb40a36a 100644 --- a/src/components/lbe/LbeBody.js +++ b/src/components/lbe/LbeBody.js @@ -3,7 +3,7 @@ import { RepoButton, FilterButton } from "./LbeElements.js"; import Authors from "./Authors.js"; -import { Details } from "@site/src/theme/Details"; +import { Details } from "@site/src/theme/common/Details"; // Import CSS diff --git a/src/theme/Details/index.tsx b/src/theme/common/Details/index.tsx similarity index 100% rename from src/theme/Details/index.tsx rename to src/theme/common/Details/index.tsx diff --git a/src/theme/Details/styles.module.css b/src/theme/common/Details/styles.module.css similarity index 100% rename from src/theme/Details/styles.module.css rename to src/theme/common/Details/styles.module.css From 0fcacc32cb12deb681e56ae756b5c65fa50599d8 Mon Sep 17 00:00:00 2001 From: Johannes Liermann Date: Thu, 18 Dec 2025 20:03:52 +0100 Subject: [PATCH 23/23] style: remove conditional open states from LbeBlock details components --- src/components/lbe/LbeBody.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/lbe/LbeBody.js b/src/components/lbe/LbeBody.js index bb40a36a..de5a757a 100644 --- a/src/components/lbe/LbeBody.js +++ b/src/components/lbe/LbeBody.js @@ -76,7 +76,6 @@ function LbeBlock({ className={styles.lbeDetails} contentClassName={styles.lbeDetailsCollapsible} summary="Description" - open={description.length <= 100} >

{description}

@@ -87,7 +86,6 @@ function LbeBlock({ className={styles.lbeDetails} contentClassName={styles.lbeDetailsCollapsible} summary="Links to datasets" - open={linkdata.length <= 3} >

{linkdata.map((props, idx) => (