Merge branch 'CIROH-UA:main' into dev

docs/products/Community Hydrologic Modeling Framework/nextgeninaboxDocker/index.md

@@ -14,3 +14,5 @@ tags:
 import GitHubReadme from '@site/src/components/GitHubReadme';
 
 <GitHubReadme username="CIROH-UA" repo="NGIAB-CloudInfra" />
+
+

docs/products/Community Hydrologic Modeling Framework/nextgeninaboxDocker/workflow.md

@@ -0,0 +1,21 @@
+---
+sidebar_position: 4
+title: "NGIAB Workflow Video"
+description: "NextGen In a Box (NGIAB) Workflow Video"
+tags:
+  - NextGen In A Box
+  - NGIAB
+  - NGIAB Data Preprocess
+  - Demonstration
+  - Video
+  - Workflow
+---
+
+# NGIAB and NGIAB Data Preprocess: 
+## End-to-End Workflow Demonstration
+
+This video demonstrates the complete end-to-end workflow of running the NextGen In A Box (NGIAB) with the NGIAB Data Preprocess. Watch as the Data Preprocess builds and validates input data, followed by NGIAB executing the NextGen model and handling the output.
+
+import VideoPlayer from '/src/components/VideoPlayer.js';
+
+<VideoPlayer url="https://youtu.be/Z1iov-o23ug"  />

docs/services/access.md → docs/services/access.mdx

@@ -2,13 +2,16 @@
 sidebar_position: 2
 title: "Infrastructure Access"
 ---
+import Drawio from '@theme/Drawio'
+import simpleGraph from '!!raw-loader!@site/static/files/ciroh-resource-flowchart.drawio';
 
 # Infrastructure Access at CIROH
-
 CIROH provides access to both public cloud and on-premises infrastructure to support the research projects of its members and partners.
-<div className="hero-image" style={{ textAlign: 'center' }}>
-        <img src="/img/ciroh-resource-flowchart.png" alt="ciroh-resource flowchart" style={{ width: '100%' }} />
-</div>
+<Drawio content={simpleGraph} />
+
+
+
+
 
 ## Public Cloud
 

docs/services/cloudservices/ciroh jupyterhub/documentation/conda/index.md

@@ -0,0 +1,44 @@
+---
+sidebar_position: 5
+title: "Persistent Conda Environment"
+description: "2i2c JupyterHub is a cloud-based JupyterHub environment specifically designed for hydrological researchers. It is powered by 2i2c JupyterHub, a cloud-based JupyterHub environment specifically on Google Cloud"
+tags:
+  - 2i2c
+  - JupyterHub
+  - conda
+  - persistent
+  - tutorial
+---
+
+# Persistent Conda Environments on CIROH 2i2c Server
+To ensure your Conda environments persist across server restarts on the CIROH 2i2c server, create them in your home directory. Follow these steps:
+
+### 1. Create a directory for Conda environments:
+You can set up a directory within your home folder to store all your Conda environments. This prevents them from being removed when the server is restarted. For example:
+
+```bash
+mkdir -p ~/conda_envs
+```
+### 2. Create a new environment in that directory:
+Use the *--prefix* option with conda create to specify the location where you want to create your environment. For example, to create an environment called *my_env* in *~/conda_envs*:
+
+```bash
+conda create --prefix ~/conda_envs/my_env python=3.9
+```
+### 3. Activate the environment:
+You can activate the environment as usual, using the path to where you created it:
+
+```bash
+conda activate ~/conda_envs/my_env
+```
+
+### 4. Autotomatically activate the environment on restart:
+ If you want this environment to be activated every time you log in or the server restarts, you can add the following to your *.bashrc* or *.bash_profile* file:
+
+```bash
+conda activate ~/conda_envs/my_env
+```
+
+By creating your environments in your home folder (e.g., *~/conda_envs/*), they will persist across server restarts, ensuring that you don't have to recreate them every time.
+
+

docusaurus.config.js

@@ -50,15 +50,10 @@ const config = {
       }),
     ],
   ],
-// markdown: {
-//   mermaid: true,
-// },
-// themes: [
-//   '@docusaurus/theme-mermaid',  // <-- Add this line to enable Mermaid
-// ],
+
 plugins: [[ require.resolve('docusaurus-lunr-search'), {
   languages: ['en'] // language codes
-}]],
+}],['drawio', {}]],
 
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
@@ -198,10 +193,10 @@ plugins: [[ require.resolve('docusaurus-lunr-search'), {
 <br><br><br>
 Copyright © ${new Date().getFullYear()} CIROH - The University of Alabama`,
       },
-      // prism: {
-      //   theme: prismThemes.github,
-      //   darkTheme: prismThemes.dracula,
-      // },
+      prism: {
+        theme: prismThemes.github,
+        darkTheme: prismThemes.dracula,
+      },
     }),
 
 };

package.json

@@ -23,6 +23,7 @@
     "clsx": "^2.0.0",
     "docusaurus": "^1.14.7",
     "docusaurus-lunr-search": "^3.4.0",
+    "docusaurus-plugin-drawio": "^0.4.0",
     "lunr": "^2.3.9",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.2.0",

src/components/VideoPlayer.js

@@ -1,8 +1,18 @@
 import React from 'react';
 import ReactPlayer from 'react-player';
 
-export default function VideoPlayer({ url }) {
+const ResponsivePlayer = ({ url }) => {
   return (
-    <ReactPlayer url={url} width="100%" height="400px" controls />
+    <div className="player-wrapper">
+      <ReactPlayer
+        className="react-player"
+        url={url}
+        width="100%"
+        height="100%"
+        controls
+      />
+    </div>
   );
-}
+};
+
+export default ResponsivePlayer;

src/css/custom.css

@@ -67,12 +67,44 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 } */
-.container {
-  max-width: 68%;
-}
-
+
 .docs-wrapper .container {
   max-width: 100%;
   margin-left: 1.3rem;
   margin-right: 1.3rem;
 }
+
+.player-wrapper {
+  position: relative;
+  padding-top: 56.25%; /* 16:9 Aspect Ratio */
+}
+
+.react-player {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+@media screen and (max-width: 768px) {
+  .player-wrapper {
+    padding-top: 75%; /* 4:3 Aspect Ratio for smaller screens */
+  }
+}
+
+@media (max-width: 1400px) {
+  :root {
+    /* Adjust the base font size to 90% of the original */
+    font-size: 90%;
+
+    /* Adjust other root variables */
+    --ifm-font-size-base: 90%;
+    --ifm-code-font-size: 90%;
+
+    /* Adjust sidebar widths */
+    --doc-sidebar-width: 240px !important; /* 240px * 0.9 */
+  }
+  body {
+    line-height: 1.5;
+  }
+
+}