website-and-documentation/content/en/docs-old/architecture/_index.md

10 lines
279 B
Markdown
Raw Normal View History

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
---
title: "Architecture"
linkTitle: "Architecture"
weight: 3
description: >
System architecture documentation and interactive diagrams
---
This section contains architecture documentation for the IPCEI-CIS Developer Framework, including interactive C4 architecture diagrams.