fix: add cache-buster for provided images

packages/design-system/src/components/OcIcon/OcIcon.vue

@@ -27,7 +27,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import InlineSvg from 'vue-inline-svg'
-import { FillType, SizeType, uniqueId, getIconUrlPrefix } from '../../helpers'
+import { FillType, SizeType, uniqueId, getIconUrlPrefix, addVersionToAssetUrl } from '../../helpers'
 
 InlineSvg.name = 'inline-svg'
 
@@ -89,12 +89,13 @@ const emit = defineEmits<Emits>()
 const svgTitleId = computed(() => uniqueId('oc-icon-title-'))
 
 const nameWithFillType = computed(() => {
-  const path = `${getIconUrlPrefix()}icons/`
+  const prefix = getIconUrlPrefix()
   const lowerFillType = fillType.toLowerCase()
-  if (lowerFillType === 'none') {
-    return `${path}${name}.svg`
-  }
-  return `${path}${name}-${lowerFillType}.svg`
+
+  const filename = lowerFillType === 'none' ? `${name}.svg` : `${name}-${lowerFillType}.svg`
+
+  const url = `${prefix}icons/${filename}`
+  return addVersionToAssetUrl(url)
 })
 
 const tailwindSize = computed(() => {

packages/design-system/src/helpers/assets.ts

@@ -0,0 +1,15 @@
+// Vite injects this at build time
+declare const process: { env: { PACKAGE_VERSION?: string } }
+
+/**
+ * Adds version query parameter to asset URLs for cache busting
+ */
+export const addVersionToAssetUrl = (url: string): string => {
+  const version = process.env.PACKAGE_VERSION
+  if (!version) {
+    return url
+  }
+
+  const separator = url.includes('?') ? '&' : '?'
+  return `${url}${separator}v=${version}`
+}

packages/design-system/src/helpers/index.ts

@@ -4,6 +4,7 @@ export * from './constants'
 export * from './icons'
 export * from './installOptions'
 export * from './isComposingEvent'
+export * from './assets'
 export * from './table'
 export * from './tailwind'
 export * from './types'

packages/web-pkg/src/components/NoContentMessage.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="no-content-message flex flex-col justify-center items-center text-center">
     <component
-      :is="isSvg ? InlineSvg : 'oc-image'"
+      :is="imgSrc?.toLowerCase().endsWith('.svg') ? InlineSvg : 'oc-image'"
       v-if="imgSrc"
-      :src="imgSrc"
+      :src="imgSrcWithVersion"
       class="mb-4 no-content-message-image"
       width="120"
       height="120"
@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import InlineSvg from 'vue-inline-svg'
-import { FillType } from '@opencloud-eu/design-system/helpers'
+import { FillType, addVersionToAssetUrl } from '@opencloud-eu/design-system/helpers'
 
 InlineSvg.name = 'inline-svg'
 
@@ -43,7 +43,12 @@ const {
   imgSrc?: string
 }>()
 
-const isSvg = computed(() => imgSrc.toLowerCase().endsWith('.svg'))
+const imgSrcWithVersion = computed(() => {
+  if (!imgSrc) {
+    return imgSrc
+  }
+  return addVersionToAssetUrl(imgSrc)
+})
 </script>
 <style scoped>
 @reference '@opencloud-eu/design-system/tailwind';

packages/web-pkg/src/composables/resources/useLoadPreview.ts

@@ -7,6 +7,7 @@ import {
   Resource,
   SpaceResource
 } from '@opencloud-eu/web-client'
+import { addVersionToAssetUrl } from '@opencloud-eu/design-system/helpers'
 import { FolderViewModeConstants } from '../viewMode'
 import { usePreviewService } from '../previewService'
 import { ProcessorType } from '../../services'
@@ -113,7 +114,7 @@ export const useLoadPreview = (viewMode?: Ref<string>) => {
 
       try {
         const defaultSpaceImageBlobURLResponse: any = await httpAuthenticated.get(
-          `${unref(serverUrl)}images/default-space-icon.png`,
+          addVersionToAssetUrl(`${unref(serverUrl)}images/default-space-icon.png`),
           {
             responseType: 'blob'
           }

packages/web-runtime/src/components/Topbar/TopBar.vue

@@ -9,12 +9,9 @@
       <sidebar-nav-mobile class="flex" />
       <router-link v-if="!hideLogo" :to="homeLink">
         <picture>
-          <source
-            :srcset="currentTheme.logoMobile || currentTheme.logo"
-            media="(max-width: 959px)"
-          />
+          <source :srcset="logoMobileWithVersion" media="(max-width: 959px)" />
           <oc-image
-            :src="currentTheme.logo"
+            :src="logoWithVersion"
             :alt="sidebarLogoAlt"
             class="oc-logo-image align-middle ml-1 h-[28px] md:h-[36px] w-auto select-none"
           />
@@ -47,6 +44,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { computed, unref } from 'vue'
+import { addVersionToAssetUrl } from '@opencloud-eu/design-system/helpers'
 import UserMenu from './UserMenu.vue'
 import Notifications from './Notifications.vue'
 import FeedbackLink from './FeedbackLink.vue'
@@ -138,6 +136,15 @@ const feedbackLinkOptions = computed(() => {
     ...(feedback.description && { description: feedback.description })
   }
 })
+
+const logoWithVersion = computed(() => {
+  return addVersionToAssetUrl(unref(currentTheme).logo)
+})
+
+const logoMobileWithVersion = computed(() => {
+  const logo = unref(currentTheme).logoMobile || unref(currentTheme).logo
+  return addVersionToAssetUrl(logo)
+})
 </script>
 <style scoped>
 @reference '@opencloud-eu/design-system/tailwind';

packages/web-runtime/src/layouts/Plain.vue

@@ -23,6 +23,7 @@ import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useRouteMeta, useThemeStore } from '@opencloud-eu/web-pkg'
 import { useRoute } from 'vue-router'
+import { addVersionToAssetUrl } from '@opencloud-eu/design-system/helpers'
 import Announcement from '../components/Announcement.vue'
 
 const { $gettext } = useGettext()
@@ -40,7 +41,8 @@ const backgroundImgStyle = computed(() => {
   return unref(backgroundImg) ? { backgroundImage: `url(${unref(backgroundImg)})` } : {}
 })
 const emblemSrc = computed(() => {
-  return unref(currentTheme).isDark ? 'images/icon-lilac.svg' : 'images/icon-petrol.svg'
+  const url = unref(currentTheme).isDark ? 'images/icon-lilac.svg' : 'images/icon-petrol.svg'
+  return addVersionToAssetUrl(url)
 })
 
 const pathIsRoot = computed(() => {