Add an OG image and link preview tags to the web build

This commit is contained in:
Gregory Schier
2026-09-15 14:48:07 -07:00
parent 77b18d3477
commit 621f9c3b8f
3 changed files with 169 additions and 1 deletions
+40 -1
View File
@@ -29,6 +29,35 @@ const iconsDir = normalizePath(
*/
const yaakTarget = process.env.YAAK_TARGET === "web" ? "web" : "desktop";
const webUrl = "https://web.yaak.app";
const webDir = normalizePath(path.join(import.meta.dirname, "web"));
/** Link previews for the hosted web app. Meaningless inside the desktop window. */
function webHead() {
return {
name: "web-head",
transformIndexHtml() {
const title = "Yaak in your browser";
const description = "No download, no setup. Open a tab and send your first request.";
return [
{ tag: "meta", attrs: { name: "description", content: description } },
{ tag: "meta", attrs: { property: "og:type", content: "website" } },
{ tag: "meta", attrs: { property: "og:url", content: webUrl } },
{ tag: "meta", attrs: { property: "og:title", content: title } },
{ tag: "meta", attrs: { property: "og:description", content: description } },
{ tag: "meta", attrs: { property: "og:image", content: `${webUrl}/og.png` } },
{ tag: "meta", attrs: { property: "og:image:width", content: "1200" } },
{ tag: "meta", attrs: { property: "og:image:height", content: "630" } },
{ tag: "meta", attrs: { name: "twitter:card", content: "summary_large_image" } },
{ tag: "meta", attrs: { name: "twitter:site", content: "@yaakapp" } },
{ tag: "meta", attrs: { name: "twitter:title", content: title } },
{ tag: "meta", attrs: { name: "twitter:description", content: description } },
{ tag: "meta", attrs: { name: "twitter:image", content: `${webUrl}/og.png` } },
];
},
};
}
/**
* Where `yaak-web` is listening, taken from the same variables that put it there.
*
@@ -136,9 +165,19 @@ export default defineConfig(async () => {
dest: "",
rename: { name: "icon-128.png", stripBase: true },
},
...(yaakTarget === "web"
? [{ src: `${webDir}/og.png`, dest: "", rename: { stripBase: true } }]
: []),
],
}),
verifyServedAssets(["cmaps", "standard_fonts", "favicon.ico", "icon-128.png"]),
...(yaakTarget === "web" ? [webHead()] : []),
verifyServedAssets([
"cmaps",
"standard_fonts",
"favicon.ico",
"icon-128.png",
...(yaakTarget === "web" ? ["og.png"] : []),
]),
],
build: {
target: "esnext",