From 2ebe63ffff4a9638e2324cb4bad38168a8d670d6 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Wed, 18 Feb 2026 17:17:30 +0100
Subject: [PATCH] fix: use eleventyComputed for OG slug to avoid Nunjucks race
 condition

Eleventy 3.x renders Nunjucks templates in parallel, causing page.url
to return wrong values in {% set %} tags. This caused OG images to be
mismatched between pages (e.g., bookmark showed note's OG image).

Move ogSlug and hasOgImage computation to eleventyComputed, which runs
during the sequential data cascade phase before parallel rendering.
The computed values are then available as plain template variables.

Refs: https://github.com/11ty/eleventy/issues/3183
---
 _data/eleventyComputed.js  | 33 +++++++++++++++++++++++++++++++++
 _includes/layouts/base.njk | 13 ++++++-------
 2 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 _data/eleventyComputed.js

diff --git a/_data/eleventyComputed.js b/_data/eleventyComputed.js
new file mode 100644
index 0000000..2b58219
--- /dev/null
+++ b/_data/eleventyComputed.js
@@ -0,0 +1,33 @@
+/**
+ * Computed data resolved during the data cascade (sequential, per-page).
+ *
+ * Eleventy 3.x renders Nunjucks templates in parallel, which causes
+ * `page.url` and `page.fileSlug` to return wrong values when read
+ * via {% set %} in templates. By computing OG-related values here,
+ * they are resolved before parallel rendering begins.
+ *
+ * See: https://github.com/11ty/eleventy/issues/3183
+ */
+
+import { existsSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default {
+  ogSlug: (data) => {
+    const url = data.page?.url;
+    if (!url) return "";
+    return url.replace(/\/$/, "").split("/").pop();
+  },
+
+  hasOgImage: (data) => {
+    const url = data.page?.url;
+    if (!url) return false;
+    const slug = url.replace(/\/$/, "").split("/").pop();
+    if (!slug) return false;
+    const ogPath = resolve(__dirname, "..", ".cache", "og", `${slug}.png`);
+    return existsSync(ogPath);
+  },
+};
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index e6d009c..a20af0c 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -23,16 +23,15 @@
   <meta property="og:type" content="{% if page.url == '/' %}website{% else %}article{% endif %}">
   <meta property="og:description" content="{{ ogDesc }}">
   <meta name="description" content="{{ ogDesc }}">
-  {% set ogFileSlug = page.url | ogSlug %}
-  {% set hasGeneratedOg = ogFileSlug | hasOgImage %}
+  {# ogSlug and hasOgImage are pre-computed via eleventyComputed (race-condition safe) #}
   {% if ogPhoto and ogPhoto != "" and (ogPhoto | length) > 10 %}
   <meta property="og:image" content="{% if 'http' in ogPhoto %}{{ ogPhoto }}{% else %}{{ site.url }}{% if ogPhoto[0] != '/' %}/{% endif %}{{ ogPhoto }}{% endif %}">
   {% elif image and image != "" and (image | length) > 10 %}
   <meta property="og:image" content="{% if 'http' in image %}{{ image }}{% else %}{{ site.url }}{% if image[0] != '/' %}/{% endif %}{{ image }}{% endif %}">
   {% elif contentImage and contentImage != "" and (contentImage | length) > 10 %}
   <meta property="og:image" content="{% if 'http' in contentImage %}{{ contentImage }}{% else %}{{ site.url }}{% if contentImage[0] != '/' %}/{% endif %}{{ contentImage }}{% endif %}">
-  {% elif hasGeneratedOg %}
-  <meta property="og:image" content="{{ site.url }}/og/{{ ogFileSlug }}.png">
+  {% elif hasOgImage %}
+  <meta property="og:image" content="{{ site.url }}/og/{{ ogSlug }}.png">
   {% else %}
   <meta property="og:image" content="{{ site.url }}/images/og-default.png">
   {% endif %}
@@ -41,7 +40,7 @@
   <meta property="og:locale" content="{{ site.locale | default('en_US') }}">
 
   {# Twitter Card meta tags #}
-  {% set hasImage = hasGeneratedOg or (ogPhoto and ogPhoto != "" and (ogPhoto | length) > 10) or (image and image != "" and (image | length) > 10) or (contentImage and contentImage != "" and (contentImage | length) > 10) %}
+  {% set hasImage = hasOgImage or (ogPhoto and ogPhoto != "" and (ogPhoto | length) > 10) or (image and image != "" and (image | length) > 10) or (contentImage and contentImage != "" and (contentImage | length) > 10) %}
   <meta name="twitter:card" content="{% if hasImage %}summary_large_image{% else %}summary{% endif %}">
   <meta name="twitter:title" content="{{ ogTitle }}">
   <meta name="twitter:description" content="{{ ogDesc }}">
@@ -51,8 +50,8 @@
   <meta name="twitter:image" content="{% if 'http' in image %}{{ image }}{% else %}{{ site.url }}/{{ image }}{% endif %}">
   {% elif contentImage and contentImage != "" and (contentImage | length) > 10 %}
   <meta name="twitter:image" content="{% if 'http' in contentImage %}{{ contentImage }}{% else %}{{ site.url }}/{{ contentImage }}{% endif %}">
-  {% elif hasGeneratedOg %}
-  <meta name="twitter:image" content="{{ site.url }}/og/{{ ogFileSlug }}.png">
+  {% elif hasOgImage %}
+  <meta name="twitter:image" content="{{ site.url }}/og/{{ ogSlug }}.png">
   {% endif %}
 
   {# Favicon #}