From ac404a458f9466c06ef89a3fd7c9b1bddc1ba42f Mon Sep 17 00:00:00 2001
From: e3stpavel <70956582+e3stpavel@users.noreply.github.com>
Date: Wed, 25 Sep 2024 17:10:03 +0300
Subject: [PATCH] fix(works): added endpoint extension and reduced 'getImage'
 usage

---
 src/components/product/ProductsList.tsx |  2 +-
 src/pages/api/works.json.ts             | 39 +++++++++++++++++++++++++
 src/pages/api/works/index.ts            | 27 -----------------
 3 files changed, 40 insertions(+), 28 deletions(-)
 create mode 100644 src/pages/api/works.json.ts
 delete mode 100644 src/pages/api/works/index.ts

diff --git a/src/components/product/ProductsList.tsx b/src/components/product/ProductsList.tsx
index 5cb6bdc..83e7a3f 100644
--- a/src/components/product/ProductsList.tsx
+++ b/src/components/product/ProductsList.tsx
@@ -8,7 +8,7 @@ type ProductImage = Pick<GetImageResult, 'src' | 'attributes'>
 
 async function fetcher() {
   const host = import.meta.env.DEV ? 'http://localhost:4321' : import.meta.env.SITE
-  const response = await fetch(`${host}/api/works/`)
+  const response = await fetch(`${host}/api/works.json/`)
 
   if (!response.ok) {
     throw new Error('Failed to fetch products')
diff --git a/src/pages/api/works.json.ts b/src/pages/api/works.json.ts
new file mode 100644
index 0000000..c9da627
--- /dev/null
+++ b/src/pages/api/works.json.ts
@@ -0,0 +1,39 @@
+import type { APIRoute } from 'astro'
+import { getImage } from 'astro:assets'
+
+export const GET: APIRoute = async () => {
+  const productsImages = import.meta.glob<{ default: ImageMetadata }>([
+    '/src/assets/products/**/*.{jpeg,jpg,png}',
+    '!**/og/**/*.{jpeg,jpg,png}',
+    '!**/fallback.png',
+    '!**/works/*.{jpeg,jpg,png}',
+  ], { eager: true })
+
+  const worksImages = import.meta.glob<{ default: ImageMetadata }>(
+    '/src/assets/products/works/*.{jpeg,jpg,png}',
+    { eager: true },
+  )
+
+  // resolve only unused images
+  const resolved = await Promise.all(
+    Object.values(worksImages).map(
+      async ({ default: src }) => await getImage({ src }),
+    ),
+  )
+
+  return new Response(
+    JSON.stringify([
+      ...Object.values(productsImages)
+        .map(({ default: { src, width, height } }) => ({
+          src,
+          attributes: {
+            width,
+            height,
+            loading: 'lazy',
+            decoding: 'async',
+          },
+        })),
+      ...resolved.map(({ src, attributes }) => ({ src, attributes })),
+    ]),
+  )
+}
diff --git a/src/pages/api/works/index.ts b/src/pages/api/works/index.ts
deleted file mode 100644
index bb548b1..0000000
--- a/src/pages/api/works/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { APIRoute } from 'astro'
-import { getImage } from 'astro:assets'
-
-export const GET: APIRoute = async () => {
-  const images = import.meta.glob<{ default: ImageMetadata }>([
-    '/src/assets/products/**/*.{jpeg,jpg,png}',
-    '!**/og/**/*.{jpeg,jpg,png}',
-    '!**/fallback.png',
-  ], { eager: true })
-
-  const resolved = await Promise.all(
-    Object.values(images).map(
-      async ({ default: src }) => await getImage({ src }),
-    ),
-  )
-
-  return new Response(
-    JSON.stringify(
-      resolved.map(({ src, attributes }) => ({ src, attributes })),
-    ),
-    {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    },
-  )
-}