Upgrade og-img and refactor implementation

website/package.json

@@ -46,7 +46,7 @@
     "eslint-plugin-qwik": "1.1.5",
     "gray-matter": "^4.0.3",
     "netlify-cli": "^15.0.0",
-    "og-img": "^0.1.0",
+    "og-img": "^0.2.0",
     "postcss": "^8.4.27",
     "prettier": "2.8.8",
     "rehype-external-links": "^2.1.0",

website/src/routes/og-image/index.ts

@@ -1,39 +1,35 @@
 import type { RequestHandler } from '@builder.io/qwik-city';
-import { ImageResponse, html } from 'og-img';
-
-async function getFontData(fileName: string) {
-  const resposne = await fetch(
-    `${import.meta.env.PUBLIC_WEBSITE_URL}/fonts/${fileName}`
-  );
-  return resposne.arrayBuffer();
-}
+import { fetchFont, ImageResponse, html } from 'og-img';
 
 export const onGet: RequestHandler = async ({ send, url }) => {
   // Get data from search params
   const title = url.searchParams.get('title');
   const description = url.searchParams.get('description');
   const path = url.searchParams.get('path');
 
+  // Create font directory URL
+  const fontDirectory = import.meta.env.PUBLIC_WEBSITE_URL + '/fonts';
+
   // Create Lexend 400 font object
   const lexend400 = {
     name: 'Lexend',
-    data: await getFontData('lexend-400.ttf'),
+    data: await fetchFont(fontDirectory + '/lexend-400.ttf'),
     style: 'normal',
     weight: 400,
   } as const;
 
   // Create Lexend 500 font object
   const lexend500 = {
     name: 'Lexend',
-    data: await getFontData('lexend-500.ttf'),
+    data: await fetchFont(fontDirectory + '/lexend-500.ttf'),
     style: 'normal',
     weight: 500,
   } as const;
 
   // Create Lexend Exa 500 font object
   const lexendExa500 = {
     name: 'Lexend Exa',
-    data: await getFontData('lexend-exa-500.ttf'),
+    data: await fetchFont(fontDirectory + '/lexend-exa-500.ttf'),
     style: 'normal',
     weight: 500,
   } as const;