Merge branch 'CIROH-UA:main' into dev

docs/products/Community Hydrologic Modeling Framework/nextgenDatastream/nextgenDatastream.md

@@ -7,6 +7,11 @@ tags:
   - NextGen
 ---
 
+:::info
+The NextGen DataStream forcing files and associated metadata are available through our AWS S3 Explorer. You can browse and access these regularly updated resources at [datastream.ciroh.org/index.html](http://datastream.ciroh.org/index.html). In addition to NextGen forcings, daily NextGen simulation outputs via Datastream will soon be available.
+:::
+
+
 import GitHubReadme from '@site/src/components/GitHubReadme';
 
 <GitHubReadme username="CIROH-UA" repo="ngen-datastream" />

docs/services/cloudservices/HydroShare/index.md

@@ -26,17 +26,14 @@ Here are the steps for you to follow:
 
 1. First, confirm that you have access to the CIROH Jupyterhub. If not, follow [Steps](../../../../docs/services/cloudservices/ciroh%20jupyterhub/#how-to-get-access-to-these-environments)
 
-2. Head to HydroShare and navigate to the "CIROH Production Jupyterhub" resource at this [URL](https://www.hydroshare.org/resource/2dd1ac86e8854d4fb9fe5fbafaec2b98/). This resource resource is an "app connector" that will allow you to add the CIROH production JupyterHub to the list of apps you have available via your "Open with" menu in HydroShare.
-
-3. Ensure that the square icon labeled "Add Web App to Open with list" in HydroShare is green. If it appears red, a single click will change it to green. Clicking on this icon and making sure it is green will add the CIROH JupyterHub to the list of apps in the "Open With" menu that appears at the top of the landing page for any HydroShare resources you visit.
+2. CIROH Jupyterhub is now an approved app, and appears on https://www.hydroshare.org/apps/. Navigate to this page to access it directly, or select it from the "Open with" list on any resource that you have access to containing a Jupyter notebook. 
+3. A new browser tab will open for the CIROH JupyterHub. Click on the "Login to continue" button and select one of the server options that is appropriate for the analysis you need to run (small, medium, large, or huge) and image : New Pangeo Notebook base image. Then, click the "Start" button to launch your server.
 
 <p align="center">
 <img src="/img/hydroshare.png" alt="HydroShare 2i2c Image" style={{'width':'80%', 'height':'50%'}}/>
 </p>
 
 
-4. Once you have completed Step 3, you can navigate to any HydroShare resource and click on the "Open with" dropdown menu at the top right of the resource's landing page. You will now see and will be able to select "CIROH Production JupyterHub". Once you select this option from the drop down in HydroShare, a new browser tab will open for the CIROH JupyterHub. Click on the "Login to continue" button and select one of the server options that is appropriate for the analysis you need to run (small, medium, large, or huge) and image : New Pangeo Notebook base image. Then, click the "Start" button to launch your server.
-
 
 <p align="center">
 <img src="/img/hydroshare-1.png" alt="HydroShare 2i2c Image" style={{'width':'80%', 'height':'50%'}}/>

docs/services/cloudservices/ciroh jupyterhub/documentation/gcp-object-storage/index.md

@@ -48,12 +48,12 @@ gcloud storage cp $PERSISTENT_BUCKET/<filepath> <destination-filepath>
 You can list all files/folder in a bucket using the following command.
 
 ```
-gscloud storage ls $PERSISTENT_BUCKET
+gcloud storage ls $PERSISTENT_BUCKET
 ```
 **Note:** The above command will list all files/folders in the folder `<username>`. It won't list files in the sub-folders of folder `<username>`. To list all files including the files in the sub-folders of the root folder `<username>`, use the following command.
 
 ```
-gscloud storage ls --recursive $PERSISTENT_BUCKET
+gcloud storage ls --recursive $PERSISTENT_BUCKET
 ```
 
 ### 5. Deleting file from a bucket

src/components/GitHubReadme.js

@@ -1,23 +1,49 @@
 import React, { useEffect, useState } from 'react';
 
-function GitHubReadme({ repo, username , subfolder = '', readmeFileName ='' }) {
+function GitHubReadme({ repo, username, subfolder = '', readmeFileName = '' }) {
     const [readmeContent, setReadmeContent] = useState('');
 
+    const convertRelativePaths = (html, baseUrl) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+
+        // Convert image sources
+        doc.querySelectorAll('img[src]').forEach(img => {
+            const src = img.getAttribute('src');
+            if (!src.startsWith('http')) {
+                const relativePath = src.replace(/^\//, '');
+                img.src = `https://github.com/${username}/${repo}/raw/main/${subfolder ? subfolder + '/' : ''}${relativePath}`;
+            }
+        });
+
+        // Convert anchor href attributes
+        doc.querySelectorAll('a[href]').forEach(anchor => {
+            const href = anchor.getAttribute('href');
+            if (href && !href.startsWith('http') && !href.startsWith('#')) {
+                const relativePath = href.replace(/^\//, '');
+                anchor.href = `https://github.com/${username}/${repo}/blob/main/${subfolder ? subfolder + '/' : ''}${relativePath}`;
+            }
+        });
+
+        return doc.body.innerHTML;
+    };
+
     useEffect(() => {
         // Construct the GitHub API URL to fetch the README as HTML
         let apiUrl = '';
-        if (subfolder != '') {
-            if (readmeFileName != '') 
+        if (subfolder !== '') {
+            if (readmeFileName !== '') 
                 apiUrl = `https://api.github.com/repos/${username}/${repo}/contents/${subfolder}/${readmeFileName}?ref=main`;
             else
                 apiUrl = `https://api.github.com/repos/${username}/${repo}/contents/${subfolder}/readme?ref=main`;
         } 
         else {
-            if (readmeFileName != '') 
+            if (readmeFileName !== '') 
                 apiUrl = `https://api.github.com/repos/${username}/${repo}/${readmeFileName}?ref=main`;
             else
                 apiUrl = `https://api.github.com/repos/${username}/${repo}/readme?ref=main`;
         }
+
         fetch(apiUrl, {
             headers: {
                 Accept: 'application/vnd.github.v3.html',
@@ -30,6 +56,9 @@ function GitHubReadme({ repo, username , subfolder = '', readmeFileName ='' }) {
                 return response.text();
             })
             .then(html => {
+                // Convert relative paths to absolute
+                const processedHtml = convertRelativePaths(html);
+
                 // Define the note markdown as a string
                 const noteMarkdown = `
                 <blockquote style='padding:10px;font-size:1.1rem;'>
@@ -38,16 +67,15 @@ function GitHubReadme({ repo, username , subfolder = '', readmeFileName ='' }) {
                     <p></p>
                 </blockquote>
                 `;
-
 
-                // Prepend the note markdown to the fetched README content
-                const combinedContent = noteMarkdown + html;
+                // Prepend the note markdown to the processed README content
+                const combinedContent = noteMarkdown + processedHtml;
 
                 // Update the state with the combined content
                 setReadmeContent(combinedContent);
             })
             .catch(err => console.error('Error fetching README:', err));
-    }, [repo, username]);
+    }, [repo, username, subfolder, readmeFileName]);
 
     // Render the HTML content
     return <div dangerouslySetInnerHTML={{ __html: readmeContent }} />;