move good api to vue backend

api/pages.js

@@ -1,6 +1,9 @@
 export const getItems = (path) => {
     return $fetch(`https://newapi.mixdrinks.org/api${path}`)
 }
+export const getGood = (path) => {
+    return $fetch(`/api${path}`)
+}
 export const getCoctails = (path, fetchWIXUP) => {
     return fetchWIXUP(`https://newapi.mixdrinks.org/api/filter${path}`)
 }

pages/goods/[id].vue

@@ -12,7 +12,7 @@
 <script>
 import { defineComponent, unref } from 'vue'
 import { useAsyncData, useNuxtApp, useRoute } from 'nuxt/app'
-import { getItems, getCoctails } from '~~/api/pages'
+import { getGood, getCoctails } from '~~/api/pages'
 import { querySTR } from '~~/utils/querySTR'
 
 import ItemsPage from '~~/components/items/ItemsPage.vue'
@@ -31,7 +31,7 @@ export default defineComponent({
         const { data, refresh } = await useAsyncData(async () => {
             const [cocktailsFull, items] = await Promise.all([
                 getCoctails(getPath(), $fetchWIXUP),
-                getItems(route.path)
+                getGood(route.path)
             ])
             return { cocktailsFull, items }
         })

server/api/goods/[slug].get.js

@@ -0,0 +1,52 @@
+import { defineEventHandler } from 'h3'
+
+import { db } from '~/server/utils/mongo'
+
+import * as dotenv from 'dotenv'
+
+dotenv.config()
+
+const imageDomain = process.env.IMAGE_DOMAIN
+
+const formats = ['webp', 'jpg']
+
+const buildOgImage = (id) => {
+    return `${imageDomain}/goods/${id}/256/${id}.jpg`;
+};
+
+const buildGoodDetailsImage = (slug) => {
+    const sizes = [
+        { responseSize: "414px", imageSize: "500" },
+        { responseSize: "0", imageSize: "334" }
+    ];
+
+    return formats.flatMap(format =>
+        sizes.map(size => ({
+            srcset: `${imageDomain}/v2/goods/${slug}/${size.imageSize}.${format}`,
+            media: `screen and (min-width: ${size.responseSize})`,
+            type: `image/${format}`
+        }))
+    );
+}
+
+async function getGoodBySlug(slug) {
+    return db
+        .collection('goods')
+        .findOne({ slug: slug })
+}
+
+export default defineEventHandler(async (req) => {
+    const slug = req.context.params.slug;
+
+    const good = await getGoodBySlug(slug);
+    return {
+        id: good.id,
+        slug: good.slug,
+        name: good.name,
+        about: good.about,
+        images: buildGoodDetailsImage(good.slug),
+        meta: {
+            ogImage: buildOgImage(good.id),
+        },
+    }
+})