website-and-documentation/layouts/partials/hooks/head-end.html

{{ if .Site.Params.likec4.enable }}
<!-- LikeC4 Interactive Architecture Diagrams -->
<link rel="stylesheet" href="{{ "css/likec4-styles.css" | relURL }}">
<script src="{{ "js/likec4-loader.js" | relURL }}"></script>
{{ end }}

<!-- Version Info Styles & Script -->
<link rel="stylesheet" href="{{ "css/version-info.css" | relURL }}">
{{ partial "version-info-script.html" . }}
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation. 2025-10-24 13:08:59 +02:00			`{{ if .Site.Params.likec4.enable }}`
			`<!-- LikeC4 Interactive Architecture Diagrams -->`
			`<link rel="stylesheet" href="{{ "css/likec4-styles.css" \| relURL }}">`
			`<script src="{{ "js/likec4-loader.js" \| relURL }}"></script>`
			`{{ end }}`
feat(ui): add git version info display in header - Display current branch/tag and commit hash in navbar center - Show dirty working directory indicator with yellow badge - Add automatic build info generation in Task workflow - Include build timestamp and user information - Style with responsive design (hidden on mobile) - Add .gitignore entries for generated build artifacts 2025-10-25 23:49:48 +02:00
			`<!-- Version Info Styles & Script -->`
			`<link rel="stylesheet" href="{{ "css/version-info.css" \| relURL }}">`
			`{{ partial "version-info-script.html" . }}`