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
matrix-public-archive/server/hydrogen-render/render-page-html.js

104 lines
3.4 KiB
JavaScript
Raw Normal View History

Production ready build (#175) - Rename `public` -> `client` so it doesn't get copied automagically as-is (without hashes which we want for cache busting), https://vitejs.dev/guide/assets.html#the-public-directory - We still build the version files to `public/` so their copied as-is and Vite handles it for us (so we can use `emptyOutDir`) - Use a multiple entrypoint `.js` Vite build so things can be more intelligently bundled and take less time - We aren't using library mode because it doesn't minify or bundle assets - Using hash asset tags for cache busting. Hash of the file included in the file name - We lookup these hashed assets from `manifest.json` that Vite builds (https://vitejs.dev/guide/backend-integration.html) to serve and preload - In terms of optimized bundles, I know the current output isn't great now but will have to opt to fix that up separately in the future. Tracked by https://github.com/matrix-org/matrix-public-archive/issues/176
2023-04-24 22:50:53 -06:00
'use strict';
const assert = require('assert');
const { getSerializableSpans } = require('../tracing/tracing-middleware');
const sanitizeHtml = require('../lib/sanitize-html');
const safeJson = require('../lib/safe-json');
const getDependenciesForEntryPointName = require('../lib/get-dependencies-for-entry-point-name');
const getFaviconAssetUrls = require('../lib/get-favicon-asset-urls');
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.
2023-05-01 14:13:16 -06:00
function renderPageHtml({
Production ready build (#175) - Rename `public` -> `client` so it doesn't get copied automagically as-is (without hashes which we want for cache busting), https://vitejs.dev/guide/assets.html#the-public-directory - We still build the version files to `public/` so their copied as-is and Vite handles it for us (so we can use `emptyOutDir`) - Use a multiple entrypoint `.js` Vite build so things can be more intelligently bundled and take less time - We aren't using library mode because it doesn't minify or bundle assets - Using hash asset tags for cache busting. Hash of the file included in the file name - We lookup these hashed assets from `manifest.json` that Vite builds (https://vitejs.dev/guide/backend-integration.html) to serve and preload - In terms of optimized bundles, I know the current output isn't great now but will have to opt to fix that up separately in the future. Tracked by https://github.com/matrix-org/matrix-public-archive/issues/176
2023-04-24 22:50:53 -06:00
pageOptions,
// Make sure you sanitize this before passing it to us
bodyHtml,
vmRenderContext,
}) {
assert(vmRenderContext);
assert(pageOptions);
assert(pageOptions.title);
assert(pageOptions.entryPoint);
assert(pageOptions.cspNonce);
const { styles, scripts } = getDependenciesForEntryPointName(pageOptions.entryPoint);
// Serialize the state for when we run the Hydrogen render again client-side to
// re-hydrate the DOM
const serializedMatrixPublicArchiveContext = JSON.stringify({
...vmRenderContext,
});
const serializableSpans = getSerializableSpans();
const serializedSpans = JSON.stringify(serializableSpans);
// We shouldn't let some pages be indexed by search engines
let maybeNoIndexHtml = '';
if (!pageOptions.shouldIndex) {
maybeNoIndexHtml = `<meta name="robots" content="noindex, nofollow" />`;
}
Cache derived info from the `manifest.json` (#191) - Like getting all of the dependencies for a given entry point - And the favicons Also fix the problem where `server/hydrogen-render/render-page-html.js` was calling `getFaviconAssetUrls()` right away before the client build had a chance to generate `dist/manifest.json` and result in `Error: Cannot find module '../../dist/manifest.json'`
2023-04-26 16:04:49 -06:00
const faviconMap = getFaviconAssetUrls();
Production ready build (#175) - Rename `public` -> `client` so it doesn't get copied automagically as-is (without hashes which we want for cache busting), https://vitejs.dev/guide/assets.html#the-public-directory - We still build the version files to `public/` so their copied as-is and Vite handles it for us (so we can use `emptyOutDir`) - Use a multiple entrypoint `.js` Vite build so things can be more intelligently bundled and take less time - We aren't using library mode because it doesn't minify or bundle assets - Using hash asset tags for cache busting. Hash of the file included in the file name - We lookup these hashed assets from `manifest.json` that Vite builds (https://vitejs.dev/guide/backend-integration.html) to serve and preload - In terms of optimized bundles, I know the current output isn't great now but will have to opt to fix that up separately in the future. Tracked by https://github.com/matrix-org/matrix-public-archive/issues/176
2023-04-24 22:50:53 -06:00
const pageHtml = `
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
${maybeNoIndexHtml}
${sanitizeHtml(`<title>${pageOptions.title}</title>`)}
<link rel="icon" href="${faviconMap.ico}" sizes="any">
<link rel="icon" href="${faviconMap.svg}" type="image/svg+xml">
${styles
.map(
(styleUrl) =>
`<link href="${styleUrl}" rel="stylesheet" nonce="${pageOptions.cspNonce}">`
)
.join('\n')}
</head>
<body>
${bodyHtml}
${
/**
* This inline snippet is used in to scroll the Hydrogen timeline to the
* right place immediately when the page loads instead of waiting for
* Hydrogen to load, hydrate and finally scroll.
*/ ''
}
<script type="text/javascript" nonce="${pageOptions.cspNonce}">
const qs = new URLSearchParams(window?.location?.search);
const atEventId = qs.get('at');
if (atEventId) {
const el = document.querySelector(\`[data-event-id="\${atEventId}"]\`);
requestAnimationFrame(() => {
el && el.scrollIntoView({ block: 'center' });
});
} else {
const el = document.querySelector('.js-bottom-scroll-anchor');
requestAnimationFrame(() => {
el && el.scrollIntoView({ block: 'end' });
});
}
</script>
<script type="text/javascript" nonce="${pageOptions.cspNonce}">
window.matrixPublicArchiveContext = ${safeJson(serializedMatrixPublicArchiveContext)}
</script>
${scripts
.map(
(scriptUrl) =>
Fix scripts not loading from the production ready build PR (#183) Follow-up to https://github.com/matrix-org/matrix-public-archive/pull/175
2023-04-25 02:54:49 -06:00
`<script type="module" src="${scriptUrl}" nonce="${pageOptions.cspNonce}"></script>`
Production ready build (#175) - Rename `public` -> `client` so it doesn't get copied automagically as-is (without hashes which we want for cache busting), https://vitejs.dev/guide/assets.html#the-public-directory - We still build the version files to `public/` so their copied as-is and Vite handles it for us (so we can use `emptyOutDir`) - Use a multiple entrypoint `.js` Vite build so things can be more intelligently bundled and take less time - We aren't using library mode because it doesn't minify or bundle assets - Using hash asset tags for cache busting. Hash of the file included in the file name - We lookup these hashed assets from `manifest.json` that Vite builds (https://vitejs.dev/guide/backend-integration.html) to serve and preload - In terms of optimized bundles, I know the current output isn't great now but will have to opt to fix that up separately in the future. Tracked by https://github.com/matrix-org/matrix-public-archive/issues/176
2023-04-24 22:50:53 -06:00
)
.join('\n')}
<script type="text/javascript" nonce="${pageOptions.cspNonce}">
window.tracingSpansForRequest = ${safeJson(serializedSpans)};
</script>
</body>
</html>
`;
return pageHtml;
}
module.exports = renderPageHtml;