CanvasCreator/index.html at main · APIOpsCycles/CanvasCreator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CanvasCreator Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link id="canvasCreatorFavicon" rel="icon" type="image/png" href="./img/apiops-cycles-logo-2025-32.png" />
    <link id="canvasCreatorStylesheet" rel="stylesheet" href="./canvascreator.min.css" />
  </head>
  <body>
    <main style="max-width: 1400px; margin: 0 auto; padding: 24px;">
      <div id="canvasApp"></div>
    </main>

    <script type="module">
      const configuredAssetBase = '<%= assetBase %>';
      const configuredVersion = '<%= version %>';
      const hasTemplateTokens =
        configuredAssetBase.includes('<%=') || configuredVersion.includes('<%=');
      const resolvedAssetBase = hasTemplateTokens
        ? '.'
        : configuredAssetBase || '.';
      const versionSuffix = hasTemplateTokens ? '' : `?v=${configuredVersion}`;

      const stylesheet = document.getElementById('canvasCreatorStylesheet');
      const favicon = document.getElementById('canvasCreatorFavicon');
      if (stylesheet) {
        stylesheet.href = `${resolvedAssetBase}/canvascreator.min.css${versionSuffix}`;
      }
      if (favicon) {
        favicon.href = `${resolvedAssetBase}/img/apiops-cycles-logo-2025-32.png${versionSuffix}`;
      }

      const moduleCandidates = [
        `${resolvedAssetBase}/canvascreator.esm.min.js${versionSuffix}`,
        './dist/canvascreator.esm.min.js',
      ];

      let CanvasCreator;

      for (const modulePath of moduleCandidates) {
        try {
          ({ default: CanvasCreator } = await import(modulePath));
          break;
        } catch (_error) {
          // Try the next module candidate.
        }
      }

      if (CanvasCreator) {
        CanvasCreator.initCanvasCreator({
          container: document.getElementById('canvasApp'),
          assetBase: resolvedAssetBase,
          mode: 'standalone',
          fitToContainer: true,
        });
      }
    </script>
  </body>
</html>