Merge pull request #1484 from ASU/uds-1964

uds-1964: assets should not have absolute path

Author: mlsamuelson

packages/static-site/src/App.tsx

@@ -1,6 +1,8 @@
-import '@asu/unity-bootstrap-theme';
+import "@asu/unity-bootstrap-theme";
+// The above import statement is equivalent to the following:
+// import "@asu/unity-bootstrap-theme/dist/unity-bootstrap-theme.bundle.css";
 import "~/App.css";
-import Page from '~/components/Page';
+import Page from "~/components/Page";
 import { Outlet, ScrollRestoration } from "react-router-dom";
 
 function App(): JSX.Element {

packages/static-site/src/pages/Home.tsx

@@ -8,10 +8,9 @@ import { Divider } from "@asu/unity-react-core";
 const Home = () => {
   return (
     <>
-      <div className="uds-hero-sm">
-        <img className="hero" src="./assets/img/grey-bg.jpg" />
+      <div className="uds-hero-sm bg morse-code-black">
         <h1>
-          <span className="highlight-black">Unity Component Explorer</span>
+          <span className="highlight-gold">Unity Component Explorer</span>
         </h1>
       </div>
       <div className="container">

packages/unity-bootstrap-theme/package.json

@@ -86,7 +86,7 @@
       "default": "./src/js/data-layer.js"
     },
     "./*": "./*",
-    ".": "./dist/unity-bootstrap-theme.css"
+    ".": "./dist/css/unity-bootstrap-theme.css"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3"

packages/unity-bootstrap-theme/src/scss/_shared.scss

@@ -1,7 +1,7 @@
 // load brand rules (former design tokens)
 @import "custom-asu-variables";
 // default path for image assets (assuming the images will be hosted from the web root). Storybook and themes override this for their particular path needs
-$image-assets-path: "/img" !default;
+$image-assets-path: "../img" !default;
 
 /*
   TODO: all imports below belong to the previous bootstrap 4 package, you have to check each import and be careful when removing it.

packages/unity-bootstrap-theme/vite.config.js

@@ -61,9 +61,9 @@ const c = {
         chunkFileNames: "js/[name].[format]",
         assetFileNames: (assetInfo) => {
           if (assetInfo.originalFileNames && assetInfo.originalFileNames[0].includes("bundle")) {
-            return "unity-bootstrap-theme.bundle.[ext]";
+            return "css/unity-bootstrap-theme.bundle.[ext]";
           }
-          return "[name].[ext]";
+          return "css/[name].[ext]";
         },
         format: "es",
       },