@asd20/ui-next 2.9.0 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+# [2.10.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.9.0...ui-next-v2.10.0) (2026-05-12)
+
+
+### Bug Fixes
+
+* fix hard coded image references ([6c29df5](https://github.com/academydistrict20/asd20-ui-next/commit/6c29df52660031d64b6154d93bfb486c23545c66))
+
+
+### Features
+
+* implement cache path for hard coded images ([10e39e7](https://github.com/academydistrict20/asd20-ui-next/commit/10e39e720f6ca5f4cc4f7b5954550abbde5405c2))
+
 # [2.9.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.8.0...ui-next-v2.9.0) (2026-05-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/organisms/Asd20DistrictVideoFooter/index.vue

@@ -53,6 +53,13 @@ export default {
       const isDistrict = this.organization.title === 'Academy District 20'
       const hasExteriorPhoto = this.organization.exteriorPhotoUrl
 
+      if (isDistrict) {
+        return {
+          '--asd20-district-footer-image':
+            "url('/_media/asd20-images/page-images/asd20-footer-image.jpg')",
+        }
+      }
+
       if (!isDistrict && hasExteriorPhoto) {
         return {
           '--school-exterior-photo-url': `url(${this.organization.exteriorPhotoUrl})`,
@@ -103,7 +110,8 @@ export default {
     border-top: none;
   }
 
-  :deep(#page-footer.footer-image--school::before),:deep(#page-footer.footer-image--school::after) {
+  :deep(#page-footer.footer-image--school::before),
+  :deep(#page-footer.footer-image--school::after) {
     display: none;
   }
 
@@ -112,7 +120,7 @@ export default {
         rgba(40, 80, 180, 0.6),
         rgba(40, 80, 180, 0.6)
       ),
-      url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-footer-image.jpg');
+      var(--asd20-district-footer-image);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 20%;

package/src/components/organisms/Asd20PageFooter/index.vue

@@ -49,7 +49,9 @@
         >
           <img
             :src="
-              websiteLogoProps2.logoImageUrl ? websiteLogoProps2.logoImageUrl : ''
+              websiteLogoProps2.logoImageUrl
+                ? websiteLogoProps2.logoImageUrl
+                : ''
             "
             :alt="websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''"
           />
@@ -115,9 +117,7 @@
       />
       <asd20-button
         v-if="organization.address && organization.address.street1"
-        :link="
-          `https://www.google.com/maps/dir/${organization.address.street1} ${organization.address.city} ${organization.address.state} ${organization.address.zip}`
-        "
+        :link="`https://www.google.com/maps/dir/${organization.address.street1} ${organization.address.city} ${organization.address.state} ${organization.address.zip}`"
         icon="map"
         size="md"
         horizontal
@@ -133,7 +133,11 @@
       </asd20-button>
       <asd20-button
         v-if="organization.email"
-        :link="organization.title === 'Academy District 20' ? `https://www.asd20.org/help-desk/` : `mailto:${organization.email}`"
+        :link="
+          organization.title === 'Academy District 20'
+            ? `https://www.asd20.org/help-desk/`
+            : `mailto:${organization.email}`
+        "
         label="Contact Us"
         icon="email"
         size="md"
@@ -162,7 +166,8 @@
     <asd20-social-menu :social-links="socialLinks" />
 
     <div class="copyright">
-      Copyright &copy; {{ currentYear }} Academy District 20. All&nbsp;rights&nbsp;reserved.
+      Copyright &copy; {{ currentYear }} Academy District 20.
+      All&nbsp;rights&nbsp;reserved.
     </div>
 
     <slot />
@@ -235,7 +240,7 @@ export default {
         const hostname = url.hostname
 
         // Grab just the first part before ".asd20.org"
-        const [subdomain] = hostname.split(".asd20.org")
+        const [subdomain] = hostname.split('.asd20.org')
 
         return `${subdomain}@asd20.org`
       } catch (e) {
@@ -260,9 +265,16 @@ export default {
       const isDistrict = this.organization.title === 'Academy District 20'
       const hasExteriorPhoto = this.organization.exteriorPhotoUrl
 
+      if (isDistrict) {
+        return {
+          '--asd20-district-footer-image':
+            "url('/_media/asd20-images/page-images/asd20-footer-image.jpg')",
+        }
+      }
+
       if (!isDistrict && hasExteriorPhoto) {
         return {
-          '--school-exterior-photo-url': `url(${this.organization.exteriorPhotoUrl})`
+          '--school-exterior-photo-url': `url(${this.organization.exteriorPhotoUrl})`,
         }
       }
       return null
@@ -394,9 +406,11 @@ export default {
 }
 
 #page-footer.footer-image--district {
-  background-image:
-    linear-gradient(rgba(40, 80, 180, 0.6), rgba(40, 80, 180, 0.6)),
-    url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-footer-image.jpg');
+  background-image: linear-gradient(
+      rgba(40, 80, 180, 0.6),
+      rgba(40, 80, 180, 0.6)
+    ),
+    var(--asd20-district-footer-image);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 10%;
@@ -428,7 +442,11 @@ export default {
     left: 0;
     right: 0;
     bottom: 0;
-    background: color-mix(in srgb, var(--website-footer__background-color) 80%, transparent);
+    background: color-mix(
+      in srgb,
+      var(--website-footer__background-color) 80%,
+      transparent
+    );
     z-index: 1;
   }
 
@@ -478,7 +496,7 @@ export default {
       justify-content: space-between;
       padding-bottom: space(2);
       .footer-optional-logo {
-        display:flex;
+        display: flex;
         flex-direction: row;
         a {
           display: block;

package/src/components/organisms/Asd20PrimaryHeader/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="photostrip"></div>
+    <div
+      class="photostrip"
+      :style="photoStripStyle"
+    ></div>
 
     <section
       class="asd20-primary-header"
@@ -55,6 +58,12 @@ export default {
     userGroupsList: { type: Array, default: () => [] },
   },
   computed: {
+    photoStripStyle() {
+      return {
+        '--asd20-photo-strip-image':
+          "url('/_media/asd20-images/page-images/ASD20PhotoStrip.jpg')",
+      }
+    },
     firstMessage() {
       return this.messages.length > 0 ? this.messages[0] : null
     },
@@ -88,7 +97,7 @@ export default {
 .photostrip {
   height: 25vh;
   width: 100%;
-  background-image: url(https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/ASD20PhotoStrip.jpg);
+  background-image: var(--asd20-photo-strip-image);
   background-size: cover;
   background-position: center;
   background-attachment: scroll;
@@ -138,7 +147,7 @@ export default {
 
   /* -webkit-background-clip: text;*/
   /* -webkit-text-fill-color: transparent;*/
-  /* background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');*/
+  /* background-image: var(--asd20-header-divider-image);*/
   /* background-size: 30% auto;*/
   & :deep(.lead) {
     @include fluid-type($base-font-size * 1.2, $base-font-size * 1.4);
@@ -205,7 +214,7 @@ export default {
   /*   top: space(-1);*/
   /*   left: 0;*/
   /*   height: space(3);*/
-  /*   background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');*/
+  /*   background-image: var(--asd20-header-divider-image);*/
   /*   background-size: cover;*/
   /*   background-position: 55% top;*/
   /* }*/

package/src/components/organisms/Asd20TertiaryHeader/index.vue

@@ -2,6 +2,7 @@
   <section
     class="asd20-tertiary-header"
     aria-label="Tertiary message"
+    :style="headerStyle"
   >
     <asd20-messaging v-bind="messages[2]"></asd20-messaging>
   </section>
@@ -24,6 +25,14 @@ export default {
     grid: { type: Boolean, default: false },
     forceDisplay: { type: Boolean, default: false },
   },
+  computed: {
+    headerStyle() {
+      return {
+        '--asd20-header-divider-image':
+          "url('/_media/asd20-images/page-images/asd20-header-divider.jpg')",
+      }
+    },
+  },
 }
 </script>
 
@@ -49,7 +58,7 @@ export default {
     color: var(--website-homepage-header__secondary-title-color);
     /* -webkit-background-clip: text;*/
     /* -webkit-text-fill-color: transparent;*/
-    /* background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');*/
+    /* background-image: var(--asd20-header-divider-image);*/
     /* background-size: 30% auto;*/
   }
   & :deep(.lead) {
@@ -90,7 +99,7 @@ export default {
     top: space(-1);
     left: 0;
     height: space(2);
-    background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
+    background-image: var(--asd20-header-divider-image);
     background-size: cover;
     /* transform: translate3d(0, calc(-10% * var(--scroll-progress)), 0);*/
     /* opacity: 0.5;*/
@@ -103,7 +112,7 @@ export default {
     left: 0;
     bottom: space(-2);
     height: space(2);
-    background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
+    background-image: var(--asd20-header-divider-image);
     transform: rotateY(180deg);
     background-size: cover;
     /* transform: translate3d(0, calc(-10% * var(--scroll-progress)), 0);*/