website-and-documentation/layouts/shortcodes/likec4-view.html

{{- $view := .Get "view" -}}
{{- $project := .Get "project" | default "architecture" -}}
{{- $title := .Get "title" | default (print "Architecture View: " $view) -}}
{{- $uniqueId := printf "likec4-loading-%s" (md5 $view) -}}

<div class="likec4-container">
    <div class="likec4-header">
        {{ $title }}
    </div>
    <likec4-view view-id="{{ $view }}" browser="true"></likec4-view>
    <div class="likec4-loading" id="{{ $uniqueId }}">
        Loading architecture diagram...
    </div>
</div>

<script>
(function() {
    const loadingId = '{{ $uniqueId }}';
    document.addEventListener('DOMContentLoaded', function() {
        let attempts = 0;
        const maxAttempts = 10;
        
        function checkLikeC4Loading() {
            attempts++;
            const component = document.querySelector('likec4-view[view-id="{{ $view }}"]');
            const loading = document.getElementById(loadingId);
            
            if (component && component.shadowRoot && component.shadowRoot.children.length > 0) {
                if (loading) loading.style.display = 'none';
                console.log('LikeC4 component "{{ $view }}" loaded successfully');
            } else if (attempts >= maxAttempts) {
                console.warn('LikeC4 component "{{ $view }}" failed to load');
                if (loading) {
                    loading.innerHTML = 'Interactive diagram failed to load. <br><small>Please ensure JavaScript is enabled and the webcomponent is generated.</small>';
                    loading.style.color = '#dc3545';
                }
            } else {
                setTimeout(checkLikeC4Loading, 1000);
            }
        }
        
        if (typeof window.customElements !== 'undefined') {
            setTimeout(checkLikeC4Loading, 1500);
        } else {
            const loading = document.getElementById(loadingId);
            if (loading) {
                loading.innerHTML = 'Interactive diagrams require a modern browser with JavaScript enabled.';
                loading.style.color = '#dc3545';
            }
        }
    });
})();
</script>