Add images to URL previews

This commit is contained in:
Eric Eastwood 2023-05-09 21:28:11 -05:00
parent bf8040f48e
commit d37fc5779f
5 changed files with 19 additions and 1 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 392 KiB

View File

@ -45,6 +45,11 @@ function renderPageHtml({
maybeAdultMeta = `<meta name="rating" content="adult">`; maybeAdultMeta = `<meta name="rating" content="adult">`;
} }
let metaImageUrl = 'TODO';
if (pageOptions.imageUrl) {
metaImageUrl = pageOptions.imageUrl;
}
const faviconMap = getFaviconAssetUrls(); const faviconMap = getFaviconAssetUrls();
const pageHtml = ` const pageHtml = `
<!doctype html> <!doctype html>
@ -55,6 +60,7 @@ function renderPageHtml({
${maybeAdultMeta} ${maybeAdultMeta}
${sanitizeHtml(`<title>${pageOptions.title}</title>`)} ${sanitizeHtml(`<title>${pageOptions.title}</title>`)}
${sanitizeHtml(`<meta name="description" content="${pageOptions.description}">`)} ${sanitizeHtml(`<meta name="description" content="${pageOptions.description}">`)}
${sanitizeHtml(`<meta property="og:image" content="${metaImageUrl}">`)}
<link rel="icon" href="${faviconMap.ico}" sizes="any"> <link rel="icon" href="${faviconMap.ico}" sizes="any">
<link rel="icon" href="${faviconMap.svg}" type="image/svg+xml"> <link rel="icon" href="${faviconMap.svg}" type="image/svg+xml">
${styles ${styles

View File

@ -26,6 +26,7 @@ const renderHydrogenVmRenderScriptToPageHtml = require('../hydrogen-render/rende
const setHeadersToPreloadAssets = require('../lib/set-headers-to-preload-assets'); const setHeadersToPreloadAssets = require('../lib/set-headers-to-preload-assets');
const setHeadersForDateTemporalContext = require('../lib/set-headers-for-date-temporal-context'); const setHeadersForDateTemporalContext = require('../lib/set-headers-for-date-temporal-context');
const MatrixPublicArchiveURLCreator = require('matrix-public-archive-shared/lib/url-creator'); 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 checkTextForNsfw = require('matrix-public-archive-shared/lib/check-text-for-nsfw');
const { const {
MS_LOOKUP, MS_LOOKUP,
@ -906,6 +907,11 @@ router.get(
const pageOptions = { const pageOptions = {
title: `${roomData.name} - Matrix Public Archive`, title: `${roomData.name} - Matrix Public Archive`,
description: `View the history of ${roomData.name} in the 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, blockedBySafeSearch: isNsfw,
entryPoint: 'client/js/entry-client-hydrogen.js', entryPoint: 'client/js/entry-client-hydrogen.js',
locationHref: urlJoin(basePath, req.originalUrl), locationHref: urlJoin(basePath, req.originalUrl),

View File

@ -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(mxcUrl, '`mxcUrl` must be provided to `mxcUrlToHttp(...)`');
assert(homeserverUrl, '`homeserverUrl` must be provided to `mxcUrlToHttp(...)`'); assert(homeserverUrl, '`homeserverUrl` must be provided to `mxcUrlToHttp(...)`');
assert(size, '`size` 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('/'); const [serverName, mediaId] = mxcUrl.substr('mxc://'.length).split('/');
let qs = new URLSearchParams(); let qs = new URLSearchParams();
qs.append('width', Math.round(size)); qs.append('width', Math.round(size));
qs.append('height', Math.round(size)); qs.append('height', Math.round(size));
qs.append('method', resizeMethod);
const url = homeserverUrl.replace(/\/$/, ''); const url = homeserverUrl.replace(/\/$/, '');
return `${url}/_matrix/media/r0/thumbnail/${encodeURIComponent(serverName)}/${encodeURIComponent( return `${url}/_matrix/media/r0/thumbnail/${encodeURIComponent(serverName)}/${encodeURIComponent(