diff --git a/website/docs/gs/docker.md b/website/docs/gs/docker.md deleted file mode 100644 index e69de29bb..000000000 diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 5800c44a3..d60214f64 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -29,8 +29,6 @@ const config = { ({ docs: { sidebarPath: require.resolve('./sidebars.js'), - // Please change this to your repo. - // Remove this to remove the "edit this page" links. editUrl: 'https://github.com/broadinstitute/gatk-sv/tree/master/website', }, @@ -105,6 +103,14 @@ const config = { { label: 'Talkowski lab', to: 'https://talkowski.mgh.harvard.edu', + }, + { + label: 'Broad Institute', + to: 'https://www.broadinstitute.org' + }, + { + label: 'Center for Genomic Medicine', + to: 'https://www.massgeneral.org/research/cgm' } ], }, diff --git a/website/src/components/HomepageFeatures/feature.js b/website/src/components/HomepageFeatures/feature.js new file mode 100644 index 000000000..f70bc809c --- /dev/null +++ b/website/src/components/HomepageFeatures/feature.js @@ -0,0 +1,26 @@ +import React from 'react'; +import clsx from 'clsx'; +import styles from './styles.module.css'; + +function Feature({ Svg, title, description, colSize = 'col--4', contentAlignment = 'center' }) { + const alignmentClass = + contentAlignment === 'right' ? 'text--right' : + contentAlignment === 'center' ? 'text--center' : + 'text--left'; + + return ( +
+ {Svg && ( +
+ +
+ )} +
+ {title &&

{title}

} + {description &&

{description}

} +
+
+ ); +} + +export default Feature; diff --git a/website/src/components/HomepageFeatures/featureGallery.js b/website/src/components/HomepageFeatures/featureGallery.js new file mode 100644 index 000000000..b603c3941 --- /dev/null +++ b/website/src/components/HomepageFeatures/featureGallery.js @@ -0,0 +1,27 @@ +import React from 'react'; +import styles from './styles.module.css'; +import useBaseUrl from '@docusaurus/useBaseUrl'; + +function FeatureGallery({ header, images, description }) { + return ( +
+

{header}

+ +
+ {images.map((image, index) => { + const resolvedImageUrl = useBaseUrl(image.src); + + return ( + + {image.alt + + ); + })} +
+ + {description &&

{description}

} +
+ ); +} + +export default FeatureGallery; diff --git a/website/src/components/HomepageFeatures/index.js b/website/src/components/HomepageFeatures/index.js index 9c56bb32b..e5ce0b381 100644 --- a/website/src/components/HomepageFeatures/index.js +++ b/website/src/components/HomepageFeatures/index.js @@ -1,64 +1,157 @@ import React from 'react'; import clsx from 'clsx'; import styles from './styles.module.css'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; +import FeatureGallery from './featureGallery.js'; +import WholeRowFeature from './wholeRowFeature.js'; +import Feature from './feature.js'; -const FeatureList = [ +const accessibleFeatures = [ { - title: 'Cloud-Native', - Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, + title: <>Terra integration, description: ( <> - Built and optimized for the Google Cloud Platform + Run your data with pre-configured workspaces on the secure + Terra platform + + ), + buttons: [ + { + buttonLink: 'https://app.terra.bio', + buttonText: 'Joint Calling Workspace' + }, + { + buttonLink: 'https://app.terra.bio/#workspaces/help-gatk/GATK-Structural-Variants-Single-Sample', + buttonText: 'Single-Sample Workspace' + } + ], + colSize: "col--12", + } +]; + +const featuredProjects = { + header: "Featured Projects", + images: [ + { + src: 'img/logo/gnomad.png', + link: 'https://gnomad.broadinstitute.org/news/2023-11-v4-structural-variants/', + alt: 'gnomAD' + }, + { + src: 'img/logo/allOfUs.png', + link: 'https://support.researchallofus.org/hc/en-us/articles/27496716922900-All-of-Us-Short-Read-Structural-Variant-Quality-Report', + alt: 'all-of-us' + }, + { + src: 'img/logo/hgsvc.png', + link: 'https://www.hgsvc.org/', + alt: 'HGSVC' + }, + { + src: 'img/logo/1kgp.png', + link: 'https://www.internationalgenome.org/data-portal/data-collection/30x-grch38', + alt: '1000-genomes-project' + } + ], + //description: "..." +}; + +const organizations = { + header: "Organizations", + images: [ + { + src: "img/logo/broad.png", + link: "https://www.broadinstitute.org/", + alt: "Broad Institute" + }, + { + src: "img/logo/talkowskiLab.png", + link: "https://talkowski.mgh.harvard.edu/", + alt: "Talkowski Lab" + }, + { + src: "img/logo/cgm.png", + link: "https://cgm.massgeneral.org/", + alt: "Center for Genomic Medicine" + } + ] +}; + +const characteristics = [ + { + title: 'Population-scale capabilities', + //Svg: require('@site/static/img/....svg').default, + description: ( + <> + Used for SV discovery in flagship research studies including + the Genome Aggregation Project (gnomAD) and All of Us. ), }, { - title: 'Scalable', - Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, + title: 'Sensitive and accurate', + //Svg: require('@site/static/img/....svg').default, description: ( <> - Used to produce high-quality SV call sets for large - scale sequencing initiatives such as the Genome - Aggregation Project (gnomAD) + Ensemble calling with multiple SV discovery tools combined with + joint genotyping maximize power, and ML-based variant adjudication filters poor quality variants. ), }, { - title: 'Accurate', - Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, + title: 'Cloud-native', + //Svg: require('@site/static/img/....svg').default, description: ( <> - Analyzes SV calls from multiple algorithms and evidence - signatures to achieve high sensitivity and precision + Built for the Terra genomics platform, enabling scalability, collaboration, + and reproducibility in a secure environment. ), }, ]; -function Feature({Svg, title, description}) { - return ( -
-
- -
-
-

{title}

-

{description}

-
-
- ); -} - export default function HomepageFeatures() { return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} + <> + {accessibleFeatures && accessibleFeatures.length > 0 && ( +
+
+
+ {accessibleFeatures.map((props, idx) => ( + + ))} +
+
+
+ )} + +
+
+
+ {characteristics.map((props, idx) => ( + + ))} +
+
+
+ +
+
+ +
+
+ +
+
+
-
-
+ + ); } diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css index b248eb2e5..40803ec95 100644 --- a/website/src/components/HomepageFeatures/styles.module.css +++ b/website/src/components/HomepageFeatures/styles.module.css @@ -3,9 +3,146 @@ align-items: center; padding: 2rem 0; width: 100%; + justify-content: space-between; + gap: 20px; +} + +.featuresAlt { + background: var(--ifm-background-color-alt); + color: var(--ifm-color-text); + align-content: stretch; + text-align: left; + position: relative; + padding: 2rem 0; } .featureSvg { height: 200px; width: 200px; } + +.heroBanner { + text-align: center; +} + +.buttons { + margin-top: 2rem; +} + +.featureContainer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + width: 100%; + padding: 1rem 0; +} + +.featureContainer.alignLeft { + flex-direction: row; +} + +.featureContainer.alignRight { + flex-direction: row-reverse; +} + +.featureContainer.alignCenter { + justify-content: center; +} + +.featureImage { + flex: 1; + text-align: center; +} + +.featureImage.alignLeft { + text-align: left; +} + +.featureImage.alignRight { + text-align: right; +} + +.featureImage.alignCenter { + text-align: center; +} + +.largeFeatureImage { + max-height: 150px; + width: auto; +} + +.featureContent { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + text-align: left; +} + +.featureContent.alignLeft { + text-align: left; +} + +.featureContent.alignRight { + text-align: right; +} + +.featureContent.alignCenter { + text-align: center; +} + + +.buttonContainer { + display: flex; + gap: 10px; + flex-wrap: wrap; + justify-content: flex-start; +} + +.buttonContainer.alignLeft { + justify-content: flex-start; +} + +.buttonContainer.alignRight { + justify-content: flex-end; +} + +.buttonContainer.alignCenter { + justify-content: center; +} + +.featureGallery { + text-align: center; + padding: 2rem 0; +} + +.header { + font-size: 2rem; + margin-bottom: 2rem; +} + +.imageGallery { + display: flex; + justify-content: center; + gap: 40px; + margin-bottom: 2rem; +} + +.galleryImage { + max-height: 100px; + width: auto; + object-fit: cover; + cursor: pointer; + transition: transform 0.3s ease; +} + +.galleryImage:hover { + transform: scale(1.1); +} + +.description { + font-size: 1.2rem; + color: #666; + margin-top: 1rem; +} diff --git a/website/src/components/HomepageFeatures/wholeRowFeature.js b/website/src/components/HomepageFeatures/wholeRowFeature.js new file mode 100644 index 000000000..5fe72dd61 --- /dev/null +++ b/website/src/components/HomepageFeatures/wholeRowFeature.js @@ -0,0 +1,49 @@ +import React from 'react'; +import styles from './styles.module.css'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; + +function WholeRowFeature({ imageUrl, title, description, buttons, contentAlignment, imageAlignment, colSize = 'col--6', }) { + const resolvedImageUrl = useBaseUrl(imageUrl); + + const imageAlignmentClass = + imageAlignment === 'right' ? styles.alignRight : + imageAlignment === 'center' ? styles.alignCenter : + styles.alignLeft; + + const contentAlignmentClass = + contentAlignment === 'right' ? styles.alignRight : + contentAlignment === 'center' ? styles.alignCenter : + styles.alignLeft; + + return ( +
+ {resolvedImageUrl && ( +
+ {title +
+ )} + +
+ {title &&

{title}

} + {description &&

{description}

} + {buttons && buttons.length > 0 && ( +
+ {buttons.map((button, index) => ( + + {button.buttonText} + + ))} +
+ )} +
+
+ ); +} + +export default WholeRowFeature; diff --git a/website/src/css/custom.css b/website/src/css/custom.css index e34580355..3d246034e 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -2,20 +2,28 @@ * Any CSS included here will be global. The classic template * bundles Infima by default. Infima is a CSS framework designed to * work well for content-centric websites. + * + * You may use this website for choose colors: + * https://docusaurus.io/docs/styling-layout */ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; + --ifm-color-primary: #00b4d8; + --ifm-color-primary-dark: #00a2c2; + --ifm-color-primary-darker: #0099b8; + --ifm-color-primary-darkest: #007e97; + --ifm-color-primary-light: #00c6ee; + --ifm-color-primary-lighter: #00cff8; + --ifm-color-primary-lightest: #1ad9ff; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + --ifm-background-color-banner: #222629; + --ifm-background-color-alt: var(--ifm-color-primary-light); + + --ifm-color-alt: #8f9f96 + --highlight-text-color: black; --highlight-background-color: #7091e6; --highlight-optional-arg-text-color: black; @@ -24,15 +32,20 @@ /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme='dark'] { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; + --ifm-color-primary: #6db7fd; + --ifm-color-primary-dark: #49a5fd; + --ifm-color-primary-darker: #379dfc; + --ifm-color-primary-darkest: #16324f; + --ifm-color-primary-light: #b4dafe; + --ifm-color-primary-lighter: #d8ecfe; + --ifm-color-primary-lightest: #fcfdff; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --ifm-background-color-banner: #222629; + --ifm-background-color-alt: var(--ifm-color-primary-darkest); + + --ifm-color-alt: #8f9f96 + --highlight-text-color: black; --highlight-background-color: #7091e6; --highlight-optional-arg-text-color: black; diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 75d8475e3..e7072853e 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -8,17 +8,20 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures'; import styles from './index.module.css'; function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return (

