From b7a63cec87f04d9e2a97c856a4a9e1c83ea2fda2 Mon Sep 17 00:00:00 2001 From: Clay McLeod Date: Fri, 4 Dec 2020 17:49:14 -0600 Subject: [PATCH] improvement: various improvements to the site --- LICENSE | 14 -- README.md | 6 +- .../accounts-and-billing/index.md | 23 +-- .../analyzing-data/command-line/index.md | 18 +- docs/genomics-platform/faq/index.md | 13 +- .../getting-started/index.md | 8 +- .../making-a-data-request/index.md | 2 +- .../working-with-our-data/index.md | 10 +- .../requesting-data/glossary/index.md | 16 +- gatsby-config.js | 21 ++ package-lock.json | 184 ++++++++++++++++++ package.json | 16 +- src/components/contentsbar.js | 29 --- src/components/navbar.js | 90 --------- src/components/navbar/BrandBlockLeft.js | 36 ++++ src/components/navbar/MenuBlockRight.js | 48 +++++ src/components/navbar/SearchBlock.js | 36 ++++ src/components/navbar/index.js | 17 ++ .../search/{search-box.js => SearchBox.js} | 0 .../{search-result.js => SearchResult.js} | 8 +- src/components/search/index.js | 21 +- .../ActionsSidebarRight.js} | 8 +- src/components/sidebars/ContentSidebarLeft.js | 78 ++++++++ src/components/sidebars/index.js | 2 + src/icons/chevron.svg | 16 ++ .../stjudecloud-genomics-platform-logo.svg | 1 + src/styles/doc.scss | 20 ++ src/templates/base.js | 7 +- 28 files changed, 530 insertions(+), 218 deletions(-) delete mode 100644 LICENSE delete mode 100644 src/components/contentsbar.js delete mode 100644 src/components/navbar.js create mode 100644 src/components/navbar/BrandBlockLeft.js create mode 100644 src/components/navbar/MenuBlockRight.js create mode 100644 src/components/navbar/SearchBlock.js create mode 100644 src/components/navbar/index.js rename src/components/search/{search-box.js => SearchBox.js} (100%) rename src/components/search/{search-result.js => SearchResult.js} (86%) rename src/components/{detailsbar.js => sidebars/ActionsSidebarRight.js} (92%) create mode 100644 src/components/sidebars/ContentSidebarLeft.js create mode 100644 src/components/sidebars/index.js create mode 100644 src/icons/chevron.svg create mode 100644 src/icons/stjudecloud-genomics-platform-logo.svg diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 7e964c1e..00000000 --- a/LICENSE +++ /dev/null @@ -1,14 +0,0 @@ -The BSD Zero Clause License (0BSD) - -Copyright (c) 2020 Gatsby Inc. - -Permission to use, copy, modify, and/or distribute this software for any -purpose with or without fee is hereby granted. - -THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH -REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY -AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, -INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM -LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR -OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR -PERFORMANCE OF THIS SOFTWARE. diff --git a/README.md b/README.md index bd32f2b7..3786267c 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti ```shell # create a new Gatsby site using the default starter - gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default + gatsby new my-default-starter https://github.com/stjudecloud/university ``` 1. **Start developing.** @@ -92,8 +92,8 @@ Looking for more guidance? Full documentation for Gatsby lives [on the website]( ## 💫 Deploy -[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default) +[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/stjudecloud/university) -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/gatsbyjs/gatsby-starter-default) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/stjudecloud/university) diff --git a/docs/genomics-platform/accounts-and-billing/index.md b/docs/genomics-platform/accounts-and-billing/index.md index c37a4e5c..a27c5b57 100644 --- a/docs/genomics-platform/accounts-and-billing/index.md +++ b/docs/genomics-platform/accounts-and-billing/index.md @@ -4,8 +4,8 @@ St. Jude Cloud is built on top of [DNAnexus](https://www.dnanexus.com/), a data- Each new user receives a $50 credit upon creation of their St. Jude Cloud account with DNAnexus (see the [note](#billing-setup) in the Billing Setup section). If you use this initial credit and are interested in additional funding, please reach out to support@stjude.cloud as additional collaboration funds may be available. -!!!warning "St. Jude Employees" - The account creation and login process is slightly different if you are an internal user (you work at St. Jude). Internal users please go to the [intranet home page](https://home.stjude.org) and type 'Bioinformatics Self-Service' into the search bar. From there, click on the link that says 'Bioinformatics Self-Service on St. Jude Cloud' to access the internal guide to creating an account. +!!!warning St. Jude Employees +The account creation and login process is slightly different if you are an internal user (you work at St. Jude). Internal users please go to the [intranet home page](https://home.stjude.org) and type 'Bioinformatics Self-Service' into the search bar. From there, click on the link that says 'Bioinformatics Self-Service on St. Jude Cloud' to access the internal guide to creating an account. !!! @@ -18,16 +18,13 @@ Each new user receives a $50 credit upon creation of their St. Jude Cloud accoun Go to the [St. Jude Employee login page](https://auth.stjude.org/SecureAuth61/) and log in with your current St. Jude credentials. !!!note - If you are unable to log in at this link, and you know you have been on St. Jude Cloud before, you may have already set up a DNAnexus account through the DNANexus log in page using your St. Jude email address. To continue using this account, you will need to log in through the [DNAnexus log in page](https://platform.dnanexus.com/login?client_id=sjcloudplatform). You can request that your accounts be merged by contacting [DNAnexus support](mailto:support@dnanexus.com). +If you are unable to log in at this link, and you know you have been on St. Jude Cloud before, you may have already set up a DNAnexus account through the DNANexus log in page using your St. Jude email address. To continue using this account, you will need to log in through the [DNAnexus log in page](https://platform.dnanexus.com/login?client_id=sjcloudplatform). You can request that your accounts be merged by contacting [DNAnexus support](mailto:support@dnanexus.com). - - !!!quote "Example Email to DNAnexus Support" - Hello DNAnexus support, - - I am a St. Jude employee and I would like to have my account switched over so I can use my St. Jude credentials to log in. - - Thank you, - !!! +> Hello DNAnexus support, +> +> I am a St. Jude employee and I would like to have my account switched over so I can use my St. Jude credentials to log in. +> +> Thank you, !!! ### Billing @@ -61,7 +58,7 @@ If your account is already set up and you would like to access your Billing info 5. Click 'Upgrade Account'. This will send an email to the individual listed as the billing contact requesting that they verify the change. !!!note - On step 4, you must enter the billing contact's name, physical address, email address and phone number. You do not need to enter any credit card information. Once the billing contact has verified the account upgrade request, your account will be credited $50. +On step 4, you must enter the billing contact's name, physical address, email address and phone number. You do not need to enter any credit card information. Once the billing contact has verified the account upgrade request, your account will be credited $50. - Please [contact us](mailto:support@stjude.cloud) for help if you encounter any problems creating an account. +Please [contact us](mailto:support@stjude.cloud) for help if you encounter any problems creating an account. !!! \ No newline at end of file diff --git a/docs/genomics-platform/analyzing-data/command-line/index.md b/docs/genomics-platform/analyzing-data/command-line/index.md index db23d595..6cfce018 100644 --- a/docs/genomics-platform/analyzing-data/command-line/index.md +++ b/docs/genomics-platform/analyzing-data/command-line/index.md @@ -22,11 +22,11 @@ many other operations. You'll need to install that software on your computer by following [this guide](https://documentation.dnanexus.com/downloads#DNAnexus-Platform-SDK). !!!tip - A quickstart to getting up and running with the dx-toolkit: +A quickstart to getting up and running with the dx-toolkit: - 1. Install Python 2.7.13+. Note that using the system-level Python is usually not a good idea (by default, system level Python is typically too old/does not support the latest security protocols required). You can install using [Anaconda](https://conda.io/docs/user-guide/getting-started.html) (recommended) or using the default [Python installer](https://www.python.org/downloads/). - 2. Run `pip install dxpy`. - 3. Type `dx --help` at the command line. +1. Install Python 2.7.13+. Note that using the system-level Python is usually not a good idea (by default, system level Python is typically too old/does not support the latest security protocols required). You can install using [Anaconda](https://conda.io/docs/user-guide/getting-started.html) (recommended) or using the default [Python installer](https://www.python.org/downloads/). +2. Run `pip install dxpy`. +3. Type `dx --help` at the command line. !!! ## A quick tour @@ -41,8 +41,8 @@ dx login --noprojects ``` !!!note - If you are a St. Jude employee, you'll need to follow [this - guide](https://documentation.dnanexus.com/user/login-and-logout#generating-an-authentication-token) to log in instead. +If you are a St. Jude employee, you'll need to follow [this +guide](https://documentation.dnanexus.com/user/login-and-logout#generating-an-authentication-token) to log in instead. !!! ### Selecting a project @@ -104,9 +104,9 @@ Cloud Platform tools: ## Downloading data !!!warning - To download data from a St. Jude Cloud data request, you must have - indicated that you wished to download the data in your Data Access - Agreement (DAA) during your submission. Any downloading of St. Jude data without completing this step is strictly PROHIBITED. +To download data from a St. Jude Cloud data request, you must have +indicated that you wished to download the data in your Data Access +Agreement (DAA) during your submission. Any downloading of St. Jude data without completing this step is strictly PROHIBITED. !!! You can use the following steps to download data from a St. Jude Cloud diff --git a/docs/genomics-platform/faq/index.md b/docs/genomics-platform/faq/index.md index 237706c5..c5156b8e 100644 --- a/docs/genomics-platform/faq/index.md +++ b/docs/genomics-platform/faq/index.md @@ -1,6 +1,8 @@ # Frequently Asked Questions -[TOC] +```toc +from-heading: 2 +``` ## Will I be charged for using St. Jude Cloud Genomics Platform? @@ -135,11 +137,10 @@ Thus, of you'd like to delete your account, you'll need to email DNAnexus asking for it to be removed. You can do so by contacting DNAnexus support at with the following email. -!!!note "Subject: St. Jude Cloud account deletion" +!!!note Subject: St. Jude Cloud account deletion +Hi DNAnexus, - Hi DNAnexus, +Would you please assist me in deleting my St. Jude Cloud account? My username is _____. - Would you please assist me in deleting my St. Jude Cloud account? My username is _____. - - Thank you! +Thank you! !!! \ No newline at end of file diff --git a/docs/genomics-platform/getting-started/index.md b/docs/genomics-platform/getting-started/index.md index caa7d3f6..a0b13d2b 100644 --- a/docs/genomics-platform/getting-started/index.md +++ b/docs/genomics-platform/getting-started/index.md @@ -10,7 +10,8 @@ Our homepage offers our most popular actions, including visiting our data browse ## St. Jude Employee Quick Start -!!!warning "The information displayed below this point is primarily intended for employees of St. Jude Children's Research Hospital." +!!!warning +The information displayed below this point is primarily intended for employees of St. Jude Children's Research Hospital. !!! Please complete the following check-list to get started with using St. Jude @@ -50,7 +51,7 @@ Signing in to St. Jude Cloud is similarly easy — if you have a SJCRH account, This should be sufficient for the purposes of this guide. For more detailed information, see our standard guide on [accounts and billing](../../guides/genomics-platform/accounts-and-billing.md). !!!tip - As you navigate around St. Jude Cloud, you can click the DNAnexus logo in the top left to go back to the home screen at any time. +As you navigate around St. Jude Cloud, you can click the DNAnexus logo in the top left to go back to the home screen at any time. !!! ### Enable Microsoft Azure @@ -76,8 +77,7 @@ This should be sufficient for the purposes of this guide. For more detailed info Billing is handled in St. Jude Cloud by creating and managing a DNAnexus billing organization (or "org"). Each project in DNAnexus is associated with a single org (you had to specify one when you created a project in the last step), and all compute and storage costs are billed to that org. By default, each new user on St. Jude Cloud gets a billing org called `user-[username]` with $50 of trial credit. You can view the billing orgs available to your account [here](https://platform.dnanexus.com/profile/settings/billing). !!!info - - There is the potential for additional funds to be available. If you are a lab that would like to use the cloud but do not have funds available, please let us know at [support@stjude.cloud](mailto:support@stjude.cloud). +There is the potential for additional funds to be available. If you are a lab that would like to use the cloud but do not have funds available, please let us know at [support@stjude.cloud](mailto:support@stjude.cloud). !!! **Steps** diff --git a/docs/genomics-platform/making-a-data-request/index.md b/docs/genomics-platform/making-a-data-request/index.md index f18b26c5..ae2a56dc 100644 --- a/docs/genomics-platform/making-a-data-request/index.md +++ b/docs/genomics-platform/making-a-data-request/index.md @@ -10,7 +10,7 @@ Creating a data request is the premier way to access raw St. Jude next generatio St. Jude Cloud does not allow for-profit companies to access any restricted access genomics data. We are actively working with our institution to assess the feasibility of providing data to for-profit entities. If you work for a for-profit company and would like to be notified if this restriction changes, feel free to email us at [support@stjude.cloud](mailto:support@stjude.cloud). !!! -#### Helpful Things to Remember: +#### Helpful Things to Remember 1. Data in St. Jude Cloud is grouped into [Data Access Units (DAUs)](glossary.md#data-access-unit), which usually correspond to large-scale sequencing initiatives at St. Jude. 2. Individuals can [apply for access](glossary.md#data-access-agreement) to DAUs on a case-by-case basis for a specific amount of time (usually 1 year). diff --git a/docs/genomics-platform/managing-data/working-with-our-data/index.md b/docs/genomics-platform/managing-data/working-with-our-data/index.md index 5daaba40..d0d41888 100644 --- a/docs/genomics-platform/managing-data/working-with-our-data/index.md +++ b/docs/genomics-platform/managing-data/working-with-our-data/index.md @@ -8,12 +8,10 @@ Below is a snapshot of the [My Dashboard](https://platform.stjude.cloud/dashboar ![](./docs-manage-data-page-labelled-tagged.png) -!!!example "Pending Request Types" - 1. Request 1 is an Open Draft, meaning the requestor has not yet finished the setup wizard and the DocuSign envelope has not yet been sent to any of the signatories. - - 2. Request 2, listed in the Projects section, has been sent to the signatories, but has not been completed by all of them. This status will look like the Request 3 when all of the signatories sign the document and it is ready to be sent to the Data Access Committee(s). - - 3. Request 3 is pending approval from the Data Access Committee(s), and the status will change from Pending to either Approved or Rejected, based on their decision. All submitted manual-process Data Access Agreements will show up on your My Dashboard page like Request 3. If you have a question about the status of your data request which is not answered on the "My Dashboard" page, you can email us at [support@stjude.cloud](mailto:support@stjude.cloud). +!!!example Pending Request Types +1. Request 1 is an Open Draft, meaning the requestor has not yet finished the setup wizard and the DocuSign envelope has not yet been sent to any of the signatories. +2. Request 2, listed in the Projects section, has been sent to the signatories, but has not been completed by all of them. This status will look like the Request 3 when all of the signatories sign the document and it is ready to be sent to the Data Access Committee(s). +3. Request 3 is pending approval from the Data Access Committee(s), and the status will change from Pending to either Approved or Rejected, based on their decision. All submitted manual-process Data Access Agreements will show up on your My Dashboard page like Request 3. If you have a question about the status of your data request which is not answered on the "My Dashboard" page, you can email us at [support@stjude.cloud](mailto:support@stjude.cloud). !!! ## Accessing Your Data diff --git a/docs/genomics-platform/requesting-data/glossary/index.md b/docs/genomics-platform/requesting-data/glossary/index.md index e67f6f42..a31bebb9 100644 --- a/docs/genomics-platform/requesting-data/glossary/index.md +++ b/docs/genomics-platform/requesting-data/glossary/index.md @@ -18,14 +18,14 @@ A St. Jude Cloud **Data Access Committee (DAC)** is group of St. Jude researcher The first time you request access to files in a DAU, it is required that you fill out a [Data Access Agreement (DAA)](#data-access-agreement). Access is granted at the DAU level based on the decision of each DAC upon reviewing the DAA. !!!example - For example, if you make a request asking for all of St. Jude's Acute - Lymphoblastic Leukemia sequencing data, you might be asking for data from - multiple different projects (DAUs) here at St. Jude. For the sake of the example, - let's say the data you want is spread across three different DAUs. Once - you place a request, your application will be routed to the corresponding - three data access committees for approval. Since each DAC is made up of - different individuals using different criteria for evaluation, you may or - may not be approved for access to all of the files. +For example, if you make a request asking for all of St. Jude's Acute +Lymphoblastic Leukemia sequencing data, you might be asking for data from +multiple different projects (DAUs) here at St. Jude. For the sake of the example, +let's say the data you want is spread across three different DAUs. Once +you place a request, your application will be routed to the corresponding +three data access committees for approval. Since each DAC is made up of +different individuals using different criteria for evaluation, you may or +may not be approved for access to all of the files. !!! ### Embargo Date diff --git a/gatsby-config.js b/gatsby-config.js index fc351af0..f8f6249d 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -44,6 +44,17 @@ module.exports = { pedantic: true, gfm: true, plugins: [ + { + resolve: `gatsby-remark-table-of-contents`, + options: { + exclude: "Table of Contents", + tight: false, + ordered: false, + fromHeading: 1, + toHeading: 6, + className: "table-of-contents", + }, + }, { resolve: `gatsby-remark-autolink-headers`, options: { @@ -65,6 +76,12 @@ module.exports = { maxWidth: 1180, }, }, + { + resolve: `gatsby-remark-vscode`, + options: { + theme: "Monokai", + }, + }, { resolve: `gatsby-remark-admonitions`, options: { @@ -85,6 +102,10 @@ module.exports = { svg: '', }, + example: { + svg: + '', + }, }, tag: "!!!", icons: "svg", diff --git a/package-lock.json b/package-lock.json index 18e2ceb5..e152fad2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@fortawesome/free-regular-svg-icons": "^5.15.1", "@fortawesome/free-solid-svg-icons": "^5.15.1", "@fortawesome/react-fontawesome": "^0.1.13", + "@headlessui/react": "^0.2.0", "autoprefixer": "^9.8.6", "gatsby": "^2.26.1", "gatsby-image": "^2.5.0", @@ -21,6 +22,8 @@ "gatsby-plugin-offline": "^3.4.0", "gatsby-plugin-react-helmet": "^3.4.0", "gatsby-plugin-react-svg": "^3.0.0", + "gatsby-remark-table-of-contents": "^0.2.1", + "gatsby-remark-vscode": "^3.2.0", "gatsby-source-filesystem": "^2.5.0", "gatsby-transformer-remark": "^2.11.1", "gatsby-transformer-sharp": "^2.6.0", @@ -1958,6 +1961,17 @@ "@hapi/hoek": "^8.3.0" } }, + "node_modules/@headlessui/react": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-0.2.0.tgz", + "integrity": "sha512-YV+vF+QhTRcspydPdHF3ZXe+FkOiJpRdqMjjFIIX9bSdT2O2T7GurgKQdGgamNUM+B99MZBOTRqxS8Dlh485eg==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16" + } + }, "node_modules/@iarna/toml": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz", @@ -12978,6 +12992,53 @@ "unist-util-is": "^3.0.0" } }, + "node_modules/gatsby-remark-table-of-contents": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/gatsby-remark-table-of-contents/-/gatsby-remark-table-of-contents-0.2.1.tgz", + "integrity": "sha512-4EhmA83zAvD0mMd1gFgwFyy7weXgu/caCLxNhLGvkm7n7eTZIv12mBoZP0hjOWhK6BRzHnEz3RA6lhUnNbHQwQ==", + "dependencies": { + "js-yaml": "^3.14.0", + "mdast-util-toc": "^5.1.0" + } + }, + "node_modules/gatsby-remark-vscode": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/gatsby-remark-vscode/-/gatsby-remark-vscode-3.2.0.tgz", + "integrity": "sha512-KsI47oc5SfjZkcyNo+P6IZx3ouMWpKGuPXEDpnG70R9QOmwcrSGUJAmI37RfGP2RSTMnla+28sxzWOe1vXnL9g==", + "dependencies": { + "decompress": "^4.2.0", + "json5": "^2.1.1", + "loglevel": "^1.6.4", + "plist": "^3.0.1", + "unist-util-visit": "^1.4.1", + "vscode-oniguruma": "^1.4.0", + "vscode-textmate": "^5.2.0" + }, + "peerDependencies": { + "gatsby": "^2.12.1" + } + }, + "node_modules/gatsby-remark-vscode/node_modules/unist-util-is": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz", + "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==" + }, + "node_modules/gatsby-remark-vscode/node_modules/unist-util-visit": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz", + "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==", + "dependencies": { + "unist-util-visit-parents": "^2.0.0" + } + }, + "node_modules/gatsby-remark-vscode/node_modules/unist-util-visit-parents": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz", + "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==", + "dependencies": { + "unist-util-is": "^3.0.0" + } + }, "node_modules/gatsby-source-filesystem": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.6.1.tgz", @@ -19539,6 +19600,27 @@ "node": ">=4" } }, + "node_modules/plist": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/plist/-/plist-3.0.1.tgz", + "integrity": "sha512-GpgvHHocGRyQm74b6FWEZZVRroHKE1I0/BTjAmySaohK+cUn+hZpbqXkc3KWgW3gQYkqcQej35FohcT0FRlkRQ==", + "dependencies": { + "base64-js": "^1.2.3", + "xmlbuilder": "^9.0.7", + "xmldom": "0.1.x" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/plist/node_modules/xmlbuilder": { + "version": "9.0.7", + "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz", + "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=", + "engines": { + "node": ">=4.0" + } + }, "node_modules/pngjs": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", @@ -26921,6 +27003,16 @@ "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==" }, + "node_modules/vscode-oniguruma": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.4.0.tgz", + "integrity": "sha512-VvTl/jIAADEqWWpEYRsOI1sXiYOTDA8KYNgK60+Mb3T+an9zPz3Cqc6RVJeYgOx/P5G+4M4jygB3X5xLLfYD0g==" + }, + "node_modules/vscode-textmate": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-5.2.0.tgz", + "integrity": "sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==" + }, "node_modules/warning": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", @@ -29020,6 +29112,14 @@ "node": ">=4.0" } }, + "node_modules/xmldom": { + "version": "0.1.31", + "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz", + "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==", + "engines": { + "node": ">=0.1" + } + }, "node_modules/xmlhttprequest-ssl": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz", @@ -30928,6 +31028,12 @@ "@hapi/hoek": "^8.3.0" } }, + "@headlessui/react": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-0.2.0.tgz", + "integrity": "sha512-YV+vF+QhTRcspydPdHF3ZXe+FkOiJpRdqMjjFIIX9bSdT2O2T7GurgKQdGgamNUM+B99MZBOTRqxS8Dlh485eg==", + "requires": {} + }, "@iarna/toml": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz", @@ -39809,6 +39915,52 @@ } } }, + "gatsby-remark-table-of-contents": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/gatsby-remark-table-of-contents/-/gatsby-remark-table-of-contents-0.2.1.tgz", + "integrity": "sha512-4EhmA83zAvD0mMd1gFgwFyy7weXgu/caCLxNhLGvkm7n7eTZIv12mBoZP0hjOWhK6BRzHnEz3RA6lhUnNbHQwQ==", + "requires": { + "js-yaml": "^3.14.0", + "mdast-util-toc": "^5.1.0" + } + }, + "gatsby-remark-vscode": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/gatsby-remark-vscode/-/gatsby-remark-vscode-3.2.0.tgz", + "integrity": "sha512-KsI47oc5SfjZkcyNo+P6IZx3ouMWpKGuPXEDpnG70R9QOmwcrSGUJAmI37RfGP2RSTMnla+28sxzWOe1vXnL9g==", + "requires": { + "decompress": "^4.2.0", + "json5": "^2.1.1", + "loglevel": "^1.6.4", + "plist": "^3.0.1", + "unist-util-visit": "^1.4.1", + "vscode-oniguruma": "^1.4.0", + "vscode-textmate": "^5.2.0" + }, + "dependencies": { + "unist-util-is": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz", + "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==" + }, + "unist-util-visit": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz", + "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==", + "requires": { + "unist-util-visit-parents": "^2.0.0" + } + }, + "unist-util-visit-parents": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz", + "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==", + "requires": { + "unist-util-is": "^3.0.0" + } + } + } + }, "gatsby-source-filesystem": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.6.1.tgz", @@ -45035,6 +45187,23 @@ "find-up": "^2.1.0" } }, + "plist": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/plist/-/plist-3.0.1.tgz", + "integrity": "sha512-GpgvHHocGRyQm74b6FWEZZVRroHKE1I0/BTjAmySaohK+cUn+hZpbqXkc3KWgW3gQYkqcQej35FohcT0FRlkRQ==", + "requires": { + "base64-js": "^1.2.3", + "xmlbuilder": "^9.0.7", + "xmldom": "0.1.x" + }, + "dependencies": { + "xmlbuilder": { + "version": "9.0.7", + "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz", + "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=" + } + } + }, "pngjs": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", @@ -51052,6 +51221,16 @@ "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==" }, + "vscode-oniguruma": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.4.0.tgz", + "integrity": "sha512-VvTl/jIAADEqWWpEYRsOI1sXiYOTDA8KYNgK60+Mb3T+an9zPz3Cqc6RVJeYgOx/P5G+4M4jygB3X5xLLfYD0g==" + }, + "vscode-textmate": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-5.2.0.tgz", + "integrity": "sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==" + }, "warning": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", @@ -52766,6 +52945,11 @@ "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz", "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==" }, + "xmldom": { + "version": "0.1.31", + "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz", + "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==" + }, "xmlhttprequest-ssl": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz", diff --git a/package.json b/package.json index 70be6807..40bac009 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,16 @@ { - "name": "gatsby-starter-default", + "name": "stjudecloud-university", "private": true, - "description": "A simple starter to get up and developing quickly with Gatsby", + "description": "St. Jude Cloud educational application.", "version": "0.1.0", - "author": "Kyle Mathews ", + "author": "Clay McLeod ", "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.32", "@fortawesome/free-brands-svg-icons": "^5.15.1", "@fortawesome/free-regular-svg-icons": "^5.15.1", "@fortawesome/free-solid-svg-icons": "^5.15.1", "@fortawesome/react-fontawesome": "^0.1.13", + "@headlessui/react": "^0.2.0", "autoprefixer": "^9.8.6", "gatsby": "^2.26.1", "gatsby-image": "^2.5.0", @@ -17,6 +18,8 @@ "gatsby-plugin-offline": "^3.4.0", "gatsby-plugin-react-helmet": "^3.4.0", "gatsby-plugin-react-svg": "^3.0.0", + "gatsby-remark-table-of-contents": "^0.2.1", + "gatsby-remark-vscode": "^3.2.0", "gatsby-source-filesystem": "^2.5.0", "gatsby-transformer-remark": "^2.11.1", "gatsby-transformer-sharp": "^2.6.0", @@ -42,9 +45,8 @@ "react-instantsearch-dom": "^6.8.2" }, "keywords": [ - "gatsby" + "stjudecloud" ], - "license": "0BSD", "scripts": { "build": "gatsby build", "develop": "gatsby develop", @@ -56,9 +58,9 @@ }, "repository": { "type": "git", - "url": "https://github.com/gatsbyjs/gatsby-starter-default" + "url": "https://github.com/stjudecloud/university" }, "bugs": { - "url": "https://github.com/gatsbyjs/gatsby/issues" + "url": "https://github.com/stjudecloud/university/issues" } } diff --git a/src/components/contentsbar.js b/src/components/contentsbar.js deleted file mode 100644 index 1709663f..00000000 --- a/src/components/contentsbar.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react" - -const ContentsSidebarLeft = () => ( -
    -
  • Getting Started
    • -
  • First Steps
    • -
  • Accounts / Billing
    • -
  • Requesting Data
    • -
  • About Our Data
    • -
  • Making a Data Request
    • -
  • Filling Out the DAA
    • -
  • Decision Making Criteria
    • - -
  • Managing Data
    • -
  • Overview
    • -
  • Uploading / Downloading Data
    • -
  • Renewing Your DAA
    • - -
  • Analyzing Data
    • -
  • Command Line Interaction
    • -
  • Running Our Workflows
    • -
  • Create Your Own Workflow
    • - -
  • Frequently Asked Questions
    • -
  • Frequently Asked Questions
    • -
-) - -export default ContentsSidebarLeft diff --git a/src/components/navbar.js b/src/components/navbar.js deleted file mode 100644 index d9bfd46f..00000000 --- a/src/components/navbar.js +++ /dev/null @@ -1,90 +0,0 @@ -import React from "react" -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" -import { faArrowCircleLeft } from "@fortawesome/free-solid-svg-icons" -import { faGithub } from "@fortawesome/free-brands-svg-icons" -import ChildLogo from "../icons/stjudecloud-logo.svg" -import SearchIcon from "../icons/search.svg" -import CommandSymbol from "../icons/cmd.svg" -import Menu from "../icons/menu.svg" - -const Navbar = ({ onSearchClick }) => ( - -) - -export default Navbar diff --git a/src/components/navbar/BrandBlockLeft.js b/src/components/navbar/BrandBlockLeft.js new file mode 100644 index 00000000..d8c68fea --- /dev/null +++ b/src/components/navbar/BrandBlockLeft.js @@ -0,0 +1,36 @@ +import React from "react" +import ChildLogo from "../../icons/stjudecloud-logo.svg" +import { Link } from "gatsby" + +const BrandBlockLeft = () => { + return ( +
+ + + + + + St. Jude Cloud + + + Docs + + +
+ ) +} + +export default BrandBlockLeft diff --git a/src/components/navbar/MenuBlockRight.js b/src/components/navbar/MenuBlockRight.js new file mode 100644 index 00000000..86f77c2e --- /dev/null +++ b/src/components/navbar/MenuBlockRight.js @@ -0,0 +1,48 @@ +import React from "react" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import { faGithub } from "@fortawesome/free-brands-svg-icons" +import Menu from "../../icons/menu.svg" +import { PropTypes } from "prop-types" + +const MenuBlockRight = ({ enableGitHub = true, enableMenu = false }) => { + return ( +
+
+ {enableGitHub && ( + + + + )} +
+ {enableMenu && ( +
+ +
+ )} +
+ ) +} + +MenuBlockRight.propTypes = { + enableGitHub: PropTypes.bool, + enableMenu: PropTypes.bool, +} + +export default MenuBlockRight diff --git a/src/components/navbar/SearchBlock.js b/src/components/navbar/SearchBlock.js new file mode 100644 index 00000000..91b78a08 --- /dev/null +++ b/src/components/navbar/SearchBlock.js @@ -0,0 +1,36 @@ +import React from "react" +import SearchIcon from "../../icons/search.svg" +import CommandSymbol from "../../icons/cmd.svg" +import PropTypes from "prop-types" + +const SearchBlock = ({ onSearchClick = null }) => { + return ( + + + + Search + +
+ + Search for anything quickly + + + + K + +
+ + ) +} + +SearchBlock.propTypes = { + onSearchClick: PropTypes.func.isRequired, +} + +export default SearchBlock diff --git a/src/components/navbar/index.js b/src/components/navbar/index.js new file mode 100644 index 00000000..a9d968bb --- /dev/null +++ b/src/components/navbar/index.js @@ -0,0 +1,17 @@ +import React from "react" +import BrandBlockLeft from "./BrandBlockLeft" +import SearchBlock from "./SearchBlock" +import MenuBlockRight from "./MenuBlockRight" + +const Navbar = ({ onSearchClick }) => ( + +) + +export default Navbar diff --git a/src/components/search/search-box.js b/src/components/search/SearchBox.js similarity index 100% rename from src/components/search/search-box.js rename to src/components/search/SearchBox.js diff --git a/src/components/search/search-result.js b/src/components/search/SearchResult.js similarity index 86% rename from src/components/search/search-result.js rename to src/components/search/SearchResult.js index bad2d0eb..1f968f99 100644 --- a/src/components/search/search-result.js +++ b/src/components/search/SearchResult.js @@ -31,16 +31,14 @@ const PageHit = ({ hit }) => ( ) const HitsInIndex = ({ index }) => ( - + ) -const SearchResult = ({ indices }) => ( +const SearchResult = ({ index }) => (
- {indices.map(index => ( - - ))} +
diff --git a/src/components/search/index.js b/src/components/search/index.js index 3b825684..72442742 100644 --- a/src/components/search/index.js +++ b/src/components/search/index.js @@ -1,20 +1,18 @@ import algoliasearch from "algoliasearch/lite" import React, { Component } from "react" import { InstantSearch } from "react-instantsearch-dom" -import SearchBox from "./search-box" -import SearchResult from "./search-result" +import SearchBox from "./SearchBox" +import SearchResult from "./SearchResult" import { GlobalHotKeys } from "react-hotkeys" export default class SearchModal extends Component { constructor(props) { super(props) - let { indices } = props this.state = { query: "", hasFocus: false, isVisible: false, - indices: indices, } this.searchClient = algoliasearch( @@ -64,7 +62,8 @@ export default class SearchModal extends Component { } render() { - let { isVisible, indices, hasFocus, query } = this.state + const { isVisible, hasFocus, query } = this.state + const { algoliaIndex } = this.props return (
this.setQuery(query)} > 0 && hasFocus} - indices={indices} + index={algoliaIndex} />
@@ -104,11 +103,3 @@ export default class SearchModal extends Component { ) } } - -{ - /* (this.searchBox = element)} - onFocus={() => this.setFocus(true)} - hasFocus={hasFocus} - /> */ -} diff --git a/src/components/detailsbar.js b/src/components/sidebars/ActionsSidebarRight.js similarity index 92% rename from src/components/detailsbar.js rename to src/components/sidebars/ActionsSidebarRight.js index ffb25b93..4754d166 100644 --- a/src/components/detailsbar.js +++ b/src/components/sidebars/ActionsSidebarRight.js @@ -1,6 +1,6 @@ import React from "react" import PropTypes from "prop-types" -import Question from "../icons/question.svg" +import Question from "../../icons/question.svg" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { faGithub } from "@fortawesome/free-brands-svg-icons" @@ -31,7 +31,7 @@ function editOnGitHub(fileAbsolutePath) { } } -const DetailsSidebarRight = ({ fileAbsolutePath }) => { +const ActionSidebarRight = ({ fileAbsolutePath }) => { return (
@@ -61,8 +61,8 @@ const DetailsSidebarRight = ({ fileAbsolutePath }) => { ) } -DetailsSidebarRight.propTypes = { +ActionSidebarRight.propTypes = { fileAbsolutePath: PropTypes.node.isRequired, } -export default DetailsSidebarRight +export default ActionSidebarRight diff --git a/src/components/sidebars/ContentSidebarLeft.js b/src/components/sidebars/ContentSidebarLeft.js new file mode 100644 index 00000000..468c4163 --- /dev/null +++ b/src/components/sidebars/ContentSidebarLeft.js @@ -0,0 +1,78 @@ +import { Transition } from "@headlessui/react" +import React, { useState } from "react" +import Chevron from "../../icons/chevron.svg" +import GenomicsPlatformLogo from "../../icons/stjudecloud-genomics-platform-logo.svg" + +const ContentsSidebarLeft = () => { + const [isOpen, setIsOpen] = useState(false) + + return ( +
+
+
{ + setIsOpen(true) + }} + onMouseLeave={() => setIsOpen(false)} + > + + + Genomics Platform + + +
+
+
    +
  • Getting Started
    • +
  • First Steps
    • +
  • Accounts / Billing
    • +
  • Requesting Data
    • +
  • About Our Data
    • +
  • Making a Data Request
    • +
  • Filling Out the DAA
    • +
  • Decision Making Criteria
    • + +
  • Managing Data
    • +
  • Overview
    • +
  • Uploading / Downloading Data
    • +
  • Renewing Your DAA
    • + +
  • Analyzing Data
    • +
  • Command Line Interaction
    • +
  • Running Our Workflows
    • +
  • Create Your Own Workflow
    • + +
  • Frequently Asked Questions
    • +
  • Frequently Asked Questions
    • +
+
+ ) +} + +export default ContentsSidebarLeft + +{ + /*
+ +
I will fade in and out
+ +
*/ +} diff --git a/src/components/sidebars/index.js b/src/components/sidebars/index.js new file mode 100644 index 00000000..20481736 --- /dev/null +++ b/src/components/sidebars/index.js @@ -0,0 +1,2 @@ +export { default as ActionSidebarRight } from "./ActionsSidebarRight" +export { default as ContentsSidebarLeft } from "./ContentSidebarLeft" diff --git a/src/icons/chevron.svg b/src/icons/chevron.svg new file mode 100644 index 00000000..7212e93d --- /dev/null +++ b/src/icons/chevron.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/src/icons/stjudecloud-genomics-platform-logo.svg b/src/icons/stjudecloud-genomics-platform-logo.svg new file mode 100644 index 00000000..7b809f73 --- /dev/null +++ b/src/icons/stjudecloud-genomics-platform-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/styles/doc.scss b/src/styles/doc.scss index 0dadd9a1..74e0c622 100644 --- a/src/styles/doc.scss +++ b/src/styles/doc.scss @@ -2,6 +2,26 @@ @apply text-gray-700; @apply leading-7; + blockquote { + background: #f9f9f9; + border-left: 10px solid #ccc; + margin: 1.5em 10px; + padding: 0.5em 10px; + quotes: "\201C""\201D""\2018""\2019"; + + p:first-of-type { + display: inline; + } + + &:before { + color: #ccc; + content: open-quote; + font-size: 4em; + line-height: 0.1em; + vertical-align: -0.4em; + } + } + ul { @apply list-disc; @apply mx-8; diff --git a/src/templates/base.js b/src/templates/base.js index c3b3268a..2a982c17 100644 --- a/src/templates/base.js +++ b/src/templates/base.js @@ -9,8 +9,7 @@ import React, { Component } from "react" import PropTypes from "prop-types" import Navbar from "../components/navbar" -import ContentsSidebarLeft from "../components/contentsbar" -import DetailsSidebarRight from "../components/detailsbar" +import { ContentsSidebarLeft, ActionSidebarRight } from "../components/sidebars" import SearchModal from "../components/search" class BaseLayout extends Component { @@ -30,7 +29,7 @@ class BaseLayout extends Component {
(this.searchModal = element)} - indices={[{ name: "docs" }]} + algoliaIndex="docs" /> { @@ -39,7 +38,7 @@ class BaseLayout extends Component { }} /> - +
{children}