diff --git a/package-lock.json b/package-lock.json index ca0e06e9..d8fabc87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7886,13 +7886,23 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001312", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz", - "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - } + "version": "1.0.30001538", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001538.tgz", + "integrity": "sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ] }, "node_modules/canvas-fit": { "version": "1.5.0", @@ -30809,9 +30819,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001312", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz", - "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==" + "version": "1.0.30001538", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001538.tgz", + "integrity": "sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==" }, "canvas-fit": { "version": "1.5.0", diff --git a/packages/portal/config/landingPage.json b/packages/portal/config/landingPage.json index 4a630c8d..35fc386c 100644 --- a/packages/portal/config/landingPage.json +++ b/packages/portal/config/landingPage.json @@ -10,15 +10,22 @@ "splitarea": { "left": [ { - "text": "The HEAL Data Platform is a single web interface which allows visitors to discover, access and analyze data generated by HEAL funded, as well as HEAL relevant, studies within a distributed ecosystem. Making HEAL data easily findable enables secondary, cross-study analyses, promotes dissemination of the HEAL Initiative’s research and accelerates new discoveries." + "text": "The HEAL Data Platform is a single web interface which allows visitors to discover, access and analyze data generated by HEAL funded, as well as HEAL relevant, studies within a distributed ecosystem. Making HEAL data easily findable enables secondary, cross-study analyses, promotes dissemination of the HEAL Initiative's research and accelerates new discoveries." }, { - "link": { - "href": "/discovery", - "linkType": "portal", - "text": "Explore Data" + "indent": { + "text": "Search HEAL studies and related datasets
for download or analysis in a workspace", + "link": { + "href": "/discovery", + "linkType": "portal", + "text": "Explore Data" + }, + "style": "mb-4" } }, + { + "text": "NIH HEAL Initiative®
The Helping to End Addiction Long-term Initiative, or NIH HEAL Initiative®, is an aggressive, trans-agency effort to speed scientific solutions to stem the national opioid and pain public health crises." + }, { "link": { "href": "/documentation/study-registration", @@ -26,9 +33,6 @@ "text": "Register Your Study" } }, - { - "text": "The Helping to End Addiction Long-term Initiative, or NIH HEAL Initiative®, is an aggressive, trans-agency effort to speed scientific solutions to stem the national opioid and pain public health crises." - }, { "link": { "href": "https://heal.nih.gov/", @@ -40,12 +44,29 @@ { "image": { "src": "/images/HEAL_Initiative.jpeg", - "alt": "NIH HEAL initiative" + "alt": "NIH HEAL initiative", + "position": "top" } } ] } }, + { + "full": [ + { + "text": "HEAL Semantic Search
The NIH HEAL Initiative also provides HEAL Semantic Search, a complementary tool to use with the HEAL Data Platform. HEAL Semantic Search allows users to explore connections between biomedical concepts, identify variables related to a concept and discover datasets containing these variables. Uncovering novel relationships between concepts and variables may help researchers pose relevant research questions and identify potential collaborations." + }, + { + "indent": { + "text": "Search HEAL with semantic search", + "link": { + "href": "https://healdatafair.org/resources/semanticsearch", + "text": "HEAL Semantic Search" + } + } + } + ] + }, { "break": "standard" }, diff --git a/packages/portal/src/components/Contents/LandingPageContent.tsx b/packages/portal/src/components/Contents/LandingPageContent.tsx index fa6be719..ca999c0a 100644 --- a/packages/portal/src/components/Contents/LandingPageContent.tsx +++ b/packages/portal/src/components/Contents/LandingPageContent.tsx @@ -16,16 +16,24 @@ export interface LandingPageContentProp { } + +export interface landingPageLink { + readonly href: string; + readonly text: string; + readonly linkType?: string; +} export interface leftRightProps { readonly text?: string; - readonly link?: { - readonly href: string; - readonly text: string; - readonly linkType?: string; - }; + readonly link?: landingPageLink; readonly image?: { readonly src: string; readonly alt: string; + readonly position?: string; + }; + readonly indent?: { + readonly text?: string; + readonly link?: landingPageLink; + readonly style?: string; }; } export interface LandingPageProps { @@ -39,6 +47,7 @@ export interface LandingPageProps { readonly left: leftRightProps[]; readonly right: leftRightProps[]; }; + readonly full?: leftRightProps[]; readonly break?: string; readonly cardsArea?: { readonly title: string; @@ -60,41 +69,55 @@ export interface LandingPageProps { const LandingPageContent = ({ content }: LandingPageContentProp) => { const { basePath } = useRouter(); return ( -
+
{content?.body?.map((component, index) => { if (component.title) { - return {component.title.text}; + return {component.title.text}; } + const splitareaJsx = (area: leftRightProps[]) => area.map((obj, index) => { + if (obj.text) { + return

; + } + if (obj.link) { + return

; + } + if (obj.image) { + return ( +
+ {obj.image.alt} +
+ ); + } + if (obj.indent) { + return
+ {obj.indent.text &&

+ } + {obj.indent.link &&

} +
; + } + }); if (component.splitarea) { - const splitareaJsx = (area: leftRightProps[]) => area.map((obj, index) => { - if (obj.text) { - return

; - } - if (obj.link) { - return

; - } - if (obj.image) { - return ( -
- {obj.image.alt} -
- ); - } - }); return
-
+
{splitareaJsx(component.splitarea.left)}
-
+
{splitareaJsx(component.splitarea.right)}
; } + + if (component.full) { + return
+ {splitareaJsx(component.full)} +
; + } if (component.break) { return
; } diff --git a/packages/portal/src/components/MultiPartText.tsx b/packages/portal/src/components/MultiPartText.tsx index 42298565..589a53be 100644 --- a/packages/portal/src/components/MultiPartText.tsx +++ b/packages/portal/src/components/MultiPartText.tsx @@ -22,7 +22,7 @@ const MultiPartText = ({parts}: MultiPartTextProps) => { 'text': {content}, 'boldText': {content}, 'link': {content}, - 'outboundLink': + 'outboundLink': {content}, 'bold': {content}, 'break':
diff --git a/packages/portal/tailwind.config.js b/packages/portal/tailwind.config.js index e5a92381..923c0b50 100644 --- a/packages/portal/tailwind.config.js +++ b/packages/portal/tailwind.config.js @@ -4,6 +4,9 @@ const plugin = require('tailwindcss/plugin'); module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx,md,mdx}'], + safelist: [ + 'mb-8', + ], theme: { extend: { colors: {