diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml index b20f959..b618fd9 100644 --- a/.github/workflows/deploy-docs.yml +++ b/.github/workflows/deploy-docs.yml @@ -1,9 +1,11 @@ -name: Deploy MkDocs (Docs + Embed) +name: Deploy MkDocs on: push: - branches: - - main + branches: ['**'] # build previews from every branch + pull_request: + branches: [main] # validate PRs targeting main + workflow_dispatch: # manual, any branch permissions: contents: read @@ -12,48 +14,43 @@ permissions: concurrency: group: "pages" - cancel-in-progress: true + cancel-in-progress: false jobs: build: runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v4 + - uses: actions/checkout@v4 - - name: Set up Python - uses: actions/setup-python@v5 + - uses: actions/setup-python@v5 with: - python-version: "3.11" + python-version: "3.12" + cache: "pip" + cache-dependency-path: requirements.txt - name: Install dependencies - run: | - pip install -r requirements.txt + run: pip install -r requirements.txt - - name: Build normal docs - run: | - mkdocs build --strict + - name: Build docs + run: mkdocs build --strict - - name: Build embed (headless) docs - run: | - mkdocs build \ - -f mkdocs.embed.yml \ - -d site/embed + - name: Build embed docs + run: mkdocs build --strict -f mkdocs.embed.yml -d site/embed - name: Upload Pages artifact + if: (github.event_name == 'push' && github.ref == 'refs/heads/main') || github.event_name == 'workflow_dispatch' uses: actions/upload-pages-artifact@v3 with: path: site deploy: needs: build + if: (github.event_name == 'push' && github.ref == 'refs/heads/main') || github.event_name == 'workflow_dispatch' runs-on: ubuntu-latest environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} - steps: - name: Deploy to GitHub Pages id: deployment - uses: actions/deploy-pages@v4 + uses: actions/deploy-pages@v4 \ No newline at end of file diff --git a/README.md b/README.md index a4ef8c0..a9fc34e 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,15 @@ -# MSD-LIVE Docs (mkdocs) +# MSD-LIVE Docs (MkDocs) -A lightweight local workflow for previewing the MSD-LIVE documentation site built with MkDocs and the Material theme. +Documentation site for MSD-LIVE, built with MkDocs and the Carbon theme. Deployed to GitHub Pages in **two forms**: + +- **Full docs** at `/` — standalone site with nav, header, search. Linked from the "Help" button in the landing page header. +- **Headless embed** at `/embed/` — same content, chrome stripped, designed to be loaded inside iframes on the MSD-LIVE React landing page via the `DocsEmbed` component. + +Both are produced from the same Markdown sources; only the theme configuration and CSS differ. ## Prerequisites -- Python 3.8+ (you have Python 3.12 available locally) +- Python 3.8+ (Python 3.12 recommended) - pip - Recommended: create and use a virtual environment @@ -12,72 +17,129 @@ A lightweight local workflow for previewing the MSD-LIVE documentation site buil 1. Create and activate a virtual environment (optional but recommended): -```bash -python -m venv .venv -source .venv/bin/activate -``` + ```bash + python -m venv .venv + source .venv/bin/activate + ``` 2. Install dependencies: + ```bash + pip install -r requirements.txt + ``` + +3. Run the development server (`--livereload` is required for WSL — otherwise file changes only appear after restarting): + + ```bash + mkdocs serve --livereload + ``` + +4. Open the site in your browser: + + ```text + http://127.0.0.1:8000/ + ``` + +### Previewing the Embed Build Locally + +To preview the headless build used by iframes: + ```bash -pip install -r requirements.txt +mkdocs serve --livereload -f mkdocs.embed.yml -a 127.0.0.1:8001 ``` -3. Run the development server (--livereload is required for WSL otherwise changes to files only show up if you restart the serve command): +Then open `http://127.0.0.1:8001/`. + +## Building for Production + +The two builds produce sibling directories under a single `site/` root: ```bash -mkdocs serve --livereload +# Full docs → site/ +mkdocs build --strict + +# Headless embed → site/embed/ +mkdocs build --strict -f mkdocs.embed.yml -d site/embed ``` -4. Open the site in your browser: +Resulting layout: -```text -http://127.0.0.1:8000/ +``` +site/ +├── index.html ← full docs +├── assets/ +├── platform_community/ +├── ... +└── embed/ ← headless docs (iframed by landing page) + ├── index.html + ├── platform_community/ + └── ... ``` -## Troubleshooting +Preview the combined output locally to mirror the GitHub Pages layout: -- If the server doesn't reflect changes, stop and restart `mkdocs serve`. +```bash +python -m http.server 8001 --directory site +``` -## Useful Links +Visit: +- `http://127.0.0.1:8001/` — full docs +- `http://127.0.0.1:8001/embed/platform_community/about/` — a headless page as it would appear in an iframe -- Project docs configuration: `mkdocs.yml` -- Docs folder: `docs/` +Deployment to GitHub Pages is handled automatically by `.github/workflows/deploy-docs.yml`: +- Pushes to `main` → auto-deploy +- Pushes to any branch → build-only (preview validation) +- Pull requests targeting `main` → build-only +- Manual `workflow_dispatch` from any branch → deploy (for feature-branch testing) +## Project Structure -Dev notes to sort out later: +- `mkdocs.yml` — Main site configuration (nav, theme, plugins, extensions) +- `mkdocs.embed.yml` — Headless configuration. Inherits from `mkdocs.yml` via `INHERIT:` and overrides the theme/CSS to strip nav, header, search, and footer +- `docs/` — Markdown source files (shared between both builds) +- `docs/styles/carbon-customizations.css` — Styling shared by both builds (card grids, layout patches, etc.) +- `docs/styles/embed.css` — Additional styles applied only to the headless embed build (hides Carbon chrome) +- `docs/overrides/` — Custom theme template overrides for the full build +- `docs/overrides/embed/` — Custom theme template overrides for the headless build +- `docs/javascripts/carbon-nav-scroll-fix.js` — Nav scroll behavior fix +- `.github/workflows/deploy-docs.yml` — GitHub Pages deployment workflow (builds both `/` and `/embed/`, publishes as one artifact) -# Production docs site -https://msdlive-docs.readthedocs.io/ +## Embedding in the React Landing Page +The landing page's `DocsEmbed` component loads pages from the **headless build** via iframe: -To test running with sphinx build with: -```bash -sphinx-build -b html docs docs/_build/lhtm ``` - -and run with -```bash -sphinx-autobuild docs docs/_build/html +https://msd-live.github.io/msdlive-docs/embed// ``` +Routes like `/about`, `/policies`, and `/computational-resources` map to specific embed pages in `App.tsx`. The header's "Help" button links to the **full** docs site (not the embed) and opens in a new tab. +Because both builds share the same Markdown sources, content changes are reflected in both contexts automatically after deployment. Only styling changes need to consider which build they target: -Prefer mkdocs over sphinx because if we want to load the md files in our react landing page app, the sphinx pages will have sphinx only -tags (like for the nav and TOC) where mkdocs all nav is defined in the yml. OR see if sphinx has better support for headleads rendering of -the built html +- Add to `carbon-customizations.css` → affects both. +- Add to `embed.css` → affects only the embed build. +- Change theme templates → put them in `docs/overrides/` (full) or `docs/overrides/embed/` (headless). -TODO for embedding in landing page: +## Troubleshooting -- -- identify what tags are for mkdocs only +- **Dev server doesn't reflect changes** — stop and restart `mkdocs serve --livereload`. +- **Embed page 404s in iframe but full docs page loads** — verify the page is included in `mkdocs.embed.yml`'s effective nav, and that `mkdocs build --strict -f mkdocs.embed.yml` succeeds locally. +- **Embed styles look wrong** — check that `embed.css` is correctly hiding Carbon chrome (`cds-header`, `.md-sidebar--primary`, etc.). Load an embed URL directly in a browser (outside any iframe) to isolate the styling. +- **`DocsEmbed` path mismatch** — the `path` prop in `App.tsx` routes must match the actual URL structure of the embed build (respecting `use_directory_urls`). -Note: -no longer will customize embedded video player as that was implemented in landing page app +## Useful Links +- Production docs: https://msd-live.github.io/msdlive-docs/ +- Production embed root: https://msd-live.github.io/msdlive-docs/embed/ +- MkDocs full config: `mkdocs.yml` +- MkDocs embed config: `mkdocs.embed.yml` -building html to embed in iframe on landing page: -``` -mkdocs build -f mkdocs.embed.yml -d site-embed --clean +--- + +## Historical Notes + +**Why MkDocs over Sphinx?** +Sphinx-generated HTML embeds Sphinx-specific tags for nav and TOC, making headless embedding harder. MkDocs defines navigation entirely in `mkdocs.yml`, which makes the rendered content cleaner and easier to embed in an iframe. -``` \ No newline at end of file +**Video player customization:** +No longer handled here — implemented in the landing page app instead. \ No newline at end of file diff --git a/additional_pages/about.json b/additional_pages/about.json index 8b7696b..87bc85a 100644 --- a/additional_pages/about.json +++ b/additional_pages/about.json @@ -569,7 +569,7 @@ { "_uid": "2d331594-0333-4722-95ad-8f80dd3178c6", "name": "Casey Burleyson", - "role": "Principle Investigator", + "role": "Principal Investigator", "email": "", "avatar": { "id": 820911, diff --git a/docs/assets/avatars/Bekah_Mars.jpg b/docs/assets/avatars/Bekah_Mars.jpg new file mode 100755 index 0000000..f24f02d Binary files /dev/null and b/docs/assets/avatars/Bekah_Mars.jpg differ diff --git a/docs/assets/avatars/Carina_Lansing.jpg b/docs/assets/avatars/Carina_Lansing.jpg new file mode 100644 index 0000000..d87a1b0 Binary files /dev/null and b/docs/assets/avatars/Carina_Lansing.jpg differ diff --git a/docs/assets/avatars/Chandrika_Sivaramakrishnan.png b/docs/assets/avatars/Chandrika_Sivaramakrishnan.png new file mode 100644 index 0000000..7a47e78 Binary files /dev/null and b/docs/assets/avatars/Chandrika_Sivaramakrishnan.png differ diff --git a/docs/assets/avatars/Jon_Weers.jpeg b/docs/assets/avatars/Jon_Weers.jpeg new file mode 100644 index 0000000..a97a67f Binary files /dev/null and b/docs/assets/avatars/Jon_Weers.jpeg differ diff --git a/docs/assets/avatars/Zoe_Guillen.jpg b/docs/assets/avatars/Zoe_Guillen.jpg new file mode 100644 index 0000000..a4294d8 Binary files /dev/null and b/docs/assets/avatars/Zoe_Guillen.jpg differ diff --git a/docs/assets/avatars/casey.png b/docs/assets/avatars/casey.png new file mode 100644 index 0000000..87f5954 Binary files /dev/null and b/docs/assets/avatars/casey.png differ diff --git a/docs/assets/icons/hand-holding-medical-solid-full.svg b/docs/assets/icons/hand-holding-medical-solid-full.svg new file mode 100644 index 0000000..2ed0dee --- /dev/null +++ b/docs/assets/icons/hand-holding-medical-solid-full.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/icons/head-side-virus-solid-full.svg b/docs/assets/icons/head-side-virus-solid-full.svg new file mode 100644 index 0000000..5714200 --- /dev/null +++ b/docs/assets/icons/head-side-virus-solid-full.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/icons/heart-pulse-solid-full.svg b/docs/assets/icons/heart-pulse-solid-full.svg new file mode 100644 index 0000000..11c22aa --- /dev/null +++ b/docs/assets/icons/heart-pulse-solid-full.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/icons/laptop-code-solid-full.svg b/docs/assets/icons/laptop-code-solid-full.svg new file mode 100644 index 0000000..f67f5e8 --- /dev/null +++ b/docs/assets/icons/laptop-code-solid-full.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/for_data_providers/create_example_notebooks.md b/docs/for_data_providers/create_example_notebooks.md index a32f893..cd0a8a6 100644 --- a/docs/for_data_providers/create_example_notebooks.md +++ b/docs/for_data_providers/create_example_notebooks.md @@ -1,6 +1,6 @@ --- include_from_chatbot: true -noteboook_environment: notebook_lab +noteboook_environment: notebook_lab --- # Create Example Notebooks @@ -12,7 +12,7 @@ Example notebooks (pre-packaged code) help users understand how to work with you If you prefer to build notebooks in your own environment, you can use your normal Git workflow: 1. Clone your [linked GitHub notebook repository](setup_notebook_repository.md) -2. Create or edit notebooks in your preferred local editor or IDE +2. Create or edit notebooks in your preferred local editor or IDE 3. Test notebooks with your dataset 4. Commit and push your changes to GitHub @@ -42,10 +42,10 @@ Use [Notebook Lab](launch_notebook_environment.md) to create and test notebooks ## Writing Notebooks -For detailed guidance on importing packages, accessing your data, and getting started with your analysis, see [Writing Notebooks](../../learning_resources/working_with_notebooks). +For detailed guidance on importing packages, accessing your data, and getting started with your analysis, see [Writing Notebooks](../learning_resources/working_with_notebooks.md). > ### Best Practices -> +> > - **Keep notebooks focused** — Create one notebook per analysis or workflow > - **Write clear explanations** — Use markdown cells and comments to explain each section > - **Include practical examples** — Show users how to subset, filter, and transform data diff --git a/docs/for_data_users/create_notebook.md b/docs/for_data_users/create_notebook.md index a6d3c62..0976a99 100644 --- a/docs/for_data_users/create_notebook.md +++ b/docs/for_data_users/create_notebook.md @@ -19,10 +19,10 @@ When creating a new notebook, you need to choose where it will be stored. Your o - **/my_notebooks** — For your own temporary notebooks that you do not plan to share with others. Select this location when you want to explore the data privately for your own purposes. - **/notebooks** — For notebooks specific to this dataset that become an official, maintained part of the dataset materials (data validation, canonical analyses, examples the dataset should ship with). This option is only enabled if the dataset has a linked GitHub repository. -!!! warning +!!! warning All notebooks created will be deleted at the end of your notebook environment session. To persist your notebook, you can: - - Submit it as a pull request to the community or dataset owner + - Submit it as a pull request to the community or dataset owner - Copy the notebook to your scratch directory so you can resume work in a subsequent session - Right-click and download the notebook to your local machine @@ -34,4 +34,4 @@ Use this option when you want a faster starting point with package imports, data ## Writing Notebooks -For detailed guidance on importing packages, accessing your data, and getting started with your analysis, see [Writing Notebooks](../../learning_resources/working_with_notebooks). \ No newline at end of file +For detailed guidance on importing packages, accessing your data, and getting started with your analysis, see [Writing Notebooks](../learning_resources/working_with_notebooks.md). \ No newline at end of file diff --git a/docs/for_data_users/use_scratch_directory.md b/docs/for_data_users/use_scratch_directory.md index 14bde92..cd1f2d5 100644 --- a/docs/for_data_users/use_scratch_directory.md +++ b/docs/for_data_users/use_scratch_directory.md @@ -51,13 +51,13 @@ To copy your processed/subsetted files to the scratch directory from within your 5. Once complete, you'll receive a second notification confirming the copy finished -> **Important:** +> **Important:** Using the "Copy to Scratch Dir" button in the file explorer is the preferred and supported way to copy files into your scratch directory. While it's technically possible to copy files using code inside notebooks, this is not recommended due to underlying S3 limitations. ## How to download files from the scratch directory -For step-by-step instructions on downloading files from scratch with the msdlive CLI, see [Scratch directory usage in the msdlive CLI docs](../../tools_services/cli/usage/#scratch-directory). +For step-by-step instructions on downloading files from scratch with the msdlive CLI, see [Scratch directory usage in the msdlive CLI docs](../tools_services/cli/usage.md#scratch-directory). ## Video Walkthrough @@ -76,4 +76,3 @@ Watch this video for a walkthrough of copying files to the scratch directory and - \ No newline at end of file diff --git a/docs/overrides/embed.html b/docs/overrides/embed.html index 55981e5..1ef82a9 100644 --- a/docs/overrides/embed.html +++ b/docs/overrides/embed.html @@ -3,7 +3,8 @@ - {{ page.title }} + + {{ page.title }} - MSD-LIVE Docs {# MkDocs styles only #} {% for css in config.extra_css %} @@ -14,7 +15,10 @@ - {{ page.content }} +
+ + {{ page.content }} +
\ No newline at end of file diff --git a/docs/platform_community/about.md b/docs/platform_community/about.md index 716320a..f69f19b 100644 --- a/docs/platform_community/about.md +++ b/docs/platform_community/about.md @@ -4,13 +4,187 @@ include_from_chatbot: false # About MSD-LIVE -MSD-LIVE, the MultiSector Dynamics – Living Intuitive Value-adding Environment, is a flexible and scalable data and code management system combined with an advanced computing platform that enables MSD researchers to document and archive their data, run their models and analysis tools, and share their data, software, and multi-model workflows within a robust [Community of Practice](https://multisectordynamics.org/). +MSD-LIVE, the MultiSector Dynamics – Living Intuitive Value-adding Environment, is a flexible and scalable data and code management system combined with an advanced computing platform that enables MSD researchers to document and archive their data, run their models and analysis tools, and share their data, software, and multi-model workflows within a robust [Community of Practice](https://multisectordynamics.org/). Launched originally in August of 2022, MSD-LIVE is facilitating a new open, collaborative, resource-rich, technology-facilitated, community-driven way of doing MSD research. MSD-LIVE accelerates progress, facilitates and incentivizes collaboration, and enhances the scientific impact and visibility of the MSD community. The platform is built around four core principles: -Launched originally in August of 2022, MSD-LIVE is facilitating a new open, collaborative, resource-rich, technology-facilitated, community-driven way of doing MSD research. MSD-LIVE accelerates progress, facilitates and incentivizes collaboration, and enhances the scientific impact and visibility of the MSD community. +## Principles + + +--- + +As in many other communities, MSD researchers struggle with data and code management — from finding storage to making it easy for others to find, share, and re-use data and code. However, the extraordinary diversity of MSD research, encapsulated in the "multi-" descriptor that applies to basically every aspect of what we do, exacerbates these challenges and demands a state-of-the-science solution. We used the first phase of the MSD-LIVE project to develop a cloud-based core data repository that can be used to store, share, and document MSD data. Using the capabilities now available on Version 3 of the platform, MSD projects are able to do the following: + +1. Quickly and easily find datasets produced by other users and projects. +2. Permanently archive small (<250 MB), medium (250 MB–50 GB), and large (50 GB–20 TB) final-form datasets and generate data Digital Object Identifiers to meet journal requirements for data sharing. +3. Use an intuitive web-based user interface to document and share versioned datasets and associate data with the code used to produce it. +4. Train new team members on MSD projects to effectively manage data and code and capture the institutional knowledge of members that leave a project. +5. Create and manage teams that cross institutions to quickly and easily grant access to data and code without having to obtain multiple sets of institutional credentials. +6. Share working datasets across multiple institutions collaborating on a project in real time. +7. Run light-weight analysis and data processing codes (e.g., subsetting, regridding, visualization) on any publicly available dataset stored in MSD-LIVE. + +Longer-range plans for the platform focus on leveraging the power of the cloud to deliver an advanced computing environment that will grant MSD projects the following capabilities: + +1. Create, execute, document, and publish multi-model workflows where component models run on computational resources at different institutions. +2. Virtually assemble data lakes and execute ML/AI algorithms on large pools of data that may be physically located in different places. +3. Easily deploy models to run on new computational resources and make it easy for users to bring their code to the data when transferring data is infeasible. + +## Funding + +MSD-LIVE is being developed with support from the [MultiSector Dynamics](https://eesm.science.energy.gov/program-area/multisector-dynamics) program area within the [Earth and Environmental Systems Modeling](https://eesm.science.energy.gov/) program of the [U.S. Department of Energy's Office of Science](https://www.energy.gov/science/office-science). Scoping and brainstorming for MSD-LIVE was also supported by the [Data Management](https://science.osti.gov/ber/Research/eessd/Data-Management) program. + +## Team + +MSD-LIVE is being developed by a team led by scientists at the DOE's Pacific Northwest +National Laboratory. The team is composed of MSD researchers, data scientists, and software engineers. + + + +## Stakeholder Group + +MSD-LIVE is supported by an active and valuable stakeholder group made up of project representatives from across the MSD community. The stakeholder group reviews progress and provides continuous input that can help guide development. They also act as liaisons between MSD-LIVE and their respective projects. + + \ No newline at end of file diff --git a/docs/styles/carbon-customizations.css b/docs/styles/carbon-customizations.css index cef8bbc..2b027da 100644 --- a/docs/styles/carbon-customizations.css +++ b/docs/styles/carbon-customizations.css @@ -4,15 +4,12 @@ --sidebar-width: 356px; } */ - .header-logo { height: 24px; margin-right: 0.75rem; vertical-align: middle; } - - /* Needed in order to indent nested navigation menus */ cds-side-nav-menu cds-side-nav-menu { margin-left: 1rem; @@ -23,22 +20,10 @@ footer { display: none; } -/* Adds vertical spacing between nav items */ -/* cds-side-nav-menu-item[role="button"] { - padding: 0.5rem 0.0rem; -} */ - cds-side-nav-menu { margin-bottom: 0.5rem; } -/* can hide the page TOC with this */ -/* @media (min-width: 1280px) { - .md-sidebar--secondary { - display: none; - } -} */ - /* hide the breadcrumb */ .md-breadcrumbs { display: none !important; @@ -60,4 +45,279 @@ cds-side-nav-menu { .md-content .resource-collapsible-title { font-size: 1.2rem; font-weight: 700; +} + +/* ── Person card grid ─────────────────────────────────────────── */ +.person-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + margin: 1.25rem 0 2rem; + padding: 0; + list-style: none; +} + +@media (max-width: 640px) { + .person-grid { + grid-template-columns: 1fr; + } +} + +.person-card { + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; + padding: 0.85rem 1rem; + border: 1px solid #e0e0e0; + border-radius: 8px; + box-shadow: 0 1px 4px rgba(0,0,0,0.07); + background: #fff; +} + +.person-card__photo { + width: 75px !important; + height: 75px !important; + min-width: 72px; + border-radius: 50% !important; + object-fit: cover; + object-position: center; + background: #e0e0e0; + flex-shrink: 0; +} + +/* Initials placeholder used when no photo is available */ +.person-card__initials { + width: 75px; + height: 75px; + border-radius: 50%; + background: linear-gradient(135deg, #0f62fe, #0043ce); + color: #ffffff; + font-size: 1.2rem; + font-weight: 600; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + font-family: "IBM Plex Sans", sans-serif; +} + +.person-card__text { + display: flex; + flex-direction: column; +} + +.person-card__name { + font-weight: 700; + font-size: 1.05rem; + line-height: 1.3; + color: inherit; + margin: 0; +} + +.person-card__meta { + font-size: 0.85rem; + color: #525252; + margin-top: 0.2rem; + line-height: 1.4; +} + +.person-card__meta a { + color: #0f62fe; + text-decoration: none; +} + +.person-card__meta a:hover { + text-decoration: underline; +} + +/* ─── Google Fonts ──────────────────────────────────────────────── */ +@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap'); + +/* ─── Focus outlines ────────────────────────────────────────────── */ +:focus-visible { + outline: 3px solid #1b75bb !important; + outline-offset: 2px !important; +} + +/* ─── Layout fixes ──────────────────────────────────────────────── */ +.md-container { + max-width: none !important; + margin-top: 0 !important; +} + +html, +body { + overflow-x: hidden; +} + +/* ─── Carbon CSS token overrides ───────────────────────────────── */ +:root { + --cds-interactive-01: #093e80; + --cds-interactive-02: #1b75bb; + --cds-interactive-03: #16adfe; + --cds-interactive-04: #16adfe; + --cds-ui-shell-bg: #093e80; + --cds-ui-shell-header-bg: #093e80; + --cds-side-nav-bg: #093e80; + --cds-text-on-color: #ffffff; + --cds-ui-shell-text-01: #ffffff; + --cds-link-01: #1b75bb; + --cds-link-02: #093e80; + --cds-body-font-family: 'Roboto', sans-serif; + --cds-heading-font-family: 'Rubik', sans-serif; +} + +:root[data-carbon-theme="g90"], +:root[data-carbon-theme="g100"] { + --cds-background: #ffffff !important; + --cds-layer: #ffffff !important; +} + +/* ─── Body / content typography ────────────────────────────────── */ +body, +.md-content, +.md-typeset { + font-family: 'Roboto', sans-serif; + font-size: 1.2rem; + font-weight: 400; +} + +/* ─── Headings ──────────────────────────────────────────────────── */ +.md-typeset h1, +.md-typeset h2 { + font-family: 'Rubik', sans-serif; +} + +.md-typeset h1 { + font-size: 3rem; + font-weight: 700; + margin-bottom: 2rem; +} + +.md-typeset h2 { + font-size: 2.25rem; + font-weight: 500; + margin-top: 1.5rem; + margin-bottom: 1rem; +} + +.md-typeset h3 { + font-family: 'Roboto', sans-serif; + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 0.5rem; +} + +.md-typeset h4 { + font-size: 1.4rem; + margin-top: 1.5rem; + margin-bottom: 0.5rem; +} + +/* ─── Links in content ──────────────────────────────────────────── */ +.md-typeset a { + color: #1b75bb; + text-decoration: none; +} + +.md-typeset a:hover { + color: #093e80; +} + +/* ─── Sidebar nav ───────────────────────────────────────────────── */ +.md-sidebar--primary, +.md-nav { + background-color: #093e80; +} + +.md-nav__link, +.md-nav__item a { + color: #ffffff; + font-family: 'Roboto', sans-serif; + font-size: 0.95rem; +} + +.md-nav__link:hover, +.md-nav__item a:hover { + color: #16adfe; +} + +.md-nav__link--active { + color: #ffffff; + font-weight: 700; + border-left: 4px solid #ffffff; +} +@media (max-width: 1055px) { + .md-sidebar--primary:not(.active) { + display: none !important; + } +} + +/* ─── Prev / Next footer buttons ────────────────────────────────── */ +.md-footer__link { + background-color: #093e80; + color: #ffffff; + font-weight: 700; + text-transform: none; + border-radius: 0.3rem; + font-family: 'Roboto', sans-serif; +} + +.md-footer__link:hover { + background-color: #1b75bb; +} +/* ── Principle card grid ─────────────────────────────────────── */ +.principle-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem 2rem; + margin: 1.5rem 0 2.5rem; + padding: 0; + list-style: none; +} + +@media (max-width: 640px) { + .principle-grid { + grid-template-columns: 1fr; + } +} + +.principle-card { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 1.25rem; + list-style: none; +} + +.principle-card__icon { + width: 72px !important; + height: 72px !important; + min-width: 72px !important; + max-width: 72px !important; + flex-shrink: 0; + display: block; + /* Tint black SVG to brand light-blue (#16adfe) */ + filter: invert(58%) sepia(88%) saturate(2183%) hue-rotate(175deg) brightness(101%) contrast(101%); +} + +.principle-card__text { + display: flex; + flex-direction: column; +} + +.principle-card__title { + font-family: 'Rubik', sans-serif; + font-size: 1.5rem; + font-weight: 700; + margin: 0 0 0.5rem; + line-height: 1.2; +} + +.principle-card__desc { + font-size: 1rem; + line-height: 1.5; + color: #333; + margin: 0; } \ No newline at end of file diff --git a/docs/tools_services/computational_resources.md b/docs/tools_services/computational_resources.md index 93b6b23..243df96 100644 --- a/docs/tools_services/computational_resources.md +++ b/docs/tools_services/computational_resources.md @@ -27,110 +27,10 @@ Created by the IM3 project, the UC eBook is a living guide to sensitivity analys MSD projects use cloud-computing capabilities in MSD-LIVE to create interactive Jupyter notebooks that train users to configure, run, and analyze MSD models. -[Go to Model Training Notebooks Overview](model_training_notebooks.md) - -??? info "Model Training Notebook Resources" - - #### demeter - - ![demeter](../assets/computational_resources/demeter.png) - - demeter is an open-source land use and land cover change disaggregation model. - - [Open demeter](http://demeter.msdlive.org/) - - #### gcam - - ![gcam](../assets/computational_resources/gcam_scenarios.png) - - A demonstration on how to conduct scenario adjustments and user modifications in GCAM, including scenario design and methods for creating and editing scenarios. - - [Open gcam](https://gcam.msdlive.org) - - #### gcamwrapper - - ![gcamwrapper](../assets/computational_resources/gcamwrapper.jpg) - - gcamwrapper contains C++, R, and Python source code that wraps GCAM so simulations can be run interactively. - - [Open gcamwrapper](https://gcamwrapper.msdlive.org) - - #### hector - - ![hector](../assets/computational_resources/hector.png) - - hector is a simple climate model that can be embedded with GCAM. - - [Open hector](http://hector.msdlive.org/) - - #### matilda - - ![matilda](../assets/computational_resources/matilda.png) - - matilda is a probabilistic framework for the hector simple climate model. - - [Open matilda](http://matilda.msdlive.org/) - - #### rgcam - - ![rgcam](../assets/computational_resources/rgcam.png) - - rgcam is an open-source package used to interact with GCAM outputs (rgram, rchart, and rmap). - - [Open rgcam](http://rgcam.msdlive.org/) - - #### statemodify - - ![statemodify](../assets/computational_resources/statemodify.jpg) - - statemodify is an open-source Python package for modifying StateMod input and output files to enable exploratory modeling. - - [Open statemodify](https://statemodify.msdlive.org) - - #### stitches - - ![stitches](../assets/computational_resources/stitches.jpg) - - stitches is a computationally efficient emulator that preserves temporal and spatial resolution and joint coherence of multiple climate model output variables. - - [Open stitches](https://stitches.msdlive.org) - - #### tethys - - ![tethys](../assets/computational_resources/tethys_image.png) - - tethys facilitates coupling between large-scale and fine-resolution models by downscaling region-scale water demand onto a grid. - - [Open tethys](https://tethys.msdlive.org) - - #### xanthos - - ![xanthos](../assets/computational_resources/xanthos.jpg) - - xanthos is an open-source hydrologic model written in Python that simulates historical and future global water availability on a monthly time step. - - [Open xanthos](https://xanthos.msdlive.org) +[View All Model Training Notebooks](model_training_notebooks.md) ## Interactive Data Dashboards MSD-LIVE users can create interactive data dashboards that allow downstream users to explore and visualize datasets without downloading the underlying data. -[Go to Interactive Dashboards Overview](interactive_dashboards.md) - -??? info "Interactive Dashboard Resources" - - #### lafferty-sriver-2023-downscaling-uncertainty - - ![lafferty-sriver-2023-downscaling-uncertainty](../assets/computational_resources/lafferty.png) - - This interactive dashboard allows users to create visualizations of the dataset underpinning the Lafferty and Sriver 2023 paper published in NPJ Climate and Atmospheric Science. - - [Open dashboard](https://lafferty-sriver-2023-downscaling-uncertainty.msdlive.org) - - #### ICoM RAFT Hurricane Projections Dataset - - ![ICoM RAFT Hurricane Projections Dataset](../assets/computational_resources/raft2.png) - - This dashboard visualizes 620 historic tropical cyclones from 1979 to 2018 replayed under eight future climate scenarios. - - [Open dashboard](https://raft-hurricane-projections.msdlive.org/) +[View All Interactive Dashboards](interactive_dashboards.md) diff --git a/docs/tools_services/interactive_dashboards.md b/docs/tools_services/interactive_dashboards.md index 54456bc..4e80789 100644 --- a/docs/tools_services/interactive_dashboards.md +++ b/docs/tools_services/interactive_dashboards.md @@ -2,8 +2,30 @@ include_from_chatbot: false --- -# Interactive Dashboards +# Interactive Data Dashboards -## TODO +MSD-LIVE users can create interactive data dashboards that allow downstream users to explore and visualize datasets without downloading the underlying data. -Information about interactive dashboard tools and services is coming soon. +These dashboards provide powerful visualization capabilities, enabling users to interact with complex datasets through web-based interfaces, making data exploration accessible without requiring direct data downloads or specialized software. + +--- + +## Available Interactive Dashboards + +### lafferty-sriver-2023-downscaling-uncertainty + +![lafferty-sriver-2023-downscaling-uncertainty](../assets/computational_resources/lafferty.png) + +This interactive dashboard allows users to create visualizations of the dataset underpinning the Lafferty and Sriver 2023 paper published in NPJ Climate and Atmospheric Science. + +[Open dashboard](https://lafferty-sriver-2023-downscaling-uncertainty.msdlive.org) + +--- + +### ICoM RAFT Hurricane Projections Dataset + +![ICoM RAFT Hurricane Projections Dataset](../assets/computational_resources/raft2.png) + +This dashboard visualizes 620 historic tropical cyclones from 1979 to 2018 replayed under eight future climate scenarios. + +[Open dashboard](https://raft-hurricane-projections.msdlive.org/) diff --git a/docs/tools_services/model_training_notebooks.md b/docs/tools_services/model_training_notebooks.md index f2f29d3..66b9de7 100644 --- a/docs/tools_services/model_training_notebooks.md +++ b/docs/tools_services/model_training_notebooks.md @@ -4,6 +4,108 @@ include_from_chatbot: false # Model Training Notebooks -## TODO +MSD projects use cloud-computing capabilities in MSD-LIVE to create interactive Jupyter notebooks that train users to configure, run, and analyze MSD models. -Information about model training notebooks and resources is coming soon. +These interactive model training notebooks provide hands-on learning experiences, allowing users to explore model configurations, run simulations, and analyze results in a cloud-based environment. + +--- + +## Available Model Training Resources + +### demeter + +![demeter](../assets/computational_resources/demeter.png) + +demeter is an open-source land use and land cover change disaggregation model. + +[Open demeter](http://demeter.msdlive.org/) + +--- + +### gcam + +![gcam](../assets/computational_resources/gcam_scenarios.png) + +A demonstration on how to conduct scenario adjustments and user modifications in GCAM, including scenario design and methods for creating and editing scenarios. + +[Open gcam](https://gcam.msdlive.org) + +--- + +### gcamwrapper + +![gcamwrapper](../assets/computational_resources/gcamwrapper.jpg) + +gcamwrapper contains C++, R, and Python source code that wraps GCAM so simulations can be run interactively. + +[Open gcamwrapper](https://gcamwrapper.msdlive.org) + +--- + +### hector + +![hector](../assets/computational_resources/hector.png) + +hector is a simple climate model that can be embedded with GCAM. + +[Open hector](http://hector.msdlive.org/) + +--- + +### matilda + +![matilda](../assets/computational_resources/matilda.png) + +matilda is a probabilistic framework for the hector simple climate model. + +[Open matilda](http://matilda.msdlive.org/) + +--- + +### rgcam + +![rgcam](../assets/computational_resources/rgcam.png) + +rgcam is an open-source package used to interact with GCAM outputs (rgram, rchart, and rmap). + +[Open rgcam](http://rgcam.msdlive.org/) + +--- + +### statemodify + +![statemodify](../assets/computational_resources/statemodify.jpg) + +statemodify is an open-source Python package for modifying StateMod input and output files to enable exploratory modeling. + +[Open statemodify](https://statemodify.msdlive.org) + +--- + +### stitches + +![stitches](../assets/computational_resources/stitches.jpg) + +stitches is a computationally efficient emulator that preserves temporal and spatial resolution and joint coherence of multiple climate model output variables. + +[Open stitches](https://stitches.msdlive.org) + +--- + +### tethys + +![tethys](../assets/computational_resources/tethys_image.png) + +tethys facilitates coupling between large-scale and fine-resolution models by downscaling region-scale water demand onto a grid. + +[Open tethys](https://tethys.msdlive.org) + +--- + +### xanthos + +![xanthos](../assets/computational_resources/xanthos.jpg) + +xanthos is an open-source hydrologic model written in Python that simulates historical and future global water availability on a monthly time step. + +[Open xanthos](https://xanthos.msdlive.org) diff --git a/mkdocs.embed.yml b/mkdocs.embed.yml index cc7c0f9..66d56ff 100644 --- a/mkdocs.embed.yml +++ b/mkdocs.embed.yml @@ -6,4 +6,5 @@ theme: theme_default: white extra_css: + - styles/carbon-customizations.css - styles/embed.css