Finishing up features for On-Ramps

access-ci-org · Sep 18, 2024 · 29257f1 · 29257f1
1 parent ec7fb14
commit 29257f1
Show file tree

Hide file tree

Showing 20 changed files with 87 additions and 198 deletions.
diff --git a/index.html b/index.html
@@ -4,26 +4,19 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>XRAS User Interface Components</title>
-    <!-- <link
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
-      crossorigin="anonymous"
-    />
-    -->
+
+  </head>
+  <body>
+    <div id="resource-catalog-react"></div>
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
     />
-  </head>
-  <body>
-    <div id="resource-catalog-react"></div>
-
     <script type="module">
       import {
         resourceCatalog,
         shadowTarget,
-      } from "http://localhost:3000/dist/xras-ui.js";
+      } from "http://localhost:3000/xras-ui.js";
       resourceCatalog({
         target: shadowTarget(
           document.getElementById("resource-catalog-react"),

diff --git a/public/access-resources.png b/public/access-resources.png
diff --git a/public/access_logo.png b/public/access_logo.png
diff --git a/src/bootstrap/access.scss b/src/bootstrap/access.scss
@@ -1,4 +1,4 @@
-//@import url('http://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,70,400;0,100,400;0,100,600;0,100,800;1,100,400&#038;display=swap');
+@import url('http://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,70,400;0,100,400;0,100,600;0,100,800;1,100,400&#038;display=swap');
 
 $primary: #1a5b6e;
 $secondary: #fec42d;
@@ -25,6 +25,7 @@ body,
   --teal-700: #1a5b6e;
   --yellow-400: #ffc42d;
   --orange-400: #f07537;
+  --bs-primary: #1a5b6e;
   // Bootstrap
   --bs-font-sans-serif: "Archivo", sans-serif;
   --bs-link-color: var(--teal-600);

diff --git a/src/main.jsx b/src/main.jsx
@@ -17,8 +17,8 @@ import PublicationsSelect from "./publications/PublicationsSelect";
 import publicationsConfig from "./publications/helpers/config";
 import { publications_store } from "./publications/helpers/reducers";
 
-import ResourceCatalog from "./resource-catalog/ResourceCatalog";
-import catalogSlice from "./resource-catalog/helpers/catalogSlice";
+import OnRampsResourceCatalog from "./onramps-resource-catalog/ResourceCatalog";
+import catalogSlice from "./onramps-resource-catalog/helpers/catalogSlice";
 
 export function shadowTarget(
   host,
@@ -136,7 +136,7 @@ export function resourceCatalog({ target, catalogSources, onRamps }) {
   });
   ReactDOM.createRoot(target).render(
     <Provider store={store}>
-      <ResourceCatalog catalogSources={catalogSources} onRamps={onRamps} />
+      <OnRampsResourceCatalog catalogSources={catalogSources} onRamps={onRamps} />
     </Provider>
   );
 }
diff --git a/src/resource-catalog/CatalogList.jsx → src/onramps-resource-catalog/CatalogList.jsx b/src/resource-catalog/CatalogList.jsx → src/onramps-resource-catalog/CatalogList.jsx
diff --git a/src/resource-catalog/Filter.jsx → src/onramps-resource-catalog/Filter.jsx b/src/resource-catalog/Filter.jsx → src/onramps-resource-catalog/Filter.jsx
diff --git a/src/resource-catalog/FilterBar.jsx → src/onramps-resource-catalog/FilterBar.jsx b/src/resource-catalog/FilterBar.jsx → src/onramps-resource-catalog/FilterBar.jsx
@@ -9,14 +9,19 @@ const FilterBar = () => {
 
   return (
     <>
-      <Offcanvas show={show} onHide={handleClose}>
-        <Offcanvas.Header closeButton>
-          <Offcanvas.Title>Filters</Offcanvas.Title>
-        </Offcanvas.Header>
-        <Offcanvas.Body>
+      <div className={`offcanvas offcanvas-start ${show ? 'show' : ''}`} tabIndex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+        <div className="offcanvas-header">
+          <h5 className="offcanvas-title" id="offcanvasLabel">Filters</h5>
+          <button
+            type="button"
+            className="btn-close"
+            onClick={handleClose}
+            aria-label="Close"></button>
+        </div>
+        <div className="offcanvas-body">
           <Filters />
-        </Offcanvas.Body>
-      </Offcanvas>
+        </div>
+      </div>
       <div className={`row mb-2`}>
         <div className="col pt-2 pb-2">
           <div className="p-1 pb-0 border-bottom bg-white shadow">

diff --git a/src/resource-catalog/FilterCategory.jsx → ...ramps-resource-catalog/FilterCategory.jsx b/src/resource-catalog/FilterCategory.jsx → ...ramps-resource-catalog/FilterCategory.jsx
diff --git a/src/resource-catalog/Filters.jsx → src/onramps-resource-catalog/Filters.jsx b/src/resource-catalog/Filters.jsx → src/onramps-resource-catalog/Filters.jsx
diff --git a/src/resource-catalog/Resource.jsx → src/onramps-resource-catalog/Resource.jsx b/src/resource-catalog/Resource.jsx → src/onramps-resource-catalog/Resource.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import styles from "./ResourceCatalog.module.scss";
 
 const Resource = ({ resource }) => {
 
@@ -9,7 +10,7 @@ const Resource = ({ resource }) => {
       "CPU Compute": "cpu-fill",
       "GPU Compute": "gpu-card",
       "Cloud" : "cloud-fill",
-      "Commercial Cloud" : "clouds-fill",
+      "Commercial Cloud" : "cloud-fill",
       "Storage": "database-fill",
       "Service / Other": "journal",
       "Innovative / Novel Compute": "pc",
@@ -48,16 +49,16 @@ const Resource = ({ resource }) => {
     let truncated = false;
 
     if (content && content != "") {
-      if(content.length > 400 && showShortDesc){
-        content = `${content.substring(0, 397)}...`;
-        truncated = true;
-      }
+      // if(content.length > 400 && showShortDesc){
+      //   content = `${content.substring(0, 397)}...`;
+      //   truncated = true;
+      // }
 
       const showMoreButton = (
         <button
           role='button'
           type='button'
-
+          className={styles.plainButton}
           onClick={() => setShowShortDesc(false)}
         >
           Read More
@@ -73,7 +74,7 @@ const Resource = ({ resource }) => {
           </div>
           <div className="row mb-3">
             <div className={`col `}>
-              <div dangerouslySetInnerHTML={{ __html: content }} />
+              <div className={styles.description} dangerouslySetInnerHTML={{ __html: content }} />
               {truncated ? showMoreButton : ''}
             </div>
           </div>
@@ -95,7 +96,7 @@ const Resource = ({ resource }) => {
           </div>
           <div className='row mb-3'>
             <div className='col'>
-              <div dangerouslySetInnerHTML={{ __html: resource.recommendedUse }} />
+              <div className={styles.description} dangerouslySetInnerHTML={{ __html: resource.recommendedUse }} />
             </div>
           </div>
         </>
@@ -106,8 +107,7 @@ const Resource = ({ resource }) => {
   }
 
   const headerBg = () => {
-    return "";
-    //return style.cardBg;
+    return styles.cardBg;
   }
 
   return (
@@ -127,20 +127,11 @@ const Resource = ({ resource }) => {
                   {renderFeatures(resource.features)}
                 </div>
               </div>
-
-              { renderDescription() }
               { renderUse() }
-
-
-              {/* <div className='row'>
-                <div className='col'>
-                  <button className='btn btn-info me-2 fw-bold'>Learn More <i className='bi bi-box-arrow-up-right'></i></button>
-                  <button className='btn btn-warning fw-bold'>Request This Resource <i className='bi bi-box-arrow-up-right'></i></button>
-                </div>
-              </div> */}
+              { renderDescription() }
             </div>
             <div className='card-footer'>
-            <button className='btn btn-info me-2 fw-bold'>Learn More <i className='bi bi-box-arrow-up-right'></i></button>
+              <a target='_blank' href={resource.userGuideUrl} className='btn btn-info me-2 fw-bold'>System Info <i className='bi bi-box-arrow-up-right'></i></a>
 
             </div>
           </div>

diff --git a/src/resource-catalog/ResourceCatalog.jsx → ...amps-resource-catalog/ResourceCatalog.jsx b/src/resource-catalog/ResourceCatalog.jsx → ...amps-resource-catalog/ResourceCatalog.jsx
@@ -9,6 +9,7 @@ import {
 import { accessText } from "./helpers/accessText";
 import ResourceList from "./ResourceList";
 import LoadingSpinner from "../shared/LoadingSpinner";
+import styles from "./ResourceCatalog.module.scss";
 
 const ResourceCatalog = ({
   catalogSources = [],
@@ -64,12 +65,11 @@ const ResourceCatalog = ({
   if (!resourcesLoaded) return <LoadingSpinner />;
 
   return (
-    <div className="container mt-3">
+    <div className={`container mt-3 ${styles.access}`}>
       { onRamps ? accessText : ''}
       { renderCatalogDescriptions() }
       <div className="row">
         <div className="col">
-          <button className="btn btn-primary">Button!</button>
           <ResourceList />
         </div>
       </div>

diff --git a/...ource-catalog/ResourceCatalog.module.scss → ...ource-catalog/ResourceCatalog.module.scss b/...ource-catalog/ResourceCatalog.module.scss → ...ource-catalog/ResourceCatalog.module.scss
@@ -1,3 +1,15 @@
+@import url('http://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,70,400;0,100,400;0,100,600;0,100,800;1,100,400&#038;display=swap');
+$primary: #1a5b6e;
+$secondary: #fec42d;
+$danger: #a70000;
+$info: #00a8d1;
+$warning: #ef7537;
+
+
+.access {
+  font-family: "Archivo", sans-serif;
+}
+
 .resourceName {
   font-size: 1.3rem;
   font-weight: bold;
@@ -14,9 +26,8 @@
 }
 
 .cardBg {
-  // background-color: #1a5b6e;
-  // color: #fff;
-  color: #000;
+  background-color: $primary !important;
+  color: #fff !important;
 }
 
 .active {

diff --git a/src/resource-catalog/ResourceList.jsx → ...onramps-resource-catalog/ResourceList.jsx b/src/resource-catalog/ResourceList.jsx → ...onramps-resource-catalog/ResourceList.jsx
diff --git a/src/onramps-resource-catalog/helpers/accessText.jsx b/src/onramps-resource-catalog/helpers/accessText.jsx
@@ -0,0 +1,37 @@
+export const accessText = (
+  <>
+    <div className="row">
+      <div className="col d-flex">
+        <img alt="Access Logo" style={{ height: "75px" }} src="/access_logo.png" />
+      </div>
+    </div>
+    <div className="row">
+      <div className="col">
+        <h3 className="border-bottom">The ACCESS On-Ramps Program</h3>
+      </div>
+    </div>
+    <div className="row">
+      <div className="col">
+        <p>
+          Need more advanced computing and storage options for your work?
+          The On-Ramps program offers your institution cost-free entry to the nation's
+          cyberinfrastructure resources. Simply select a resource from the catalog below to
+          get started. On-Ramps expands your cyberinfrastructure with many powerful resource options.
+        </p>
+        <p>
+          <a href="https://allocations.access-ci.org" target="_blank">Learn more on our About On-Ramps page</a>
+        </p>
+        <h4 className="border-bottom">About ACCESS</h4>
+        <p>
+          ACCESS is a program established and funded by the National Science Foundation to
+          help researchers and educators, with or without supporting grants,
+          to utilize the nation's advanced computing systems and services — at no cost.
+        </p>
+        <p>
+          <a href="https://access-ci.org" target="_blank">Learn more about ACCESS</a>
+        </p>
+      </div>
+    </div>
+
+  </>
+)
diff --git a/src/resource-catalog/helpers/catalogSlice.js → ...-resource-catalog/helpers/catalogSlice.js b/src/resource-catalog/helpers/catalogSlice.js → ...-resource-catalog/helpers/catalogSlice.js
@@ -1,5 +1,4 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
-import sanitizeHtml from "sanitize-html";
 
 const initialState = {
   catalogs: {},
@@ -36,8 +35,6 @@ export const getResources = createAsyncThunk(
       });
     }
 
-    sources.forEach((c) => c.description = sanitizeHtml(c.description));
-
     const apiData = await Promise.all(sources.map( async (src) => {
       const response = await fetch(src.apiUrl);
       const json = await response.json();
@@ -190,9 +187,6 @@ const formatResourceFeatures = (catalog, resource, categories) => {
     const formattedResource = {
       ...resource,
       resourceName: resource.resourceName.trim(),
-      resourceDescription: sanitizeHtml(resource.resourceDescription),
-      recommendedUse: sanitizeHtml(resource.recommendedUse),
-      description: sanitizeHtml(resource.recommendedUse),
       features: featureNames,
       featureIds: featureList.map((f) => f.featureId),
     };

diff --git a/src/resource-catalog/helpers/mocks.jsx → ...nramps-resource-catalog/helpers/mocks.jsx b/src/resource-catalog/helpers/mocks.jsx → ...nramps-resource-catalog/helpers/mocks.jsx
diff --git a/src/resource-catalog/ResourceAccordion.jsx b/src/resource-catalog/ResourceAccordion.jsx