Frontend iframe renderer framework: 3D models, OpenAPI (#37233)

Introduces a frontend external-render framework that runs renderer
plugins inside an `iframe` (loaded via `srcdoc` to keep the CSP
`sandbox` directive working without origin-related console noise), and
migrates the 3D viewer and OpenAPI/Swagger renderers onto it. PDF and
asciicast paths are refactored to share the same `data-render-name`
mechanism.

Adds e2e coverage for 3D, PDF, asciicast and OpenAPI render paths, plus
a regression for the `RefTypeNameSubURL` double-escape on non-ASCII
branch names.

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind
2026-04-18 00:30:17 +02:00
committed by GitHub
parent 0161f3019b
commit d5831b9385
32 changed files with 540 additions and 293 deletions
+7 -4
View File
@@ -26,14 +26,16 @@ function isValidCssColor(s: string | null): boolean {
return reHex.test(s) || reRgb.test(s);
}
const url = new URL(window.location.href);
const thisScriptElem = document.querySelector('script#gitea-external-render-helper');
const queryString = thisScriptElem?.getAttribute('data-render-query-string') ?? window.location.search.substring(1);
const queryParams = new URLSearchParams(queryString);
const isDarkTheme = url.searchParams.get('gitea-is-dark-theme') === 'true';
const isDarkTheme = queryParams.get('gitea-is-dark-theme') === 'true';
if (isDarkTheme) {
document.documentElement.setAttribute('data-gitea-theme-dark', String(isDarkTheme));
}
const backgroundColor = url.searchParams.get('gitea-iframe-bgcolor');
const backgroundColor = queryParams.get('gitea-iframe-bgcolor');
if (isValidCssColor(backgroundColor)) {
// create a style element to set background color, then it can be overridden by the content page's own style if needed
const style = document.createElement('style');
@@ -41,12 +43,13 @@ if (isValidCssColor(backgroundColor)) {
:root {
--gitea-iframe-bgcolor: ${backgroundColor};
}
html, body { margin: 0; padding: 0 }
body { background: ${backgroundColor}; }
`;
document.head.append(style);
}
const iframeId = url.searchParams.get('gitea-iframe-id');
const iframeId = queryParams.get('gitea-iframe-id');
if (iframeId) {
// iframe is in different origin, so we need to use postMessage to communicate
const postIframeMsg = (cmd: string, data: Record<string, any> = {}) => {