diff --git a/package-lock.json b/package-lock.json index da02f7eb..d25fe2ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,6 +43,7 @@ "lodash-webpack-plugin": "^0.11.6", "lodash.find": "^4.6.0", "lodash.startcase": "^4.4.0", + "lucide-react": "^0.308.0", "mdx-utils": "^0.2.0", "prism-react-renderer": "^1.2.1", "prop-types": "^15.7.2", @@ -15394,6 +15395,14 @@ "es5-ext": "~0.10.2" } }, + "node_modules/lucide-react": { + "version": "0.308.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.308.0.tgz", + "integrity": "sha512-QC3S4Qi6s5y/w4bhS7sauDG29MsPwV0C5g9/mKkY7/gm3tPpg9tyRQG33g597Q5M3vmE0APcPuOjyQKsF8gnIg==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", @@ -36205,6 +36214,12 @@ "es5-ext": "~0.10.2" } }, + "lucide-react": { + "version": "0.308.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.308.0.tgz", + "integrity": "sha512-QC3S4Qi6s5y/w4bhS7sauDG29MsPwV0C5g9/mKkY7/gm3tPpg9tyRQG33g597Q5M3vmE0APcPuOjyQKsF8gnIg==", + "requires": {} + }, "make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", diff --git a/package.json b/package.json index 8b8974a9..ab0355de 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "lodash-webpack-plugin": "^0.11.6", "lodash.find": "^4.6.0", "lodash.startcase": "^4.4.0", + "lucide-react": "^0.308.0", "mdx-utils": "^0.2.0", "prism-react-renderer": "^1.2.1", "prop-types": "^15.7.2", diff --git a/src/components/NavBar/MegaMenu/index.js b/src/components/NavBar/MegaMenu/index.js index ea974f2e..9f631019 100644 --- a/src/components/NavBar/MegaMenu/index.js +++ b/src/components/NavBar/MegaMenu/index.js @@ -13,7 +13,7 @@ const data = { documentation: { explore: { title: 'Explore our documentation', - text: 'Learn how to install the Data Management System (DMS) or individual products using our easy-to-use guides.', + text: 'Learn how to install and use o individual products using our easy-to-use tutorials.', link: { to: '/documentation/', text: 'Documentation Overview', @@ -21,8 +21,8 @@ const data = { }, sections: [ { - title: 'Products', - color: 'dark-blue', + title: 'User Docs', + color: 'blue', links: [ { to: 'documentation/song', @@ -53,32 +53,179 @@ const data = { ], }, { - title: 'dms bundle', - color: 'yellow-green', + title: 'Developer Docs', + color: 'dark-blue', links: [ { - to: '/documentation/dms/', - text: 'Introduction', + to: 'documentation/song', + text: 'Song', }, { - to: '/documentation/dms/installation/installation', - text: 'How to Install', + to: 'documentation/score', + text: 'Score', + }, + + { + to: 'documentation/maestro', + text: 'Maestro', + }, + { + to: 'documentation/arranger', + text: 'Arranger', }, { - to: '/documentation/dms/admin-guide/tasks', - text: 'For Administrators', + to: 'documentation/ego', + text: 'Ego', + }, + { + to: 'documentation/dms-ui', + text: 'DMS-UI', + }, + ], + }, + { + title: 'System Admin Docs', + color: 'yellow', + links: [ + { + to: 'documentation/song', + text: 'Deployment', + }, + { + to: 'documentation/score', + text: 'Load Balancing', + }, + { + to: 'documentation/ego', + text: 'Logging', + }, + { + to: 'documentation/ego', + text: 'Recovery', + }, + ], + }, + ], + }, + tutorials: { + explore: { + title: 'Explore our tutorials and Tutorials', + text: 'Covering a range of topics for data consumers, providers, and administrators, these step-by-step tutorials provide practical insight and hands-on experience.', + link: { + to: '/tutorials/', + text: 'tutorials and Tutorials', + }, + }, + sections: [ + { + title: 'Consumers', + color: 'blue', + links: [ + { + to: 'documentation/song', + text: 'Downloading Data', + }, + { + to: 'documentation/song', + text: 'Visualizing data with Jbrowse2', + }, + ], + }, + { + title: 'Providers', + color: 'dark-blue', + links: [ + { + to: 'documentation/song', + text: 'Submitting Data (CLI)', + }, + { + to: 'documentation/song', + text: 'Bulk Data Submission (Scripting)', + }, + ], + }, + { + title: 'Administrators', + color: 'yellow', + links: [ + { + to: 'documentation/song', + text: 'Local Setup', + }, + { + to: 'documentation/song', + text: 'Server Setup', + }, + { + to: 'documentation/song', + text: 'Data Modeling', + }, + { + to: 'documentation/song', + text: 'Portal Customization', + }, + { + to: 'documentation/song', + text: 'Managing Permissions', + }, + ], + }, + ], + }, + community: { + explore: { + title: 'Check out our Community Information', + text: 'Connect with our community resources covering feature requests, deployment showcases, events, office hours and scholarly contributions. ', + link: { + to: '', + text: '', + }, + }, + sections: [ + { + title: '', + color: 'blue', + links: [ + { + text: 'Feature Requests' + }, + { + text: 'How to Contribute' }, { - to: '/documentation/dms/user-guide/data-portal', - text: 'For Users', + text: 'Public Roadmap' + }, + { + text: 'Deployment List' }, ], }, + { + title: '', + color: 'dark-blue', + links: [ + { + text: 'Events' + }, + { + text: 'Office Hours' + }, + { + text: 'Publications ' + }, + { + text: 'How to Cite Us ' + }, + + ], + }, ], }, }; + const MegaMenu = ({ className, closeMenus, megaMenuType, path }) => { if (!megaMenuType) { // leave an empty element to help with CSS animations diff --git a/src/components/NavBar/MegaMenu/styles.scss b/src/components/NavBar/MegaMenu/styles.scss index 83330826..198926fb 100644 --- a/src/components/NavBar/MegaMenu/styles.scss +++ b/src/components/NavBar/MegaMenu/styles.scss @@ -99,7 +99,16 @@ } } - .yellow-green-section { + .blue-section { + max-width: 700px; + + @include breakpoint(navmenu-up) { + max-height: 70px; + max-width: 400px; + } + } + + .yellow-section { max-width: 500px; @include breakpoint(navmenu-up) { diff --git a/src/components/NavBar/MegaMenuLink/index.js b/src/components/NavBar/MegaMenuLink/index.js index 5c896589..3ab56a8d 100644 --- a/src/components/NavBar/MegaMenuLink/index.js +++ b/src/components/NavBar/MegaMenuLink/index.js @@ -7,6 +7,10 @@ const MegaMenuLink = ({ children, isActive, name, path, toggleMegaMenu, type }) const megaMenuActive = path.startsWith(`/${type}`); + const shouldDisplayArrow = (name) => { + return name === 'Documentation' || name === 'Tutorials'; + }; + return (
@@ -18,7 +22,7 @@ const MegaMenuLink = ({ children, isActive, name, path, toggleMegaMenu, type }) onClick={() => toggleMegaMenu(type)} > {name} - {name === 'Documentation' ? ( + {shouldDisplayArrow(name) ? ( + Tutorials} + path={path} + toggleMegaMenu={toggleMegaMenu} + type="tutorials" + > +
(this.popoverRef = ref)}> + {mobileMegaCheck && ( + + )} +
+ - {/* */} + Community} + path={path} + toggleMegaMenu={toggleMegaMenu} + type="community" + > +
(this.popoverRef = ref)}> + {mobileMegaCheck && ( + + )} +
+
diff --git a/src/components/Terminal/index.js b/src/components/Terminal/index.js index b20bc99b..d4fb08a7 100644 --- a/src/components/Terminal/index.js +++ b/src/components/Terminal/index.js @@ -19,7 +19,6 @@ export const Terminal = ({ prompts }) => (
{prompts.map(p => (
- $ {p}
))} diff --git a/src/components/Terminal/styles.scss b/src/components/Terminal/styles.scss index c8fac9d4..dbed94da 100644 --- a/src/components/Terminal/styles.scss +++ b/src/components/Terminal/styles.scss @@ -6,6 +6,7 @@ padding: 16px 2px 2px; border-radius: 4px; margin-bottom: 16px; + box-shadow: 0 2px 4px rgba(1, 1, 1, 0.4); } .Terminal-inner { @@ -14,11 +15,12 @@ padding: 24px; margin: 8px; font-family: $font-monospace; - font-size: 18px; + font-size: 15px; } .Terminal-text { color: $terminal-text; + margin-bottom: 10px; } .Browser { diff --git a/src/pages/documentation/index.js b/src/pages/documentation/index.js index c6b16f9f..cea6a92d 100644 --- a/src/pages/documentation/index.js +++ b/src/pages/documentation/index.js @@ -1,6 +1,6 @@ import React from 'react'; import Helmet from 'react-helmet'; -import { Button, H1, H2, H3, P1, P3, Search, YellowButton, LinkHelper as Link } from 'components'; +import { Button, H1, H2, H3, P1, P3, Search, YellowButton, LinkHelper as Link, Terminal, P2 } from 'components'; import imgScreenshotDMS from './assets/img_DMS_screenshot.png'; import { OVERTURE_GITHUB_LINK, @@ -15,6 +15,7 @@ import { } from 'constants/external-links'; import { DOCS_DMS_INSTALL_LINK } from 'constants/docs'; import './styles.scss'; +import { Construction } from 'lucide-react'; export default function GettingStartedPage() { const docsSearchIndex = process.env.GATSBY_ALGOLIA_INDEX_NAME; @@ -33,24 +34,202 @@ export default function GettingStartedPage() { /> - {/* upper grey section */} + {/* middle white background geting started section */} +
+
+
+ {/* div that holds non-image */} +
+
+

Getting Started

+
+
+ {/* this img holding div only display in mobile/tablet view. This is for grouping and for the order of divs that appear on the page */} + +
+ DMS screenshot +
+ +
+ +
+ + + Composed from our core collection of microservices, the Overture DMS offers turnkey + installation, configuration, and deployment of Overture software. + + +
+ +
+ +

+ + Your DMS Portal will now be accessible from your: localhost:8000 + +

+ +
+
+ + +
+
+
+
+ {/* this img holding div is for desktop and larger view */} +
+ DMS screenshot +
+
+
+
-
+ +
+
-
+ +
{/* top left floating hexagons */}
-

Explore Our Documentation

+

Explore Our Resources

+ {/* top left floating hexagons */} +
+

+ + Guides & Tutorials + +

+ + +
+ + Covering a range of topics for data consumers, providers, and administrators, these step-by-step tutorials provide practical insight and hands-on experience. + + +
+ {/* User Documentation Section */}
-

User Documentation

+

Consumers

+
+
+ {/* User Documentation bullets left */} +
+
    +
  • + Downloading data +
    • +
+
+ {/* User Documentation bullets right */} +
+
    +
  • + + Visualizing data with JBrowse2 + +
    • +
+
+
+
+ + {/* Developer Documentation Section */} +
+
+

Providers

+
+
+ {/* Developer Documentation bullets left */} +
+
    +
  • + Submitting Data (CLI) +
    • +
+
+ {/* Developer Documentation bullets right */} +
+
    +
  • + Bulk Data Submission (Scripting) +
    • +
+
+
+
+ + + {/* Developer Documentation Section */} +
+
+

Administrators

+
+
+ {/* Developer Documentation bullets left */} +
+
    +
  • + Local Setup (Using Docker) +
    • +
  • + Server Setup (Using Helm) +
    • +
+
+ {/* Developer Documentation bullets right */} +
+
    +
  • + Data Modeling +
    • +
  • + Portal Customization +
    • +
  • + Managing User and Application Permissions +
    • +
+
+
+
+ + +
+ +
+

+ + Documentation + +

+ +
+ Documentation for users, developers, and system administrators. Lorem ispsum dimsum Lorem ispsum dimsum Lorem ispsum dimsum + +
+ {/* User Documentation Section */} +
+
+
+

User Docs

{/* User Documentation bullets left */} @@ -86,10 +265,10 @@ export default function GettingStartedPage() {
- {/* Developer Documentation Section */} -
+ {/* Developer Documentation Section */} +
-

Developer Documentation

+

Developer Docs

{/* Developer Documentation bullets left */} @@ -122,69 +301,40 @@ export default function GettingStartedPage() {
-
-
-
-
- {/* middle white background section */} -
-
-
- {/* div that holds non-image */} -
-
-

Getting Started

-
-
-

The Overture Data Management System (DMS)

-
- -
- {/* this img holding div only display in mobile/tablet view. This is for grouping and for the order of divs that appear on the page */} -
- DMS screenshot + {/* Developer Documentation Section */} +
+
+

System Admin Docs

-
-
- - - Built from our core collection of microservices, the DMS offers turnkey - installation, configuration, and deployment of the Overture software. - -
-
- - While a custom solution will offer greater scalability, the DMS is an ideal - starting point for anyone looking to explore Overture and experience how our - microservices work in concert to create comprehensive data management - systems. - - +
+ {/* Developer Documentation bullets left */} +
+
    +
  • + Deployment +
    • +
  • + Backup and Recovery +
    • +
-
- + {/* Developer Documentation bullets right */} +
+
    +
  • + Load balancing and scaling +
    • +
  • + Monitoring and logging +
    • +
-
- {/* this img holding div is for desktop and larger view */} -
- DMS screenshot -
+
{/* lower grey section */} @@ -234,3 +384,4 @@ export default function GettingStartedPage() { ); } + diff --git a/src/pages/home/assets/img_DMS.svg b/src/pages/home/assets/img_DMS.svg new file mode 100644 index 00000000..99872b1f --- /dev/null +++ b/src/pages/home/assets/img_DMS.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/home/assets/img_DMS_screenshot.png b/src/pages/home/assets/img_DMS_screenshot.png new file mode 100644 index 00000000..0c0fe030 Binary files /dev/null and b/src/pages/home/assets/img_DMS_screenshot.png differ diff --git a/src/pages/home/assets/img_DMS_screenshot.psd b/src/pages/home/assets/img_DMS_screenshot.psd new file mode 100644 index 00000000..f5c674df Binary files /dev/null and b/src/pages/home/assets/img_DMS_screenshot.psd differ diff --git a/src/pages/home/assets/img_circle_blue.png b/src/pages/home/assets/img_circle_blue.png new file mode 100644 index 00000000..99e8c65f Binary files /dev/null and b/src/pages/home/assets/img_circle_blue.png differ diff --git a/src/pages/home/styles.scss b/src/pages/home/styles.scss index 7395658e..5e9930c7 100644 --- a/src/pages/home/styles.scss +++ b/src/pages/home/styles.scss @@ -272,7 +272,7 @@ &__text { font-family: $font-sans-serif; - font-weight: 900; + font-weight: 00; font-size: 20px; line-height: 36px; color: $navy-black; @@ -284,7 +284,7 @@ } @include breakpoint(desktop-up) { - font-size: 40px; + font-size: 38px; line-height: 70px; } } @@ -344,6 +344,7 @@ padding: 0 30px; } } + &__content { padding: 0 10px; @@ -554,3 +555,151 @@ } } } + +.mid-white-section { + @include breakpoint(tablet-up) { + overflow-x: hidden; + } + + &__holder { + margin: 1em auto; + + @include breakpoint(desktop-up) { + display: flex; + } + } + + &__non-img-holder { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.8em; + + @include breakpoint(desktop-up) { + align-items: flex-start; + width: 50%; + margin-right: -2em; + max-width: 450px; + } + + @include breakpoint(desktop-wide) { + max-width: none; + margin-right: 0.4em; + margin-top: 0.6em; + } + } + + &__subtitle-holder { + max-width: 350px; + text-align: center; + + @include breakpoint(tablet-up) { + max-width: none; + } + @include breakpoint(desktop-up) { + text-align: left; + margin-top: 1em; + } + } + + &__img-holder { + background-image: url('./assets/img_circle_blue.png'); + background-repeat: no-repeat; + background-size: auto 100%; + background-position: center; + display: flex; + justify-content: center; + padding: 28px; + margin: 1em auto; + } + + &__mobile-tablet-img-holder { + @include breakpoint(tablet-up) { + background-position: left; + width: 200%; + margin-right: -3em; + } + @include breakpoint(desktop-up) { + display: none; + } + } + + &__desktop-img-holder { + display: none; + + @include breakpoint(desktop-up) { + display: flex; + align-items: center; + width: 64%; + padding: 30px; + margin-right: -5em; + background-position: left; + } + + @include breakpoint(desktop-wide) { + padding: 68px; + margin: -3.5em; + background-position: left; + margin-right: -5.5em; + } + } + + &__img { + @include breakpoint(tablet-up) { + position: relative; + left: 130px; + min-width: auto; + max-width: 190%; + max-height: 415px; + } + @include breakpoint(desktop-up) { + left: 300px; + max-width: 200%; + max-height: 660px; + } + + @include breakpoint(desktop-wide) { + left: 360px; + max-width: 220%; + max-height: 710px; + } + @include breakpoint(desktop-ultra-wide) { + left: 300px; + } + } + + &__content-holder { + display: flex; + flex-direction: column; + + @include breakpoint(tablet-up) { + flex-direction: row; + } + } + + &__text-button-holder { + display: flex; + flex-direction: column; + align-items: center; + gap: 2em; + + @include breakpoint(tablet-up) { + order: -1; + align-items: flex-start; + margin-top: 40px; + } + @include breakpoint(desktop-up) { + gap: 2.6em; + } + @include breakpoint(desktop-wide) { + gap: 3.4em; + } + @include breakpoint(desktop-ultra-wide) { + gap: 3.6em; + } + } + + &__text-holder { + width: 88%; + } +} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 55317e51..6354254e 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -2,6 +2,7 @@ import { useState } from 'react'; import React from 'react'; import Helmet from 'react-helmet'; import Modal from 'react-modal'; +import imgScreenshotDMS from './home/assets/img_DMS_screenshot.png'; import { ABOUT_US_PATH, DOCUMENTATION_PATH, @@ -9,11 +10,13 @@ import { SERVICES_PATH, caseStudyAnchors, productsAnchors, + DOCS_DMS_INSTALL_LINK, + EGO_UPDATES_LINK, } from 'constants/pages'; -import { OVERTURE_GITHUB_LINK, SLACK_LINK } from '../../constants/external-links.js'; -import { Button, H1, H2, H3, P1, Icon, HomeProductLink, YellowButton, P2 } from 'components'; +import { EGO_SQL_LINK, OVERTURE_GITHUB_LINK, SLACK_LINK } from '../../constants/external-links.js'; +import { Button, H1, H2, H3, P1, Icon, HomeProductLink, YellowButton, P2, Terminal, GettingStarted } from 'components'; import caseData from 'data/case_studies'; -import bodyImg from './home/assets/overture_illustration.svg'; +import bodyImg from './home/assets/img_DMS_screenshot.png'; import cubeMaroon from './home/assets/cube_maroon.svg'; import cubeBrightTealInverted from './home/assets/cube_bright_teal_inverted.svg'; import cubeYellow from './home/assets/cube_yellow.svg'; @@ -21,6 +24,9 @@ import cubeChartreuse from './home/assets/cube_chartreuse.svg'; import cubeTealBlue from './home/assets/cube_teal_blue.svg'; import cubeBrightTeal from './home/assets/cube_bright_teal.svg'; import './home/styles.scss'; +import './documentation/styles.scss' +import { Link } from 'gatsby'; +import { Construction, Space } from 'lucide-react'; Modal.setAppElement('#___gatsby'); Modal.defaultStyles.overlay.backgroundColor = 'rgba(0, 0, 0, 0.85)'; @@ -58,22 +64,120 @@ export default function HomePage() { researchers manage, share and access genomics data.
-
- {/* top white section - titled powering big-data at scale */} -
+ + {/* middle white section - titled our products */} +
+
+

Craft tomorrow's genomics data application, today.

+
+ +
+ + +
+
+ 1 Minute Explainer Video +
+ + +
+ + +
+
+ +
+
+

Our Products

+

+ +

+
+

+ + Open-source and free-to-use our modular software works in concert to build and deploy scalable genomics data platforms + +

+ Informative Diagram/Illustration +

+
+
+ + + +
+ +
+ + + + + + +
+
+ + + + + + +
+ + {/* top white section - titled powering big-data at scale */} +

Powering big-data at scale

+

Overture has been successfully deployed in a diversity of large-scale projects. +

{/* logos scroll bar */} @@ -156,7 +260,7 @@ export default function HomePage() { {caseData[carouselPage].listItems[2][0]}
- {/* top floating teal cube */} - Top Floating Bright Teal Inverted Cube + {/* middle white background section */} +
+ + {/* Getting Started: Step 1 */} +
+ +

+ To get up and running quickly, we provide a turnkey installation of Overtures Data Management Suite (DMS) using Docker. +

+
+
+
+
+

1. Clone and open the repo

+
    +
  • You will need Docker is installed
    • +
+
+
+
+
+ +
+
- {/* upper grey section */} -
+ {/* Getting Started: Step 2 */} +
+
+
+

2. Run our quickstart configuration script

+
    +
  • This automates the data and configurations needed to get up and running quickly.
    • +
+
+
+
+
+ +
+
+ + + {/* Getting Started: Step 2 */} +
+
+
+

3. Start Docker

+
    +
  • Your Portal will be accessible from your localhost:8000
    • +
+
+
+
+
+ +
+
+
+
+ + +
+
+ +
+ + {/* floating marron cuve */} + Floating Maroon Cube + + {/* upper grey about us section */} +
+
+

About Us

+

We are a team of software engineers, data scientists, and cloud infrastructure @@ -203,22 +382,22 @@ export default function HomePage() { software engineers, - + data scientists and - + cloud infrastructure specialists creating applications - + to store, manage, @@ -227,6 +406,8 @@ export default function HomePage() { massive genomic datasets.

+ +
-
- - {/* floating yellow cube */} - Floating Yellow Cube - - {/* middle white section - titled our products */} -
-
-

Our Products

- - Built to be reusable and scalable, Overture was created to share our data science - components with the community. Our ecosystem of research software tools reduces - redundant efforts and enables the creation of robust genomics data applications. - -
-
-
- -
- -
- - - - - - -
-
-
- - {/* upper grey section */} -
-
-

- Our components are well documented, actively supported, and welcome external feedback - and contributions. If you need assistance, we also offer consulting, support, and - collaborative services. -

-
- -
-

- Overture’s components - are - well - - documented - actively - - supported, - and - - welcome - external feedback - and contributions. - If you need - - assistance, - we also offer - consulting, support, - and collaborative services. -

-
-
- - +
- {/* floating marron cuve */} - Floating Maroon Cube - -
+
-

Getting Started

+

Here to Help

Ready to jump in? We've got some resources to help.
- - + + -
+

Build. Deploy. Discover.

Craft tomorrow's data solution, today. @@ -401,7 +472,7 @@ export default function HomePage() { Get Started

diff --git a/src/pages/products/index.js b/src/pages/products/index.js index 53d78d05..d028dc7e 100644 --- a/src/pages/products/index.js +++ b/src/pages/products/index.js @@ -1,6 +1,6 @@ import React from 'react'; import { Button, H1, H2, P1, ProductPageSection, Hero } from 'components'; -import { DOCS_DMS_INSTALL_LINK } from 'constants/docs'; +import { DOCUMENTATION_PATH } from 'constants/pages'; import Helmet from 'react-helmet'; import imgDMS from './assets/img_DMS.svg'; import imgArranger from './assets/img_products_arranger.svg'; @@ -149,7 +149,7 @@ export default function ProductsPage() {