website-and-documentation/static/js/likec4-loader.js

/* LikeC4 Webcomponent Loader for Hugo/Docsy */
(function() {
    'use strict';
    
    // Check if the component is already loaded
    if (customElements.get('likec4-view')) {
        console.log('LikeC4 component already loaded');
        return;
    }
    
    // Function to dynamically import the ES6 module
    function loadLikeC4Module() {
        // Try different possible paths for the webcomponent
        const possiblePaths = [
            // Absolute Hugo paths (most likely to work)
            '/js/likec4-webcomponent.js',
            // Relative paths from current page
            '../js/likec4-webcomponent.js',
            '../../js/likec4-webcomponent.js',
            '../../../js/likec4-webcomponent.js',
            // Fallback paths
            './js/likec4-webcomponent.js',
            'js/likec4-webcomponent.js'
        ];
        
        let pathIndex = 0;
        
        function tryNextPath() {
            if (pathIndex >= possiblePaths.length) {
                console.error('All module paths failed');
                showErrorMessage('Failed to load interactive diagram module');
                return;
            }
            
            const modulePath = possiblePaths[pathIndex];
            console.log(`Trying to load LikeC4 module from: ${modulePath}`);
            
            // Dynamic import with error handling
            try {
                const importFunction = new Function('specifier', 'return import(specifier)');
                importFunction(modulePath)
                    .then(function(module) {
                        console.log('LikeC4 webcomponent loaded successfully');
                        // Hide any loading indicators
                        hideLoadingIndicators();
                    })
                    .catch(function(error) {
                        console.warn(`Failed to load from ${modulePath}:`, error.message);
                        pathIndex++;
                        tryNextPath();
                    });
            } catch (error) {
                console.warn(`Dynamic import failed for ${modulePath}:`, error.message);
                pathIndex++;
                tryNextPath();
            }
        }
        
        tryNextPath();
    }
    
    function hideLoadingIndicators() {
        const loadingElements = document.querySelectorAll('.likec4-loading, #likec4-loading');
        loadingElements.forEach(function(el) {
            el.style.display = 'none';
        });
    }
    
    function showErrorMessage(message) {
        const containers = document.querySelectorAll('.likec4-container');
        containers.forEach(function(container) {
            const errorDiv = document.createElement('div');
            errorDiv.style.cssText = 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #dc3545; text-align: center; font-size: 14px; max-width: 300px;';
            errorDiv.textContent = message;
            container.appendChild(errorDiv);
        });
        hideLoadingIndicators();
    }
    
    // Check if DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', loadLikeC4Module);
    } else {
        loadLikeC4Module();
    }
})();