squibview/examples/example_autoload_custom_umd.html at main · deftio/squibview · 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Autoload Example (UMD) - SquibView</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='%23f57c00' stroke='%23000' stroke-width='1'/><path d='M2 16h28M16 2a14 14 0 0114 14 14 14 0 01-14 14 14 14 0 01-14-14A14 14 0 0116 2zm0 0v28M9 16a7 7 0 0014 0 7 7 0 00-14 0z' fill='none' stroke='%23000' stroke-width='1'/></svg>">

  <!-- SquibView CSS -->
  <link rel="stylesheet" href="../dist/squibview.min.css">

  <!-- Base example styles -->
  <link rel="stylesheet" href="examples.css">

  <!-- Pre-load Highlight.js with GitHub Dark theme -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/rust.min.js"></script>

  <style>
    /* Page-specific styles */
    #editor {
      height: calc(100vh - 120px);
    }
  </style>
</head>
<body>
  <div class="example-header">
    <h1 class="example-title">SquibView Custom Autoload Example (UMD)</h1>
    <div class="example-version" id="version-display"></div>
    <p class="example-description">
      Demonstrates custom autoload configurations using UMD build: pre-load some libraries, use custom CDNs, or disable specific libraries.
    </p>
  </div>

  <div class="editor-container">
    <div id="editor"></div>
  </div>

  <!-- SquibView UMD build - same build as manual examples -->
  <script src="../dist/squibview.umd.min.js"></script>

  <script>
    // Wait for DOM to be ready
    document.addEventListener('DOMContentLoaded', async function() {
      // Set version display from the library
      if (SquibView.version && SquibView.version.version) {
        document.getElementById("version-display").textContent = `Version ${SquibView.version.version}`;
      }
      try {
        // Load sample content
        const response = await fetch('./sample-content.md');
        const content = await response.text();

        // Create SquibView instance with custom autoload config
        // Highlight.js is already loaded above, autoloader will detect and use it
        const editor = new SquibView('#editor', {
          initialView: 'split',
          showControls: true,
          titleShow: false,
          autoload_deps: {
            // Highlight.js is pre-loaded, will be detected automatically
            hljs: 'ondemand',

            // Load Mermaid on demand with custom CDN
            mermaid: 'ondemand',

            // Disable MathJax completely
            mathjax: false,

            // Enable other libraries
            leaflet: 'ondemand',
            three: 'ondemand',

            // Use alternative CDN for Mermaid
            cdnUrls: {
              mermaid: {
                script: 'https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js'
              }
            }
          }
        });

        editor.setContent(content, 'md');

        // Make editor available globally for debugging
        window.editor = editor;

        console.log('SquibView initialized with custom autoload configuration');
        console.log('Highlight.js was pre-loaded and will be used');
        console.log('MathJax is disabled, other libraries load on-demand');

      } catch (error) {
        console.error('Failed to initialize SquibView:', error);
        document.getElementById('editor').innerHTML = `
          <div style="padding: 20px; color: red;">
            Failed to initialize: ${error.message}
          </div>
        `;
      }
    });
  </script>
</body>
</html>