fix(ap): use slug-only OG image path /og/{slug}.png
The previous fix incorrectly generated /og/{year}-{month}-{day}-{slug}.png
but the Eleventy blog generates OG images at /og/{slug}.png (e.g. /og/2615b.png).
Remove the unnecessary date extraction and simplify to slug-only.
https://claude.ai/code/session_0124D41vdLYE3DkJxhPqYthX
This commit is contained in:
@@ -148,7 +148,7 @@ Posts are converted from Indiekit's JF2 format to ActivityStreams 2.0 in two mod
|
|||||||
- Permalink appended to content body
|
- Permalink appended to content body
|
||||||
- Nested hashtags normalized: `on/art/music` → `#music` (Mastodon doesn't support path-style tags)
|
- Nested hashtags normalized: `on/art/music` → `#music` (Mastodon doesn't support path-style tags)
|
||||||
- Sensitive posts flagged with `sensitive: true`; summary doubles as CW text for notes
|
- Sensitive posts flagged with `sensitive: true`; summary doubles as CW text for notes
|
||||||
- Per-post OG image added to Note/Article objects (`/og/{year}-{month}-{day}-{slug}.png`) for fediverse preview cards
|
- Per-post OG image added to Note/Article objects (`/og/{slug}.png`) for fediverse preview cards
|
||||||
|
|
||||||
### Express ↔ Fedify bridge
|
### Express ↔ Fedify bridge
|
||||||
|
|
||||||
@@ -173,11 +173,7 @@ These patches are applied to `node_modules` via postinstall and at serve startup
|
|||||||
**`patch-ap-og-image.mjs`**
|
**`patch-ap-og-image.mjs`**
|
||||||
The fork (both 842fc5af and 45f8ba9) attempts to derive the OG image path by matching a date-based URL pattern like `/articles/2024/01/15/slug/`. This blog uses flat URLs (`/articles/slug/`) with no date component, so the regex never matches and no `image` property is set on ActivityPub objects — Mastodon and other clients never show a preview card.
|
The fork (both 842fc5af and 45f8ba9) attempts to derive the OG image path by matching a date-based URL pattern like `/articles/2024/01/15/slug/`. This blog uses flat URLs (`/articles/slug/`) with no date component, so the regex never matches and no `image` property is set on ActivityPub objects — Mastodon and other clients never show a preview card.
|
||||||
|
|
||||||
The patch replaces the URL-pattern extraction with:
|
The patch replaces the broken date-from-URL regex with a simple last-path-segment extraction, producing `/og/{slug}.png` — the actual filename the Eleventy build generates (e.g. `/og/2615b.png`). Applied to both `jf2ToActivityStreams()` (plain JSON-LD) and `jf2ToAS2Activity()` (Fedify vocab objects).
|
||||||
1. Slug from the last URL path segment.
|
|
||||||
2. Date from `properties.published` (ISO-8601 string).
|
|
||||||
|
|
||||||
This produces the correct `/og/{year}-{month}-{day}-{slug}.png` filename that the Eleventy build generates for per-post OG images. Applied to both `jf2ToActivityStreams()` (plain JSON-LD) and `jf2ToAS2Activity()` (Fedify vocab objects).
|
|
||||||
|
|
||||||
### AP environment variables
|
### AP environment variables
|
||||||
|
|
||||||
@@ -661,7 +657,7 @@ Environment variables are loaded from `.env` via `dotenv`. See `indiekit.config.
|
|||||||
### 2026-03-20
|
### 2026-03-20
|
||||||
|
|
||||||
**fix(ap): fix OG image not included in ActivityPub activities**
|
**fix(ap): fix OG image not included in ActivityPub activities**
|
||||||
The fork's OG image code expected date-based URLs (`/articles/YYYY/MM/DD/slug/`) but this blog uses flat URLs (`/articles/slug/`). The regex never matched so no `image` property was set and Mastodon/fediverse clients showed no preview card. Added `patch-ap-og-image.mjs` which extracts the slug from the URL's last path segment and the date from `properties.published`, producing the correct `/og/{year}-{month}-{day}-{slug}.png` filename. Also updated `package-lock.json` to pull the `45f8ba9` fork commit (likes-as-bookmarks + correct date+slug OG filename format).
|
The fork's OG image code expected date-based URLs (`/articles/YYYY/MM/DD/slug/`) but this blog uses flat URLs (`/articles/slug/`). The regex never matched so no `image` property was set and Mastodon/fediverse clients showed no preview card. Added `patch-ap-og-image.mjs` which extracts the slug from the URL's last path segment and constructs `/og/{slug}.png` — the actual Eleventy OG filename format (e.g. `/og/2615b.png`). Also updated `package-lock.json` to pull the `45f8ba9` fork commit (likes-as-bookmarks, announce cc reverted).
|
||||||
|
|
||||||
### 2026-03-19
|
### 2026-03-19
|
||||||
|
|
||||||
|
|||||||
@@ -3,17 +3,15 @@
|
|||||||
*
|
*
|
||||||
* Root cause:
|
* Root cause:
|
||||||
* Both 842fc5af and 45f8ba9 versions of jf2-to-as2.js try to extract the
|
* Both 842fc5af and 45f8ba9 versions of jf2-to-as2.js try to extract the
|
||||||
* post date from the URL using a regex that expects date-based URLs like
|
* post slug from the URL using a regex that expects date-based URLs like
|
||||||
* /articles/2024/01/15/slug/ but this blog uses flat URLs like /articles/slug/.
|
* /articles/2024/01/15/slug/ but this blog uses flat URLs like /articles/slug/.
|
||||||
* The regex never matches so the `image` property is never set — no OG image
|
* The regex never matches so the `image` property is never set — no OG image
|
||||||
* preview card reaches Mastodon or other fediverse servers.
|
* preview card reaches Mastodon or other fediverse servers.
|
||||||
*
|
*
|
||||||
* Fix:
|
* Fix:
|
||||||
* Replace the date-from-URL regex with an approach that:
|
* Replace the date-from-URL regex with a simple last-path-segment extraction.
|
||||||
* 1. Extracts the slug from the last path segment of the post URL.
|
* Constructs /og/{slug}.png — the actual filename pattern the Eleventy build
|
||||||
* 2. Reads the date from properties.published (ISO-8601 string).
|
* generates for static OG preview images (e.g. /og/2615b.png).
|
||||||
* Constructs /og/{year}-{month}-{day}-{slug}.png — the filename pattern that
|
|
||||||
* the Eleventy build generates for static OG preview images.
|
|
||||||
*
|
*
|
||||||
* Both jf2ToActivityStreams() (plain JSON-LD) and jf2ToAS2Activity() (Fedify
|
* Both jf2ToActivityStreams() (plain JSON-LD) and jf2ToAS2Activity() (Fedify
|
||||||
* vocab objects) are patched. Both 842fc5af and 45f8ba9 variants are handled
|
* vocab objects) are patched. Both 842fc5af and 45f8ba9 variants are handled
|
||||||
@@ -44,30 +42,27 @@ const AS2_BLOCK_RE =
|
|||||||
/ const ogMatchF = postUrl && postUrl\.match\([^\n]+\n if \(ogMatchF\) \{[\s\S]*?\n \}/;
|
/ const ogMatchF = postUrl && postUrl\.match\([^\n]+\n if \(ogMatchF\) \{[\s\S]*?\n \}/;
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Replacement: extract slug from URL last segment, date from published ISO string.
|
// Replacement: extract slug from last URL path segment.
|
||||||
// Build /og/{year}-{month}-{day}-{slug}.png to match the Eleventy OG filenames.
|
// Build /og/{slug}.png to match the Eleventy OG filenames (e.g. /og/2615b.png).
|
||||||
//
|
//
|
||||||
// Template literal note: backslashes in regex literals inside the injected code
|
// Template literal note: backslashes inside the injected regex are doubled so
|
||||||
// are doubled here so they survive the template literal → string conversion:
|
// they survive the template literal → string conversion:
|
||||||
// \\\/ → \/ (escaped slash in regex)
|
// \\\/ → \/ (escaped slash in regex)
|
||||||
// \\d → \d (digit class)
|
|
||||||
// [\\\w-] → [\w-] (word char class)
|
// [\\\w-] → [\w-] (word char class)
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
const NEW_CN = ` const ogSlug = postUrl && postUrl.match(/\\/([\\\w-]+)\\/?$/)?.[1]; // og-image fix
|
const NEW_CN = ` const ogSlug = postUrl && postUrl.match(/\\/([\\\w-]+)\\/?$/)?.[1]; // og-image fix
|
||||||
const ogPub = properties.published && properties.published.match(/^(\\d{4})-(\\d{2})-(\\d{2})/); // og-image fix
|
if (ogSlug) { // og-image fix
|
||||||
if (ogSlug && ogPub) { // og-image fix
|
|
||||||
object.image = {
|
object.image = {
|
||||||
type: "Image",
|
type: "Image",
|
||||||
url: \`\${publicationUrl.replace(/\\/$/, "")}/og/\${ogPub[1]}-\${ogPub[2]}-\${ogPub[3]}-\${ogSlug}.png\`, // og-image fix
|
url: \`\${publicationUrl.replace(/\\/$/, "")}/og/\${ogSlug}.png\`, // og-image fix
|
||||||
mediaType: "image/png",
|
mediaType: "image/png",
|
||||||
};
|
};
|
||||||
}`;
|
}`;
|
||||||
|
|
||||||
const NEW_AS2 = ` const ogSlugF = postUrl && postUrl.match(/\\/([\\\w-]+)\\/?$/)?.[1]; // og-image fix
|
const NEW_AS2 = ` const ogSlugF = postUrl && postUrl.match(/\\/([\\\w-]+)\\/?$/)?.[1]; // og-image fix
|
||||||
const ogPubF = properties.published && properties.published.match(/^(\\d{4})-(\\d{2})-(\\d{2})/); // og-image fix
|
if (ogSlugF) { // og-image fix
|
||||||
if (ogSlugF && ogPubF) { // og-image fix
|
|
||||||
noteOptions.image = new Image({
|
noteOptions.image = new Image({
|
||||||
url: new URL(\`\${publicationUrl.replace(/\\/$/, "")}/og/\${ogPubF[1]}-\${ogPubF[2]}-\${ogPubF[3]}-\${ogSlugF}.png\`), // og-image fix
|
url: new URL(\`\${publicationUrl.replace(/\\/$/, "")}/og/\${ogSlugF}.png\`), // og-image fix
|
||||||
mediaType: "image/png",
|
mediaType: "image/png",
|
||||||
});
|
});
|
||||||
}`;
|
}`;
|
||||||
|
|||||||
Reference in New Issue
Block a user