feat: new feed post about stickerimage

build/generateOpengraph.js

@@ -56,22 +56,41 @@ const generateImage = async (path, folder, file) => {
   ctx.font = "56pt Pretendard"
   ctx.fillText(info.title, 152, 128)
 
-  if (folder === "feed") {
-    if (info.description.length > 64) {
-      ctx.fillStyle = "#a1a1aa"
-      ctx.font = "32pt Pretendard"
-      ctx.fillText(info.description.slice(0, 70), 152, 198)
-      ctx.fillText(info.description.slice(70, 150) + "...", 152, 248)
-    } else {
-      ctx.fillStyle = "#a1a1aa"
-      ctx.font = "32pt Pretendard"
-      ctx.fillText(
-        info.description.length > 64
-          ? info.description.slice(0, 70) + "..."
-          : info.description,
-        152,
-        198
+  if (folder === "./content/feed") {
+    if (info.cover && info.cover.includes(".jpg")) {
+      const publicRoot = "./public"
+
+      await PImage.decodeJPEGFromStream(
+        fs.createReadStream(`${publicRoot}${info.cover}`)
       )
+        .then((img) => {
+          const imgWidth = img.width
+          const imgHeight = img.height
+          const aspectRatio = imgWidth / imgHeight
+
+          const imgWidthCalculated = 896
+          const imgHeightCalculated = imgWidthCalculated / aspectRatio
+
+          ctx.drawImage(img, 152, 280, imgWidthCalculated, imgHeightCalculated)
+        })
+        .catch((e) => console.log("Error: ", e))
+    } else if (!info.cover) {
+      if (info.description.length > 64) {
+        ctx.fillStyle = "#a1a1aa"
+        ctx.font = "32pt Pretendard"
+        ctx.fillText(info.description.slice(0, 70), 152, 198)
+        ctx.fillText(info.description.slice(70, 150) + "...", 152, 248)
+      } else {
+        ctx.fillStyle = "#a1a1aa"
+        ctx.font = "32pt Pretendard"
+        ctx.fillText(
+          info.description.length > 64
+            ? info.description.slice(0, 70) + "..."
+            : info.description,
+          152,
+          198
+        )
+      }
     }
   } else {
     ctx.fillStyle = "#a1a1aa"
@@ -85,7 +104,11 @@ const generateImage = async (path, folder, file) => {
     )
   }
 
-  if (info.cover && info.cover.includes(".jpg")) {
+  if (
+    info.cover &&
+    info.cover.includes(".jpg") &&
+    folder !== "./content/feed"
+  ) {
     const publicRoot = "./public"
 
     await PImage.decodeJPEGFromStream(

content/feed/stickerimage.md

@@ -0,0 +1,15 @@
+---
+title: stickerimage.com launched
+description: A small project I've done in a 48 hour sprint.
+type: writing
+date: 21 / 01 / 2024
+cover: /images/feed/stickerimage/memoji-laptop-community.jpg
+---
+
+# stickerimage.com – The small laptop sticker customizer
+
+![stickerimage](/images/feed/stickerimage/memoji-laptop-community.jpg)
+
+I've been working on a small project in the last 48 hours. It's called [stickerimage.com](https://stickerimage.com) and it's a small laptop sticker customizer. You can upload your own Memoji, add stickers, and customize the position and rotation of it.
+
+It got a lot of attention on X, so thanks everyone for checking it out. I built it for fun, there is no further intention or business model behind it. If I build something real, I'll let you know.

pages/feed/index/+Page.tsx

@@ -51,7 +51,7 @@ export default function Page({
                     : "mb-24 md:mb-48"
                 }
               >
-                <div class="flex items-center justify-between">
+                <div class="flex items-center justify-between mb-4">
                   <div class="flex items-center gap-1 mb-2 text-zinc-400 dark:text-zinc-500 text-sm flex-wrap">
                     {post.type === "writing" ? (
                       <div class="text-sm flex items-center gap-1.5">