227 groundwork links do not include base path on GitHub pages

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,41 @@
+name: Groundwork Bug Report
+description: File a bug report related to Groundwork
+labels: ["bug"]
+body:
+  # BUG REPORT FIELDS
+  - type: textarea
+    id: bug_description
+    attributes:
+      label: Describe the bug
+      description: What went wrong?
+      placeholder:
+        A clear and concise description of the bug... Include the version
+        of Groundwork if known. i.e. gw v0.0.1 (You can see this in your package.json file)
+        Provide any links to relevant code here.
+    validations:
+      required: true
+
+  - type: textarea
+    id: logs
+    attributes:
+      label: REDACTED relevant log output
+      description:
+        Please copy and paste any relevant log output. Either runtime (dev console) or build logs. Removing sensitive
+        information. This will be automatically formatted into code, so no need for
+        backticks.
+      render: shell
+    validations:
+      required: false
+
+  - type: textarea
+    id: repro_steps
+    attributes:
+      label: Steps to Reproduce
+      description: Provide steps to reproduce the issue.
+      placeholder: |
+        1. npm install
+        2. npm run dev
+        3. Navigate to this page
+        4. See error when clicking XYZ
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Groundwork Water
+    url: https://github.com/USACE-WaterManagement/groundwork-water/issues/new
+    about: Issues Related to Data/Hook Components or other water management data component problems.
+  - name: Groundwork Geo
+    url: https://github.com/USACE/groundwork-geo/issues/new
+    about: Map component issues that do NOT fetch data and otherwise have trouble with rendering or feature requests.

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,23 @@
+name: Groundwork Feature Request
+description: Request a feature related to Groundwork
+labels: ["enhancement"]
+body:
+  # FEATURE REQUEST FIELDS
+  - type: textarea
+    id: feature_description
+    attributes:
+      label: Feature Proposal
+      description: What do you want to see added or changed?
+      placeholder: |
+        Describe the feature, its motivation, and usage examples.
+        You can include code or other examples in code blocks.
+    validations:
+      required: true
+
+  - type: textarea
+    id: related_links
+    attributes:
+      label: Related Context or Links
+      description: Include any discussions, docs, or libraries relevant to the request.
+    validations:
+      required: false

lib/components/display/modal.jsx

