feat: ✨ update og image template

src/layouts/base.njk

@@ -10,7 +10,7 @@
         name=author.name,
         generator='eleventy'
     %}
-    {% ogImage "og-image.og.njk", { title: title } %}
+    {% ogImage "og-image.og.njk", { title: title, author: author, image: image } %}
     {% if mastodon.fediverseCreator %}
       <meta name="fediverse:creator" content="{{ mastodon.fediverseCreator }}" />
     {% endif %}

src/og-image.og.njk

@@ -1,27 +1,78 @@
-<div
+<style>
-  style="
+#top {
-    width: 100vw;
+  display: flex;
-    height: 100vh;
+  flex-flow: column nowrap;
-    padding: 64px;
+  justify-content: flex-start;
-    display: flex;
+  align-items: flex-start;
-    flex-flow: row nowrap;
+  width: 100%;
-    justify-content: flex-start;
+  height: 100%;
-    align-items: center;
+  background-color: #0f172a;
-    gap: 64px;
+  color: #e2e8f0;
-    background-color: #0f172a;
+  box-sizing: border-box;
-    color: #e2e8f0;
+  background-size: 100% 100%;
-  ">
+}
-  <div style="display: flex; flex: 0 0 256px">
-    <img
-      src="https://ref.sebin-nyshkim.net/sebin/assets/sebin-smug-icon-C3NF7g4H.png"
-      width="256"
-      height="256"
-      alt="Sebin"
-      style="border-radius: 100%; border: 8px solid currentColor" />
-  </div>
 
-  <div style="flex: 1 1 0; display: flex; flex-flow: column nowrap">
+#main {
-    <h1 style="font-size: 72px">{{ title | safe }}</h1>
+  flex: 1 1 0;
-    <h2 style="margin-top: 64px; font-size: 30px; line-height: 36px">blog.sebin-nyshkim.net</h2>
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(15 23 42 / 0.65);
+}
+
+h1 {
+  flex: 1 1 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  width: 100%;
+  padding: 64px 112px;
+  font-size: 72px;
+  text-wrap: balance;
+}
+
+#footer {
+  flex: 1 0 96px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 24px;
+  width: 100%;
+  padding: 0 24px;
+  background-color: rgb(8 47 73);
+  font-size: 28px;
+  font-weight: bold;
+}
+
+#footer #avatar {
+  flex: 0 0 64px;
+  display: flex;
+  width: 64px;
+  height: 64px;
+  background-size: 100% 100%;
+  border: 4px solid currentColor;
+  border-radius: 100%;
+}
+
+#footer #meta {
+  flex: 1 0 0;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+}
+</style>
+
+<div id="top" style="{% if image and image.src != '' %} background-image: url({{ image.src }}){% endif %}">
+  <div id="main">
+    <h1>{{ title | safe }}</h1>
+
+    <div id="footer">
+      <div id="avatar" style="{% if author and author.image != '' %} background-image: url({{ author.image }}){% endif %}"></div>
+      <div id="meta">
+        <p id="author">by {{ author.name }}</p>
+        <p id="blog">blog.sebin-nyshkim.net</p>
+      </div>
+    </div>
   </div>
 </div>

src/posts/posts.json

@@ -5,7 +5,8 @@
   "url": "https://blog.sebin-nyshkim.net",
   "author": {
     "name": "Sebin Nyshkim",
-    "href": "https://blog.sebin-nyshkim.net"
+    "href": "https://blog.sebin-nyshkim.net",
+    "image": "https://blog.sebin-nyshkim.net/img/sebin.png"
   },
   "twitter": {
     "cardType": "summary_large_image",