Stephan Lo
8785b327dd
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.
70 lines
1.3 KiB
CSS
70 lines
1.3 KiB
CSS
/* LikeC4 Component Styles for Hugo/Docsy */
|
|
likec4-view {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.likec4-container {
|
|
width: 100%;
|
|
height: 600px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
background: #f9f9f9;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.likec4-loading {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #666;
|
|
font-size: 14px;
|
|
font-family: system-ui, sans-serif;
|
|
}
|
|
|
|
.likec4-loading::after {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-left: 8px;
|
|
border: 2px solid #dee2e6;
|
|
border-top: 2px solid #007bff;
|
|
border-radius: 50%;
|
|
animation: likec4-spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes likec4-spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.likec4-header {
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #e9ecef;
|
|
padding: 8px 16px;
|
|
font-size: 12px;
|
|
color: #495057;
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
|
|
/* Dark mode support for Docsy */
|
|
body[data-dark-mode] .likec4-container {
|
|
background: #1e1e1e;
|
|
border-color: #444;
|
|
}
|
|
|
|
body[data-dark-mode] .likec4-header {
|
|
background: #2d2d2d;
|
|
border-bottom-color: #444;
|
|
color: #ccc;
|
|
}
|
|
|
|
body[data-dark-mode] .likec4-loading {
|
|
color: #ccc;
|
|
}
|