Add a worker for opengraph image serving

.gitignore

@@ -2,3 +2,4 @@
 .code
 
 **/wrangler.toml
+**/.cargo-ok

og-images/.gitignore

@@ -0,0 +1,9 @@
+node_modules
+dist
+yarn-error.log
+
+.mf
+
+.idea
+.code
+

og-images/README.md

@@ -0,0 +1,21 @@
+# og-images
+
+Serverless proxy to serve OpenGraph images generated by [ogen](https://github.com/hellodhlyn/ogen).
+
+## Usages
+
+* TIL by WebDonalds : `https://<host>/til/<post_id>.png`
+
+## Development
+
+```shell
+# Install dependencies
+yarn
+
+# Start local development server with live reload
+yarn dev
+```
+
+## Publish
+
+See [official documents](https://developers.cloudflare.com/workers/get-started/guide#7-configure-your-project-for-deployment).

og-images/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "og-images",
+  "version": "1.0.0",
+  "type": "module",
+  "private": true,
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "scripts": {
+    "build": "esbuild --bundle --sourcemap --outdir=dist ./src/index.ts",
+    "dev": "miniflare --build-command \"yarn build\" --watch --debug"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^3.3.1",
+    "esbuild": "^0.14.21",
+    "miniflare": "^2.3.0",
+    "prettier": "^2.5.1",
+    "typescript": "^4.5.5"
+  },
+  "dependencies": {}
+}

og-images/src/binding.d.ts

@@ -0,0 +1,3 @@
+export {};
+
+declare global {}

og-images/src/handlers/til.ts

@@ -0,0 +1,82 @@
+export async function handleTIL(postID: number): Promise<Response> {
+  let post: PostInfo;
+  try {
+    post = await getPostInfo(postID);
+    if (!post) {
+      return new Response("not found", { status: 404 });
+    }
+  } catch (e) {
+    console.error(e);
+    return new Response("server error", { status: 500 });
+  }
+
+  return getImage(post);
+}
+
+type PostInfo = {
+  title: string;
+  authorName: string;
+  profileImage: string;
+};
+
+type PostQueryData = {
+  til_posts: {
+    title: string;
+    author: {
+      display_name: string;
+      profile_image: string;
+    };
+  }[];
+};
+
+const query = `
+  query($postID: bigint) {
+    til_posts(where: { id: { _eq: $postID } }, order_by: { id: desc }, limit: 1) {
+      title
+      author {
+        display_name
+        profile_image
+      }
+    }
+  }
+`;
+
+async function getPostInfo(postID: number): Promise<PostInfo> {
+  const url = "https://engaging-mustang-19.hasura.app/v1/graphql";
+  const res = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json; charset=utf-8",
+    },
+    body: JSON.stringify({
+      query,
+      variables: { postID },
+    }),
+  });
+  if (res.status !== 200) {
+    throw Error("failed to fetch post info");
+  }
+
+  const { data } = await res.json<{ data: PostQueryData }>();
+  if (!data || data.til_posts.length === 0) {
+    return null;
+  }
+
+  const post = data.til_posts[0];
+  return {
+    title: post.title,
+    authorName: post.author.display_name,
+    profileImage: post.author.profile_image,
+  };
+}
+
+async function getImage({ title, authorName, profileImage }: PostInfo): Promise<Response> {
+  const url = "https://ogen.lynlab.co.kr/generate.png";
+  const query = new URLSearchParams({
+    title,
+    author: authorName,
+    profile_image: profileImage,
+  });
+
+  return await fetch(`${url}?${query.toString()}`);
+}

og-images/src/index.ts

@@ -0,0 +1,16 @@
+import { handleTIL } from "./handlers/til";
+
+addEventListener("fetch", (event) => {
+  event.respondWith(handleRequest(event.request));
+});
+
+async function handleRequest(request: Request) {
+  const path = new URL(request.url).pathname.split("/");
+  switch (path[1]) {
+    case "til":
+      const postID = parseInt(path[2], 10);
+      return await handleTIL(postID);
+    default:
+      return new Response("not found", { status: 404 });
+  }
+}

og-images/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "lib": ["ES2020"],
+    "types": ["@cloudflare/workers-types"]
+  }
+}