chore: updated images process

Author: onmax

.eslintcache

@@ -8,9 +8,10 @@
  * Adapted from https://github.com/prismicio/prismic-vue/blob/68a8be98a79c4627f83ca33735f07668329fe1e3/src/PrismicImage.vue
  */
 
-import type { PrismicImageProps } from '@prismicio/vue'
+import type { FilledImageFieldImage } from '@prismicio/client'
 
-import { asImagePixelDensitySrcSet, asImageWidthSrcSet, isFilled } from '@prismicio/client'
+import type { PrismicImageProps } from '@prismicio/vue'
+import { asImagePixelDensitySrcSet, asImageWidthSrcSet } from '@prismicio/client'
 
 const props = defineProps<PrismicImageProps>()
 const { fallbackAlt, field, widths, alt, pixelDensities, imgixParams } = props
@@ -42,18 +43,15 @@ function castInt(input: string | number | undefined): number | undefined {
   return Number.isNaN(parsed) ? undefined : parsed
 }
 
-if (!isFilled.imageThumbnail(field))
-  throw new Error('Image is not filled')
-
-// Transform field to use local paths
-const localField = transformResponsiveImageFieldToLocal(field)
+const { baseUrl } = useRuntimeConfig().public
+const localField = transformResponsiveImageFieldToLocal(baseUrl, field)
 
 // asImageWidthSrcSet requires full URLs, so we use a dummy domain
 const DUMMY_DOMAIN = 'https://localhost'
 const tempField = {
   ...localField,
   url: `${DUMMY_DOMAIN}${localField.url}`,
-}
+} as FilledImageFieldImage
 
 // Transform responsive variants to use dummy domain for srcSet generation
 const responsiveViews = ['Lg', 'Md', 'Sm', 'Xs'] as const
@@ -90,13 +88,13 @@ else if (pixelDensities) {
   }
 }
 
-const ar = field.dimensions.width / field.dimensions.height
+const ar = field.dimensions ? field.dimensions.width / field.dimensions.height : 1
 
 const castedWidth = castInt(width)
 const castedHeight = castInt(height)
 
-let resolvedWidth = castedWidth ?? field.dimensions.width
-let resolvedHeight = castedHeight ?? field.dimensions.height
+let resolvedWidth = castedWidth ?? field.dimensions?.width
+let resolvedHeight = castedHeight ?? field.dimensions?.height
 
 if (castedWidth != null && castedHeight == null)
   resolvedHeight = castedWidth / ar
@@ -107,12 +105,9 @@ const image = {
   src,
   srcSet,
   alt: alt ?? (field.alt || fallbackAlt),
-  width: Math.round(resolvedWidth),
-  height: Math.round(resolvedHeight),
+  width: resolvedWidth ? Math.round(resolvedWidth) : undefined,
+  height: resolvedHeight ? Math.round(resolvedHeight) : undefined,
 }
-
-// Images are now downloaded during build time by the crawler
-// This component only handles URL transformation to local paths
 </script>
 
 <template>

app/components/ProxiedPrismicImage.vue

@@ -3,19 +3,30 @@ import type { Content } from '@prismicio/client'
 
 defineProps(getSliceComponentProps<Content.ExchangesGridSlice>())
 
-const { data: exchanges } = await useFetch('/api/exchanges')
+const { client } = usePrismic()
+const { data: exchanges } = await useAsyncData(`exchanges`, async () => {
+  try {
+    return await client.getAllByType('exchange').then(res => res.map(r => r.data))
+  }
+  catch (error) {
+    console.error(`Exchanges not found:`, error)
+    throw createError({ statusCode: 404, statusMessage: 'Exchanges not found', fatal: true })
+  }
+}, {
+  server: true,
+})
 </script>
 
 <template>
   <section bg-neutral-0 pt-0="!">
     <ul grid="~ cols-[repeat(auto-fit,minmax(200px,368px))] gap-16 justify-center">
       <li v-for="({ link, logo, name }, i) in exchanges" :key="i">
-        <NuxtLink external :to="link" flex="~ row items-center gap-x-16" nq-hoverable target="_blank">
+        <PrismicLink :field="link" flex="~ row items-center gap-x-16" nq-hoverable target="_blank">
           <ProxiedPrismicImage :field="logo!" h-full w-40 object-contain flex="~ items-center" />
           <h3 font-semibold f-text-xl>
             {{ name }}
           </h3>
-        </NuxtLink>
+        </PrismicLink>
       </li>
     </ul>
   </section>

app/slices/ExchangesGrid/index.vue

@@ -89,6 +89,7 @@ console.table({
   'GitHub Pages': isGitHubPages ? 'yes' : 'no',
   'Production': isProduction ? 'yes' : 'no',
   'Local': isLocal ? 'yes' : 'no',
+  'Base URL': process.env.NUXT_PUBLIC_BASE_URL || '/',
 })
 
 export default {

lib/env.ts

@@ -45,7 +45,8 @@ async function downloadImages(): Promise<void> {
 
     console.warn(`🔍 Analyzing ${data.allImages.length} unique Prismic images...`)
 
-    const status = await analyzeImageSync(data.allImages)
+    const { baseUrl } = useRuntimeConfig().public
+    const status = await analyzeImageSync(baseUrl, data.allImages)
     logImageSyncStatus(status)
 
     let manifest: Record<string, string[]> = {}

modules/image-downloader.ts

@@ -165,6 +165,7 @@ export default defineNuxtConfig({
       allowedOrigins: ['https://www.nimiq.com', 'https://prestaking.nimiq.network', process.env.NIMIQ_STATIC_PREVIEW].filter(Boolean) as string[],
     },
     public: {
+      baseUrl: process.env.NUXT_PUBLIC_BASE_URL || '/',
       clientNetwork: 'main-albatross',
       apiDomain: process.env.NUXT_PUBLIC_API_ENDPOINT || '',
       validatorsApi: process.env.NUXT_PUBLIC_VALIDATORS_API || 'https://validators-api-mainnet.nuxt.dev',
@@ -201,6 +202,7 @@ export default defineNuxtConfig({
         allowedOrigins: array(string()),
       }),
       public: object({
+        baseUrl: string(),
         clientNetwork: optional(string()),
         apiDomain: string(),
         validatorsApi: optional(string()),