From fbe5aaace23286ad2ae162827f6d4d93fa81be4a Mon Sep 17 00:00:00 2001 From: Charles Graham SWT Date: Thu, 21 Aug 2025 12:17:48 -0500 Subject: [PATCH 01/27] Correct existing base_url references from base to BASE_URL. Ensure we are now not using doUpdateUrlWithBase and correct trailing slash. --- .../getting-started/client-side-routing.jsx | 28 +++++++++---------- src/app-pages/home.jsx | 6 ++-- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/app-pages/documentation/getting-started/client-side-routing.jsx b/src/app-pages/documentation/getting-started/client-side-routing.jsx index 490f956..5d156e2 100644 --- a/src/app-pages/documentation/getting-started/client-side-routing.jsx +++ b/src/app-pages/documentation/getting-started/client-side-routing.jsx @@ -498,12 +498,12 @@ export default App;`} code={`import { defineConfig } from 'vite'; export default defineConfig({ - base: '/your-base-path/', // Replace 'your-base-path' with the actual base path i.e. '/myapp/' or '/hec/' + base: '/your-base-path', // Replace 'your-base-path' with the actual base path i.e. '/myapp' or '/hec' plugins: [react()], });`} />

- Replace '/your-base-path/' with the actual base path + Replace '/your-base-path' with the actual base path where your application will be deployed. This ensures that all URLs in your application are correctly prefixed with the base path.

@@ -513,15 +513,15 @@ export default defineConfig({ to update these paths to include the base path.

- In addition the doUpdateUrlWithBase function can be - used to update the URL with the base path dynamically. + In addition the doUpdateUrl function can be + used to update the URL. Just take care to also prepend the BASE_URL constant to any paths you provide.

For situations where you require setting the base path such as in img tags or anchor tags, you can use the:{" "}

- const base = import.meta.env.BASE_URL{" "} + const BASE_URL = import.meta.env.BASE_URL{" "}

Environment variable to get the base URL of your application. This @@ -530,18 +530,18 @@ export default defineConfig({

Logo + Logo ) }`} />

Updating the URL dynamically

- The doUpdateUrlWithBase function is a utility function + The doUpdateUrl function is a utility function that allows you to update the URL in the browser without causing a full page refresh. This is useful when you want to update the URL based on user interaction, such as clicking on a link or submitting @@ -551,17 +551,17 @@ export default function Example() {

Inside your component, you can call the{" "} - doUpdateUrlWithBase function with the new URL you want + doUpdateUrl function with the new URL you want to navigate to. Be sure to also import the{" "} - doUpdateUrlWithBase function from the{" "} + doUpdateUrl function from the{" "} redux-bundler package.

./src/app-pages/mypath/tab-example.jsx { - doUpdateUrlWithBase(\`\${base}mypath/\${tab.name?.toLowerCase()}\`); + doUpdateUrl(\`\${BASE_URL}/mypath/\${tab.name?.toLowerCase()}\`); } })) diff --git a/src/app-pages/home.jsx b/src/app-pages/home.jsx index 80fad75..a68814e 100644 --- a/src/app-pages/home.jsx +++ b/src/app-pages/home.jsx @@ -1,15 +1,15 @@ import { Container, Text, Code, UsaceBox, TextLink, Hero } from "../../lib"; import CopyButton from "../app-components/copy-button"; -const base = import.meta.env.BASE_URL; +const BASE_URL = import.meta.env.BASE_URL; function Home() { return ( <> Date: Thu, 21 Aug 2025 12:20:14 -0500 Subject: [PATCH 02/27] Add BASE_URL to the lib Breadcrumbs/Header Image --- lib/components/navigation/breadcrumbs.jsx | 4 +++- lib/composite/header/index.jsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/components/navigation/breadcrumbs.jsx b/lib/components/navigation/breadcrumbs.jsx index ce9069a..f73f8fd 100644 --- a/lib/components/navigation/breadcrumbs.jsx +++ b/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( @@ -41,7 +43,7 @@ function Breadcrumbs({ className, children }) {
  1. - + Home diff --git a/lib/composite/header/index.jsx b/lib/composite/header/index.jsx index 9ce1f7a..b3917e5 100644 --- a/lib/composite/header/index.jsx +++ b/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 (
    - + Date: Thu, 21 Aug 2025 12:35:11 -0500 Subject: [PATCH 03/27] Add # to our base in the vite config for the Docs site and remove trailing slash --- vite.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/vite.config.js b/vite.config.js index b51d54a..6fe3a1d 100644 --- a/vite.config.js +++ b/vite.config.js @@ -36,8 +36,8 @@ export default defineConfig(({ mode }) => { console.log("Building preview app", mode); const base = mode === "production" - ? "https://usace.github.io/groundwork/" - : "http://localhost:5173/"; + ? "https://usace.github.io/groundwork/#" + : "http://localhost:5173"; return { plugins: [react()], base: base, From ccf501d690df34e35a5938586fdd56417bc74737 Mon Sep 17 00:00:00 2001 From: Charles Graham SWT Date: Thu, 21 Aug 2025 12:45:43 -0500 Subject: [PATCH 04/27] In the button show a base_url example and add a note about it --- .../documentation/buttons/generic-buttons.jsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/app-pages/documentation/buttons/generic-buttons.jsx b/src/app-pages/documentation/buttons/generic-buttons.jsx index 9c276f5..cf8dd4b 100644 --- a/src/app-pages/documentation/buttons/generic-buttons.jsx +++ b/src/app-pages/documentation/buttons/generic-buttons.jsx @@ -1,16 +1,19 @@ -import { UsaceBox, Code, Button, Text, H3 } from "../../../../lib"; +import { UsaceBox, Code, Button, Text, H3, Badge } from "../../../../lib"; +import Link from "../../../../lib/components/navigation/link"; import { CodeExample } from "../../../app-components/code-example"; import PropsTable from "../../../app-components/props-table"; import DocsPage from "../_docs-page"; +const BASE_URL = import.meta.env.BASE_URL; + const pageBreadcrumbs = [ { text: "Documentation", - href: "/#/docs", + href: `${BASE_URL}/docs`, }, { text: "Buttons", - href: "/#/docs/buttons", + href: `${BASE_URL}/docs/buttons`, }, ]; @@ -107,6 +110,7 @@ function GenericButtonsDocs() { recommended that you implement your own button using the{" "} {"
    {/* Example usage - remove if not needed */}

    Basic Usage

    @@ -116,7 +120,7 @@ function GenericButtonsDocs() { - +
    {/* Example code */} @@ -124,13 +128,14 @@ function GenericButtonsDocs() { code={`import { Button } from "@usace/groundwork"; function Component() { + const BASE_URL = import.meta.env.BASE_URL; return (
    - +
    ) } From 8700c23f4c2ede8a9bf5305314eaa00bb9155c16 Mon Sep 17 00:00:00 2001 From: Charles Graham SWT Date: Thu, 21 Aug 2025 15:21:08 -0500 Subject: [PATCH 05/27] Can't have a hash in the base for vite! --- vite.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/vite.config.js b/vite.config.js index 6fe3a1d..b51d54a 100644 --- a/vite.config.js +++ b/vite.config.js @@ -36,8 +36,8 @@ export default defineConfig(({ mode }) => { console.log("Building preview app", mode); const base = mode === "production" - ? "https://usace.github.io/groundwork/#" - : "http://localhost:5173"; + ? "https://usace.github.io/groundwork/" + : "http://localhost:5173/"; return { plugins: [react()], base: base, From 84ca7b066eb9407ba25f76bc6e4c137d42471e77 Mon Sep 17 00:00:00 2001 From: Charles Graham SWT Date: Thu, 21 Aug 2025 15:26:21 -0500 Subject: [PATCH 06/27] Remove prepended slash, add missing BASE_URL --- src/App.jsx | 4 +- src/app-pages/404.jsx | 6 +- src/app-pages/documentation/_template.jsx | 4 +- .../documentation/app-shell/index.jsx | 10 +- .../documentation/app-shell/search.jsx | 8 +- .../documentation/app-shell/site-wrapper.jsx | 10 +- .../documentation/buttons/delete-confirm.jsx | 8 +- src/app-pages/documentation/buttons/index.jsx | 12 ++- .../documentation/buttons/login-button.jsx | 6 +- .../documentation/buttons/ok-cancel.jsx | 6 +- .../documentation/buttons/popout-menu.jsx | 10 +- .../documentation/display/accordion.jsx | 6 +- src/app-pages/documentation/display/badge.jsx | 6 +- src/app-pages/documentation/display/card.jsx | 2 +- .../documentation/display/divider.jsx | 8 +- .../documentation/display/headings.jsx | 8 +- src/app-pages/documentation/display/hero.jsx | 6 +- src/app-pages/documentation/display/index.jsx | 24 +++-- src/app-pages/documentation/display/modal.jsx | 6 +- .../documentation/display/progress-bar.jsx | 8 +- .../documentation/display/skeleton.jsx | 8 +- src/app-pages/documentation/display/table.jsx | 8 +- src/app-pages/documentation/display/text.jsx | 8 +- .../documentation/forms/checkboxes.jsx | 8 +- .../documentation/forms/color-input.jsx | 8 +- .../documentation/forms/date-time-inputs.jsx | 8 +- .../documentation/forms/dropdown.jsx | 8 +- .../documentation/forms/fieldset.jsx | 8 +- .../documentation/forms/file-input.jsx | 8 +- src/app-pages/documentation/forms/index.jsx | 35 +++++-- src/app-pages/documentation/forms/input.jsx | 8 +- .../documentation/forms/numeric-inputs.jsx | 8 +- .../documentation/forms/radio-group.jsx | 8 +- .../documentation/forms/text-input.jsx | 8 +- .../documentation/forms/textarea.jsx | 8 +- .../getting-started/adding-tailwind.jsx | 13 ++- .../getting-started/client-side-routing.jsx | 54 ++++++---- .../getting-started/package-maintenance.jsx | 8 +- .../getting-started/quick-start-guide.jsx | 13 ++- src/app-pages/documentation/index.jsx | 6 +- .../documentation/layout/container.jsx | 8 +- src/app-pages/documentation/layout/index.jsx | 16 ++- .../documentation/layout/usace-box.jsx | 8 +- .../documentation/navigation/breadcrumbs.jsx | 27 +++-- .../documentation/navigation/index.jsx | 10 +- .../navigation/link-provider.jsx | 8 +- .../documentation/navigation/sidebar.jsx | 8 +- .../documentation/navigation/tabs.jsx | 8 +- src/app-pages/documentation/types/index.jsx | 16 ++- src/app-pages/documentation/types/link.jsx | 8 +- src/app-pages/documentation/types/tab.jsx | 8 +- src/app-pages/home.jsx | 5 +- src/example-popout-links.js | 12 ++- src/example-regular-links.js | 12 ++- src/nav-links.js | 98 ++++++++++--------- 55 files changed, 401 insertions(+), 250 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index ae62879..9a252e0 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -15,7 +15,7 @@ function App() { if (hash === "") { window.setTimeout(() => { - doUpdateUrl("/#/"); + doUpdateUrl("#/"); }, 100); return null; } @@ -25,7 +25,7 @@ function App() { for (let i = 1; i <= linkCount; i++) { const link = { id: i, - href: "/#", + href: `#/`, text: `${prefix} Link ${i}`, }; links.push(link); diff --git a/src/app-pages/404.jsx b/src/app-pages/404.jsx index 9701e2f..402f967 100644 --- a/src/app-pages/404.jsx +++ b/src/app-pages/404.jsx @@ -1,5 +1,7 @@ import { Button, H2 } from "../../lib"; +const BASE_URL = import.meta.env.BASE_URL; + function NotFound() { return (
    @@ -10,10 +12,10 @@ function NotFound() {
    - -