feat: images served via external resource (#309)

next-orders · Feb 20, 2025 · 025736e · 025736e
1 parent e19cff5
commit 025736e
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 27 deletions.
diff --git a/apps/web-app/.env.example b/apps/web-app/.env.example
@@ -7,6 +7,9 @@ NUXT_SESSION_PASSWORD=""
 # Locale for Nuxt I18n
 NUXT_PUBLIC_LOCALE="en"
 
+# URL to media server (probably s3 bucket with static URL)
+NUXT_PUBLIC_MEDIA_URL=""
+
 # S3 file storage
 NUXT_S3_BUCKET=""
 NUXT_S3_REGION=""

diff --git a/apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue b/apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue
@@ -1,6 +1,6 @@
 <template>
   <ClientOnly>
-    <div class="px-0 py-0 flex flex-row gap-0 justify-center bg-(--ui-bg-elevated) rounded-xl">
+    <div class="p-0 flex flex-row gap-0 justify-center bg-(--ui-bg-elevated) rounded-xl">
       <UButton
         v-if="channel?.isDeliveryAvailable"
         class="w-full justify-center"

diff --git a/apps/web-app/app/components/Cart/Line.vue b/apps/web-app/app/components/Cart/Line.vue
@@ -2,12 +2,8 @@
   <div class="mb-4 flex flex-row gap-2 items-center justify-between">
     <NuxtLink :to="productUrl">
       <div class="max-w-[15rem] flex flex-row gap-2 flex-nowrap items-center cursor-pointer active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200 group">
-        <div class="relative w-14 h-14 aspect-square">
-          <ProductImage
-            :id="line?.productVariant.product.mediaId"
-            size="xs"
-            class="xl:grayscale xl:contrast-75 xl:brightness-125 group-hover:grayscale-0 group-hover:contrast-100 group-hover:brightness-100"
-          />
+        <div class="relative size-14 aspect-square">
+          <ProductImage :id="line?.productVariant.product.mediaId" size="xs" />
         </div>
 
         <div>
@@ -18,7 +14,7 @@
             <div class="text-sm font-medium tracking-tight">
               {{ formatNumberToLocal(line?.productVariant.gross) }} <span class="text-xs">{{ getCurrencySign(channel?.currencyCode) }}</span>
             </div>
-            <div class="text-sm text-neutral-500 dark:text-white font-light">
+            <div class="text-sm text-(--ui-text-muted) font-light">
               {{ variant?.weightValue }}{{ getWeightLocalizedUnit(variant?.weightUnit) }}
             </div>
           </div>

diff --git a/apps/web-app/app/components/Cart/LineCounter.vue b/apps/web-app/app/components/Cart/LineCounter.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="flex flex-row justify-between items-center bg-(--ui-bg-elevated) w-20 min-w-[5.5rem] min-h-12 rounded-2xl px-1 py-2">
+  <div class="flex flex-row justify-between items-center bg-(--ui-bg-elevated) w-20 min-w-[5.5rem] min-h-12 rounded-xl px-1 py-2">
     <button
       aria-label="Minus"
-      class="flex flex-row items-center px-1 py-1 rounded-xl lg:hover:scale-90 lg:hover:bg-(--ui-bg-elevated) duration-200"
+      class="flex flex-row items-center p-1 rounded-xl lg:hover:scale-90 lg:hover:bg-(--ui-bg-muted) duration-200"
       @click="changeLineQuantity(lineId, 'decrement')"
     >
-      <Icon :name="icons.minus" class="w-5 h-5" />
+      <Icon :name="icons.minus" class="size-5" />
     </button>
 
     <div class="text-base">
@@ -14,10 +14,10 @@
 
     <button
       aria-label="Plus"
-      class="flex flex-row items-center px-1 py-1 rounded-xl lg:hover:scale-90 lg:hover:bg-(--ui-bg-elevated) duration-200"
+      class="flex flex-row items-center p-1 rounded-xl lg:hover:scale-90 lg:hover:bg-(--ui-bg-muted) duration-200"
       @click="changeLineQuantity(lineId, 'increment')"
     >
-      <Icon :name="icons.plus" class="w-5 h-5" />
+      <Icon :name="icons.plus" class="size-5" />
     </button>
   </div>
 </template>

diff --git a/apps/web-app/app/components/Cart/index.vue b/apps/web-app/app/components/Cart/index.vue
@@ -4,16 +4,16 @@
       <div class="h-screen overflow-y-auto">
         <div class="mb-48">
           <div class="mb-4 flex flex-row justify-between items-center">
-            <p class="text-2xl font-medium">
+            <h3 class="text-2xl font-medium">
               {{ $t('app.cart.title') }}
-            </p>
+            </h3>
 
             <button
               aria-label="Close"
               class="block xl:hidden rounded-xl lg:hover:scale-90 hover:bg-neutral-100 duration-200"
               @click="isCartDrawerOpened = !isCartDrawerOpened"
             >
-              <Icon :name="icons.close" class="w-8 h-8" />
+              <Icon :name="icons.close" class="size-8" />
             </button>
           </div>
 

diff --git a/apps/web-app/app/components/ProductImage.vue b/apps/web-app/app/components/ProductImage.vue
@@ -9,7 +9,7 @@
       alt=""
       :loading="lazy ? 'lazy' : 'eager'"
       class="rounded-xl w-full"
-      :src="`/api/file/${id}/${sizePx}.jpg`"
+      :src="`${finalProductUrl}/${id}/${sizePx}.jpg`"
       :sizes="sizes"
       :srcset="srcset"
     >
@@ -40,6 +40,9 @@ const sizesMap = {
 const sizePx = sizesMap[size]
 const sizes = `${sizePx}px`
 
-const srcset = computed(() => `/api/file/${id}/${sizePx}.jpg ${sizePx}w`)
-const srcsetWebp = computed(() => `/api/file/${id}/${sizePx}.webp ${sizePx}w`)
+const { public: publicEnv } = useRuntimeConfig()
+const finalProductUrl = `${publicEnv.mediaUrl}/products`
+
+const srcset = computed(() => `${finalProductUrl}/${id}/${sizePx}.jpg ${sizePx}w`)
+const srcsetWebp = computed(() => `${finalProductUrl}/${id}/${sizePx}.webp ${sizePx}w`)
 </script>
diff --git a/apps/web-app/app/components/modal/DeliveryInfo.vue b/apps/web-app/app/components/modal/DeliveryInfo.vue
@@ -6,9 +6,9 @@
       </div>
 
       <div v-if="channel?.minAmountForDelivery && checkout?.deliveryMethod === 'DELIVERY'">
-        <div class="mt-8 mb-2 text-xl font-medium">
+        <h3 class="mt-8 mb-2 text-xl font-medium">
           {{ $t('common.more-information') }}
-        </div>
+        </h3>
 
         <div class="mb-2 flex flex-row justify-between">
           <div>{{ $t('app.minimum-order-value') }}</div>

diff --git a/apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue b/apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue
@@ -51,7 +51,7 @@
 
     <div class="mt-6 flex flex-col xl:flex-row justify-between gap-4">
       <div v-if="product?.description">
-        <div class="mb-1 font-medium text-neutral-400">
+        <div class="mb-1 font-medium text-(--ui-text-muted)">
           {{ $t('common.description') }}
         </div>
         <div class="leading-snug">
@@ -60,10 +60,10 @@
       </div>
 
       <div v-if="isNutritionShown">
-        <div class="mb-1 font-medium text-neutral-400">
+        <div class="mb-1 font-medium text-(--ui-text-muted)">
           {{ $t('common.nutrition.value-title') }}
         </div>
-        <div class="mt-2 px-4 py-4 w-fit flex flex-row gap-4 bg-neutral-100 dark:bg-neutral-500 rounded-2xl">
+        <div class="mt-2 p-4 w-fit flex flex-row gap-4 bg-(--ui-bg-muted) rounded-xl">
           <div>
             <div class="font-medium">
               {{ selectedVariant?.calories }}

diff --git a/apps/web-app/app/pages/catalog/[categorySlug]/index.vue b/apps/web-app/app/pages/catalog/[categorySlug]/index.vue
@@ -6,7 +6,7 @@
   </h1>
   <div>{{ $t('app.category-page-description') }}</div>
 
-  <div class="mt-4 max-w-7xl grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-2">
+  <div class="mt-4 max-w-7xl grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 md:gap-6">
     <ProductCard
       v-for="product in categoryProducts"
       :key="product.id"

diff --git a/apps/web-app/app/pages/index.vue b/apps/web-app/app/pages/index.vue
@@ -2,7 +2,7 @@
   <CommandCenterStaffBar v-if="user?.isStaff" class="mb-4" />
   <MaintenanceMessage v-if="channel?.isActive === false || !activeMenu || (!channel?.isPickupAvailable && !channel?.isDeliveryAvailable)" />
 
-  <h1 class="mb-2 text-3xl font-medium">
+  <h1 class="mb-2 text-3xl md:text-4xl font-medium">
     {{ channel?.name }}
   </h1>
   <div class="mb-8">

diff --git a/apps/web-app/nuxt.config.ts b/apps/web-app/nuxt.config.ts
@@ -13,8 +13,8 @@ export default defineNuxtConfig({
   css: ['~/assets/css/styles.css'],
   runtimeConfig: {
     channelId: 'burger',
-    storageProductsDirectory: 'products',
     public: {
+      mediaUrl: '',
       projectUrl: 'https://github.com/next-orders/food',
       locale: 'en',
     },