matrix-public-archive/server/hydrogen-render/render-hydrogen-vm-render-s...

'use strict';

const assert = require('assert');

const { getSerializableSpans } = require('../tracing/tracing-middleware');
const renderHydrogenToString = require('../hydrogen-render/render-hydrogen-to-string');
const sanitizeHtml = require('../lib/sanitize-html');
const safeJson = require('../lib/safe-json');

async function renderHydrogenVmRenderScriptToPageHtml({
  pageOptions,
  vmRenderScriptFilePath,
  vmRenderContext,
}) {
  assert(vmRenderScriptFilePath);
  assert(vmRenderContext);
  assert(pageOptions);
  assert(pageOptions.title);
  assert(pageOptions.styles);
  assert(pageOptions.scripts);
  assert(pageOptions.cspNonce);

  const hydrogenHtmlOutput = await renderHydrogenToString({
    vmRenderScriptFilePath,
    vmRenderContext,
    pageOptions,
  });

  // 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" />`;
  }

  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="/img/favicon.ico" sizes="any">
          <link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
          ${pageOptions.styles
            .map(
              (styleUrl) =>
                `<link href="${styleUrl}" rel="stylesheet" nonce="${pageOptions.cspNonce}">`
            )
            .join('\n')}
        </head>
        <body>
          ${hydrogenHtmlOutput}
          
          ${
            /**
             * 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>

          ${pageOptions.scripts
            .map(
              (scriptUrl) =>
                `<script type="text/javascript" src="${scriptUrl}" nonce="${pageOptions.cspNonce}"></script>`
            )
            .join('\n')}
          <script type="text/javascript" nonce="${pageOptions.cspNonce}">
            window.tracingSpansForRequest = ${safeJson(serializedSpans)};
          </script>
        </body>
      </html>
      `;

  return pageHtml;
}

module.exports = renderHydrogenVmRenderScriptToPageHtml;
Room directory landing page v1 (#61) Part of https://github.com/matrix-org/matrix-public-archive/issues/6 2022-09-08 00:30:04 -06:00			`'use strict';`

			`const assert = require('assert');`

			`const { getSerializableSpans } = require('../tracing/tracing-middleware');`
			`const renderHydrogenToString = require('../hydrogen-render/render-hydrogen-to-string');`
			`const sanitizeHtml = require('../lib/sanitize-html');`
			`const safeJson = require('../lib/safe-json');`

Slightly easier to understand renderHydrogenVmRenderScriptToPageHtml API surface (#170) 2023-04-19 12:48:12 -06:00			`async function renderHydrogenVmRenderScriptToPageHtml({`
			`pageOptions,`
Room directory landing page v1 (#61) Part of https://github.com/matrix-org/matrix-public-archive/issues/6 2022-09-08 00:30:04 -06:00			`vmRenderScriptFilePath,`
			`vmRenderContext,`
Slightly easier to understand renderHydrogenVmRenderScriptToPageHtml API surface (#170) 2023-04-19 12:48:12 -06:00			`}) {`
Room directory landing page v1 (#61) Part of https://github.com/matrix-org/matrix-public-archive/issues/6 2022-09-08 00:30:04 -06:00			`assert(vmRenderScriptFilePath);`
			`assert(vmRenderContext);`
			`assert(pageOptions);`
			`assert(pageOptions.title);`
			`assert(pageOptions.styles);`
			`assert(pageOptions.scripts);`
Add `Content-Security-Policy` (CSP) (#81) Add `Content-Security-Policy` (CSP) that restricts the page to just what it is expected to do. This helps limit the damage that can be done by any XSS attack. Fix https://github.com/matrix-org/internal-config/issues/1341 2022-10-19 11:07:39 -06:00			`assert(pageOptions.cspNonce);`
Room directory landing page v1 (#61) Part of https://github.com/matrix-org/matrix-public-archive/issues/6 2022-09-08 00:30:04 -06:00
			`const hydrogenHtmlOutput = await renderHydrogenToString({`
			`vmRenderScriptFilePath,`
			`vmRenderContext,`
Add `Content-Security-Policy` (CSP) (#81) Add `Content-Security-Policy` (CSP) that restricts the page to just what it is expected to do. This helps limit the damage that can be done by any XSS attack. Fix https://github.com/matrix-org/internal-config/issues/1341 2022-10-19 11:07:39 -06:00			`pageOptions,`
Room directory landing page v1 (#61) Part of https://github.com/matrix-org/matrix-public-archive/issues/6 2022-09-08 00:30:04 -06:00			`});`

Increase perceived performance by scrolling to the right spot before Hydrogen loads (#128) 2022-11-09 17:57:33 -07:00			`// Serialize the state for when we run the Hydrogen render again client-side to`
			`// re-hydrate the DOM`
			`const serializedMatrixPublicArchiveContext = JSON.stringify({`
			`...vmRenderContext,`
			`});`

Room directory landing page v1 (#61) Part of https://github.com/matrix-org/matrix-public-archive/issues/6 2022-09-08 00:30:04 -06:00			`const serializableSpans = getSerializableSpans();`
			`const serializedSpans = JSON.stringify(serializableSpans);`

Only show `world_readable` or `public` rooms in the archive. Only index `world_readable` (#66) Only show `world_readable` or `public` rooms in the archive. Only allow `world_readable` rooms to be indexed by search engines. Related to https://github.com/matrix-org/matrix-public-archive/issues/47 2022-09-08 18:15:07 -06:00			`// We shouldn't let some pages be indexed by search engines`
			`let maybeNoIndexHtml = '';`
Show surrounding messages for a full screen of content (#71) 1. Add surrounding messages to the given messages so we have a full screen of content to make it feel lively even in quiet rooms - As you scroll around the timeline across different days, the date changes in the URL, calendar, etc 2. Add summary item to the bottom of the timeline that explains if we couldn't find any messages in the specific day requested - Also allows you to the jump to the next activity in the room. Adds `/:roomId/jump?ts=xxx&dir=[f\|b]` to facilitate this. - Part of https://github.com/matrix-org/matrix-public-archive/issues/46 3. Add developer options modal which is linked from the bottom of the right-panel - Adds an option so you can debug the `IntersectionObserver` and how it's selecting the active day from the top-edge of the scroll viewport. - In the future, this will also include a nice little visualization of the backend timing traces 2022-09-20 15:02:09 -06:00			`if (!pageOptions.shouldIndex) {`
Only show `world_readable` or `public` rooms in the archive. Only index `world_readable` (#66) Only show `world_readable` or `public` rooms in the archive. Only allow `world_readable` rooms to be indexed by search engines. Related to https://github.com/matrix-org/matrix-public-archive/issues/47 2022-09-08 18:15:07 -06:00			maybeNoIndexHtml = `<meta name="robots" content="noindex, nofollow" />`;
			`}`

Room directory landing page v1 (#61) Part of https://github.com/matrix-org/matrix-public-archive/issues/6 2022-09-08 00:30:04 -06:00			const pageHtml = `
			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`<meta name="viewport" content="width=device-width, initial-scale=1">`
Only show `world_readable` or `public` rooms in the archive. Only index `world_readable` (#66) Only show `world_readable` or `public` rooms in the archive. Only allow `world_readable` rooms to be indexed by search engines. Related to https://github.com/matrix-org/matrix-public-archive/issues/47 2022-09-08 18:15:07 -06:00			`${maybeNoIndexHtml}`
Room directory landing page v1 (#61) Part of https://github.com/matrix-org/matrix-public-archive/issues/6 2022-09-08 00:30:04 -06:00			${sanitizeHtml(`<title>${pageOptions.title}</title>`)}
Add Matrix favicon (#135) It's a cleaned up version of what [Matrix.org](https://matrix.org/) is using since that one is [so blurry](https://user-images.githubusercontent.com/558581/201302097-411b8033-4281-4cd3-a069-0c97ba3aa01f.png). Part of https://github.com/matrix-org/matrix-public-archive/issues/94 2022-11-11 13:50:41 -07:00			`<link rel="icon" href="/img/favicon.ico" sizes="any">`
			`<link rel="icon" href="/img/favicon.svg" type="image/svg+xml">`
Room directory landing page v1 (#61) Part of https://github.com/matrix-org/matrix-public-archive/issues/6 2022-09-08 00:30:04 -06:00			`${pageOptions.styles`
Add `Content-Security-Policy` (CSP) (#81) Add `Content-Security-Policy` (CSP) that restricts the page to just what it is expected to do. This helps limit the damage that can be done by any XSS attack. Fix https://github.com/matrix-org/internal-config/issues/1341 2022-10-19 11:07:39 -06:00			`.map(`
			`(styleUrl) =>`
			`<link href="${styleUrl}" rel="stylesheet" nonce="${pageOptions.cspNonce}">`
			`)`
Room directory landing page v1 (#61) Part of https://github.com/matrix-org/matrix-public-archive/issues/6 2022-09-08 00:30:04 -06:00			`.join('\n')}`
			`</head>`
			`<body>`
			`${hydrogenHtmlOutput}`
Increase perceived performance by scrolling to the right spot before Hydrogen loads (#128) 2022-11-09 17:57:33 -07:00
			`${`
			`/**`
			`* 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>`

Room directory landing page v1 (#61) Part of https://github.com/matrix-org/matrix-public-archive/issues/6 2022-09-08 00:30:04 -06:00			`${pageOptions.scripts`
Add `Content-Security-Policy` (CSP) (#81) Add `Content-Security-Policy` (CSP) that restricts the page to just what it is expected to do. This helps limit the damage that can be done by any XSS attack. Fix https://github.com/matrix-org/internal-config/issues/1341 2022-10-19 11:07:39 -06:00			`.map(`
			`(scriptUrl) =>`
			`<script type="text/javascript" src="${scriptUrl}" nonce="${pageOptions.cspNonce}"></script>`
			`)`
Room directory landing page v1 (#61) Part of https://github.com/matrix-org/matrix-public-archive/issues/6 2022-09-08 00:30:04 -06:00			`.join('\n')}`
Add `Content-Security-Policy` (CSP) (#81) Add `Content-Security-Policy` (CSP) that restricts the page to just what it is expected to do. This helps limit the damage that can be done by any XSS attack. Fix https://github.com/matrix-org/internal-config/issues/1341 2022-10-19 11:07:39 -06:00			`<script type="text/javascript" nonce="${pageOptions.cspNonce}">`
			`window.tracingSpansForRequest = ${safeJson(serializedSpans)};`
			`</script>`
Room directory landing page v1 (#61) Part of https://github.com/matrix-org/matrix-public-archive/issues/6 2022-09-08 00:30:04 -06:00			`</body>`
			`</html>`
			`;

			`return pageHtml;`
			`}`

			`module.exports = renderHydrogenVmRenderScriptToPageHtml;`