@@ -8,11 +8,19 @@ import {
 import gwMerge from "../../gw-merge";
 import { WIDTH_OPTIONS } from "../../utils/sizes";
 
+const roleOptions = ["dialog", "alertdialog"];
+
 function Modal({
   opened = false,
   onClose,
   dialogTitle,
   dialogDescription,
+  isStatic = false,
+  autoFocus=false,
+  dialogTransition=false,
+  dialogPanelTransition= false,
+  unmount = true,
+  role='dialog',
   buttons,
   size = "2xl",
   className,
@@ -28,11 +36,27 @@ function Modal({
     );
     size = "2xl";
   }
+
+  // Check if Role exists
+  if (!roleOptions.includes(role)) {
+    console.error(
+      `Invalid role option for dialog ${role}. Must be one of: 'dialog','alertdialog'`)
+      console.warn(
+      `Defaulting to 'dialog' for role of <Modal modalTitle="${dialogTitle}" .../>`,
+    );
+    role = "dialog";
+
+  }
 
   return (
     <Dialog
       open={opened}
       onClose={onClose}
+      static= {isStatic}
+      autoFocus={autoFocus}
+      transition={dialogTransition}
+      unmount={unmount}
+      role={role}
       className={gwMerge("gw-relative", "gw-z-[200]", className)}
     >
       <DialogBackdrop className="gw-fixed gw-inset-0 gw-bg-black/30" />
@@ -48,6 +72,7 @@ function Modal({
               "gw-bg-white",
               "gw-p-12",
             )}
+            transition={dialogPanelTransition}
           >
             {dialogTitle && (
               <DialogTitle className="gw-font-bold gw-text-center">

lib/components/navigation/breadcrumbs.jsx

@@ -4,6 +4,8 @@ import { MdHome } from "react-icons/md";
 import { VscChevronRight } from "react-icons/vsc";
 import Link from "./link";
 
+const BASE_URL = import.meta.env.BASE_URL;
+
 function BreadcrumbItem({ className, href, text }) {
   const breadcrumbItemClass = useMemo(() => {
     return gwMerge(
@@ -30,7 +32,7 @@ function BreadcrumbItem({ className, href, text }) {
   );
 }
 
-function Breadcrumbs({ className, children }) {
+function Breadcrumbs({ className, children, baseUrl }) {
   const breadcrumbsClass = useMemo(() => {
     return gwMerge(
       "gw-flex gw-flex-nowrap gw-items-center gw-space-x-2 gw-py-4 gw-overflow-x-auto gw-hide-scrollbar",
@@ -41,7 +43,10 @@ function Breadcrumbs({ className, children }) {
     <ol className={breadcrumbsClass}>
       <li>
         <div>
-          <Link href="/" className="gw-text-gray-300 gw-hover:gw-text-gray-500">
+          <Link
+            href={`${(baseUrl || "").replace(/\/+$/, "")}/`} // Avoid double slashes
+            className="gw-text-gray-300 gw-hover:gw-text-gray-500"
+          >
             <MdHome size={22} />
             <span className="gw-sr-only">Home</span>
           </Link>

lib/composite/footer/index.jsx

@@ -110,15 +110,19 @@ function Footer({
                   {missionText && (
                     <>
                       <h2 className="gw-text-lg">Our Mission</h2>
-                      <Text>{missionText}</Text>
+                      <Text className="gw-text-gray-300 dark:gw-text-gray-200">
+                        {missionText}
+                      </Text>
                     </>
                   )}
                 </div>
                 <div className="gw-col-span-12 gw-mt-4">
                   {aboutText && (
                     <>
                       <h2 className="gw-text-lg">About this Website</h2>
-                      <Text>{aboutText}</Text>
+                      <Text className="gw-text-gray-300 dark:gw-text-gray-200">
+                        {aboutText}
+                      </Text>
                     </>
                   )}
                 </div>

lib/composite/header/index.jsx

@@ -7,6 +7,8 @@ import { useState } from "react";
 import gwMerge from "../../gw-merge";
 import Link from "../../components/navigation/link";
 
+const BASE_URL = import.meta.env.BASE_URL;
+
 function Title({ title = "", subtitle = "" }) {
   return (
     <div
@@ -26,7 +28,7 @@ function Title({ title = "", subtitle = "" }) {
 function Logo() {
   return (
     <div className="gw-relative gw-w-[70px] sm:gw-w-[82px] gw-shrink-0 sm:gw-top-3">
-      <Link href="/">
+      <Link href={BASE_URL + "/"}>
         <img
           className="gw-w-[50px] sm:gw-w-[60px] gw-h-auto"
           src={usaceLogo}

lib/composite/header/navbar-links.jsx

@@ -38,7 +38,7 @@ function NavbarLinkItem({ link, ...props }) {
         <Menu.Items
           static
           as="ul"
-          className="gw-absolute gw-left-0 gw-top-13 gw-bg-nav-dark-gray !gw-z-20 gw-w-max gw-p-0" // Removed padding and added gw-p-0
+          className="gw-absolute gw-left-0 gw-top-13 gw-bg-nav-dark-gray !gw-z-20 gw-w-max gw-p-0"
         >
           {link.children.map((child) => (
             <Menu.Item key={child.id || child.text} as={Fragment}>
@@ -55,7 +55,7 @@ function NavbarLinkItem({ link, ...props }) {
                   <Menu.Items
                     static
                     as="ul"
-                    className="gw-absolute gw-left-full gw-top-0 gw-bg-nav-dark-gray !gw-z-30 gw-w-max gw-p-0 gw-shadow-lg gw-hidden group-hover:gw-block" // Removed padding and added gw-p-0
+                    className="gw-absolute gw-left-full gw-top-0 gw-bg-nav-dark-gray !gw-z-30 gw-w-max gw-p-0 gw-shadow-lg gw-hidden group-hover:gw-block"
                   >
                     {child.children.map((grandChild) => {
                       if (!grandChild.children)