| 1 | export type PreviewMode = 'slide' | 'overview' |
| 2 | |
| 3 | export function generateReadyHtml(port: number, mode: PreviewMode, hashRoute: boolean, initialSlideNo?: number) { |
| 4 | const slideNoQuery = initialSlideNo == null ? '' : `&slideNo=${encodeURIComponent(String(initialSlideNo))}` |
| 5 | const iframeSrc = mode === 'overview' |
| 6 | ? hashRoute |
| 7 | ? `http://localhost:${port}?embedded=true#/overview?mode=preview${slideNoQuery}` |
| 8 | : `http://localhost:${port}/overview?mode=preview&embedded=true${slideNoQuery}` |
| 9 | : `http://localhost:${port}?embedded=true` |
| 10 | return ` |
| 11 | <head> |
| 12 | <meta |
| 13 | http-equiv="Content-Security-Policy" |
| 14 | content="default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';" |
| 15 | /> |
| 16 | <style> |
| 17 | :root { |
| 18 | overflow: hidden; |
| 19 | --scale: 0.75; |
| 20 | } |
| 21 | body { |
| 22 | padding: 0; |
| 23 | width: 100vw; |
| 24 | height: 100vh; |
| 25 | overflow: visible; |
| 26 | } |
| 27 | iframe { |
| 28 | border: none; |
| 29 | width: calc(100% / var(--scale)); |
| 30 | height: calc(100% / var(--scale)); |
| 31 | transform: scale(var(--scale)); |
| 32 | transform-origin: 0 0; |
| 33 | } |
| 34 | </style> |
| 35 | <head> |
| 36 | <body> |
| 37 | <iframe id="iframe" sandbox="allow-same-origin allow-scripts" src="${iframeSrc}"></iframe> |
| 38 | <script> |
| 39 | const vscode = acquireVsCodeApi() |
| 40 | const iframe = document.getElementById('iframe') |
| 41 | window.addEventListener('message', ({ data }) => { |
| 42 | if (data && data.target === 'slidev') { |
| 43 | if (data.sender === 'vscode') |
| 44 | iframe.contentWindow.postMessage(data, '*') |
| 45 | else if (data.type === 'command' || data.type === 'overview-scroll' || data.type === 'open-external') |
| 46 | vscode.postMessage(data) |
| 47 | else |
| 48 | vscode.postMessage({ |
| 49 | ...data, |
| 50 | type: 'update-state', |
| 51 | }) |
| 52 | } |
| 53 | }) |
| 54 | </script> |
| 55 | </body>` |
| 56 | } |
| 57 |