fix(client): load assets relative using window.location

Fixes #112

Author: harlan-zw

packages/client/App.vue

@@ -220,7 +220,7 @@ useTitle(`${website.replace(/https?:\/\/(www.)?/, '')} | Unlighthouse`)
               />
             </div>
           </div>
-          <div class="w-full min-w-1500px 2xl:(max-h-[calc(100vh-100px)]) lg:max-h-[calc(100vh-205px)] sm:max-h-[calc(100vh-220px)] max-h-[calc(100vh-250px)]">
+          <div class="w-full min-w-1500px pr-3 overflow-y-auto 2xl:(max-h-[calc(100vh-100px)]) lg:max-h-[calc(100vh-205px)] sm:max-h-[calc(100vh-220px)] max-h-[calc(100vh-250px)]">
             <div v-if="Object.values(searchResults).length === 0" class="px-4 py-3">
               <template v-if="searchText">
                 <p class="mb-2">

packages/client/components/Cell/CellImageOutline.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { UnlighthouseColumn, UnlighthouseRouteReport } from '@unlighthouse/core/src'
+import { resolveArtifactPath } from '../../logic'
 
 const props = defineProps<{
   item: any
@@ -71,7 +72,7 @@ onMounted(() => {
       height: img.naturalHeight,
     }
   }
-  img.src = `${props.report.artifactUrl}/full-screenshot.jpeg`
+  img.src = resolveArtifactPath(props.report, '/full-screenshot.jpeg')
 })
 
 const styles = computed(() => {
@@ -104,7 +105,7 @@ const styles = computed(() => {
     backgroundPositionY: `${-(positions.screenshot.top * zoomFactor)}px`,
     backgroundPositionX: `${-(positions.screenshot.left * zoomFactor)}px`,
     backgroundSize: `${screenshot.value.width * zoomFactor}px ${screenshot.value.height * zoomFactor}px`,
-    backgroundImage: `url('${props.report.artifactUrl}/full-screenshot.jpeg')`,
+    backgroundImage: `url('${resolveArtifactPath(props.report, '/full-screenshot.jpeg')}')`,
   }
 
   const marker = {

packages/client/components/Cell/CellRouteName.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { UnlighthouseColumn, UnlighthouseRouteReport } from '@unlighthouse/core'
-import { apiUrl, categories, device, iframeModalUrl, isModalOpen, isOffline } from '../../logic'
+import { apiUrl, categories, device, iframeModalUrl, isModalOpen, isOffline, resolveArtifactPath } from '../../logic'
 
 const props = defineProps<{
   report: UnlighthouseRouteReport
@@ -40,12 +40,12 @@ const thumbnail = computed(() => {
   const mobileProps = device === 'mobile' ? { class: 'w-68px h-112px' } : { class: 'h-82px w-112px' }
   if (categories.includes('performance')) {
     return {
-      src: `${props.report.artifactUrl}/screenshot.jpeg`,
+      src: resolveArtifactPath(props.report, '/screenshot.jpeg'),
       ...mobileProps,
     }
   }
   return {
-    src: `${props.report.artifactUrl}/full-screenshot.jpeg`,
+    src: resolveArtifactPath(props.report, '/full-screenshot.jpeg'),
     ...mobileProps,
   }
 })
@@ -81,6 +81,6 @@ const thumbnail = computed(() => {
     </div>
   </div>
   <teleport v-if="isModalOpen && showingModal" to="#modal-portal">
-    <img :src="`${report.artifactUrl}/full-screenshot.jpeg`" alt="full screenshot" class="mx-auto">
+    <img :src="resolveArtifactPath(props.report, '/full-screenshot.jpeg')" alt="full screenshot" class="mx-auto">
   </teleport>
 </template>

packages/client/logic/state.ts

@@ -6,7 +6,7 @@ import CellScoreSingle from '../components/Cell/CellScoreSingle.vue'
 import CellScoresOverview from '../components/Cell/CellScoresOverview.vue'
 import { useFetch } from './fetch'
 import { sorting } from './search'
-import { categories, columns, isStatic, wsUrl } from './static'
+import { categories, columns, isStatic, resolveArtifactPath, wsUrl } from './static'
 
 export const activeTab = ref(0)
 
@@ -24,7 +24,7 @@ export function openDebugModal() {
   isDebugModalOpen.value = true
 }
 export function openLighthouseReportIframeModal(report: UnlighthouseRouteReport, tab?: string) {
-  const path = `${report.artifactUrl}/lighthouse.html`
+  const path = resolveArtifactPath(report, '/lighthouse.html')
   iframeModalUrl.value = `${path}${tab ? `#${tab}` : ''}`
   isDebugModalOpen.value = false
   isModalOpen.value = true

packages/client/logic/static.ts

@@ -1,3 +1,4 @@
+import type { UnlighthouseRouteReport } from '@unlighthouse/core'
 // pull out client accessible options
 import MdiAccessibility from '~icons/mdi/accessibility'
 import MdiCellphone from '~icons/mdi/cellphone'
@@ -7,7 +8,7 @@ import MdiViewDashboard from '~icons/mdi/view-dashboard'
 import MdiWeb from '~icons/mdi/web'
 import MdiWorld from '~icons/mdi/world'
 import { startCase } from 'lodash-es'
-import { $URL } from 'ufo'
+import { $URL, joinURL } from 'ufo'
 import CellColorContrast from '../components/Cell/CellColorContrast.vue'
 import CellImage from '../components/Cell/CellImage.vue'
 import CellImageIssues from '../components/Cell/CellImageIssues.vue'
@@ -41,6 +42,11 @@ const {
 
 export const isStatic = window.__unlighthouse_static
 
+export function resolveArtifactPath(report: UnlighthouseRouteReport, file: string) {
+  const withoutBase = report.artifactUrl.replace(basePath, '')
+  return joinURL(window.location.pathname, withoutBase, file) // dynamic base
+}
+
 export { apiUrl, basePath, device, dynamicSampling, groupRoutesKey, lighthouseOptions, throttle, wsUrl }
 
 export const website = new $URL(site).origin