refactor: reduce the open graph size and improve the logo in open graph. (#44)

* feat: drop the open graph png.

* feat: better blog logo in og.

* docs: drop the todo in readme.

astro.config.ts

@@ -1,7 +1,6 @@
 import mdx from '@astrojs/mdx';
 import node from '@astrojs/node';
 import { defineConfig, envField } from 'astro/config';
-import arraybuffer from 'vite-plugin-arraybuffer';
 import { astroImage } from './remark-plugins/images';
 
 // Dynamic switch the site. This is hard coded.
@@ -51,7 +50,6 @@ export default defineConfig({
     enabled: false,
   },
   vite: {
-    plugins: [arraybuffer()],
     // Add this for avoiding the needless import optimize in Vite.
     optimizeDeps: { exclude: ['@napi-rs/canvas'] },
   },

package-lock.json

@@ -28,7 +28,7 @@
         "@napi-rs/canvas": "^0.1.53",
         "@types/lodash": "^4.17.5",
         "@types/luxon": "^3.4.2",
-        "@types/node": "^20.14.2",
+        "@types/node": "^20.14.5",
         "@types/pg": "^8.11.6",
         "@types/qrcode-svg": "^1.1.4",
         "@types/unist": "^3.0.2",
@@ -42,8 +42,7 @@
         "rimraf": "^5.0.7",
         "sharp": "^0.33.4",
         "typescript": "^5.4.5",
-        "unist-util-visit": "^5.0.0",
+        "unist-util-visit": "^5.0.0"
-        "vite-plugin-arraybuffer": "^0.0.7"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -2741,9 +2740,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "20.14.2",
+      "version": "20.14.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.5.tgz",
-      "integrity": "sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==",
+      "integrity": "sha512-aoRR+fJkZT2l0aGOJhuA8frnCSoNX6W7U2mpNq63+BxBIj5BQFt8rHy627kijCmm63ijdSdwvGgpUsU6MBsZZA==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -3993,9 +3992,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.803",
+      "version": "1.4.805",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.803.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.805.tgz",
-      "integrity": "sha512-61H9mLzGOCLLVsnLiRzCbc63uldP0AniRYPV3hbGVtONA1pI7qSGILdbofR7A8TMbOypDocEAjH/e+9k1QIe3g==",
+      "integrity": "sha512-8W4UJwX/w9T0QSzINJckTKG6CYpAUTqsaWcWIsdud3I1FYJcMgW9QqT1/4CBff/pP/TihWh13OmiyY8neto6vw==",
       "license": "ISC"
     },
     "node_modules/emmet": {
@@ -8708,13 +8707,6 @@
         }
       }
     },
-    "node_modules/vite-plugin-arraybuffer": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/vite-plugin-arraybuffer/-/vite-plugin-arraybuffer-0.0.7.tgz",
-      "integrity": "sha512-c4Egxj7NUGco2Ggw9KUBToOxuc7Ws7mWm0hz/QnaT5Ph8ycC7ypMBOD31NuhPSx+wdUvgIbS1XpMvJLSdHakPA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/vitefu": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",

package.json

@@ -60,7 +60,7 @@
     "@napi-rs/canvas": "^0.1.53",
     "@types/lodash": "^4.17.5",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.5",
     "@types/pg": "^8.11.6",
     "@types/qrcode-svg": "^1.1.4",
     "@types/unist": "^3.0.2",
@@ -74,7 +74,6 @@
     "rimraf": "^5.0.7",
     "sharp": "^0.33.4",
     "typescript": "^5.4.5",
-    "unist-util-visit": "^5.0.0",
+    "unist-util-visit": "^5.0.0"
-    "vite-plugin-arraybuffer": "^0.0.7"
   }
 }

src/env.d.ts

@@ -1,4 +1,3 @@
 /// <reference path="../.astro/env.d.ts" />
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
-/// <reference types="vite-plugin-arraybuffer/types" />

src/helpers/images.ts

@@ -52,7 +52,6 @@ export const blurStyle = (image: Image) => ({
 
 // Copied and modified https://github.com/zce/velite/blob/main/src/assets.ts
 export const imageMetadata = async (publicPath: string): Promise<Image> => {
-  // Load for sharp on demand for avoiding the resolver issues in production.
   const { default: sharp } = await import('sharp');
 
   if (!publicPath.startsWith('/')) {

src/pages/og/[slug].png.ts

@@ -2,8 +2,8 @@ import { defaultOpenGraph, drawOpenGraph } from '@/helpers/og';
 import { getPage, getPost, pages, posts } from '@/helpers/schema';
 import type { APIRoute } from 'astro';
 
-const fallback = () =>
+const fallback = async () =>
-  new Response(defaultOpenGraph, {
+  new Response(await defaultOpenGraph(), {
     headers: { 'Content-Type': 'image/png' },
   });
 
@@ -12,7 +12,7 @@ export const prerender = true;
 export const GET: APIRoute = async ({ params }) => {
   const slug = params.slug;
   if (!slug) {
-    return fallback();
+    return await fallback();
   }
 
   let title: string;
@@ -25,7 +25,7 @@ export const GET: APIRoute = async ({ params }) => {
     // Fallback to query from pages
     const page = getPage(slug);
     if (!page) {
-      return fallback();
+      return await fallback();
     }
 
     title = page.title;