machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set opengraph tags directly in the front end

Browse Source
This commit is contained in:
Mononaut
2022-07-26 20:47:03 +00:00
parent 6e77275d02
commit ad9c72230c
6 changed files with 109 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
unfurler/src/index.ts
View File

@@ -36,7 +36,7 @@ class Server {
maxConcurrency: config.PUPPETEER.CLUSTER_SIZE,
puppeteerOptions: puppeteerConfig,
});
await this.cluster?.task(async (args) => { return this.renderPreviewTask(args) });
await this.cluster?.task(async (args) => { return this.clusterTask(args) });
this.setUpRoutes();
@@ -52,31 +52,40 @@ class Server {
this.app.get('*', (req, res) => { return this.renderHTML(req, res) })
}
async renderPreviewTask({ page, data: url }) {
async clusterTask({ page, data: { url, action } }) {
await page.goto(url, { waitUntil: "domcontentloaded" });
await page.evaluate(async () => {
// wait for all images to finish loading
const imgs = Array.from(document.querySelectorAll("img"));
await Promise.all([
document.fonts.ready,
...imgs.map((img) => {
if (img.complete) {
if (img.naturalHeight !== 0) return;
throw new Error("Image failed to load");
}
return new Promise((resolve, reject) => {
img.addEventListener("load", resolve);
img.addEventListener("error", reject);
});
}),
]);
});
return page.screenshot();
switch (action) {
case 'screenshot': {
await page.evaluate(async () => {
// wait for all images to finish loading
const imgs = Array.from(document.querySelectorAll("img"));
await Promise.all([
document.fonts.ready,
...imgs.map((img) => {
if (img.complete) {
if (img.naturalHeight !== 0) return;
throw new Error("Image failed to load");
}
return new Promise((resolve, reject) => {
img.addEventListener("load", resolve);
img.addEventListener("error", reject);
});
}),
]);
});
return page.screenshot();
} break;
default: {
return page.content();
}
}
}
async renderPreview(req, res) {
try {
const img = await this.cluster?.execute(this.mempoolHost + req.params[0]);
// strip default language code for compatibility
const path = req.params[0].replace('/en/', '/');
const img = await this.cluster?.execute({ url: this.mempoolHost + path, action: 'screenshot' });
res.contentType('image/png');
res.send(img);
@@ -86,39 +95,15 @@ class Server {
}
}
renderHTML(req, res) {
let lang = '';
let path = req.originalUrl
// extract the language setting (if any)
const parts = path.split(/^\/(ar|bg|bs|ca|cs|da|de|et|el|es|eo|eu|fa|fr|gl|ko|hr|id|it|he|ka|lv|lt|hu|mk|ms|nl|ja|nb|nn|pl|pt|pt-BR|ro|ru|sk|sl|sr|sh|fi|sv|th|tr|uk|vi|zh|hi)\//)
if (parts.length > 1) {
lang = "/" + parts[1];
path = "/" + parts[2];
async renderHTML(req, res) {
try {
let html = await this.cluster?.execute({ url: this.mempoolHost + req.params[0], action: 'html' });
res.send(html)
} catch (e) {
console.log(e);
res.status(500).send(e instanceof Error ? e.message : e);
}
const ogImageUrl = config.SERVER.HOST + '/render' + lang + "/preview" + path;
res.send(`
<!doctype html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<title>mempool - Bitcoin Explorer</title>
<meta name="description" content="The Mempool Open Source Project™ - our self-hosted explorer for the Bitcoin community."/>
<meta property="og:image" content="${ogImageUrl}"/>
<meta property="og:image:type" content="image/png"/>
<meta property="og:image:width" content="1024"/>
<meta property="og:image:height" content="512"/>
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="@mempool">
<meta property="twitter:creator" content="@mempool">
<meta property="twitter:title" content="The Mempool Open Source Project™">
<meta property="twitter:description" content="Our self-hosted mempool explorer for the Bitcoin community."/>
<meta property="twitter:image:src" content="${ogImageUrl}"/>
<meta property="twitter:domain" content="mempool.space">
<body></body>
</html>
`);
}
}