Implement ACCESS resource catalog

.env

@@ -0,0 +1 @@
+VITE_SDS_API_KEY=z0CiQbts8t4pnv6fJQD4g9nskbCOl6UD-67akYK68wk

.github/workflows/build-deploy-pages.yml

@@ -0,0 +1,50 @@
+name: Build and Deploy to Pages
+
+on:
+  push:
+    branches:
+      - "resource-catalog"
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm ci
+      - name: Build project
+        run: npm run build -- --mode=staging
+        env:
+          VITE_SDS_API_KEY: ${{ secrets.VITE_SDS_API_KEY }}
+      - name: Copy index to 404 page
+        run: cp dist/index.html dist/404.html
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "dist"
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/create-release.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - resource-catalog
 
 jobs:
   release:
@@ -22,6 +23,7 @@ jobs:
         uses: googleapis/release-please-action@v4
         with:
           release-type: node
+          target-branch: ${{ github.ref_name }}
 
   build-publish:
     name: Build and publish module

README.md

@@ -24,9 +24,11 @@ The library includes functions for rendering common ACCESS user interface compon
 - `universalMenus`: Universal navigation menus
 - `header`: Logo header
 - `siteMenus`: Site-specific navigation menus
+- `breadcrumbs`: Breadcrumb navigation
 - `tableOfContents`: Page table of contents
 - `footerMenus`: Site-specific navigation menus above the footer
 - `footer`: Universal footer
+- `resourceCatalog`: ACCESS resource catalog
 
 ## Example
 

index.html

@@ -4,37 +4,23 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="light" />
-    <title>ACCESS CI User Interface Components</title>
+    <title>ACCESS Resource Catalog Development Prototype</title>
     <link
       rel="stylesheet"
       id="google-font-archivo-css"
       href="https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,70,400;0,100,400;0,100,500;0,100,600;0,100,700;0,100,800;1,100,400&amp;display=swap"
       media="all"
     />
     <link rel="stylesheet" href="/src/base.css" />
+    <link rel="stylesheet" href="/src/icon.css" />
     <style>
       body {
         color: #232323;
         font-family: "Archivo", sans-serif;
-        height: 100vh;
         margin: 0;
+        min-height: 100vh;
         padding: 0;
       }
-      h1 {
-        font-size: 36px;
-        font-stretch: 70%;
-        font-weight: 500;
-        margin-top: 60px;
-      }
-      h2 {
-        font-size: 24px;
-        font-weight: 700;
-        margin: 36px 0 150px;
-      }
-      #table-of-contents {
-        margin-bottom: 50px;
-        margin-top: 60px;
-      }
       @media (min-width: 768px) {
         #main {
           display: flex;
@@ -45,6 +31,11 @@
           margin-left: 20px;
           width: calc((var(--width) - 140px) / 4 + 20px);
         }
+        #banner {
+          background-color: #fff3cd;
+          color: #856404;
+          padding: 12px calc((100% - var(--width)) / 2);
+        }
       }
     </style>
   </head>
@@ -54,89 +45,34 @@
     <div id="site-menus"></div>
     <div id="main" class="container">
       <div id="body">
-        <h1>Page Title</h1>
-        <h2>First Section</h2>
-        <h2>Second Section</h2>
-        <h2>Third Section</h2>
+        <div id="resource-catalog"></div>
       </div>
-      <div id="table-of-contents"></div>
     </div>
     <div id="footer-menus"></div>
     <div id="footer"></div>
     <script type="module">
       import {
         footer,
-        footerMenus,
         header,
-        siteMenus,
+        resourceCatalog,
         tableOfContents,
         universalMenuItems,
         universalMenus,
       } from "/src/index.jsx";
 
-      const siteItems = [
-        {
-          name: "One",
-          items: [
-            {
-              name: "Item A",
-              href: "/one/a",
-            },
-            {
-              name: "Item B",
-              href: "/one/b",
-            },
-            {
-              name: "Item C",
-              href: "/one/c",
-            },
-          ],
-        },
-        {
-          name: "Two",
-          items: [
-            {
-              name: "Item A",
-              href: "/two/a",
-            },
-            {
-              name: "Item B",
-              href: "/two/b",
-            },
-          ],
-        },
-        {
-          name: "Three",
-          href: "/three",
-        },
-      ];
-
       universalMenus({
         loginUrl: "/login",
         logoutUrl: "/logout",
-        siteName: "Allocations",
         target: document.getElementById("universal-menus"),
       });
 
       header({
-        siteName: "Allocations",
         target: document.getElementById("header"),
       });
 
-      siteMenus({
-        items: siteItems,
-        siteName: "Allocations",
-        target: document.getElementById("site-menus"),
-      });
-
-      tableOfContents({
-        headings: document.querySelectorAll("#body h1, #body h2"),
-        target: document.getElementById("table-of-contents"),
-      });
-
-      footerMenus({
-        items: siteItems,
-        target: document.getElementById("footer-menus"),
+      resourceCatalog({
+        baseUri: "/access-ci-ui",
+        target: document.getElementById("resource-catalog"),
       });
 
       footer({ target: document.getElementById("footer") });