update: .eleventy.js — make url valid for meta:image

Author: EmptyWork

.eleventy.js

@@ -13,7 +13,7 @@ import toc from "markdown-it-table-of-contents"
 import mark from "markdown-it-mark"
 import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"
 import rssPlugin from "@11ty/eleventy-plugin-rss"
-
+import link from "./src/_data/link.json" with {type: 'json'}
 dotenv.config()
 
 export default function (eleventyConfig) {
@@ -96,6 +96,12 @@ export default function (eleventyConfig) {
     return date.toISOString()
   })
 
+  eleventyConfig.addFilter("convertToValidURL", (url) => {
+    if (url.startsWith('http')) return url
+    const validURL = new URL(url, (isDevelopment) ? "http://localhost" : link.website)
+    return validURL
+  })
+
   eleventyConfig.addFilter("postYear", (dateObj) => {
     return DateTime.fromJSDate(dateObj).toLocaleString({ year: "numeric" })
   })

src/_includes/components/meta.njk

@@ -31,16 +31,16 @@
 <meta property="og:url" content="https://emptywork.my.id" />
 <meta property="og:site_name" content="EmptyWork" />
 {% if image %}
-      <meta property="og:image" content="{{ image }}" />
-      <meta itemprop="image" content="{{ image }}" />
-      <meta name="twitter:image" content="{{ image }}" />
+      <meta property="og:image" content="{{ image | convertToValidURL }}" />
+      <meta itemprop="image" content="{{ image | convertToValidURL }}" />
+      <meta name="twitter:image" content="{{ image | convertToValidURL }}" />
 {% else %}
       <meta itemprop="image"
-            content="/images/emptywork.my.id-secondary-banner.png" />
+            content="{{ link.website | development }}/images/emptywork.my.id-secondary-banner.png" />
       <meta property="og:image"
-            content="/images/emptywork.my.id-secondary-banner.png" />
+            content="{{ link.website | development }}/images/emptywork.my.id-secondary-banner.png" />
       <meta name="twitter:image"
-            content="/images/emptywork.my.id-secondary-banner.png" />
+            content="{{ link.website | development }}/images/emptywork.my.id-secondary-banner.png" />
 {% endif %}
 <meta name="twitter:card" content="summary_large_image" />
 {% if title %}