{siteConfig.title}

-

{siteConfig.tagline}

+

Enabling scalable, cloud-native structural variant discovery

+

for short-read whole-genome sequencing data

+
- - Quick Start + + About + + + Getting Started
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 9f71a5da7..3c4d444d7 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -8,11 +8,24 @@ text-align: center; position: relative; overflow: hidden; + background-image: url('/img/heroBackground.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +[data-theme='light'] .heroBanner { + color: white; +} + +[data-theme='dark'] .heroBanner { + color: white; } @media screen and (max-width: 996px) { .heroBanner { padding: 2rem; + background-size: cover; /* this makes the background size responsive to the window size */ } } @@ -20,4 +33,5 @@ display: flex; align-items: center; justify-content: center; + gap: 20px; } diff --git a/website/static/img/heroBackground.jpg b/website/static/img/heroBackground.jpg new file mode 100644 index 000000000..78c5c90e2 --- /dev/null +++ b/website/static/img/heroBackground.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bf411f3901c5226b1b0f8ef00f2eb21b3bf535914d74317bd42017082ed7d04f +size 187987 diff --git a/website/static/img/logo.svg b/website/static/img/logo.svg deleted file mode 100644 index bad90c760..000000000 --- a/website/static/img/logo.svg +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c2ae4b0e5603791e869ed5bc34a60a709d1ec6343fc22f75d97937aaafafd7f7 -size 6438 diff --git a/website/static/img/logo/1kgp.png b/website/static/img/logo/1kgp.png new file mode 100644 index 000000000..c93dd71c2 --- /dev/null +++ b/website/static/img/logo/1kgp.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6fbfab8a8f471c2ad4d74b2b4c3f0435702d33f6ea30794f95141ed5fe4c7f42 +size 67466 diff --git a/website/static/img/logo/allOfUs.png b/website/static/img/logo/allOfUs.png new file mode 100644 index 000000000..813417bd1 --- /dev/null +++ b/website/static/img/logo/allOfUs.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7759f604dccaa6f05472f31b4624246444749ca0f2ea49c0be7e62fc78a7c33a +size 84814 diff --git a/website/static/img/logo/broad.png b/website/static/img/logo/broad.png new file mode 100644 index 000000000..20751d63f --- /dev/null +++ b/website/static/img/logo/broad.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0a8e0b6bc0d61c75766d469f39ca1576f3987932f69e4563e24b25e65a44b156 +size 13332 diff --git a/website/static/img/logo/cgm.png b/website/static/img/logo/cgm.png new file mode 100644 index 000000000..b18e423b4 --- /dev/null +++ b/website/static/img/logo/cgm.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9fae8ec0cdf1ce6b20c312f2b92a76f743868e9bb03d578f2af4aacbbd15a620 +size 20229 diff --git a/website/static/img/logo/gnomad.png b/website/static/img/logo/gnomad.png new file mode 100644 index 000000000..eac65323c --- /dev/null +++ b/website/static/img/logo/gnomad.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8053c7441c567da1ebd9168a5ad0ed61fd29e2509d20fda8ccc949cdef8a13d1 +size 32339 diff --git a/website/static/img/logo/hgsvc.png b/website/static/img/logo/hgsvc.png new file mode 100644 index 000000000..a997bb6e4 --- /dev/null +++ b/website/static/img/logo/hgsvc.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:65a532036bf20e5764b3eb32b5baebffaea4bd3b5b7617d9ffee5b11e6ad68da +size 206526 diff --git a/website/static/img/logo/talkowskiLab.png b/website/static/img/logo/talkowskiLab.png new file mode 100644 index 000000000..d985bdf72 --- /dev/null +++ b/website/static/img/logo/talkowskiLab.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a0ca1c02f443cd91f3dde0ca4b2430a5c4b8cca537f793e25f0b2386f7950445 +size 26109 diff --git a/website/static/img/logo/terra.png b/website/static/img/logo/terra.png new file mode 100644 index 000000000..4ceca239e --- /dev/null +++ b/website/static/img/logo/terra.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:28cc74ea020f8ccb7a1f02aa35c0d4abfd20dd002e94e45b86541f48082331d7 +size 53660 diff --git a/website/static/img/undraw_docusaurus_mountain.svg b/website/static/img/undraw_docusaurus_mountain.svg deleted file mode 100644 index cf59832be..000000000 --- a/website/static/img/undraw_docusaurus_mountain.svg +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:5d63a81ff3dd5ea266e99156f8e33f76cc02df0f04e1a4487240663704660b7f -size 31486 diff --git a/website/static/img/undraw_docusaurus_react.svg b/website/static/img/undraw_docusaurus_react.svg deleted file mode 100644 index eac081d8a..000000000 --- a/website/static/img/undraw_docusaurus_react.svg +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1f2c1d7bcdd4219c9869d94b45c052e2856464e91c3e0704d99b4714d32cc668 -size 36002 diff --git a/website/static/img/undraw_docusaurus_tree.svg b/website/static/img/undraw_docusaurus_tree.svg deleted file mode 100644 index 60f82cf30..000000000 --- a/website/static/img/undraw_docusaurus_tree.svg +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:09704d88ef849647bf2ee02a4cb1b1b413f000de059a8d794019238ef2c5e4a7 -size 11887