diff --git a/client/img/matrix-public-archive-opengraph-oxipng-optimized.png b/client/img/matrix-public-archive-opengraph-oxipng-optimized.png
new file mode 100644
index 0000000..07946c6
Binary files /dev/null and b/client/img/matrix-public-archive-opengraph-oxipng-optimized.png differ
diff --git a/client/img/matrix-public-archive-opengraph.png b/client/img/matrix-public-archive-opengraph.png
new file mode 100644
index 0000000..a1dd522
Binary files /dev/null and b/client/img/matrix-public-archive-opengraph.png differ
diff --git a/server/hydrogen-render/render-page-html.js b/server/hydrogen-render/render-page-html.js
index fced81d..dbd6b1c 100644
--- a/server/hydrogen-render/render-page-html.js
+++ b/server/hydrogen-render/render-page-html.js
@@ -45,6 +45,11 @@ function renderPageHtml({
maybeAdultMeta = ``;
}
+ let metaImageUrl = 'TODO';
+ if (pageOptions.imageUrl) {
+ metaImageUrl = pageOptions.imageUrl;
+ }
+
const faviconMap = getFaviconAssetUrls();
const pageHtml = `
@@ -55,6 +60,7 @@ function renderPageHtml({
${maybeAdultMeta}
${sanitizeHtml(`${pageOptions.title}`)}
${sanitizeHtml(``)}
+ ${sanitizeHtml(``)}
${styles
diff --git a/server/routes/room-routes.js b/server/routes/room-routes.js
index a0f3989..3b75838 100644
--- a/server/routes/room-routes.js
+++ b/server/routes/room-routes.js
@@ -26,6 +26,7 @@ const renderHydrogenVmRenderScriptToPageHtml = require('../hydrogen-render/rende
const setHeadersToPreloadAssets = require('../lib/set-headers-to-preload-assets');
const setHeadersForDateTemporalContext = require('../lib/set-headers-for-date-temporal-context');
const MatrixPublicArchiveURLCreator = require('matrix-public-archive-shared/lib/url-creator');
+const { mxcUrlToHttpThumbnail } = require('matrix-public-archive-shared/lib/mxc-url-to-http');
const checkTextForNsfw = require('matrix-public-archive-shared/lib/check-text-for-nsfw');
const {
MS_LOOKUP,
@@ -906,6 +907,11 @@ router.get(
const pageOptions = {
title: `${roomData.name} - Matrix Public Archive`,
description: `View the history of ${roomData.name} in the Matrix Public Archive`,
+ imageUrl: mxcUrlToHttpThumbnail({
+ mxcUrl: roomData.avatarUrl,
+ homeserverUrl: matrixServerUrl,
+ size: 256,
+ }),
blockedBySafeSearch: isNsfw,
entryPoint: 'client/js/entry-client-hydrogen.js',
locationHref: urlJoin(basePath, req.originalUrl),
diff --git a/shared/lib/mxc-url-to-http.js b/shared/lib/mxc-url-to-http.js
index 0bc563c..d69281d 100644
--- a/shared/lib/mxc-url-to-http.js
+++ b/shared/lib/mxc-url-to-http.js
@@ -13,15 +13,21 @@ function mxcUrlToHttp({ mxcUrl, homeserverUrl }) {
)}`;
}
-function mxcUrlToHttpThumbnail({ mxcUrl, homeserverUrl, size }) {
+const ALLOWED_RESIZE_METHODS = ['scale', 'crop'];
+function mxcUrlToHttpThumbnail({ mxcUrl, homeserverUrl, size, resizeMethod = 'scale' }) {
assert(mxcUrl, '`mxcUrl` must be provided to `mxcUrlToHttp(...)`');
assert(homeserverUrl, '`homeserverUrl` must be provided to `mxcUrlToHttp(...)`');
assert(size, '`size` must be provided to `mxcUrlToHttp(...)`');
+ assert(
+ ALLOWED_RESIZE_METHODS.includes(resizeMethod),
+ `\`resizeMethod\` must be ${JSON.stringify(ALLOWED_RESIZE_METHODS)}`
+ );
const [serverName, mediaId] = mxcUrl.substr('mxc://'.length).split('/');
let qs = new URLSearchParams();
qs.append('width', Math.round(size));
qs.append('height', Math.round(size));
+ qs.append('method', resizeMethod);
const url = homeserverUrl.replace(/\/$/, '');
return `${url}/_matrix/media/r0/thumbnail/${encodeURIComponent(serverName)}/${encodeURIComponent(