#4 api to load open graph metadata added

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

package.json

@@ -25,6 +25,7 @@
     "fastify-cors": "^6.0.2",
     "fastify-helmet": "^7.0.1",
     "fastify-static": "^4.5.0",
+    "open-graph-scraper": "^4.11.0",
     "vue": "^3.2.27",
     "vue-i18n": "^9.2.0-beta.30",
     "vue-router": "^4.0.12"
@@ -32,6 +33,7 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.0",
     "@types/node": "^16.11.21",
+    "@types/open-graph-scraper": "^4.8.1",
     "@vitejs/plugin-vue": "^2.0.1",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
@@ -42,6 +44,7 @@
     "eslint": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.2.0",
+    "husky": "^7.0.0",
     "jsdom": "^19.0.0",
     "nodemon": "^2.0.15",
     "pino-pretty": "^7.5.1",
@@ -53,7 +56,6 @@
     "typescript": "~4.5.4",
     "vite": "^2.7.13",
     "vitest": "^0.1.23",
-    "vue-tsc": "^0.29.8",
-    "husky": "^7.0.0"
+    "vue-tsc": "^0.29.8"
   }
 }

src/api/routes/index.ts

@@ -1,11 +1,13 @@
 import { FastifyInstance } from 'fastify'
 import { default as wishlistRoute } from './wishlist/'
+import { default as utilsRoute } from './utils/'
 
 export default {
   register: (app: FastifyInstance) => {
     return app.register(
       async (app) => {
         await app.register(wishlistRoute, { prefix: '/wishlist' })
+        await app.register(utilsRoute, { prefix: '/utils' })
       },
       { prefix: '/api' }
     )

src/api/routes/utils/index.ts

@@ -0,0 +1,6 @@
+import { FastifyInstance } from 'fastify'
+import { fetchOpenGraph } from './opengraph'
+
+export default async (app: FastifyInstance) => {
+  await app.route(fetchOpenGraph)
+}

src/api/routes/utils/opengraph.ts

@@ -0,0 +1,48 @@
+import { FastifyRequest, FastifyReply, RouteOptions } from 'fastify'
+import ogs from 'open-graph-scraper'
+
+interface fetchOpenGraphRequest extends FastifyRequest {
+  query: {
+    url: string
+  }
+}
+
+export const fetchOpenGraph = <RouteOptions>{
+  method: 'GET',
+  url: '/fetch-open-graph',
+  schema: {
+    querystring: {
+      type: 'object',
+      required: ['url'],
+      properties: {
+        url: { type: 'string', format: 'uri' },
+      },
+    },
+    response: {
+      200: {
+        type: 'object',
+        properties: {
+          title: { type: 'string' },
+          description: { type: 'string' },
+          image: { type: 'string' },
+        },
+      },
+    },
+  },
+  handler: async (request: fetchOpenGraphRequest, reply: FastifyReply) => {
+    const { result } = await ogs({
+      url: request.query.url,
+    })
+    request.log.debug(result)
+    if (result.success) {
+      const image =
+        //@ts-expect-error: url not defined
+        result.ogImage && result.ogImage.url ? result.ogImage.url : ''
+      reply.send({
+        title: result.ogTitle || '',
+        description: result.ogDescription || '',
+        image,
+      })
+    }
+  },
+}