Mirrors
/
matrix-public-archive
mirror of https://github.com/matrix-org/matrix-public-archive.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix styles on timeout page (#203) 

Fix styles on timeout page since we started using the `manifest.json` for asset paths in https://github.com/matrix-org/matrix-public-archive/pull/175.
This commit is contained in:
Eric Eastwood 2023-05-01 15:13:16 -05:00 committed by GitHub
parent 97ac43a222
commit 0df1a79754
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 42 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build-scripts/vite.config.js
View File

@ -50,6 +50,7 @@ module.exports = defineConfig({
path.resolve(__dirname, '../client/js/entry-client-hydrogen.js'), path.resolve(__dirname, '../client/js/entry-client-hydrogen.js'),
path.resolve(__dirname, '../client/js/entry-client-room-directory.js'), path.resolve(__dirname, '../client/js/entry-client-room-directory.js'),
path.resolve(__dirname, '../client/js/entry-client-room-alias-hash-redirect.js'), path.resolve(__dirname, '../client/js/entry-client-room-alias-hash-redirect.js'),
path.resolve(__dirname, '../client/js/entry-client-timeout.js'),
], ],
output: { output: {
assetFileNames: (chunkInfo) => { assetFileNames: (chunkInfo) => {

3
client/js/entry-client-timeout.js Normal file
View File

@ -0,0 +1,3 @@
// Assets
import 'hydrogen-view-sdk/assets/theme-element-light.css';
import '../css/styles.css';

2
server/hydrogen-render/render-page-html.js
View File

@ -8,7 +8,7 @@ const safeJson = require('../lib/safe-json');
const getDependenciesForEntryPointName = require('../lib/get-dependencies-for-entry-point-name'); const getDependenciesForEntryPointName = require('../lib/get-dependencies-for-entry-point-name');
const getFaviconAssetUrls = require('../lib/get-favicon-asset-urls'); const getFaviconAssetUrls = require('../lib/get-favicon-asset-urls');
async function renderPageHtml({ function renderPageHtml({
pageOptions, pageOptions,
// Make sure you sanitize this before passing it to us // Make sure you sanitize this before passing it to us
bodyHtml, bodyHtml,

47
server/middleware/timeout-middleware.js
View File

@ -5,7 +5,7 @@ const urlJoin = require('url-join');
const asyncHandler = require('../lib/express-async-handler'); const asyncHandler = require('../lib/express-async-handler');
const { getSerializableSpans, getActiveTraceId } = require('../tracing/tracing-middleware'); const { getSerializableSpans, getActiveTraceId } = require('../tracing/tracing-middleware');
const sanitizeHtml = require('../lib/sanitize-html'); const sanitizeHtml = require('../lib/sanitize-html');
const safeJson = require('../lib/safe-json'); const renderPageHtml = require('../hydrogen-render/render-page-html');
const config = require('../lib/config'); const config = require('../lib/config');
const basePath = config.get('basePath'); const basePath = config.get('basePath');
@ -19,7 +19,6 @@ async function timeoutMiddleware(req, res, next) {
const timeoutId = setTimeout(() => { const timeoutId = setTimeout(() => {
const traceId = getActiveTraceId(); const traceId = getActiveTraceId();
const serializableSpans = getSerializableSpans(); const serializableSpans = getSerializableSpans();
const serializedSpans = JSON.stringify(serializableSpans);
let humanReadableSpans; let humanReadableSpans;
if (serializableSpans.length > 0) { if (serializableSpans.length > 0) {
@ -48,22 +47,9 @@ async function timeoutMiddleware(req, res, next) {
humanReadableSpans = [noTracingDataAvailableItem]; humanReadableSpans = [noTracingDataAvailableItem];
} }
const cspNonce = res.locals.cspNonce; const bodyHtml = `
const hydrogenStylesUrl = urlJoin(basePath, '/hydrogen-assets/hydrogen-styles.css');
const stylesUrl = urlJoin(basePath, '/css/styles.css');
const pageHtml = `
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Server timeout - Matrix Public Archive</title>
<link href="${hydrogenStylesUrl}" rel="stylesheet" nonce="${cspNonce}">
<link href="${stylesUrl}" rel="stylesheet" nonce="${cspNonce}">
</head>
${/* We add the .hydrogen class here just to get normal body styles */ ''} ${/* We add the .hydrogen class here just to get normal body styles */ ''}
<body class="hydrogen"> <div class="hydrogen">
<h1>504: Server timeout</h1> <h1>504: Server timeout</h1>
<p>Server was unable to respond in time (${requestTimeoutMs / 1000}s)</p> <p>Server was unable to respond in time (${requestTimeoutMs / 1000}s)</p>
<h3>These are the external API requests that made it slow:</h3> <h3>These are the external API requests that made it slow:</h3>
@ -76,14 +62,29 @@ async function timeoutMiddleware(req, res, next) {
traceId ?? `none (tracing is probably not enabled)` traceId ?? `none (tracing is probably not enabled)`
}</span></h2>` }</span></h2>`
)} )}
</div>
<script type="text/javascript" nonce="${cspNonce}">
window.tracingSpansForRequest = ${safeJson(serializedSpans)};
</script>
</body>
</html>
`; `;
const pageOptions = {
title: `Server timeout - Matrix Public Archive`,
entryPoint: 'client/js/entry-client-timeout.js',
locationHref: urlJoin(basePath, req.originalUrl),
// We don't have a Matrix room so we don't know whether or not to index. Just choose
// a safe-default of false.
shouldIndex: false,
cspNonce: res.locals.cspNonce,
};
const pageHtml = renderPageHtml({
pageOptions,
bodyHtml,
vmRenderContext: {
config: {
basePath,
},
},
});
// 504 Gateway timeout // 504 Gateway timeout
res.status(504); res.status(504);
res.set('Content-Type', 'text/html'); res.set('Content-Type', 'text/html');

23
server/routes/client-side-room-alias-hash-redirect-route.js
View File

@ -24,16 +24,19 @@ function clientSideRoomAliasHashRedirectRoute(req, res) {
}; };
const bodyHtml = ` const bodyHtml = `
<h1> ${/* We add the .hydrogen class here just to get normal body styles */ ''}
404: Page not found. <div class="hydrogen">
<span class="js-try-redirect-message" style="display: none">One sec while we try to redirect you to the right place.</span> <h1>
</h1> 404: Page not found.
<p>If there was a #room_alias:server hash in the URL, we tried redirecting you to the right place.</p> <span class="js-try-redirect-message" style="display: none">One sec while we try to redirect you to the right place.</span>
<p> </h1>
Otherwise, you're simply in a place that does not exist. <p>If there was a #room_alias:server hash in the URL, we tried redirecting you to the right place.</p>
You can ${sanitizeHtml(`<a href="${basePath}">go back to the homepage</a>.`)} <p>
</p> Otherwise, you're simply in a place that does not exist.
`; You can ${sanitizeHtml(`<a href="${basePath}">go back to the homepage</a>.`)}
</p>
</div>
`;
const pageHtml = renderPageHtml({ const pageHtml = renderPageHtml({
pageOptions, pageOptions,