feat(resource-group-documentation): add list of documentation links

public/api/resource-groups/1/documentation.json

@@ -0,0 +1,12 @@
+{
+  "documentation": [
+    {
+      "name": "Bridges-2 Home Page",
+      "documentationUri": "https://www.psc.edu/resources/bridges-2/"
+    },
+    {
+      "name": "Bridges-2 User Guide",
+      "documentationUri": "https://www.psc.edu/resources/bridges-2/user-guide/"
+    }
+  ]
+}

src/content.css

@@ -30,11 +30,16 @@ a:hover {
   color: var(--teal-600);
   text-decoration: none;
 }
-p {
+ol,
+p,
+ul {
   font-size: 1.125rem;
   line-height: 1.875rem;
   margin: 0 0 1.25rem;
 }
+li {
+  margin-bottom: 0.5rem;
+}
 .btn {
   background-color: var(--teal-700);
   border: 4px solid var(--teal-700);

src/donut-chart.css

@@ -25,8 +25,10 @@
   padding: 0;
 }
 .donut-chart .top-items li {
+  align-items: center;
   display: flex;
   flex-direction: row;
+  font-size: 1rem;
   margin-bottom: 5px;
 }
 .donut-chart .symbol {

src/resource-group-detail.jsx

@@ -1,5 +1,6 @@
 import ResourceGroupAffinityGroup from "./resource-group-affinity-group";
 import ResourceGroupDescription from "./resource-group-description";
+import ResourceGroupDocumentation from "./resource-group-documentation";
 import ResourceGroupEvents from "./resource-group-events";
 import ResourceGroupProjects from "./resource-group-projects";
 import ResourceGroupQueueMetrics from "./resource-group-queue-metrics";
@@ -39,6 +40,10 @@ export default function ResourceGroupDetail({ baseUri, resourceGroupId }) {
         baseUri={baseUri}
         resourceGroupId={resourceGroupId}
       />
+      <ResourceGroupDocumentation
+        baseUri={baseUri}
+        resourceGroupId={resourceGroupId}
+      />
     </div>
   );
 }

src/resource-group-documentation.jsx

@@ -0,0 +1,27 @@
+import { useJSON } from "./utils";
+
+import Section from "./section";
+
+export default function ResourceGroupDocumentation({
+  baseUri,
+  resourceGroupId,
+}) {
+  const data = useJSON(
+    `${baseUri}/api/resource-groups/${resourceGroupId}/documentation.json`,
+    null
+  );
+
+  if (!data || data.error) return;
+
+  return (
+    <Section title="Documentation" icon="book">
+      <ul>
+        {data.documentation.map(({ name, documentationUri }) => (
+          <li>
+            <a href={documentationUri}>{name}</a>
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}