fix og image resolution

Author: samuelstroschein

blog/addressing-tanstack-feedback/index.md

@@ -19,7 +19,16 @@ This feedback was valuable. Here's what we changed.
 
 ## No More project_id
 
-The `project_id` was used for anonymous telemetry and a sync protocol. Both are not needed anymore. Thus, `project_id` is gone.
+The `project_id` was used for anonymous telemetry and a sync protocol. Both are not needed anymore. Thus, `project_id` is now gone for [unpackaged projects](https://inlang.com/docs/unpacked-project).
+
+```diff
+ project.inlang/
+ ├── settings.json
+ ├── cache/
+ ├── README.md
+-└── project_id
+ └── .gitignore
+```
 
 ## Middleware Documentation
 
@@ -58,4 +67,3 @@ _Links:_
 - [Monorepo Setup](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/monorepo)
 - [Pedro Martins](https://nikuscs.com/)
 - [Pedro's original post](https://nikuscs.com/blog/13-tanstackstart-i18n/)
-

packages/website-v2/src/blog/og-image.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest";
+import { resolveOgImageUrl } from "./og-image";
+
+describe("resolveOgImageUrl", () => {
+  it("returns absolute URLs unchanged", () => {
+    expect(
+      resolveOgImageUrl("https://example.com/og.png", "my-post"),
+    ).toBe("https://example.com/og.png");
+  });
+
+  it("resolves relative URLs against the blog slug", () => {
+    expect(resolveOgImageUrl("./assets/banner.svg", "my-post")).toBe(
+      "https://inlang.com/blog/my-post/assets/banner.svg",
+    );
+  });
+});

packages/website-v2/src/blog/og-image.ts

@@ -0,0 +1,8 @@
+export function resolveOgImageUrl(value: string, slug: string): string {
+  if (isAbsoluteUrl(value)) return value;
+  return new URL(value, `https://inlang.com/blog/${slug}/`).toString();
+}
+
+function isAbsoluteUrl(value: string): boolean {
+  return /^[a-z][a-z0-9+.-]*:/.test(value);
+}

packages/website-v2/src/routes/blog/$slug.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import { initMarkdownInteractive } from "../../components/markdown-interactive";
 import markdownCss from "../../markdown.css?url";
 import { getBlogDescription, getBlogTitle } from "../../blog/blogMetadata";
+import { resolveOgImageUrl } from "../../blog/og-image";
 
 const ogImage =
   "https://cdn.jsdelivr.net/gh/opral/inlang@latest/packages/website/public/opengraph/inlang-social-image.jpg";
@@ -120,10 +121,13 @@ const loadBlogPost = createServerFn({ method: "GET" }).handler(async (ctx) => {
     rawMarkdown,
     frontmatter: parsed.frontmatter,
   });
-  const ogImageOverride =
+  const ogImageOverrideRaw =
     typeof parsed.frontmatter?.["og:image"] === "string"
       ? parsed.frontmatter["og:image"]
       : undefined;
+  const ogImageOverride = ogImageOverrideRaw
+    ? resolveOgImageUrl(ogImageOverrideRaw, slug)
+    : undefined;
   const ogImageAlt =
     typeof parsed.frontmatter?.["og:image:alt"] === "string"
       ? parsed.frontmatter["og:image:alt"]