2025-11-07 11:50:17 +01:00
var LikeC4Views = ( function ( F6 ) { "use strict" ; /* prettier-ignore-start */
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
/* eslint-disable */
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* This file was generated
* DO NOT EDIT MANUALLY !
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
2025-11-07 11:50:17 +01:00
function w1e ( e , r ) { for ( var n = 0 ; n < r . length ; n ++ ) { const o = r [ n ] ; if ( typeof o != "string" && ! Array . isArray ( o ) ) { for ( const a in o ) if ( a !== "default" && ! ( a in e ) ) { const i = Object . getOwnPropertyDescriptor ( o , a ) ; i && Object . defineProperty ( e , a , i . get ? i : { enumerable : ! 0 , get : ( ) => o [ a ] } ) } } } return Object . freeze ( Object . defineProperty ( e , Symbol . toStringTag , { value : "Module" } ) ) } function vO ( e ) { return e && e . _ _esModule && Object . prototype . hasOwnProperty . call ( e , "default" ) ? e . default : e } var H6 = { exports : { } } , h1 = { } ; / * *
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
* @ license React
* react - jsx - runtime . production . js
*
* Copyright ( c ) Meta Platforms , Inc . and affiliates .
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /var xO;function k1e(){if(xO)return h1;xO=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(o,a,i){var l=null;if(i!==void 0&&(l=""+i),a.key!==void 0&&(l=""+a.key),"key"in a){i={};for(var s in a)s!=="key"&&(i[s]=a[s])}else i=a;return a=i.ref,{$$typeof:e,type:o,key:l,ref:a!==void 0?a:null,props:i}}return h1.Fragment=r,h1.jsx=n,h1.jsxs=n,h1}var wO;function _1e(){return wO||(wO=1,H6.exports=k1e()),H6.exports}var y=_1e(),q6={exports:{}},Bt={};/ * *
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
* @ license React
* react . production . js
*
* Copyright ( c ) Meta Platforms , Inc . and affiliates .
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /var kO;function E1e(){if(kO)return Bt;kO=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.portal"),n=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),a=Symbol.for("react.profiler"),i=Symbol.for("react.consumer"),l=Symbol.for("react.context"),s=Symbol.for("react.forward_ref"),c=Symbol.for("react.suspense"),u=Symbol.for("react.memo"),d=Symbol.for("react.lazy"),p=Symbol.iterator;function f(F){return F===null||typeof F!="object"?null:(F=p&&F[p]||F["@@iterator"],typeof F=="function"?F:null)}var g={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},b=Object.assign,x={};function w(F,J,Q){this.props=F,this.context=J,this.refs=x,this.updater=Q||g}w.prototype.isReactComponent={},w.prototype.setState=function(F,J){if(typeof F!="object"&&typeof F!="function"&&F!=null)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,F,J,"setState")},w.prototype.forceUpdate=function(F){this.updater.enqueueForceUpdate(this,F,"forceUpdate")};function k(){}k.prototype=w.prototype;function C(F,J,Q){this.props=F,this.context=J,this.refs=x,this.updater=Q||g}var _=C.prototype=new k;_.constructor=C,b(_,w.prototype),_.isPureReactComponent=!0;var T=Array.isArray,R={H:null,A:null,T:null,S:null,V:null},A=Object.prototype.hasOwnProperty;function D(F,J,Q,z,W,X){return Q=X.ref,{$$typeof:e,type:F,key:J,ref:Q!==void 0?Q:null,props:X}}function N(F,J){return D(F.type,J,void 0,void 0,void 0,F.props)}function $(F){return typeof F=="object"&&F!==null&&F.$$typeof===e}function M(F){var J={"=":"=0",":":"=2"};return"$"+F.replace(/ [ = : ] / g , function ( Q ) { return J [ Q ] } ) } var j = /\/+/g ; function L ( F , J ) { return typeof F == "object" && F !== null && F . key != null ? M ( "" + F . key ) : J . toString ( 36 ) } function Y ( ) { } function O ( F ) { switch ( F . status ) { case "fulfilled" : return F . value ; case "rejected" : throw F . reason ; default : switch ( typeof F . status == "string" ? F . then ( Y , Y ) : ( F . status = "pending" , F . then ( function ( J ) { F . status === "pending" && ( F . status = "fulfilled" , F . value = J ) } , function ( J ) { F . status === "pending" && ( F . status = "rejected" , F . reason = J ) } ) ) , F . status ) { case "fulfilled" : return F . value ; case "rejected" : throw F . reason } } throw F } function U ( F , J , Q , z , W ) { var X = typeof F ; ( X === "undefined" || X === "boolean" ) && ( F = null ) ; var Z = ! 1 ; if ( F === null ) Z = ! 0 ; else switch ( X ) { case "bigint" : case "string" : case "number" : Z = ! 0 ; break ; case "object" : switch ( F . $$typeof ) { case e : case r : Z = ! 0 ; break ; case d : return Z = F . _init , U ( Z ( F . _payload ) , J , Q , z , W ) } } if ( Z ) return W = W ( F ) , Z = z === "" ? "." + L ( F , 0 ) : z , T ( W ) ? ( Q = "" , Z != null && ( Q = Z . replace ( j , "$&/" ) + "/" ) , U ( W , J , Q , "" , function ( re ) { return re } ) ) : W != null && ( $ ( W ) && ( W = N ( W , Q + ( W . key == null || F && F . key === W . key ? "" : ( "" + W . key ) . replace ( j , "$&/" ) + "/" ) + Z ) ) , J . push ( W ) ) , 1 ; Z = 0 ; var oe = z === "" ? "." : z + ":" ; if ( T ( F ) ) for ( var ee = 0 ; ee < F . length ; ee ++ ) z = F [ ee ] , X = oe + L ( z , ee ) , Z += U ( z , J , Q , X , W ) ; else if ( ee = f ( F ) , typeof ee == "function" ) for ( F = ee . call ( F ) , ee = 0 ; ! ( z = F . next ( ) ) . done ; ) z = z . value , X = oe + L ( z , ee ++ ) , Z += U ( z , J , Q , X , W ) ; else if ( X === "object" ) { if ( typeof F . then == "function" ) return U ( O ( F ) , J , Q , z , W ) ; throw J = String ( F ) , Error ( "Objects are not valid as a React child (found: " + ( J === "[object Object]" ? "object with keys {" + Object . keys ( F ) . join ( ", " ) + "}" : J ) + "). If you meant to render a collection of children, use an array instead." ) } return Z } function I ( F , J , Q ) { if ( F == null ) return F ; var z = [ ] , W = 0 ; return U ( F , z , "" , "" , function ( X ) { return J . call ( Q , X , W ++ ) } ) , z } function q ( F ) { if ( F . _status === - 1 ) { var J = F . _result ; J = J ( ) , J . then ( function ( Q ) { ( F . _status === 0 || F . _status === - 1 ) && ( F . _status = 1 , F . _result = Q ) } , function ( Q ) { ( F . _status === 0 || F . _status === - 1 ) && ( F . _status = 2 , F . _result = Q ) } ) , F . _status === - 1 && ( F . _status = 0 , F . _result = J ) } if ( F . _status === 1 ) return F . _result . default ; throw F . _result } var V = typeof reportError == "function" ? reportError : function ( F ) { if ( typeof window == "object" && typeof window . ErrorEvent == "function" ) { var J = new window . ErrorEvent ( "error" , { bubbles : ! 0 , cancelable : ! 0 , message : typeof F == "object" && F !== null && typeof F . message == "string" ? String ( F . message ) : String ( F ) , error : F } ) ; if ( ! window . dispatchEvent ( J ) ) return } else if ( typeof process == "object" && typeof process . e
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
* @ license React
* react - dom . production . js
*
* Copyright ( c ) Meta Platforms , Inc . and affiliates .
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /var EO;function S1e(){if(EO)return _o;EO=1;var e=U6();function r(c){var u="https:/ / react . dev / errors / "+c;if(1<arguments.length){u+=" ? args [ ] = "+encodeURIComponent(arguments[1]);for(var d=2;d<arguments.length;d++)u+=" & args [ ] = "+encodeURIComponent(arguments[d])}return" Minified React error # "+c+" ; visit "+u+" for the full message or use the non - minified dev environment for full errors and additional helpful warnings . "}function n(){}var o={d:{f:n,r:function(){throw Error(r(522))},D:n,C:n,L:n,m:n,X:n,S:n,M:n},p:0,findDOMNode:null},a=Symbol.for(" react . portal ");function i(c,u,d){var p=3<arguments.length&&arguments[3]!==void 0?arguments[3]:null;return{$$typeof:a,key:p==null?null:" "+p,children:c,containerInfo:u,implementation:d}}var l=e.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;function s(c,u){if(c===" font ")return" ";if(typeof u==" string ")return u===" use - credentials "?u:" "}return _o.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=o,_o.createPortal=function(c,u){var d=2<arguments.length&&arguments[2]!==void 0?arguments[2]:null;if(!u||u.nodeType!==1&&u.nodeType!==9&&u.nodeType!==11)throw Error(r(299));return i(c,u,null,d)},_o.flushSync=function(c){var u=l.T,d=o.p;try{if(l.T=null,o.p=2,c)return c()}finally{l.T=u,o.p=d,o.d.f()}},_o.preconnect=function(c,u){typeof c==" string "&&(u?(u=u.crossOrigin,u=typeof u==" string "?u===" use - credentials "?u:" ":void 0):u=null,o.d.C(c,u))},_o.prefetchDNS=function(c){typeof c==" string "&&o.d.D(c)},_o.preinit=function(c,u){if(typeof c==" string "&&u&&typeof u.as==" string "){var d=u.as,p=s(d,u.crossOrigin),f=typeof u.integrity==" string "?u.integrity:void 0,g=typeof u.fetchPriority==" string "?u.fetchPriority:void 0;d===" style "?o.d.S(c,typeof u.precedence==" string "?u.precedence:void 0,{crossOrigin:p,integrity:f,fetchPriority:g}):d===" script "&&o.d.X(c,{crossOrigin:p,integrity:f,fetchPriority:g,nonce:typeof u.nonce==" string "?u.nonce:void 0})}},_o.preinitModule=function(c,u){if(typeof c==" string ")if(typeof u==" object "&&u!==null){if(u.as==null||u.as===" script "){var d=s(u.as,u.crossOrigin);o.d.M(c,{crossOrigin:d,integrity:typeof u.integrity==" string "?u.integrity:void 0,nonce:typeof u.nonce==" string "?u.nonce:void 0})}}else u==null&&o.d.M(c)},_o.preload=function(c,u){if(typeof c==" string "&&typeof u==" object "&&u!==null&&typeof u.as==" string "){var d=u.as,p=s(d,u.crossOrigin);o.d.L(c,d,{crossOrigin:p,integrity:typeof u.integrity==" string "?u.integrity:void 0,nonce:typeof u.nonce==" string "?u.nonce:void 0,type:typeof u.type==" string "?u.type:void 0,fetchPriority:typeof u.fetchPriority==" string "?u.fetchPriority:void 0,referrerPolicy:typeof u.referrerPolicy==" string "?u.referrerPolicy:void 0,imageSrcSet:typeof u.imageSrcSet==" string "?u.imageSrcSet:void 0,imageSizes:typeof u.imageSizes==" string "?u.imageSizes:void 0,media:typeof u.media==" string "?u.media:void 0})}},_o.preloadModule=function(c,u){if(typeof c==" string ")if(u){var d=s(u.as,u.crossOrigin);o.d.m(c,{as:typeof u.as==" string "&&u.as!==" script "?u.as:void 0,crossOrigin:d,integrity:typeof u.integrity==" string "?u.integrity:void 0})}else o.d.m(c)},_o.requestFormReset=function(c){o.d.r(c)},_o.unstable_batchedUpdates=function(c,u){return c(u)},_o.useFormState=function(c,u,d){return l.H.useFormState(c,u,d)},_o.useFormStatus=function(){return l.H.useHostTransitionStatus()},_o.version=" 19.1 . 1 ",_o}var SO;function CO(){if(SO)return V6.exports;SO=1;function e(){if(!(typeof __REACT_DEVTOOLS_GLOBAL_HOOK__>" u "||typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE!=" function "))try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(r){console.error(r)}}return e(),V6.exports=S1e(),V6.exports}var Bi=CO();const TO=vO(Bi);function C1e(e,r,n){let o=a=>e(a,...r);return n===void 0?o:Object.assign(o,{lazy:n,lazyArgs:r})}function ba(e,r,n){let o=e.length-r.length;if(o===0)return e(...r);if(o===1)return C1e(e,r,n);throw Error(" Wrong number of arguments ")}function _h(...e){return ba(T1e,e)}const T1e=(e,r)=>e.length>=r;function mt(e,r){if(typeof e>" u "||e==null){const n=typeof r==" function " ? r ( ) : r ; throw new Error ( n ? ? ` Expected defined value, but received ${ e } ` ) } return e } function nt ( e ,
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
* @ license
*
* The APCA contrast prediction algorithm is based of the formulas published
* in the APCA - 1.0 . 98 G specification by Myndex . The specification is available at :
* https : //raw.githubusercontent.com/Myndex/apca-w3/master/images/APCAw3_0.1.17_APCA0.0.98G.svg
*
* Note that the APCA implementation is still beta , so please update to
* future versions of chroma . js when they become available .
*
* You can read more about the APCA Readability Criterion at
* https : //readtech.org/ARC/
2025-11-07 11:50:17 +01:00
* / c o n s t Y O = . 0 2 7 , J 0 e = 5 e - 4 , e y e = . 1 , W O = 1 . 1 4 , X v = . 0 2 2 , G O = 1 . 4 1 4 , t y e = ( e , r ) = > { e = n e w B e ( e ) , r = n e w B e ( r ) , e . a l p h a ( ) < 1 & & ( e = C h ( r , e , e . a l p h a ( ) , " r g b " ) ) ; c o n s t n = X O ( . . . e . r g b ( ) ) , o = X O ( . . . r . r g b ( ) ) , a = n > = X v ? n : n + M a t h . p o w ( X v - n , G O ) , i = o > = X v ? o : o + M a t h . p o w ( X v - o , G O ) , l = M a t h . p o w ( i , . 5 6 ) - M a t h . p o w ( a , . 5 7 ) , s = M a t h . p o w ( i , . 6 5 ) - M a t h . p o w ( a , . 6 2 ) , c = M a t h . a b s ( i - a ) < J 0 e ? 0 : a < i ? l * W O : s * W O ; r e t u r n ( M a t h . a b s ( c ) < e y e ? 0 : c > 0 ? c - Y O : c + Y O ) * 1 0 0 } ; f u n c t i o n X O ( e , r , n ) { r e t u r n . 2 1 2 6 7 2 9 * M a t h . p o w ( e / 2 5 5 , 2 . 4 ) + . 7 1 5 1 5 2 2 * M a t h . p o w ( r / 2 5 5 , 2 . 4 ) + . 0 7 2 1 7 5 * M a t h . p o w ( n / 2 5 5 , 2 . 4 ) } c o n s t { s q r t : M s , p o w : h n , m i n : r y e , m a x : n y e , a t a n 2 : K O , a b s : Z O , c o s : K v , s i n : Q O , e x p : o y e , P I : J O } = M a t h ; f u n c t i o n a y e ( e , r , n = 1 , o = 1 , a = 1 ) { v a r i = f u n c t i o n ( z ) { r e t u r n 3 6 0 * z / ( 2 * J O ) } , l = f u n c t i o n ( z ) { r e t u r n 2 * J O * z / 3 6 0 } ; e = n e w B e ( e ) , r = n e w B e ( r ) ; c o n s t [ s , c , u ] = A r r a y . f r o m ( e . l a b ( ) ) , [ d , p , f ] = A r r a y . f r o m ( r . l a b ( ) ) , g = ( s + d ) / 2 , b = M s ( h n ( c , 2 ) + h n ( u , 2 ) ) , x = M s ( h n ( p , 2 ) + h n ( f , 2 ) ) , w = ( b + x ) / 2 , k = . 5 * ( 1 - M s ( h n ( w , 7 ) / ( h n ( w , 7 ) + h n ( 2 5 , 7 ) ) ) ) , C = c * ( 1 + k ) , _ = p * ( 1 + k ) , T = M s ( h n ( C , 2 ) + h n ( u , 2 ) ) , R = M s ( h n ( _ , 2 ) + h n ( f , 2 ) ) , A = ( T + R ) / 2 , D = i ( K O ( u , C ) ) , N = i ( K O ( f , _ ) ) , $ = D > = 0 ? D : D + 3 6 0 , M = N > = 0 ? N : N + 3 6 0 , j = Z O ( $ - M ) > 1 8 0 ? ( $ + M + 3 6 0 ) / 2 : ( $ + M ) / 2 , L = 1 - . 1 7 * K v ( l ( j - 3 0 ) ) + . 2 4 * K v ( l ( 2 * j ) ) + . 3 2 * K v ( l ( 3 * j + 6 ) ) - . 2 * K v ( l ( 4 * j - 6 3 ) ) ; l e t Y = M - $ ; Y = Z O ( Y ) < = 1 8 0 ? Y : M < = $ ? Y + 3 6 0 : Y - 3 6 0 , Y = 2 * M s ( T * R ) * Q O ( l ( Y ) / 2 ) ; c o n s t O = d - s , U = R - T , I = 1 + . 0 1 5 * h n ( g - 5 0 , 2 ) / M s ( 2 0 + h n ( g - 5 0 , 2 ) ) , q = 1 + . 0 4 5 * A , V = 1 + . 0 1 5 * A * L , G = 3 0 * o y e ( - h n ( ( j - 2 7 5 ) / 2 5 , 2 ) ) , J = - ( 2 * M s ( h n ( A , 7 ) / ( h n ( A , 7 ) + h n ( 2 5 , 7 ) ) ) ) * Q O ( 2 * l ( G ) ) , Q = M s ( h n ( O / ( n * I ) , 2 ) + h n ( U / ( o * q ) , 2 ) + h n ( Y / ( a * V ) , 2 ) + J * ( U / ( o * q ) ) * ( Y / ( a * V ) ) ) ; r e t u r n n y e ( 0 , r y e ( 1 0 0 , Q ) ) } f u n c t i o n i y e ( e , r , n = " l a b " ) { e = n e w B e ( e ) , r = n e w B e ( r ) ; c o n s t o = e . g e t ( n ) , a = r . g e t ( n ) ; l e t i = 0 ; f o r ( l e t l i n o ) { c o n s t s = ( o [ l ] | | 0 ) - ( a [ l ] | | 0 ) ; i + = s * s } r e t u r n M a t h . s q r t ( i ) } c o n s t l y e = ( . . . e ) = > { t r y { r e t u r n n e w B e ( . . . e ) , ! 0 } c a t c h { r e t u r n ! 1 } } , s y e = { c o o l ( ) { r e t u r n G v ( [ T t . h s l ( 1 8 0 , 1 , . 9 ) , T t . h s l ( 2 5 0 , . 7 , . 4 ) ] ) } , h o t ( ) { r e t u r n G v ( [ " # 0 0 0 " , " # f 0 0 " , " # f f 0 " , " # f f f " ] ) . m o d e ( " r g b " ) } } , c _ = { O r R d : [ " # f f f 7 e c " , " # f e e 8 c 8 " , " # f d d 4 9 e " , " # f d b b 8 4 " , " # f c 8 d 5 9 " , " # e f 6 5 4 8 " , " # d 7 3 0 1 f " , " # b 3 0 0 0 0 " , " # 7 f 0 0 0 0 " ] , P u B u : [ " # f f f 7 f b " , " # e c e 7 f 2 " , " # d 0 d 1 e 6 " , " # a 6 b d d b " , " # 7 4 a 9 c f " , " # 3 6 9 0 c 0 " , " # 0 5 7 0 b 0 " , " # 0 4 5 a 8 d " , " # 0 2 3 8 5 8 " ] , B u P u : [ " # f 7 f c f d " , " # e 0 e c f 4 " , " # b f d 3 e 6 " , " # 9 e b c d a " , " # 8 c 9 6 c 6 " , " # 8 c 6 b b 1 " , " # 8 8 4 1 9 d " , " # 8 1 0 f 7 c " , " # 4 d 0 0 4 b " ] , O r a n g e s : [ " # f f f 5 e b " , " # f e e 6 c e " , " # f d d 0 a 2 " , " # f d a e 6 b " , " # f d 8 d 3 c " , " # f 1 6 9 1 3 " , " # d 9 4 8 0 1 " , " # a 6 3 6 0 3 " , " # 7 f 2 7 0 4 " ] , B u G n : [ " # f 7 f c f d " , " # e 5 f 5 f 9 " , " # c c e c e 6 " , " # 9 9 d 8 c 9 " , " # 6 6 c 2 a 4 " , " # 4 1 a e 7 6 " , " # 2 3 8 b 4 5 " , " # 0 0 6 d 2 c " , " # 0 0 4 4 1 b " ] , Y l O r B r : [ " # f f f f e 5 " , " # f f f 7 b c " , " # f e e 3 9 1 " , " # f e c 4 4 f " , " # f e 9 9 2 9 " , " # e c 7 0 1 4 " , " # c c 4 c 0 2 " , " # 9 9 3 4 0 4 " , " # 6 6 2 5 0 6 " ] , Y l G n : [ " # f f f f e 5 " , " # f 7 f c b 9 " , " # d 9 f 0 a 3 " , " # a d d d 8 e " , " # 7 8 c 6 7 9 " , " # 4 1 a b 5 d " , " # 2 3 8 4 4 3 " , " # 0 0 6 8 3 7 " , " # 0 0 4 5 2 9 " ] , R e d s : [ " # f f f 5 f 0 " , " # f e e 0 d 2 " , " # f c b b a 1 " , " # f c 9 2 7 2 " , " # f b 6 a 4 a " , " # e f 3 b 2 c " , " # c b 1 8 1 d " , " # a 5 0 f 1 5 " , " # 6 7 0 0 0 d " ] , R d P u : [ " # f f f 7 f 3 " , " # f d e 0 d d " , " # f c c 5 c 0 " , " # f a 9 f b 5 " , " # f 7 6 8 a 1 " , " # d d 3 4 9 7 " , " # a e 0 1 7 e " , " # 7 a 0 1 7 7 " , " # 4 9 0 0 6 a " ] , G r e e n s : [ " # f 7 f c f 5 " , " # e 5 f 5 e 0 " , " # c 7 e 9 c 0 " , " # a 1 d 9 9 b " , " # 7 4 c 4 7 6 " , " # 4 1 a b 5 d " , " # 2 3 8 b 4 5 " , " # 0 0 6 d 2 c " , " # 0 0 4 4 1 b " ] , Y l G n B u : [ " # f f f f d 9 " , " # e d f 8 b 1 " , " # c 7 e 9 b 4 " , " # 7 f c d b b " , " # 4 1 b 6 c 4 " , " # 1 d 9 1 c 0 " , " # 2 2 5 e a 8 " , " # 2 5 3 4 9 4 " , " # 0 8 1 d 5 8 " ] , P u r p l e s : [ " # f c f b f d " , " # e f e d f 5 " , " # d a d a e b " , " # b c b d d c " , " # 9 e 9 a c 8 " , " # 8 0 7 d b a " , " # 6 a 5 1 a 3 " , " # 5 4 2 7 8 f " , " # 3 f 0 0 7 d " ] , G n B u : [ " # f 7 f c f 0 " , " # e 0 f 3 d b " , " # c c e b c 5 " , " # a 8 d d b 5 " , " # 7 b c c c 4 " , " # 4 e b 3 d 3 " , " # 2 b 8 c b e " , " # 0 8 6 8 a c " , " # 0 8 4 0 8 1 " ] , G r e y s : [ " # f f f f f f " , " # f 0 f 0 f 0 " , " # d 9 d 9 d 9 " , " # b d b d b d " , " # 9 6 9 6 9 6 " , " # 7 3 7 3 7 3 " , " # 5 2 5 2 5 2 " , " # 2 5 2 5 2 5 " , " # 0 0 0 0 0 0 " ] , Y l O r R d : [ " # f f f f c c " , " # f f e d a 0 " , " # f e d 9 7 6 " , " # f e b 2 4 c " , " # f d 8 d 3 c " , " # f c 4 e 2 a " , " # e 3 1 a 1 c " , " # b d 0 0 2 6 " , " # 8 0 0 0 2 6 " ] , P u R d : [ " # f 7 f 4 f 9 " , " # e 7 e 1 e f " , " # d 4 b 9 d a " , " # c 9 9 4 c 7 " , " # d f 6 5 b 0 " , " # e 7 2 9 8 a " , " # c e 1 2 5 6 " , " # 9 8 0 0 4 3 " , " # 6 7 0 0 1 f " ] , B l u e s : [ " # f 7 f b f f " , " # d e e b f 7 " , " # c 6 d b e f " , " # 9 e c a e 1 " , " # 6 b a e d 6 " , " # 4 2 9 2 c 6 " , " # 2 1 7 1 b 5 " , " # 0 8 5 1 9 c " , " # 0 8 3 0 6 b " ] , P u B u G n : [ " # f f f 7 f b " , " # e c e 2 f 0 " , " # d 0 d 1 e 6 " , " # a 6 b d d b " , " # 6 7 a 9 c f " , " # 3 6 9 0 c 0 " , " # 0 2 8 1 8 a " , " # 0 1 6 c 5 9 " , " # 0 1 4 6 3 6 " ] , V i r i d i s : [ " # 4 4 0 1 5 4 " , " # 4 8 2 7 7 7 " , " # 3 f 4 a 8 a " , " # 3 1 6 7 8 e " , " # 2 6 8 3 8 f " , " # 1 f 9 d 8 a " , " # 6 c c e 5 a " , " # b 6 d e 2 b " , " # f e e 8 2 5 " ] , S p e c t r a l : [ " # 9 e 0 1 4 2 " , " # d 5 3 e 4 f " , " # f 4 6 d 4 3 " , " # f d a e 6 1 " , " # f e e 0 8 b " , " # f f f f b f " , " # e 6 f 5 9 8 " , " # a b d d a 4 " , " # 6 6 c 2 a 5 " , " # 3 2 8 8 b d " , " # 5 e 4 f a 2 " ] , R d Y l G n : [ " # a 5 0 0 2 6 " , " # d 7 3 0 2 7 " , " # f 4 6 d 4 3 " , " # f d a e 6 1 " , " # f e e 0 8 b " , " # f f f f b f " , " # d 9 e f 8 b " , " # a 6 d 9 6 a " , " # 6 6 b d 6 3 " , " # 1 a 9 8 5 0 " , " # 0 0 6 8 3 7 " ] , R d B u : [ " # 6 7 0 0 1 f " , " # b 2 1 8 2 b " , " # d 6 6 0 4 d " , " # f 4 a 5 8 2 " , " # f d d b c 7 " , " # f 7 f 7 f 7 " , " # d 1 e 5 f 0 " , " # 9 2 c 5 d e " , " # 4 3 9 3 c 3 " , " # 2 1 6 6 a c " , " # 0 5 3 0 6 1 " ] , P i Y G : [ " # 8 e 0 1 5 2 " , " # c 5 1 b 7 d " , " # d e 7 7 a e " , " # f 1 b 6 d a " , " # f d e 0 e f " , " # f 7 f 7 f 7 " , " # e 6 f 5 d 0 " , " # b 8 e 1 8 6 " , " # 7 f b c 4 1 " , " # 4 d 9 2 2 1
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
* @ version 1.4 . 0
* @ date 2015 - 10 - 26
* @ stability 3 - Stable
* @ author Lauri Rooden ( https : //github.com/litejs/natural-compare-lite)
* @ license MIT License
2025-11-07 11:50:17 +01:00
* / v a r e = f u n c t i o n ( r , n ) { v a r o , a , i = 1 , l = 0 , s = 0 , c = S t r i n g . a l p h a b e t ; f u n c t i o n u ( d , p , f ) { i f ( f ) { f o r ( o = p ; f = u ( d , o ) , f < 7 6 & & f > 6 5 ; ) + + o ; r e t u r n + d . s l i c e ( p - 1 , o ) } r e t u r n f = c & & c . i n d e x O f ( d . c h a r A t ( p ) ) , f > - 1 ? f + 7 6 : ( f = d . c h a r C o d e A t ( p ) | | 0 , f < 4 5 | | f > 1 2 7 ? f : f < 4 6 ? 6 5 : f < 4 8 ? f - 1 : f < 5 8 ? f + 1 8 : f < 6 5 ? f - 1 1 : f < 9 1 ? f + 1 1 : f < 9 7 ? f - 3 7 : f < 1 2 3 ? f + 5 : f - 6 3 ) } i f ( ( r + = " " ) ! = ( n + = " " ) ) { f o r ( ; i ; ) i f ( a = u ( r , l + + ) , i = u ( n , s + + ) , a < 7 6 & & i < 7 6 & & a > 6 6 & & i > 6 6 & & ( a = u ( r , l , l ) , i = u ( n , s , l = o ) , s = o ) , a ! = i ) r e t u r n a < i ? - 1 : 1 } r e t u r n 0 } ; t r y { v _ . e x p o r t s = e } c a t c h { S t r i n g . n a t u r a l C o m p a r e = e } r e t u r n v _ . e x p o r t s } v a r F y e = j y e ( ) ; c o n s t A I = t 3 ( F y e ) ; f u n c t i o n r 3 ( e , r ) { r e t u r n e = = = r ? 0 : U c ( e ) ? U c ( r ) ? A I ( e , r ) : 1 : U c ( r ) ? - 1 : 0 } f u n c t i o n N I ( e = " . " , r = ! 1 ) { r e t u r n ( n , o ) = > { i f ( n = = = o ) r e t u r n 0 ; i f ( ! n ) r e t u r n - 1 ; i f ( ! o ) r e t u r n 1 ; c o n s t a = n . s p l i t ( e ) , i = o . s p l i t ( e ) , l = M a t h . m i n ( a . l e n g t h , i . l e n g t h ) ; f o r ( l e t c = 0 ; c < l ; c + + ) { c o n s t u = a [ c ] , d = i [ c ] , p = A I ( u , d ) ; i f ( p ! = = 0 ) r e t u r n p } c o n s t s = a . l e n g t h - i . l e n g t h ; r e t u r n r ? - 1 * s : s } } f u n c t i o n x _ ( e ) { r e t u r n e ! = n u l l & & t y p e o f e = = " s t r i n g " } f u n c t i o n n 3 ( e ) { c o n s t r = e . l a s t I n d e x O f ( " . " ) ; r e t u r n r > 0 ? e . s l i c e ( 0 , r ) : n u l l } f u n c t i o n g 1 ( e ) { c o n s t r = e . l a s t I n d e x O f ( " . " ) ; r e t u r n r > 0 ? e . s l i c e ( r + 1 ) : e } c o n s t y 1 = e = > x _ ( e ) ? e : e . i d ; f u n c t i o n q n ( e , r ) { c o n s t n = y 1 ( e ) ; r e t u r n r ? y 1 ( r ) . s t a r t s W i t h ( n + " . " ) : o = > { c o n s t a = y 1 ( o ) ; r e t u r n n . s t a r t s W i t h ( a + " . " ) } } f u n c t i o n D I ( e , r ) { i f ( ! r ) r e t u r n a = > D I ( e , a ) ; c o n s t n = y 1 ( e ) , o = y 1 ( r ) ; r e t u r n n = = = o | | o . s t a r t s W i t h ( n + " . " ) | | n . s t a r t s W i t h ( o + " . " ) } f u n c t i o n P I ( e , r ) { r e t u r n n = > q n ( e , n ) } f u n c t i o n o 3 ( e ) { r e t u r n ( x _ ( e ) ? e : e . i d ) . s p l i t ( " . " ) . l e n g t h } f u n c t i o n b 1 ( e , r ) { c o n s t n = e . s p l i t ( " . " ) ; i f ( n . l e n g t h < 2 ) r e t u r n n u l l ; c o n s t o = r . s p l i t ( " . " ) ; i f ( o . l e n g t h < 2 ) r e t u r n n u l l ; l e t a = [ ] ; f o r ( l e t i = 0 ; i < M a t h . m i n ( n . l e n g t h , o . l e n g t h ) - 1 & & n [ i ] = = = o [ i ] ; i + + ) a . p u s h ( n [ i ] ) ; r e t u r n a . l e n g t h = = = 0 ? n u l l : a . j o i n ( " . " ) } f u n c t i o n b d ( e ) { c o n s t r = e . s p l i t ( " . " ) ; r e t u r n r . p o p ( ) , r . l e n g t h = = = 0 ? [ ] : r . r e d u c e ( ( n , o , a ) = > a = = = 0 ? ( n . p u s h ( o ) , n ) : ( n . u n s h i f t ( ` $ { n [ 0 ] } . $ { o } ` ) , n ) , [ ] ) } f u n c t i o n H y e ( e , r ) { l e t n = r ; f o r ( c o n s t o o f e ) q n ( o , n ) & & ( n = o ) ; r e t u r n n ! = = r ? n : n u l l } f u n c t i o n V c ( e ) { c o n s t r = [ ] , n = [ . . . e ] ; l e t o ; f o r ( ; o = n . s h i f t ( ) ; ) { l e t a ; f o r ( ; a = H y e ( n , o ) ; ) r . p u s h ( n . s p l i c e ( n . i n d e x O f ( a ) , 1 ) [ 0 ] ) ; r . p u s h ( o ) } r e t u r n r } f u n c t i o n $ I ( e , r ) { i f ( ! e | | x _ ( e ) ) { c o n s t o = e ? ? " a s c " ; r e t u r n a = > $ I ( a , o ) } c o n s t n = r = = = " d e s c " ? - 1 : 1 ; r e t u r n e . m a p ( o = > ( { i t e m : o , f q n : o . i d . s p l i t ( " . " ) } ) ) . s o r t ( ( o , a ) = > { i f ( o . f q n . l e n g t h ! = = a . f q n . l e n g t h ) r e t u r n ( o . f q n . l e n g t h - a . f q n . l e n g t h ) * n ; f o r ( l e t i = 0 ; i < o . f q n . l e n g t h ; i + + ) { c o n s t l = r 3 ( o . f q n [ i ] , a . f q n [ i ] ) ; i f ( l ! = = 0 ) r e t u r n l } r e t u r n 0 } ) . m a p ( ( { i t e m : o } ) = > o ) } v a r a 3 = { } , M I ; f u n c t i o n q y e ( ) { r e t u r n M I | | ( M I = 1 , a 3 . A R R A Y _ B U F F E R _ S U P P O R T = t y p e o f A r r a y B u f f e r < " u " , a 3 . S Y M B O L _ S U P P O R T = t y p e o f S y m b o l < " u " ) , a 3 } v a r w _ , O I ; f u n c t i o n U y e ( ) { i f ( O I ) r e t u r n w _ ; O I = 1 ; f u n c t i o n e ( r ) { i f ( t y p e o f r ! = " f u n c t i o n " ) t h r o w n e w E r r o r ( " o b l i t e r a t o r / i t e r a t o r : e x p e c t i n g a f u n c t i o n ! " ) ; t h i s . n e x t = r } r e t u r n t y p e o f S y m b o l < " u " & & ( e . p r o t o t y p e [ S y m b o l . i t e r a t o r ] = f u n c t i o n ( ) { r e t u r n t h i s } ) , e . o f = f u n c t i o n ( ) { v a r r = a r g u m e n t s , n = r . l e n g t h , o = 0 ; r e t u r n n e w e ( f u n c t i o n ( ) { r e t u r n o > = n ? { d o n e : ! 0 } : { d o n e : ! 1 , v a l u e : r [ o + + ] } } ) } , e . e m p t y = f u n c t i o n ( ) { v a r r = n e w e ( f u n c t i o n ( ) { r e t u r n { d o n e : ! 0 } } ) ; r e t u r n r } , e . f r o m S e q u e n c e = f u n c t i o n ( r ) { v a r n = 0 , o = r . l e n g t h ; r e t u r n n e w e ( f u n c t i o n ( ) { r e t u r n n > = o ? { d o n e : ! 0 } : { d o n e : ! 1 , v a l u e : r [ n + + ] } } ) } , e . i s = f u n c t i o n ( r ) { r e t u r n r i n s t a n c e o f e ? ! 0 : t y p e o f r = = " o b j e c t " & & r ! = = n u l l & & t y p e o f r . n e x t = = " f u n c t i o n " } , w _ = e , w _ } v a r k _ , I I ; f u n c t i o n V y e ( ) { i f ( I I ) r e t u r n k _ ; I I = 1 ; v a r e = q y e ( ) , r = e . A R R A Y _ B U F F E R _ S U P P O R T , n = e . S Y M B O L _ S U P P O R T ; r e t u r n k _ = f u n c t i o n ( a , i ) { v a r l , s , c , u , d ; i f ( ! a ) t h r o w n e w E r r o r ( " o b l i t e r a t o r / f o r E a c h : i n v a l i d i t e r a b l e . " ) ; i f ( t y p e o f i ! = " f u n c t i o n " ) t h r o w n e w E r r o r ( " o b l i t e r a t o r / f o r E a c h : e x p e c t i n g a c a l l b a c k . " ) ; i f ( A r r a y . i s A r r a y ( a ) | | r & & A r r a y B u f f e r . i s V i e w ( a ) | | t y p e o f a = = " s t r i n g " | | a . t o S t r i n g ( ) = = = " [ o b j e c t A r g u m e n t s ] " ) { f o r ( c = 0 , u = a . l e n g t h ; c < u ; c + + ) i ( a [ c ] , c ) ; r e t u r n } i f ( t y p e o f a . f o r E a c h = = " f u n c t i o n " ) { a . f o r E a c h ( i ) ; r e t u r n } i f ( n & & S y m b o l . i t e r a t o r i n a & & t y p e o f a . n e x t ! = " f u n c t i o n " & & ( a = a [ S y m b o l . i t e r a t o r ] ( ) ) , t y p e o f a . n e x t = = " f u n c t i o n " ) { f o r ( l = a , c = 0 ; d = l . n e x t ( ) , d . d o n e ! = = ! 0 ; ) i ( d . v a l u e , c ) , c + + ; r e t u r n } f o r ( s i n a ) a . h a s O w n P r o p e r t y ( s ) & & i ( a [ s ] , s ) } , k _ } v a r _ _ , L I ; f u n c t i o n Y y e ( ) { i f ( L I ) r e t u r n _ _ ; L I = 1 ; v a r e = U y e ( ) , r = V y e ( ) ; f u n c t i o n n ( ) { t h i s . c l e a r ( ) } r e t u r n n . p r o t o t y p e . c l e a r = f u n c t i o n ( ) { t h i s . i t e m s = [ ] , t h i s . o f f s e t = 0 , t h i s . s i z e = 0 } , n . p r o t o t y p e . e n q u e u e = f u n c t i o n ( o ) { r e t u r n t h i s . i t e m s . p u s h ( o ) , + + t h i s . s i z e } , n . p r o t o t y p e . d e q u e u e = f u n c t i o n ( ) { i f ( t h i s . s i z e ) { v a r o = t h i s . i t e m s [ t h i s
` ,r);return o===-1?n:n===-1||n+1===o?o:n<o?n:o}const kd={html:"http://www.w3.org/1999/xhtml",mathml:"http://www.w3.org/1998/Math/MathML",svg:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"},dL={}.hasOwnProperty,vbe=Object.prototype;function xbe(e,r){const n=r||{};return O_({file:n.file||void 0,location:!1,schema:n.space==="svg"?E1:d3,verbose:n.verbose||!1},e)}function O_(e,r){let n;switch(r.nodeName){case"#comment":{const o=r;return n={type:"comment",value:o.data},p3(e,o,n),n}case"#document":case"#document-fragment":{const o=r,a="mode"in o?o.mode==="quirks"||o.mode==="limited-quirks":!1;if(n={type:"root",children:pL(e,r.childNodes),data:{quirksMode:a}},e.file&&e.location){const i=String(e.file),l=bbe(i),s=l.toPoint(0),c=l.toPoint(i.length);n.position={start:s,end:c}}return n}case"#documentType":{const o=r;return n={type:"doctype"},p3(e,o,n),n}case"#text":{const o=r;return n={type:"text",value:o.value},p3(e,o,n),n}default:return n=wbe(e,r),n}}function pL(e,r){let n=-1;const o=[];for(;++n<r.length;){const a=O_(e,r[n]);o.push(a)}return o}function wbe(e,r){const n=e.schema;e.schema=r.namespaceURI===kd.svg?E1:d3;let o=-1;const a={};for(;++o<r.attrs.length;){const s=r.attrs[o],c=(s.prefix?s.prefix+":":"")+s.name;dL.call(vbe,c)||(a[c]=s.value)}const l=(e.schema.space==="svg"?ybe:gbe)(r.tagName,a,pL(e,r.childNodes));if(p3(e,r,l),l.tagName==="template"){const s=r,c=s.sourceCodeLocation,u=c&&c.startTag&&Ih(c.startTag),d=c&&c.endTag&&Ih(c.endTag),p=O_(e,s.content);u&&d&&e.file&&(p.position={start:u.end,end:d.start}),l.content=p}return e.schema=n,l}function p3(e,r,n){if("sourceCodeLocation"in r&&r.sourceCodeLocation&&e.file){const o=kbe(e,n,r.sourceCodeLocation);o&&(e.location=!0,n.position=o)}}function kbe(e,r,n){const o=Ih(n);if(r.type==="element"){const a=r.children[r.children.length-1];if(o&&!n.endTag&&a&&a.position&&a.position.end&&(o.end=Object.assign({},a.position.end)),e.verbose){const i={};let l;if(n.attrs)for(l in n.attrs)dL.call(n.attrs,l)&&(i[ $ _(e.schema,l).property]=Ih(n.attrs[l]));n.startTag;const s=Ih(n.startTag),c=n.endTag?Ih(n.endTag):void 0,u={opening:s};c&&(u.closing=c),u.properties=i,r.data={position:u}}}return o}function Ih(e){const r=hL({line:e.startLine,column:e.startCol,offset:e.startOffset}),n=hL({line:e.endLine,column:e.endCol,offset:e.endOffset});return r||n?{start:r,end:n}:void 0}function hL(e){return e.line&&e.column?e:void 0}class S1{constructor(r,n,o){this.property=r,this.normal=n,o&&(this.space=o)}}S1.prototype.property={},S1.prototype.normal={},S1.prototype.space=null;function fL(e,r){const n={},o={};let a=-1;for(;++a<e.length;)Object.assign(n,e[a].property),Object.assign(o,e[a].normal);return new S1(n,o,r)}function I_(e){return e.toLowerCase()}class Qa{constructor(r,n){this.property=r,this.attribute=n}}Qa.prototype.space=null,Qa.prototype.boolean=!1,Qa.prototype.booleanish=!1,Qa.prototype.overloadedBoolean=!1,Qa.prototype.number=!1,Qa.prototype.commaSeparated=!1,Qa.prototype.spaceSeparated=!1,Qa.prototype.commaOrSpaceSeparated=!1,Qa.prototype.mustUseProperty=!1,Qa.prototype.defined=!1;let _be=0;const Ot=_d(),gn=_d(),mL=_d(),qe=_d(),Er=_d(),Lh=_d(),xa=_d();function _d(){return 2**++_be}const L_={__proto__:null,boolean:Ot,booleanish:gn,commaOrSpaceSeparated:xa,commaSeparated:Lh,number:qe,overloadedBoolean:mL,spaceSeparated:Er},z_=Object.keys(L_);class B_ extends Qa{constructor(r,n,o,a){let i=-1;if(super(r,n),gL(this,"space",a),typeof o=="number")for(;++i<z_.length;){const l=z_[i];gL(this,z_[i],(o&L_[l])===L_[l])}}}B_.prototype.defined=!0;function gL(e,r,n){n&&(e[r]=n)}const Ebe={}.hasOwnProperty;function zh(e){const r={},n={};let o;for(o in e.properties)if(Ebe.call(e.properties,o)){const a=e.properties[o],i=new B_(o,e.transform(e.attributes||{},o),a,e.space);e.mustUseProperty&&e.mustUseProperty.includes(o)&&(i.mustUseProperty=!0),r[o]=i,n[I_(o)]=o,n[I_(i.attribute)]=o}return new S1(r,n,e.space)}const yL=zh({space:"xlink",transform(e,r){return"xlink:"+r.slice(5).toLowerCase()},properties:{xLinkActuate:nu
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
\ f \ r & / = > ` . s p l i t ( " " ) , `
\ f \ r "&'/=>\``.split(" " ) ] , [ ` \0
\ f \ r "&'/<=>`.split(" " ) , ` \0
\ f \ r "&'/<=>\``.split(" " ) ] ] , unquoted : [ [ `
\ f \ r & > ` .split(""), ` \ 0
\ f \ r "&'<=>\``.split(" " ) ] , [ ` \0
\ f \ r "&'<=>\``.split(" " ) , ` \0
2025-11-07 11:50:17 +01:00
\ f \ r "&'<=>\``.split(" ")]],single:[[" & '".split(""),"\"&' ` ".split("")],[" \0 &'".split("")," \0 \" &' ` ".split(" ")]],double:[['" & '.split(""),"\"&' ` ".split("")],[' \0 "&'.split("")," \0 \" &' ` ".split(" ")]]};function Lwe(e,r,n,o){const a=o.schema,i=a.space===" svg "?!1:o.settings.omitOptionalTags;let l=a.space===" svg "?o.settings.closeEmptyElements:o.settings.voids.includes(e.tagName.toLowerCase());const s=[];let c;a.space===" html "&&e.tagName===" svg "&&(o.schema=E1);const u=zwe(o,e.properties),d=o.all(a.space===" html "&&e.tagName===" template "?e.content:e);return o.schema=a,d&&(l=!1),(u||!i||!Dwe(e,r,n))&&(s.push(" < ",e.tagName,u?" "+u:" "),l&&(a.space===" svg "||o.settings.closeSelfClosing)&&(c=u.charAt(u.length-1),(!o.settings.tightSelfClosing||c===" / "||c&&c!=='" '&&c!=="' ")&&s.push(" "),s.push(" / ")),s.push(" > ")),s.push(d),!l&&(!i||!o8(e,r,n))&&s.push(" < /"+e.tagName+">"),s.join("")}function zwe(e,r){const n=[];let o=-1,a;if(r){for(a in r)if(r[a]!==null&&r[a]!==void 0){const i=Bwe(e,a,r[a]);i&&n.push(i)}}for(;++o<n.length;){const i=e.settings.tightAttributes?n[o].charAt(n[o].length-1):void 0;o!==n.length-1&&i!=='"'&&i!=="'"&&(n[o]+=" ")}return n.join("")}function Bwe(e,r,n){const o=$_(e.schema,r),a=e.settings.allowParseErrors&&e.schema.space==="html"?0:1,i=e.settings.allowDangerousCharacters?0:1;let l=e.quote,s;if(o.overloadedBoolean&&(n===o.attribute||n==="")?n=!0:(o.boolean||o.overloadedBoolean)&&(typeof n!="string"||n===o.attribute||n==="")&&(n=!!n),n==null||n===!1||typeof n=="number"&&Number.isNaN(n))return"";const c=qh(o.attribute,Object.assign({},e.settings.characterReferences,{subset:T3.name[a][i]}));return n===!0||(n=Array.isArray(n)?(o.commaSeparated?oL:lL)(n,{padLeft:!e.settings.tightCommaSeparatedLists}):String(n),e.settings.collapseEmptyAttributes&&!n)?c:(e.settings.preferUnquoted&&(s=qh(n,Object.assign({},e.settings.characterReferences,{attribute:!0,subset:T3.unquoted[a][i]}))),s!==n&&(e.settings.quoteSmart&&C3(n,l)>C3(n,e.alternative)&&(l=e.alternative),s=l+qh(n,Object.assign({},e.settings.characterReferences,{subset:(l==="'"?T3.single:T3.double)[a][i],attribute:!0}))+l),c+(s&&"="+s))}const jwe=["<","&"];function Bz(e,r,n,o){return n&&n.type==="element"&&(n.tagName==="script"||n.tagName==="style")?e.value:qh(e.value,Object.assign({},o.settings.characterReferences,{subset:jwe}))}function Fwe(e,r,n,o){return o.settings.allowDangerousHtml?e.value:Bz(e,r,n,o)}function Hwe(e,r,n,o){return o.all(e)}const qwe=j_("type",{invalid:Uwe,unknown:Vwe,handlers:{comment:fwe,doctype:mwe,element:Lwe,raw:Fwe,root:Hwe,text:Bz}});function Uwe(e){throw new Error("Expected node, not `"+e+"`")}function Vwe(e){const r=e;throw new Error("Cannot compile unknown node `"+r.type+"`")}const Ywe={},Wwe={},Gwe=[];function Xwe(e,r){const n=r||Ywe,o=n.quote||'"',a=o==='"'?"'":'"';if(o!=='"'&&o!=="'")throw new Error("Invalid quote `"+o+"`, expected `'` or `\"`");return{one:Kwe,all:Zwe,settings:{omitOptionalTags:n.omitOptionalTags||!1,allowParseErrors:n.allowParseErrors||!1,allowDangerousCharacters:n.allowDangerousCharacters||!1,quoteSmart:n.quoteSmart||!1,preferUnquoted:n.preferUnquoted||!1,tightAttributes:n.tightAttributes||!1,upperDoctype:n.upperDoctype||!1,tightDoctype:n.tightDoctype||!1,bogusComments:n.bogusComments||!1,tightCommaSeparatedLists:n.tightCommaSeparatedLists||!1,tightSelfClosing:n.tightSelfClosing||!1,collapseEmptyAttributes:n.collapseEmptyAttributes||!1,allowDangerousHtml:n.allowDangerousHtml||!1,voids:n.voids||TL,characterReferences:n.characterReferences||Wwe,closeSelfClosing:n.closeSelfClosing||!1,closeEmptyElements:n.closeEmptyElements||!1},schema:n.space==="svg"?E1:d3,quote:o,alternative:a}.one(Array.isArray(e)?{type:"root",children:e}:e,void 0,void 0)}function Kwe(e,r,n){return qwe(e,r,n,this)}function Zwe(e){const r=[],n=e&&e.children||Gwe;let o=-1;for(;++o<n.length;)r[o]=this.one(n[o],o,e);return r.join("")}function Qwe(e){const r=this,n={...r.data("settings"),...e};r.compiler=o;function o(a){return Xwe(a,n)}}const Fo=Kc(/ [ A - Za - z ] / ) , Co = Kc ( /[\dA-Za-z]/ ) , Jwe = Kc ( /[#-'*+\--9=?A-Z^-~]/ ) ; function R3 ( e ) { return e !== null && ( e < 32 || e === 127 ) } const i8 = Kc
` :" ")+i.indentLines(i.containerFlow(o,s.current()),r?Hz:N2e))),u(),c}}function N2e(e,r,n){return r===0?e:Hz(e,r,n)}function Hz(e,r,n){return(n?"":" ")+e}const D2e=["autolink","destinationLiteral","destinationRaw","reference","titleQuote","titleApostrophe"];qz.peek=I2e;function P2e(){return{canContainEols:["delete"],enter:{strikethrough:M2e},exit:{strikethrough:O2e}}}function $ 2e(){return{unsafe:[{character:"~",inConstruct:"phrasing",notInConstruct:D2e}],handlers:{delete:qz}}}function M2e(e){this.enter({type:"delete",children:[]},e)}function O2e(e){this.exit(e)}function qz(e,r,n,o){const a=n.createTracker(o),i=n.enter("strikethrough");let l=a.move("~~");return l+=n.containerPhrasing(e,{...a.current(),before:l,after:"~"}),l+=a.move("~~"),i(),l}function I2e(){return"~"}function L2e(e){return e.length}function z2e(e,r){const n=r||{},o=(n.align||[]).concat(),a=n.stringLength||L2e,i=[],l=[],s=[],c=[];let u=0,d=-1;for(;++d<e.length;){const x=[],w=[];let k=-1;for(e[d].length>u&&(u=e[d].length);++k<e[d].length;){const C=B2e(e[d][k]);if(n.alignDelimiters!==!1){const _=a(C);w[k]=_,(c[k]===void 0||_>c[k])&&(c[k]=_)}x.push(C)}l[d]=x,s[d]=w}let p=-1;if(typeof o=="object"&&"length"in o)for(;++p<u;)i[p]=Uz(o[p]);else{const x=Uz(o);for(;++p<u;)i[p]=x}p=-1;const f=[],g=[];for(;++p<u;){const x=i[p];let w="",k="";x===99?(w=":",k=":"):x===108?w=":":x===114&&(k=":");let C=n.alignDelimiters===!1?1:Math.max(1,c[p]-w.length-k.length);const _=w+"-".repeat(C)+k;n.alignDelimiters!==!1&&(C=w.length+C+k.length,C>c[p]&&(c[p]=C),g[p]=C),f[p]=_}l.splice(1,0,f),s.splice(1,0,g),d=-1;const b=[];for(;++d<l.length;){const x=l[d],w=s[d];p=-1;const k=[];for(;++p<u;){const C=x[p]||"";let _="",T="";if(n.alignDelimiters!==!1){const R=c[p]-(w[p]||0),A=i[p];A===114?_=" ".repeat(R):A===99?R%2?(_=" ".repeat(R/2+.5),T=" ".repeat(R/2-.5)):(_=" ".repeat(R/2),T=_):T=" ".repeat(R)}n.delimiterStart!==!1&&!p&&k.push("|"),n.padding!==!1&&!(n.alignDelimiters===!1&&C==="")&&(n.delimiterStart!==!1||p)&&k.push(" "),n.alignDelimiters!==!1&&k.push(_),k.push(C),n.alignDelimiters!==!1&&k.push(T),n.padding!==!1&&k.push(" "),(n.delimiterEnd!==!1||p!==u-1)&&k.push("|")}b.push(n.delimiterEnd===!1?k.join("").replace(/ + $ /,""):k.join(""))}return b.join( `
` )}function B2e(e){return e==null?"":String(e)}function Uz(e){const r=typeof e=="string"?e.codePointAt(0):0;return r===67||r===99?99:r===76||r===108?108:r===82||r===114?114:0}function j2e(e,r,n,o){const a=n.enter("blockquote"),i=n.createTracker(o);i.move("> "),i.shift(2);const l=n.indentLines(n.containerFlow(e,i.current()),F2e);return a(),l}function F2e(e,r,n){return">"+(n?"":" ")+e}function H2e(e,r){return Vz(e,r.inConstruct,!0)&&!Vz(e,r.notInConstruct,!1)}function Vz(e,r,n){if(typeof r=="string"&&(r=[r]),!r||r.length===0)return n;let o=-1;for(;++o<r.length;)if(e.includes(r[o]))return!0;return!1}function Yz(e,r,n,o){let a=-1;for(;++a<n.unsafe.length;)if(n.unsafe[a].character=== `
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
` &&H2e(n.stack,n.unsafe[a]))return/[ \t ]/.test(o.before)?"":" ";return ` \ \
2025-11-07 11:50:17 +01:00
` }function q2e(e,r){const n=String(e);let o=n.indexOf(r),a=o,i=0,l=0;if(typeof r!="string")throw new TypeError("Expected substring");for(;o!==-1;)o===a?++i>l&&(l=i):i=1,a=o+r.length,o=n.indexOf(r,a);return l}function U2e(e,r){return!!(r.options.fences===!1&&e.value&&!e.lang&&/[^ \r \n ]/.test(e.value)&&!/^[ \t ]*(?:[ \r \n ]| $ )|(?:^|[ \r \n ])[ \t ]* $ /.test(e.value))}function V2e(e){const r=e.options.fence||" ` ";if(r!==" ` "&&r!=="~")throw new Error("Cannot serialize code with ` "+r+" ` for ` options . fence ` , expected ` ` ` ` ` or ` ~ ` ");return r}function Y2e(e,r,n,o){const a=V2e(n),i=e.value||" ",l=a===" ` "?"GraveAccent":"Tilde";if(U2e(e,n)){const p=n.enter("codeIndented"),f=n.indentLines(i,W2e);return p(),f}const s=n.createTracker(o),c=a.repeat(Math.max(q2e(i,a)+1,3)),u=n.enter("codeFenced");let d=s.move(c);if(e.lang){const p=n.enter( ` codeFencedLang$ { l } ` );d+=s.move(n.safe(e.lang,{before:d,after:" ",encode:[" ` "],...s.current()})),p()}if(e.lang&&e.meta){const p=n.enter(`codeFencedMeta${l}`);d+=s.move(" " ) , d += s . move ( n . safe ( e . meta , { before : d , after : `
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
` ,encode:[" ` " ] , ... s . current ( ) } ) ) , p ( ) } return d += s . move ( `
` ),i&&(d+=s.move(i+ `
2025-11-07 11:50:17 +01:00
` )),d+=s.move(c),u(),d}function W2e(e,r,n){return(n?"":" ")+e}function u8(e){const r=e.options.quote||'"';if(r!=='"'&&r!=="'")throw new Error("Cannot serialize title with ` "+r+" ` for ` options . quote ` , expected ` \ "`, or `'`" ) ; return r } function G2e ( e , r , n , o ) { const a = u8 ( n ) , i = a === '"' ? "Quote" : "Apostrophe" , l = n . enter ( "definition" ) ; let s = n . enter ( "label" ) ; const c = n . createTracker ( o ) ; let u = c . move ( "[" ) ; return u += c . move ( n . safe ( n . associationId ( e ) , { before : u , after : "]" , ... c . current ( ) } ) ) , u += c . move ( "]: " ) , s ( ) , ! e . url || /[\0- \u007F]/ . test ( e . url ) ? ( s = n . enter ( "destinationLiteral" ) , u += c . move ( "<" ) , u += c . move ( n . safe ( e . url , { before : u , after : ">" , ... c . current ( ) } ) ) , u += c . move ( ">" ) ) : ( s = n . enter ( "destinationRaw" ) , u += c . move ( n . safe ( e . url , { before : u , after : e . title ? " " : `
` ,...c.current()}))),s(),e.title&&(s=n.enter( ` title$ { i } ` ),u+=c.move(" "+a),u+=c.move(n.safe(e.title,{before:u,after:a,...c.current()})),u+=c.move(a),s()),l(),u}function X2e(e){const r=e.options.emphasis||"*";if(r!=="*"&&r!=="_")throw new Error("Cannot serialize emphasis with ` "+r+" ` for ` options . emphasis ` , expected ` * ` , or ` _ ` ");return r}function z1(e){return"&#x"+e.toString(16).toUpperCase()+";"}function Uh(e){if(e===null||xr(e)||Td(e))return 1;if(A3(e))return 2}function N3(e,r,n){const o=Uh(e),a=Uh(r);return o===void 0?a===void 0?n==="_"?{inside:!0,outside:!0}:{inside:!1,outside:!1}:a===1?{inside:!0,outside:!0}:{inside:!1,outside:!0}:o===1?a===void 0?{inside:!1,outside:!1}:a===1?{inside:!0,outside:!0}:{inside:!1,outside:!1}:a===void 0?{inside:!1,outside:!1}:a===1?{inside:!0,outside:!1}:{inside:!1,outside:!1}}Wz.peek=K2e;function Wz(e,r,n,o){const a=X2e(n),i=n.enter("emphasis"),l=n.createTracker(o),s=l.move(a);let c=l.move(n.containerPhrasing(e,{after:a,before:s,...l.current()}));const u=c.charCodeAt(0),d=N3(o.before.charCodeAt(o.before.length-1),u,a);d.inside&&(c=z1(u)+c.slice(1));const p=c.charCodeAt(c.length-1),f=N3(o.after.charCodeAt(0),p,a);f.inside&&(c=c.slice(0,-1)+z1(p));const g=l.move(a);return i(),n.attentionEncodeSurroundingInfo={after:f.outside,before:d.outside},s+c+g}function K2e(e,r,n){return n.options.emphasis||"*"}const Z2e={};function D3(e,r){const n=r||Z2e,o=typeof n.includeImageAlt=="boolean"?n.includeImageAlt:!0,a=typeof n.includeHtml=="boolean"?n.includeHtml:!0;return Gz(e,o,a)}function Gz(e,r,n){if(Q2e(e)){if("value"in e)return e.type==="html"&&!n?"":e.value;if(r&&"alt"in e&&e.alt)return e.alt;if("children"in e)return Xz(e.children,r,n)}return Array.isArray(e)?Xz(e,r,n):""}function Xz(e,r,n){const o=[];let a=-1;for(;++a<e.length;)o[a]=Gz(e[a],r,n);return o.join("")}function Q2e(e){return!!(e&&typeof e=="object")}function J2e(e,r){let n=!1;return e8(e,function(o){if("value"in o&&/ \r ? \n | \r /.test(o.value)||o.type==="break")return n=!0,J_}),!!((!e.depth||e.depth<3)&&D3(e)&&(r.options.setext||n))}function e4e(e,r,n,o){const a=Math.max(Math.min(6,e.depth||1),1),i=n.createTracker(o);if(J2e(e,n)){const d=n.enter("headingSetext"),p=n.enter("phrasing"),f=n.containerPhrasing(e,{...i.current(),before: `
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
` ,after: `
` });return p(),d(),f+ `
` +(a===1?"=":"-").repeat(f.length-(Math.max(f.lastIndexOf(" \r "),f.lastIndexOf( `
` ))+1))}const l="#".repeat(a),s=n.enter("headingAtx"),c=n.enter("phrasing");i.move(l+" ");let u=n.containerPhrasing(e,{before:"# ",after: `
2025-11-07 11:50:17 +01:00
` ,...i.current()});return/^[ \t ]/.test(u)&&(u=z1(u.charCodeAt(0))+u.slice(1)),u=u?l+" "+u:l,n.options.closeAtx&&(u+=" "+l),c(),s(),u}Kz.peek=t4e;function Kz(e){return e.value||""}function t4e(){return"<"}Zz.peek=r4e;function Zz(e,r,n,o){const a=u8(n),i=a==='"'?"Quote":"Apostrophe",l=n.enter("image");let s=n.enter("label");const c=n.createTracker(o);let u=c.move("![");return u+=c.move(n.safe(e.alt,{before:u,after:"]",...c.current()})),u+=c.move("]("),s(),!e.url&&e.title||/[ \0 - \u 007F]/.test(e.url)?(s=n.enter("destinationLiteral"),u+=c.move("<"),u+=c.move(n.safe(e.url,{before:u,after:">",...c.current()})),u+=c.move(">")):(s=n.enter("destinationRaw"),u+=c.move(n.safe(e.url,{before:u,after:e.title?" ":")",...c.current()}))),s(),e.title&&(s=n.enter( ` title$ { i } ` ),u+=c.move(" "+a),u+=c.move(n.safe(e.title,{before:u,after:a,...c.current()})),u+=c.move(a),s()),u+=c.move(")"),l(),u}function r4e(){return"!"}Qz.peek=n4e;function Qz(e,r,n,o){const a=e.referenceType,i=n.enter("imageReference");let l=n.enter("label");const s=n.createTracker(o);let c=s.move("![");const u=n.safe(e.alt,{before:c,after:"]",...s.current()});c+=s.move(u+"]["),l();const d=n.stack;n.stack=[],l=n.enter("reference");const p=n.safe(n.associationId(e),{before:c,after:"]",...s.current()});return l(),n.stack=d,i(),a==="full"||!u||u!==p?c+=s.move(p+"]"):a==="shortcut"?c=c.slice(0,-1):c+=s.move("]"),c}function n4e(){return"!"}Jz.peek=o4e;function Jz(e,r,n){let o=e.value||"",a=" ` ",i=-1;for(;new RegExp(" ( ^ | [ ^ ` ])"+a+"([^ ` ] | $ ) ").test(o);)a+=" ` ";for(/[^ \r \n ]/.test(o)&&(/^[ \r \n ]/.test(o)&&/[ \r \n ] $ /.test(o)||/^ ` | ` $ /.test(o))&&(o=" "+o+" ");++i<n.unsafe.length;){const l=n.unsafe[i],s=n.compilePattern(l);let c;if(l.atBreak)for(;c=s.exec(o);){let u=c.index;o.charCodeAt(u)===10&&o.charCodeAt(u-1)===13&&u--,o=o.slice(0,u)+" "+o.slice(c.index+1)}}return a+o+a}function o4e(){return" ` "}function eB(e,r){const n=D3(e);return!!(!r.options.resourceLink&&e.url&&!e.title&&e.children&&e.children.length===1&&e.children[0].type===" text "&&(n===e.url||" mailto : "+n===e.url)&&/^[a-z][a-z+.-]+:/i.test(e.url)&&!/[\0- <>\u007F]/.test(e.url))}tB.peek=a4e;function tB(e,r,n,o){const a=u8(n),i=a==='" ' ? "Quote" : "Apostrophe" , l = n . createTracker ( o ) ; let s , c ; if ( eB ( e , n ) ) { const d = n . stack ; n . stack = [ ] , s = n . enter ( "autolink" ) ; let p = l . move ( "<" ) ; return p += l . move ( n . containerPhrasing ( e , { before : p , after : ">" , ... l . current ( ) } ) ) , p += l . move ( ">" ) , s ( ) , n . stack = d , p } s = n . enter ( "link" ) , c = n . enter ( "label" ) ; let u = l . move ( "[" ) ; return u += l . move ( n . containerPhrasing ( e , { before : u , after : "](" , ... l . current ( ) } ) ) , u += l . move ( "](" ) , c ( ) , ! e . url && e . title || /[\0- \u007F]/ . test ( e . url ) ? ( c = n . enter ( "destinationLiteral" ) , u += l . move ( "<" ) , u += l . move ( n . safe ( e . url , { before : u , after : ">" , ... l . current ( ) } ) ) , u += l . move ( ">" ) ) : ( c = n . enter ( "destinationRaw" ) , u += l . move ( n . safe ( e . url , { before : u , after : e . title ? " " : ")" , ... l . current ( ) } ) ) ) , c ( ) , e . title && ( c = n . enter ( ` title ${ i } ` ) , u += l . move ( " " + a ) , u += l . move ( n . safe ( e . title , { before : u , after : a , ... l . current ( ) } ) ) , u += l . move ( a ) , c ( ) ) , u += l . move ( ")" ) , s ( ) , u } function a4e ( e , r , n ) { return eB ( e , n ) ? "<" : "[" } rB . peek = i4e ; function rB ( e , r , n , o ) { const a = e . referenceType , i = n . enter ( "linkReference" ) ; let l = n . enter ( "label" ) ; const s = n . createTracker ( o ) ; let c = s . move ( "[" ) ; const u = n . containerPhrasing ( e , { before : c , after : "]" , ... s . current ( ) } ) ; c += s . move ( u + "][" ) , l ( ) ; const d = n . stack ; n . stack = [ ] , l = n . enter ( "reference" ) ; const p = n . safe ( n . associationId ( e ) , { before : c , after : "]" , ... s . current ( ) } ) ; return l ( ) , n . stack = d , i ( ) , a === "full" || ! u || u !== p ? c += s . move ( p + "]" ) : a === "shortcut" ? c = c . slice ( 0 , - 1 ) : c += s . move ( "]" ) , c } function i4e ( ) { return "[" } function d8 ( e ) { const r = e . options . bullet || "*" ; if ( r !== "*" && r !== "+" && r !== "-" ) throw new Error ( "Cannot serialize items with `" + r + "` for `options.bullet`, expected `*`, `+`, or `-`" ) ; return r } function l4e ( e ) { const r = d8 ( e ) , n = e . options . bulletOther ; if ( ! n ) return r === "*" ? "-" : "*" ; if ( n !== "*" && n !== "+" && n !== "-" ) throw new Error ( "Cannot serialize items with `" + n + "` for `options.bulletOther`, expected `*`, `+`, or `-`" ) ; if ( n === r ) throw new Error ( "Expected `bullet` (`" + r + "`) and `bulletOther` (`" + n + "`) to be different" ) ; return n } function s4e ( e ) { const r = e . options . bulletOrdered || "." ; if ( r !== "."
` ,Nfr:"𝔑 ℕ 𝒩 Ν О 𝔒 Ο 𝕆 ‘ 𝒪 𝔓 ℌ ℙ 𝒫 𝔔 ℚ 𝒬 Р ℜ ℜ Ρ ℝ ℛ Ь С 𝔖 𝕊 𝒮 Τ Т 𝔗 ∼ 𝕋 𝒯 У 𝔘 ⋃ 𝕌 ϒ Υ 𝒰
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
` ,inConstruct:"tableCell"},{atBreak:!0,character:"|",after:"[ :-]"},{character:"|",inConstruct:"tableCell"},{atBreak:!0,character:":",after:"-"},{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{inlineCode:f,table:l,tableCell:c,tableRow:s}};function l(g,b,x,w){return u(d(g,x,w),g.align)}function s(g,b,x,w){const k=p(g,x,w),C=u([k]);return C.slice(0,C.indexOf( `
2025-11-07 11:50:17 +01:00
` ))}function c(g,b,x,w){const k=x.enter("tableCell"),C=x.enter("phrasing"),_=x.containerPhrasing(g,{...w,before:i,after:i});return C(),k(),_}function u(g,b){return z2e(g,{align:b,alignDelimiters:o,padding:n,stringLength:a})}function d(g,b,x){const w=g.children;let k=-1;const C=[],_=b.enter("table");for(;++k<w.length;)C[k]=p(w[k],b,x);return _(),C}function p(g,b,x){const w=g.children;let k=-1;const C=[],_=b.enter("tableRow");for(;++k<w.length;)C[k]=c(w[k],g,b,x);return _(),C}function f(g,b,x){let w=aB.inlineCode(g,b,x);return x.stack.includes("tableCell")&&(w=w.replace(/ \| /g," \\ $ &")),w}}function D4e(){return{exit:{taskListCheckValueChecked:cB,taskListCheckValueUnchecked:cB,paragraph: $ 4e}}}function P4e(){return{unsafe:[{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{listItem:M4e}}}function cB(e){const r=this.stack[this.stack.length-2];r.type,r.checked=e.type==="taskListCheckValueChecked"}function $ 4e(e){const r=this.stack[this.stack.length-2];if(r&&r.type==="listItem"&&typeof r.checked=="boolean"){const n=this.stack[this.stack.length-1];n.type;const o=n.children[0];if(o&&o.type==="text"){const a=r.children;let i=-1,l;for(;++i<a.length;){const s=a[i];if(s.type==="paragraph"){l=s;break}}l===n&&(o.value=o.value.slice(1),o.value.length===0?n.children.shift():n.position&&o.position&&typeof o.position.start.offset=="number"&&(o.position.start.column++,o.position.start.offset++,n.position.start=Object.assign({},o.position.start)))}}this.exit(e)}function M4e(e,r,n,o){const a=e.children[0],i=typeof e.checked=="boolean"&&a&&a.type==="paragraph",l="["+(e.checked?"x":" ")+"] ",s=n.createTracker(o);i&&s.move(l);let c=aB.listItem(e,r,n,{...o,...s.current()});return i&&(c=c.replace(/^(?:[*+-]| \d + \. )([ \r \n ]| {1,3})/,u)),c;function u(d){return d+l}}function O4e(){return[l2e(),R2e(),P2e(),E4e(),D4e()]}function I4e(e){return{extensions:[s2e(),A2e(e), $ 2e(),N4e(e),P4e()]}}function wa(e,r,n,o){const a=e.length;let i=0,l;if(r<0?r=-r>a?0:a+r:r=r>a?a:r,n=n>0?n:0,o.length<1e4)l=Array.from(o),l.unshift(r,n),e.splice(...l);else for(n&&e.splice(r,n);i<o.length;)l=o.slice(i,i+1e4),l.unshift(r,0),e.splice(...l),i+=1e4,r+=1e4}function ei(e,r){return e.length>0?(wa(e,e.length,0,r),e):r}const uB={}.hasOwnProperty;function dB(e){const r={};let n=-1;for(;++n<e.length;)L4e(r,e[n]);return r}function L4e(e,r){let n;for(n in r){const a=(uB.call(e,n)?e[n]:void 0)||(e[n]={}),i=r[n];let l;if(i)for(l in i){uB.call(a,l)||(a[l]=[]);const s=i[l];z4e(a[l],Array.isArray(s)?s:s?[s]:[])}}}function z4e(e,r){let n=-1;const o=[];for(;++n<r.length;)(r[n].add==="after"?e:o).push(r[n]);wa(e,0,0,o)}const B4e={tokenize:V4e,partial:!0},pB={tokenize:Y4e,partial:!0},hB={tokenize:W4e,partial:!0},fB={tokenize:G4e,partial:!0},j4e={tokenize:X4e,partial:!0},mB={name:"wwwAutolink",tokenize:q4e,previous:yB},gB={name:"protocolAutolink",tokenize:U4e,previous:bB},Bs={name:"emailAutolink",tokenize:H4e,previous:vB},Yl={};function F4e(){return{text:Yl}}let Rd=48;for(;Rd<123;)Yl[Rd]=Bs,Rd++,Rd===58?Rd=65:Rd===91&&(Rd=97);Yl[43]=Bs,Yl[45]=Bs,Yl[46]=Bs,Yl[95]=Bs,Yl[72]=[Bs,gB],Yl[104]=[Bs,gB],Yl[87]=[Bs,mB],Yl[119]=[Bs,mB];function H4e(e,r,n){const o=this;let a,i;return l;function l(p){return!f8(p)||!vB.call(o,o.previous)||m8(o.events)?n(p):(e.enter("literalAutolink"),e.enter("literalAutolinkEmail"),s(p))}function s(p){return f8(p)?(e.consume(p),s):p===64?(e.consume(p),c):n(p)}function c(p){return p===46?e.check(j4e,d,u)(p):p===45||p===95||Co(p)?(i=!0,e.consume(p),c):d(p)}function u(p){return e.consume(p),a=!0,c}function d(p){return i&&a&&Fo(o.previous)?(e.exit("literalAutolinkEmail"),e.exit("literalAutolink"),r(p)):n(p)}}function q4e(e,r,n){const o=this;return a;function a(l){return l!==87&&l!==119||!yB.call(o,o.previous)||m8(o.events)?n(l):(e.enter("literalAutolink"),e.enter("literalAutolinkWww"),e.check(B4e,e.attempt(pB,e.attempt(hB,i),n),n)(l))}function i(l){return e.exit("literalAutolinkWww"),e.exit("literalAutolink"),r(l)}}function U4e(e,r,n){const o=this;let a="",i=!1;return l;function l(p){return(p===72||p===104)&&bB.call(o,o.previous)&&!m8(o.events)?(e.enter("literalAutolink"),e.enter(
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
` ;break}case-3:{l= ` \ r
2025-11-07 11:50:17 +01:00
` ;break}case-2:{l=r?" ":" ";break}case-1:{if(!r&&a)continue;l=" ";break}default:l=String.fromCharCode(i)}a=i===-2,o.push(l)}return o.join("")}function Xke(e){const o={constructs:dB([Vke,...(e||{}).extensions||[]]),content:a(Mke),defined:[],document:a(Ike),flow:a(Bke),lazy:{},string:a(Hke),text:a(qke)};return o;function a(i){return l;function l(s){return Yke(o,i,s)}}}function Kke(e){for(;!CB(e););return e}const IB=/[ \0 \t \n \r ]/g;function Zke(){let e=1,r="",n=!0,o;return a;function a(i,l,s){const c=[];let u,d,p,f,g;for(i=r+(typeof i=="string"?i.toString():new TextDecoder(l||void 0).decode(i)),p=0,r="",n&&(i.charCodeAt(0)===65279&&p++,n=void 0);p<i.length;){if(IB.lastIndex=p,u=IB.exec(i),f=u&&u.index!==void 0?u.index:i.length,g=i.charCodeAt(f),!u){r=i.slice(p);break}if(g===10&&p===f&&o)c.push(-3),o=void 0;else switch(o&&(c.push(-5),o=void 0),p<f&&(c.push(i.slice(p,f)),e+=f-p),g){case 0:{c.push(65533),e++;break}case 9:{for(d=Math.ceil(e/4)*4,c.push(-2);e++<d;)c.push(-1);break}case 10:{c.push(-4),e=1;break}default:o=!0,e=1}p=f+1}return s&&(o&&c.push(-5),r&&c.push(r),c.push(null)),c}}function H1(e){return!e||typeof e!="object"?"":"position"in e||"type"in e?LB(e.position):"start"in e||"end"in e?LB(e):"line"in e||"column"in e?x8(e):""}function x8(e){return zB(e&&e.line)+":"+zB(e&&e.column)}function LB(e){return x8(e&&e.start)+"-"+x8(e&&e.end)}function zB(e){return e&&typeof e=="number"?e:1}const BB={}.hasOwnProperty;function jB(e,r,n){return typeof r!="string"&&(n=r,r=void 0),Qke(n)(Kke(Xke(n).document().write(Zke()(e,r,!0))))}function Qke(e){const r={transforms:[],canContainEols:["emphasis","fragment","heading","paragraph","strong"],enter:{autolink:i(Qe),autolinkProtocol: $ ,autolinkEmail: $ ,atxHeading:i(Oe),blockQuote:i(pe),characterEscape: $ ,characterReference: $ ,codeFenced:i(Ce),codeFencedFenceInfo:l,codeFencedFenceMeta:l,codeIndented:i(Ce,l),codeText:i(ce,l),codeTextData: $ ,data: $ ,codeFlowValue: $ ,definition:i(de),definitionDestinationString:l,definitionLabelString:l,definitionTitleString:l,emphasis:i(be),hardBreakEscape:i(Xe),hardBreakTrailing:i(Xe),htmlFlow:i(Ge,l),htmlFlowData: $ ,htmlText:i(Ge,l),htmlTextData: $ ,image:i(_t),label:l,link:i(Qe),listItem:i(Ke),listItemValue:f,listOrdered:i(St,p),listUnordered:i(St),paragraph:i(We),reference:z,referenceString:l,resourceDestinationString:l,resourceTitleString:l,setextHeading:i(Oe),strong:i(st),thematicBreak:i(Pn)},exit:{atxHeading:c(),atxHeadingSequence:R,autolink:c(),autolinkEmail:re,autolinkProtocol:ee,blockQuote:c(),characterEscapeValue:M,characterReferenceMarkerHexadecimal:X,characterReferenceMarkerNumeric:X,characterReferenceValue:Z,characterReference:oe,codeFenced:c(w),codeFencedFence:x,codeFencedFenceInfo:g,codeFencedFenceMeta:b,codeFlowValue:M,codeIndented:c(k),codeText:c(U),codeTextData:M,data:M,definition:c(),definitionDestinationString:T,definitionLabelString:C,definitionTitleString:_,emphasis:c(),hardBreakEscape:c(L),hardBreakTrailing:c(L),htmlFlow:c(Y),htmlFlowData:M,htmlText:c(O),htmlTextData:M,image:c(q),label:G,labelText:V,lineEnding:j,link:c(I),listItem:c(),listOrdered:c(),listUnordered:c(),paragraph:c(),referenceString:W,resourceDestinationString:F,resourceTitleString:J,resource:Q,setextHeading:c(N),setextHeadingLineSequence:D,setextHeadingText:A,strong:c(),thematicBreak:c()}};FB(r,(e||{}).mdastExtensions||[]);const n={};return o;function o(_e){let we={type:"root",children:[]};const rt={stack:[we],tokenStack:[],config:r,enter:s,exit:u,buffer:l,resume:d,data:n},at=[];let Dt=-1;for(;++Dt<_e.length;)if(_e[Dt][1].type==="listOrdered"||_e[Dt][1].type==="listUnordered")if(_e[Dt][0]==="enter")at.push(Dt);else{const Wr=at.pop();Dt=a(_e,Wr,Dt)}for(Dt=-1;++Dt<_e.length;){const Wr=r[_e[Dt][0]];BB.call(Wr,_e[Dt][1].type)&&Wr[_e[Dt][1].type].call(Object.assign({sliceSerialize:_e[Dt][2].sliceSerialize},rt),_e[Dt][1])}if(rt.tokenStack.length>0){const Wr=rt.tokenStack[rt.tokenStack.length-1];(Wr[1]||HB).call(rt,void 0,Wr[0])}for(we.position={start:Zc(_e.length>0?_e[0][1].start:{line:1,column:1,offset:0}),end:Zc(_e.length>0?_e[_e.length-2][1].end:{line:1,column:1,offset:0})},Dt=-1;++
` }]}function n6e(e,r){const n=r.value?r.value+ `
` :"",o={};r.lang&&(o.className=["language-"+r.lang]);let a={type:"element",tagName:"code",properties:o,children:[{type:"text",value:n}]};return r.meta&&(a.data={meta:r.meta}),e.patch(r,a),a=e.applyData(r,a),a={type:"element",tagName:"pre",properties:{},children:[a]},e.patch(r,a),a}function o6e(e,r){const n={type:"element",tagName:"del",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function a6e(e,r){const n={type:"element",tagName:"em",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function i6e(e,r){const n=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",o=String(r.identifier).toUpperCase(),a=Vh(o.toLowerCase()),i=e.footnoteOrder.indexOf(o);let l,s=e.footnoteCounts.get(o);s===void 0?(s=0,e.footnoteOrder.push(o),l=e.footnoteOrder.length):l=i+1,s+=1,e.footnoteCounts.set(o,s);const c={type:"element",tagName:"a",properties:{href:"#"+n+"fn-"+a,id:n+"fnref-"+a+(s>1?"-"+s:""),dataFootnoteRef:!0,ariaDescribedBy:["footnote-label"]},children:[{type:"text",value:String(l)}]};e.patch(r,c);const u={type:"element",tagName:"sup",properties:{},children:[c]};return e.patch(r,u),e.applyData(r,u)}function l6e(e,r){const n={type:"element",tagName:"h"+r.depth,properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function s6e(e,r){if(e.options.allowDangerousHtml){const n={type:"raw",value:r.value};return e.patch(r,n),e.applyData(r,n)}}function qB(e,r){const n=r.referenceType;let o="]";if(n==="collapsed"?o+="[]":n==="full"&&(o+="["+(r.label||r.identifier)+"]"),r.type==="imageReference")return[{type:"text",value:"!["+r.alt+o}];const a=e.all(r),i=a[0];i&&i.type==="text"?i.value="["+i.value:a.unshift({type:"text",value:"["});const l=a[a.length-1];return l&&l.type==="text"?l.value+=o:a.push({type:"text",value:o}),a}function c6e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return qB(e,r);const a={src:Vh(o.url||""),alt:r.alt};o.title!==null&&o.title!==void 0&&(a.title=o.title);const i={type:"element",tagName:"img",properties:a,children:[]};return e.patch(r,i),e.applyData(r,i)}function u6e(e,r){const n={src:Vh(r.url)};r.alt!==null&&r.alt!==void 0&&(n.alt=r.alt),r.title!==null&&r.title!==void 0&&(n.title=r.title);const o={type:"element",tagName:"img",properties:n,children:[]};return e.patch(r,o),e.applyData(r,o)}function d6e(e,r){const n={type:"text",value:r.value.replace(/ \r ? \n | \r /g," ")};e.patch(r,n);const o={type:"element",tagName:"code",properties:{},children:[n]};return e.patch(r,o),e.applyData(r,o)}function p6e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return qB(e,r);const a={href:Vh(o.url||"")};o.title!==null&&o.title!==void 0&&(a.title=o.title);const i={type:"element",tagName:"a",properties:a,children:e.all(r)};return e.patch(r,i),e.applyData(r,i)}function h6e(e,r){const n={href:Vh(r.url)};r.title!==null&&r.title!==void 0&&(n.title=r.title);const o={type:"element",tagName:"a",properties:n,children:e.all(r)};return e.patch(r,o),e.applyData(r,o)}function f6e(e,r,n){const o=e.all(r),a=n?m6e(n):UB(r),i={},l=[];if(typeof r.checked=="boolean"){const d=o[0];let p;d&&d.type==="element"&&d.tagName==="p"?p=d:(p={type:"element",tagName:"p",properties:{},children:[]},o.unshift(p)),p.children.length>0&&p.children.unshift({type:"text",value:" "}),p.children.unshift({type:"element",tagName:"input",properties:{type:"checkbox",checked:r.checked,disabled:!0},children:[]}),i.className=["task-list-item"]}let s=-1;for(;++s<o.length;){const d=o[s];(a||s!==0||d.type!=="element"||d.tagName!=="p")&&l.push({type:"text",value: `
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
` }),d.type==="element"&&d.tagName==="p"&&!a?l.push(...d.children):l.push(d)}const c=o[o.length-1];c&&(a||c.type!=="element"||c.tagName!=="p")&&l.push({type:"text",value: `
2025-11-07 11:50:17 +01:00
` });const u={type:"element",tagName:"li",properties:i,children:l};return e.patch(r,u),e.applyData(r,u)}function m6e(e){let r=!1;if(e.type==="list"){r=e.spread||!1;const n=e.children;let o=-1;for(;!r&&++o<n.length;)r=UB(n[o])}return r}function UB(e){const r=e.spread;return r??e.children.length>1}function g6e(e,r){const n={},o=e.all(r);let a=-1;for(typeof r.start=="number"&&r.start!==1&&(n.start=r.start);++a<o.length;){const l=o[a];if(l.type==="element"&&l.tagName==="li"&&l.properties&&Array.isArray(l.properties.className)&&l.properties.className.includes("task-list-item")){n.className=["contains-task-list"];break}}const i={type:"element",tagName:r.ordered?"ol":"ul",properties:n,children:e.wrap(o,!0)};return e.patch(r,i),e.applyData(r,i)}function y6e(e,r){const n={type:"element",tagName:"p",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function b6e(e,r){const n={type:"root",children:e.wrap(e.all(r))};return e.patch(r,n),e.applyData(r,n)}function v6e(e,r){const n={type:"element",tagName:"strong",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function x6e(e,r){const n=e.all(r),o=n.shift(),a=[];if(o){const l={type:"element",tagName:"thead",properties:{},children:e.wrap([o],!0)};e.patch(r.children[0],l),a.push(l)}if(n.length>0){const l={type:"element",tagName:"tbody",properties:{},children:e.wrap(n,!0)},s=zs(r.children[1]),c=k3(r.children[r.children.length-1]);s&&c&&(l.position={start:s,end:c}),a.push(l)}const i={type:"element",tagName:"table",properties:{},children:e.wrap(a,!0)};return e.patch(r,i),e.applyData(r,i)}function w6e(e,r,n){const o=n?n.children:void 0,i=(o?o.indexOf(r):1)===0?"th":"td",l=n&&n.type==="table"?n.align:void 0,s=l?l.length:r.children.length;let c=-1;const u=[];for(;++c<s;){const p=r.children[c],f={},g=l?l[c]:void 0;g&&(f.align=g);let b={type:"element",tagName:i,properties:f,children:[]};p&&(b.children=e.all(p),e.patch(p,b),b=e.applyData(p,b)),u.push(b)}const d={type:"element",tagName:"tr",properties:{},children:e.wrap(u,!0)};return e.patch(r,d),e.applyData(r,d)}function k6e(e,r){const n={type:"element",tagName:"td",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}const VB=9,YB=32;function _6e(e){const r=String(e),n=/ \r ? \n | \r /g;let o=n.exec(r),a=0;const i=[];for(;o;)i.push(WB(r.slice(a,o.index),a>0,!0),o[0]),a=o.index+o[0].length,o=n.exec(r);return i.push(WB(r.slice(a),a>0,!1)),i.join("")}function WB(e,r,n){let o=0,a=e.length;if(r){let i=e.codePointAt(o);for(;i===VB||i===YB;)o++,i=e.codePointAt(o)}if(n){let i=e.codePointAt(a-1);for(;i===VB||i===YB;)a--,i=e.codePointAt(a-1)}return a>o?e.slice(o,a):""}function E6e(e,r){const n={type:"text",value:_6e(String(r.value))};return e.patch(r,n),e.applyData(r,n)}function S6e(e,r){const n={type:"element",tagName:"hr",properties:{},children:[]};return e.patch(r,n),e.applyData(r,n)}const C6e={blockquote:t6e,break:r6e,code:n6e,delete:o6e,emphasis:a6e,footnoteReference:i6e,heading:l6e,html:s6e,imageReference:c6e,image:u6e,inlineCode:d6e,linkReference:p6e,link:h6e,listItem:f6e,list:g6e,paragraph:y6e,root:b6e,strong:v6e,table:x6e,tableCell:k6e,tableRow:w6e,text:E6e,thematicBreak:S6e,toml:O3,yaml:O3,definition:O3,footnoteDefinition:O3};function O3(){}function T6e(e,r){const n=[{type:"text",value:"↩"}];return r>1&&n.push({type:"element",tagName:"sup",properties:{},children:[{type:"text",value:String(r)}]}),n}function R6e(e,r){return"Back to reference "+(e+1)+(r>1?"-"+r:"")}function A6e(e){const r=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",n=e.options.footnoteBackContent||T6e,o=e.options.footnoteBackLabel||R6e,a=e.options.footnoteLabel||"Footnotes",i=e.options.footnoteLabelTagName||"h2",l=e.options.footnoteLabelProperties||{className:["sr-only"]},s=[];let c=-1;for(;++c<e.footnoteOrder.length;){const u=e.footnoteById.get(e.footnoteOrder[c]);if(!u)continue;const d=e.all(u),p=String(u.identifier).toUpperCase(),f=Vh(p.toLowerCase());let g=0;const b=[],x=e.footnoteCounts.get(p);for(;x!==void 0&&++g<=x;){b.length>0&&b.push({type:"text",value:" "});let C=typeof n=="string"?n
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
` },{type:"element",tagName:"ol",properties:{},children:e.wrap(s,!0)},{type:"text",value: `
2025-11-07 11:50:17 +01:00
` }]}}const w8={}.hasOwnProperty,N6e={};function D6e(e,r){const n=r||N6e,o=new Map,a=new Map,i=new Map,l={...C6e,...n.handlers},s={all:u,applyData: $ 6e,definitionById:o,footnoteById:a,footnoteCounts:i,footnoteOrder:[],handlers:l,one:c,options:n,patch:P6e,wrap:O6e};return e8(e,function(d){if(d.type==="definition"||d.type==="footnoteDefinition"){const p=d.type==="definition"?o:a,f=String(d.identifier).toUpperCase();p.has(f)||p.set(f,d)}}),s;function c(d,p){const f=d.type,g=s.handlers[f];if(w8.call(s.handlers,f)&&g)return g(s,d,p);if(s.options.passThrough&&s.options.passThrough.includes(f)){if("children"in d){const{children:x,...w}=d,k=xd(w);return k.children=s.all(d),k}return xd(d)}return(s.options.unknownHandler||M6e)(s,d,p)}function u(d){const p=[];if("children"in d){const f=d.children;let g=-1;for(;++g<f.length;){const b=s.one(f[g],d);if(b){if(g&&f[g-1].type==="break"&&(!Array.isArray(b)&&b.type==="text"&&(b.value=GB(b.value)),!Array.isArray(b)&&b.type==="element")){const x=b.children[0];x&&x.type==="text"&&(x.value=GB(x.value))}Array.isArray(b)?p.push(...b):p.push(b)}}}return p}}function P6e(e,r){e.position&&(r.position=yz(e))}function $ 6e(e,r){let n=r;if(e&&e.data){const o=e.data.hName,a=e.data.hChildren,i=e.data.hProperties;if(typeof o=="string")if(n.type==="element")n.tagName=o;else{const l="children"in n?n.children:[n];n={type:"element",tagName:o,properties:{},children:l}}n.type==="element"&&i&&Object.assign(n.properties,xd(i)),"children"in n&&n.children&&a!==null&&a!==void 0&&(n.children=a)}return n}function M6e(e,r){const n=r.data||{},o="value"in r&&!(w8.call(n,"hProperties")||w8.call(n,"hChildren"))?{type:"text",value:r.value}:{type:"element",tagName:"div",properties:{},children:e.all(r)};return e.patch(r,o),e.applyData(r,o)}function O6e(e,r){const n=[];let o=-1;for(r&&n.push({type:"text",value: `
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
` });++o<e.length;)o&&n.push({type:"text",value: `
` }),n.push(e[o]);return r&&e.length>0&&n.push({type:"text",value: `
2025-11-07 11:50:17 +01:00
` }),n}function GB(e){let r=0,n=e.charCodeAt(r);for(;n===9||n===32;)r++,n=e.charCodeAt(r);return e.slice(r)}function XB(e,r){const n=D6e(e,r),o=n.one(e,void 0),a=A6e(n),i=Array.isArray(o)?{type:"root",children:o}:o||{type:"root",children:[]};return a&&i.children.push({type:"text",value: `
` },a),i}function I6e(e,r){return e&&"run"in e?async function(n,o){const a=XB(n,{file:o,...r});await e.run(a,o)}:function(n,o){return XB(n,{file:o,...e||r})}}function KB(e){if(e)throw e}var k8,ZB;function L6e(){if(ZB)return k8;ZB=1;var e=Object.prototype.hasOwnProperty,r=Object.prototype.toString,n=Object.defineProperty,o=Object.getOwnPropertyDescriptor,a=function(u){return typeof Array.isArray=="function"?Array.isArray(u):r.call(u)==="[object Array]"},i=function(u){if(!u||r.call(u)!=="[object Object]")return!1;var d=e.call(u,"constructor"),p=u.constructor&&u.constructor.prototype&&e.call(u.constructor.prototype,"isPrototypeOf");if(u.constructor&&!d&&!p)return!1;var f;for(f in u);return typeof f>"u"||e.call(u,f)},l=function(u,d){n&&d.name==="__proto__"?n(u,d.name,{enumerable:!0,configurable:!0,value:d.newValue,writable:!0}):u[d.name]=d.newValue},s=function(u,d){if(d==="__proto__")if(e.call(u,d)){if(o)return o(u,d).value}else return;return u[d]};return k8=function c(){var u,d,p,f,g,b,x=arguments[0],w=1,k=arguments.length,C=!1;for(typeof x=="boolean"&&(C=x,x=arguments[1]||{},w=2),(x==null||typeof x!="object"&&typeof x!="function")&&(x={});w<k;++w)if(u=arguments[w],u!=null)for(d in u)p=s(x,d),f=s(u,d),x!==f&&(C&&f&&(i(f)||(g=a(f)))?(g?(g=!1,b=p&&a(p)?p:[]):b=p&&i(p)?p:{},l(x,{name:d,newValue:c(C,b,f)})):typeof f<"u"&&l(x,{name:d,newValue:f}));return x},k8}var z6e=L6e();const _8=t3(z6e);function E8(e){if(typeof e!="object"||e===null)return!1;const r=Object.getPrototypeOf(e);return(r===null||r===Object.prototype||Object.getPrototypeOf(r)===null)&&!(Symbol.toStringTag in e)&&!(Symbol.iterator in e)}function B6e(){const e=[],r={run:n,use:o};return r;function n(...a){let i=-1;const l=a.pop();if(typeof l!="function")throw new TypeError("Expected function as last argument, not "+l);s(null,...a);function s(c,...u){const d=e[++i];let p=-1;if(c){l(c);return}for(;++p<a.length;)(u[p]===null||u[p]===void 0)&&(u[p]=a[p]);a=u,d?j6e(d,s)(...u):l(null,...u)}}function o(a){if(typeof a!="function")throw new TypeError("Expected ` middelware ` to be a function, not "+a);return e.push(a),r}}function j6e(e,r){let n;return o;function o(...l){const s=e.length>l.length;let c;s&&l.push(a);try{c=e.apply(this,l)}catch(u){const d=u;if(s&&n)throw d;return a(d)}s||(c&&c.then&&typeof c.then=="function"?c.then(i,a):c instanceof Error?a(c):i(c))}function a(l,...s){n||(n=!0,r(l,...s))}function i(l){a(null,l)}}let Zo=class extends Error{constructor(r,n,o){super(),typeof n=="string"&&(o=n,n=void 0);let a="",i={},l=!1;if(n&&("line"in n&&"column"in n?i={place:n}:"start"in n&&"end"in n?i={place:n}:"type"in n?i={ancestors:[n],place:n.position}:i={...n}),typeof r=="string"?a=r:!i.cause&&r&&(l=!0,a=r.message,i.cause=r),!i.ruleId&&!i.source&&typeof o=="string"){const c=o.indexOf(":");c===-1?i.ruleId=o:(i.source=o.slice(0,c),i.ruleId=o.slice(c+1))}if(!i.place&&i.ancestors&&i.ancestors){const c=i.ancestors[i.ancestors.length-1];c&&(i.place=c.position)}const s=i.place&&"start"in i.place?i.place.start:i.place;this.ancestors=i.ancestors||void 0,this.cause=i.cause||void 0,this.column=s?s.column:void 0,this.fatal=void 0,this.file,this.message=a,this.line=s?s.line:void 0,this.name=H1(i.place)||"1:1",this.place=i.place||void 0,this.reason=this.message,this.ruleId=i.ruleId||void 0,this.source=i.source||void 0,this.stack=l&&i.cause&&typeof i.cause.stack=="string"?i.cause.stack:"",this.actual,this.expected,this.note,this.url}};Zo.prototype.file="",Zo.prototype.name="",Zo.prototype.reason="",Zo.prototype.message="",Zo.prototype.stack="",Zo.prototype.column=void 0,Zo.prototype.line=void 0,Zo.prototype.ancestors=void 0,Zo.prototype.cause=void 0,Zo.prototype.fatal=void 0,Zo.prototype.place=void 0,Zo.prototype.ruleId=void 0,Zo.prototype.source=void 0;const Wl={basename:F6e,dirname:H6e,extname:q6e,join:U6e,sep:"/"};function F6e(e,r){if(r!==void 0&&typeof r!="string")throw new TypeError('"ext" argument must be a string');q1(e);let n=0,o=-1,a=e.length,i;if(r===void 0||r.length===0||r.length>e.length){for(;a--;)if(e.codePointAt(a)===47){if(i){n=a+1;break}}else o<0&&(i=!0,o=a+1);return o<0?"
` )}reversed(r=!1){if(!r)return new ti(this.target,this.source);const[n]=B8(this.target,this.source,"directed");return n??new ti(this.target,this.source,new Set)}}const bj={asc:(e,r)=>e>r,desc:(e,r)=>e<r};function Q_e(e,r){let[n,...o]=r;if(!J_e(n)){let i=j8(...o);return e(n,i)}let a=j8(n,...o);return i=>e(i,a)}function j8(e,r,...n){let o=typeof e=="function"?e:e[0],a=typeof e=="function"?"asc":e[1],{[a]:i}=bj,l=r===void 0?void 0:j8(r,...n);return(s,c)=>{let u=o(s),d=o(c);return i(u,d)?1:i(d,u)?-1:l?.(s,c)??0}}function J_e(e){if(vj(e))return!0;if(typeof e!="object"||!Array.isArray(e))return!1;let[r,n,...o]=e;return vj(r)&&typeof n=="string"&&n in bj&&o.length===0}const vj=e=>typeof e=="function"&&e.length===1;function xj(...e){return ba(Object.entries,e)}function e8e(...e){return ba(t8e,e)}function t8e(e,r){if(e===r||Object.is(e,r))return!0;if(typeof e!="object"||!e||typeof r!="object"||!r)return!1;if(e instanceof Map&&r instanceof Map)return r8e(e,r);if(e instanceof Set&&r instanceof Set)return n8e(e,r);let n=Object.keys(e);if(n.length!==Object.keys(r).length)return!1;for(let o of n){if(!Object.hasOwn(r,o))return!1;let{[o]:a}=e,{[o]:i}=r;if(a!==i||!Object.is(a,i))return!1}return!0}function r8e(e,r){if(e.size!==r.size)return!1;for(let[n,o]of e){let a=r.get(n);if(o!==a||!Object.is(o,a))return!1}return!0}function n8e(e,r){if(e.size!==r.size)return!1;for(let n of e)if(!r.has(n))return!1;return!0}function o8e(...e){return ba(a8e,e)}const a8e=e=>e.at(-1);function i8e(e,...r){return typeof e=="string"||typeof e=="number"||typeof e=="symbol"?n=>wj(n,e,...r):wj(e,...r)}function wj(e,...r){let n=e;for(let o of r){if(n==null)return;n=n[o]}return n}function F8(...e){return ba(l8e,e)}function l8e(e,r){let n=[...e];return n.sort(r),n}function s8e(...e){return Q_e(c8e,e)}const c8e=(e,r)=>[...e].sort(r);function kj(e,r,n){return typeof r=="number"||r===void 0?o=>o.split(e,r):e.split(r,n)}function B3(...e){return ba(Object.values,e)}class j3{constructor(r,n){this. $ model=r,this. $ element=n,this.id=this. $ element.id,this._literalId=this. $ element.id;const[o,a]=Qye(this.id);o?(this.imported={from:o,fqn:a},this.hierarchyLevel=o3(a)):(this.imported=null,this.hierarchyLevel=o3(this.id))}id;_literalId;hierarchyLevel;imported;get name(){return g1(this.id)}get parent(){return this. $ model.parent(this)}get kind(){return this. $ element.kind}get shape(){return this.style.shape}get color(){return this.style.color}get icon(){return this.style.icon??null}get tags(){return cr(this,Symbol.for("tags"),()=>z8([...this. $ element.tags??[],...this. $ model.specification.elements[this. $ element.kind]?.tags??[]]))}get title(){return this. $ element.title}get hasSummary(){return!!this. $ element.summary&&!!this. $ element.description&&!e8e(this. $ element.summary,this. $ element.description)}get summary(){return Kt.memoize(this,"summary",i3(this. $ element))}get description(){return Kt.memoize(this,"description",l3(this. $ element))}get technology(){return this. $ element.technology??null}get links(){return this. $ element.links??[]}get defaultView(){return cr(this,Symbol.for("defaultView"),()=>sj(this.scopedViews())??null)}get isRoot(){return this.parent===null}get style(){return cr(this,"style",()=>U1({shape:this. $ model. $ styles.defaults.shape,color:this. $ model. $ styles.defaults.color,border:this. $ model. $ styles.defaults.border,opacity:this. $ model. $ styles.defaults.opacity,size:this. $ model. $ styles.defaults.size,padding:this. $ model. $ styles.defaults.padding,textSize:this. $ model. $ styles.defaults.text,...this. $ element.style}))}isAncestorOf(r){return qn(this,r)}isDescendantOf(r){return qn(r,this)}ancestors(){return this. $ model.ancestors(this)}commonAncestor(r){const n=b1(this.id,r.id);return n?this. $ model.element(n):null}children(){return this. $ model.children(this)}descendants(r){return r? $ I([...this. $ model.descendants(this)],r)[Symbol.iterator]():this. $ model.descendants(this)}siblings(){return this. $ model.siblings(this)}*ascendingSiblings(){yield*this.siblings();for(const r of this.ancestors())yield*r.siblings()}*descendingSiblings(){for(const r of[...this.ancestors()].reverse())yield*r.sibling
` ),"View title cannot contain newlines"),e.includes(ka)){const r=e.split(ka).map(n=>n.trim()).filter(n=>n.length>0);return _h(r,1)?r:[""]}return[e.trim()]},F3=e=>H8(e).join(ka),u8e=e=>{const r=H8(e);return _h(r,2)?r.slice(0,-1).join(ka):null},d8e=e=>e.includes(ka)?H8(e).pop()??e:e.trim();class p8e{constructor(r){this. $ model=r;const n=this. $ deployments=r. $ data.deployments,o=B3(n.elements);for(const a of Vc(o)){const i=this.addElement(a);for(const l of i.tags)this.#s.get(l).add(i);i.isInstance()&&this.#a.get(i.element.id).add(i)}for(const a of B3(n.relations)){const i=this.addRelation(a);for(const l of i.tags)this.#s.get(l).add(i)}}#e=new Map;#t=new Map;#r=new so(()=>new Set);#a=new so(()=>new Set);#i=new Set;#n=new Map;#o=new so(()=>new Set);#l=new so(()=>new Set);#c=new so(()=>new Set);#s=new so(()=>new Set);#u=new Map; $ deployments;get $ styles(){return this. $ model. $ styles}element(r){if(r instanceof fj||r instanceof mj)return r;const n=hr(r);return mt(this.#e.get(n), ` Element $ { n } not found ` )}findElement(r){return this.#e.get(r)??null}node(r){const n=this.element(r);return nt(n.isDeploymentNode(), ` Element $ { n . id } is not a deployment node ` ),n}findNode(r){const n=this.findElement(r);return n?(nt(n.isDeploymentNode(), ` Element $ { n ? . id } is not a deployment node ` ),n):null}instance(r){const n=this.element(r);return nt(n.isInstance(), ` Element $ { n . id } is not a deployed instance ` ),n}findInstance(r){const n=this.findElement(r);return n?(nt(n.isInstance(), ` Element $ { n ? . id } is not a deployed instance ` ),n):null}roots(){return this.#i.values()}elements(){return this.#e.values()}*nodes(){for(const r of this.#e.values())r.isDeploymentNode()&&(yield r)}*nodesOfKind(r){for(const n of this.#e.values())n.isDeploymentNode()&&n.kind===r&&(yield n)}*instances(){for(const r of this.#e.values())r.isInstance()&&(yield r)}*instancesOf(r){const n=hr(r),o=this.#a.get(n);o&&(yield*o)}deploymentRef(r){if(W1.isInsideInstanceRef(r)){const{deployment:n,element:o}=r;return N_e(this.#u, ` $ { n } @ $ { o } ` ,()=>new G_e(this.instance(n),this. $ model.element(o)))}return this.element(r.deployment)}relationships(){return this.#n.values()}relationship(r){return mt(this.#n.get(hr(r)), ` DeploymentRelationModel $ { r } not found ` )}findRelationship(r){return this.#n.get(r)??null}*views(){for(const r of this. $ model.views())r.isDeploymentView()&&(yield r)}parent(r){const n=hr(r);return this.#t.get(n)||null}children(r){const n=hr(r);return this.#r.get(n)}*siblings(r){const n=hr(r),o=this.parent(r)?.children()??this.roots();for(const a of o)a.id!==n&&(yield a)}*ancestors(r){let n=hr(r),o;for(;o=this.#t.get(n);)yield o,n=o.id}*descendants(r,n="desc"){for(const o of this.children(r))n==="asc"?(yield o,yield*this.descendants(o.id)):(yield*this.descendants(o.id),yield o)}*incoming(r,n="all"){const o=hr(r);for(const a of this.#o.get(o))switch(!0){case n==="all":case(n==="direct"&&a.target.id===o):case(n==="to-descendants"&&a.target.id!==o):yield a;break}}*outgoing(r,n="all"){const o=hr(r);for(const a of this.#l.get(o))switch(!0){case n==="all":case(n==="direct"&&a.source.id===o):case(n==="from-descendants"&&a.source.id!==o):yield a;break}}addElement(r){if(this.#e.has(r.id))throw new Error( ` Element $ { r . id } already exists ` );const n=b_e(r)?new fj(this,Object.freeze(r)):new mj(this,Object.freeze(r),this. $ model.element(r.element));this.#e.set(n.id,n);const o=n3(n.id);return o?(nt(this.#e.has(o), ` Parent $ { o } of $ { n . id } not found ` ),this.#t.set(n.id,this.node(o)),this.#r.get(o).add(n)):(nt(n.isDeploymentNode(), ` Root element $ { n . id } is not a deployment node ` ),this.#i.add(n)),n}addRelation(r){if(this.#n.has(r.id))throw new Error( ` Relation $ { r . id } already exists ` );const n=new X_e(this,Object.freeze(r));this.#n.set(n.id,n),this.#o.get(n.target.id).add(n),this.#l.get(n.source.id).add(n);const o=n.boundary?.id??null;if(o)for(const a of[o,...bd(o)])this.#c.get(a).add(n);for(const a of bd(n.source.id)){if(a===o)break;this.#l.get(a).add(n)}for(const a of bd(n.target.id)){if(a===o)break;this.#o.get(a).add(n)}return n}}class _j{constructor(r,n){this.model=r,this. $ relationship=n,this.source=r.element(W1.flatte
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /var Q8e={outline:{xmlns:"http:/ / www . w3 . org / 2000 / svg ",width:24,height:24,viewBox:" 0 0 24 24 ",fill:" none ",stroke:" currentColor ",strokeWidth:2,strokeLinecap:" round ",strokeLinejoin:" round "},filled:{xmlns:" http : //www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"currentColor",stroke:"none"}};/**
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const yt=(e,r,n,o)=>{const a=E.forwardRef(({color:i="currentColor",size:l=24,stroke:s=2,title:c,className:u,children:d,...p},f)=>E.createElement("svg",{ref:f,...Q8e[e],width:l,height:l,className:["tabler-icon",`tabler-icon-${r}`,u].join(" "),...e==="filled"?{fill:i}:{strokeWidth:s,stroke:i},...p},[c&&E.createElement("title",{key:"svg-title"},c),...o.map(([g,b])=>E.createElement(g,b)),...Array.isArray(d)?d:[d]]));return a.displayName=`${n}`,a};/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const J8e=[["path",{d:"M12 6m-7 0a7 3 0 1 0 14 0a7 3 0 1 0 -14 0",key:"svg-0"}],["path",{d:"M5 6v12c0 1.657 3.134 3 7 3s7 -1.343 7 -3v-12",key:"svg-1"}]],zj=yt("outline","cylinder","Cylinder",J8e);/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const eEe=[["path",{d:"M21 14.008v-5.018a1.98 1.98 0 0 0 -1 -1.717l-4 -2.008a2.016 2.016 0 0 0 -2 0l-10 5.008c-.619 .355 -1 1.01 -1 1.718v5.018c0 .709 .381 1.363 1 1.717l4 2.008a2.016 2.016 0 0 0 2 0l10 -5.008c.619 -.355 1 -1.01 1 -1.718z",key:"svg-0"}],["path",{d:"M9 21v-7.5",key:"svg-1"}],["path",{d:"M9 13.5l11.5 -5.5",key:"svg-2"}],["path",{d:"M3.5 11l5.5 2.5",key:"svg-3"}]],tEe=yt("outline","rectangular-prism","RectangularPrism",eEe);/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const rEe=[["path",{d:"M3 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z",key:"svg-0"}],["path",{d:"M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z",key:"svg-1"}],["path",{d:"M17 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z",key:"svg-2"}],["path",{d:"M5 11v-3a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v3",key:"svg-3"}],["path",{d:"M16.5 8.5l2.5 2.5l2.5 -2.5",key:"svg-4"}]],nEe=yt("outline","reorder","Reorder",rEe);/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const oEe=[["path",{d:"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0",key:"svg-0"}],["path",{d:"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2",key:"svg-1"}]],aEe=yt("outline","user","User",oEe);/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const iEe=[["path",{d:"M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z",key:"svg-0"}],["path",{d:"M11 4h2",key:"svg-1"}],["path",{d:"M12 17v.01",key:"svg-2"}]],lEe=yt("outline","device-mobile","DeviceMobile",iEe);/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const sEe=[["path",{d:"M4 8h16",key:"svg-0"}],["path",{d:"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z",key:"svg-1"}],["path",{d:"M8 4v4",key:"svg-2"}]],cEe=yt("outline","browser","Browser",sEe),Z8=E.createContext(null);function uEe({value:e,children:r}){return E.useContext(Z8)?y.jsx(y.Fragment,{children:r}):y.jsx(Z8.Provider,{value:e,children:r})}function U3({element:e,className:r,style:n}){const o=E.useContext(Z8);if(!e||!e.icon||e.icon==="none")return null;let a;return e.icon.startsWith("http:/ / ")||e.icon.startsWith(" https : //")?a=y.jsx("img",{src:e.icon,alt:e.title}):o&&(a=y.jsx(o,{node:e})),a?y.jsx("div",{className:Je(r,"likec4-element-icon"),"data-likec4-icon":e.icon,style:n,children:a}):null}const dEe={browser:cEe,cylinder:zj,mobile:lEe,person:aEe,queue:nEe,rectangle:tEe,storage:zj};function pEe({element:e,className:r}){const n=y.jsx(U3,{element:e,className:r});if(n)return n;const o=dEe[e.shape];return y.jsx("div",{className:Je(r,"likec4-shape-icon"),children:y.jsx(o,{})})}function Xh(e){const r=E.useRef(e);return r.current=e,E.useMemo(()=>Object.freeze({get current(){return r.current}}),[])}function Bj(e){const r=Xh(e);E.useEffect(()=>()=>{r.current()},[])}function V3(e,r,n,o=0){const a=E.useRef(void 0),i=E.useRef(void 0),l=E.useRef(e),s=E.useRef(void 0),c=()=>{a.current&&(clearTimeout(a.current),a.current=void 0),i.current&&(clearTimeout(i.current),i.current=void 0)};return Bj(c),E.useEffect(()=>{l.current=e},r),E.useMemo(()=>{const u=()=>{if(c(),!s.current)return;const p=s.current;s.current=void 0,l.current.apply(p.this,p.args)},d=function(...p){a.current&&clearTimeout(a.current),s.current={args:p,this:this},a.current=setTimeout(u,n),o>0&&!i.current&&(i.current=setTimeout(u,o))};return Object.defineProperties(d,{length:{value:e.length},name:{value:`${e.name||"anonymous"}__debounced__${n}`}}),d},[n,o,...r])}const hEe=()=>{},Y3=typeof globalThis<"u"&&typeof navigator<"u"&&typeof document<"u";function fEe(e){const r=Xh(e),n=E.useRef(0),o=E.useCallback(()=>{Y3&&n.current&&(cancelAnimationFrame(n.current),n.current=0)},[]);return Bj(o),[E.useMemo(()=>{const a=(...i)=>{Y3&&(o(),n.current=requestAnimationFrame(()=>{r.current(...i),n.current=0}))};return Object.defineProperties(a,{length:{value:e.length},name:{value:`${e.name||"anonymous"}__raf`}}),a},[]),o]}const mEe=(e,r)=>{if(e===r)return!0;if(e.length!==r.length)return!1;for(const[n,o]of e.entries())if(o!==r[n])return!1;return!0};function jj(e,r,n=mEe,o=E.useEffect,...a){const i=E.useRef(void 0);(i.current===void 0||Y3&&!n(i.current,r))&&(i.current=r),o(e,i.current,...a)}function gEe(e,r,n,o=0){E.useEffect(V3(e,r,n,o),r)}function Fj(){const e=E.useRef(!0);return E.useEffect(()=>{e.current=!1},[]),e.current}const Q8=Y3?E.useLayoutEffect:E.useEffect;function yEe(e){E.useEffect(()=>{e()},[])}function Hj(e,r){const[n,o]=fEe(e);E.useEffect(()=>(n(),o),r)}const bEe=e=>(e+1)%Number.MAX_SAFE_INTEGER;function vEe(){const[,e]=E.useState(0);return E.useCallback(()=>{e(bEe)},[])}function qj(e,r){const n=Fj();E.useEffect(n?hEe:e,r)}const xEe=e=>{e&&clearTimeout(e)};function W3(e,r){const n=Xh(e),o=Xh(r),a=E.useRef(null),i=E.useCallback(()=>{xEe(a.current)},[]),l=E.useCallback(()=>{o.current!==void 0&&(i(),a.current=setTimeout(()=>{n.current()},o.current))},[]);return E.useEffect(()=>(l(),i),[r]),[i,l]}const Uj=(e,r,n)=>{const o=E.useRef(void 0);return(o.current===void 0||!n(o.current,r))&&(o.current=r),E.useMemo(e,o.current)};function an(e){if(typeof e=="string"||typeof e=="number")return""+e;let r="";if(Array.isArray(e))for(let n=0,o;n<e.length;n++)(o=an(e[n]))!==""&&(r+=(r&&" ")+o);else for(let n in e)e[n]&&(r+=(r&&" ")+n);return r}var wEe={value:()=>{}};function G3(){for(var e=0,r=arguments.length,n={},o;e<r;++e){if(!(o=arguments[e]+"")||o in n||/[\s.]/.test(o))throw new Error("illegal type: "+o);n[o]=[]}return new X3(n)}function X3(e){this._=e}function kEe(e,r){return e.trim().split(/^|\s+/).map(function(n){var o="",a=n.indexOf(".");if(a>=0&&(o=n.slice(a+1),n=n.slice(0,a)),n&&!r.hasOwnProperty(n))throw new Error("unknown type: "+n);retu
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
* @ license React
* use - sync - external - store - shim . production . js
*
* Copyright ( c ) Meta Platforms , Inc . and affiliates .
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / v a r A H ; f u n c t i o n J C e ( ) { i f ( A H ) r e t u r n $ E ; A H = 1 ; v a r e = X r ; f u n c t i o n r ( p , f ) { r e t u r n p = = = f & & ( p ! = = 0 | | 1 / p = = = 1 / f ) | | p ! = = p & & f ! = = f } v a r n = t y p e o f O b j e c t . i s = = " f u n c t i o n " ? O b j e c t . i s : r , o = e . u s e S t a t e , a = e . u s e E f f e c t , i = e . u s e L a y o u t E f f e c t , l = e . u s e D e b u g V a l u e ; f u n c t i o n s ( p , f ) { v a r g = f ( ) , b = o ( { i n s t : { v a l u e : g , g e t S n a p s h o t : f } } ) , x = b [ 0 ] . i n s t , w = b [ 1 ] ; r e t u r n i ( f u n c t i o n ( ) { x . v a l u e = g , x . g e t S n a p s h o t = f , c ( x ) & & w ( { i n s t : x } ) } , [ p , g , f ] ) , a ( f u n c t i o n ( ) { r e t u r n c ( x ) & & w ( { i n s t : x } ) , p ( f u n c t i o n ( ) { c ( x ) & & w ( { i n s t : x } ) } ) } , [ p ] ) , l ( g ) , g } f u n c t i o n c ( p ) { v a r f = p . g e t S n a p s h o t ; p = p . v a l u e ; t r y { v a r g = f ( ) ; r e t u r n ! n ( p , g ) } c a t c h { r e t u r n ! 0 } } f u n c t i o n u ( p , f ) { r e t u r n f ( ) } v a r d = t y p e o f w i n d o w > " u " | | t y p e o f w i n d o w . d o c u m e n t > " u " | | t y p e o f w i n d o w . d o c u m e n t . c r e a t e E l e m e n t > " u " ? u : s ; r e t u r n $ E . u s e S y n c E x t e r n a l S t o r e = e . u s e S y n c E x t e r n a l S t o r e ! = = v o i d 0 ? e . u s e S y n c E x t e r n a l S t o r e : d , $ E } v a r N H ; f u n c t i o n D H ( ) { r e t u r n N H | | ( N H = 1 , R H . e x p o r t s = J C e ( ) ) , R H . e x p o r t s } / * *
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
* @ license React
* use - sync - external - store - shim / with - selector . production . js
*
* Copyright ( c ) Meta Platforms , Inc . and affiliates .
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /var PH;function eTe(){if(PH)return PE;PH=1;var e=Xr,r=DH();function n(u,d){return u===d&&(u!==0||1/u === 1 / d ) || u !== u && d !== d } var o = typeof Object . is == "function" ? Object . is : n , a = r . useSyncExternalStore , i = e . useRef , l = e . useEffect , s = e . useMemo , c = e . useDebugValue ; return PE . useSyncExternalStoreWithSelector = function ( u , d , p , f , g ) { var b = i ( null ) ; if ( b . current === null ) { var x = { hasValue : ! 1 , value : null } ; b . current = x } else x = b . current ; b = s ( function ( ) { function k ( A ) { if ( ! C ) { if ( C = ! 0 , _ = A , A = f ( A ) , g !== void 0 && x . hasValue ) { var D = x . value ; if ( g ( D , A ) ) return T = D } return T = A } if ( D = T , o ( _ , A ) ) return D ; var N = f ( A ) ; return g !== void 0 && g ( D , N ) ? ( _ = A , D ) : ( _ = A , T = N ) } var C = ! 1 , _ , T , R = p === void 0 ? null : p ; return [ function ( ) { return k ( d ( ) ) } , R === null ? void 0 : function ( ) { return k ( R ( ) ) } ] } , [ d , p , f , g ] ) ; var w = a ( u , b [ 0 ] , b [ 1 ] ) ; return l ( function ( ) { x . hasValue = ! 0 , x . value = w } , [ w ] ) , c ( w ) , w } , PE } var $H ; function tTe ( ) { return $H || ( $H = 1 , TH . exports = eTe ( ) ) , TH . exports } var MH = tTe ( ) ; const rTe = DE ( MH ) , nTe = { } , OH = e => { let r ; const n = new Set , o = ( s , c ) => { const u = typeof s == "function" ? s ( r ) : s ; if ( ! Object . is ( u , r ) ) { const d = r ; r = c ? ? ( typeof u != "object" || u === null ) ? u : Object . assign ( { } , r , u ) , n . forEach ( p => p ( r , d ) ) } } , a = ( ) => r , i = { setState : o , getState : a , getInitialState : ( ) => l , subscribe : s => ( n . add ( s ) , ( ) => n . delete ( s ) ) , destroy : ( ) => { ( nTe ? "production" : void 0 ) !== "production" && console . warn ( "[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected." ) , n . clear ( ) } } , l = r = e ( o , a , i ) ; return i } , oTe = e => e ? OH ( e ) : OH , { useDebugValue : aTe } = Xr , { useSyncExternalStoreWithSelector : iTe } = rTe , lTe = e => e ; function IH ( e , r = lTe , n ) { const o = iTe ( e . subscribe , e . getState , e . getServerState || e . getInitialState , r , n ) ; return aTe ( o ) , o } const LH = ( e , r ) => { const n = oTe ( e ) , o = ( a , i = r ) => IH ( n , a , i ) ; return Object . assign ( o , n ) , o } , sTe = ( e , r ) => e ? LH ( e , r ) : LH ; function Ar ( e , r ) { if ( Object . is ( e , r ) ) return ! 0 ; if ( typeof e != "object" || e === null || typeof r != "object" || r === null ) return ! 1 ; if ( e instanceof Map && r instanceof Map ) { if ( e . size !== r . size ) return ! 1 ; for ( const [ o , a ] of e ) if ( ! Object . is ( a , r . get ( o ) ) ) return ! 1 ; return ! 0 } if ( e instanceof Set && r instanceof Set ) { if ( e . size !== r . size ) return ! 1 ; for ( const o of e ) if ( ! r . has ( o ) ) return ! 1 ; return ! 0 } const n = Object . keys ( e ) ; if ( n . length !== Object . keys ( r ) . length ) return ! 1 ; for ( const o of n ) if ( ! Object . prototype . hasOwnProperty . call ( r , o ) || ! Object . is ( e [ o ] , r [ o ] ) ) return ! 1 ; return ! 0 } const Cx = E . createContext ( null ) , cTe = Cx . Provider , zH = Ql . error001 ( ) ; function Rt ( e , r ) { const n = E . useContext ( Cx ) ; if ( n === null ) throw new Error ( zH ) ; return IH ( n , e , r ) } function fr ( ) { const e = E . useContext ( Cx ) ; if ( e === null ) throw new Error ( zH ) ; return E . useMemo ( ( ) => ( { getState : e . getState , setState : e . setState , subscribe : e . subscribe } ) , [ e ] ) } const BH = { display : "none" } , uTe = { position : "absolute" , width : 1 , height : 1 , margin : - 1 , border : 0 , padding : 0 , overflow : "hidden" , clip : "rect(0px, 0px, 0px, 0px)" , clipPath : "inset(100%)" } , jH = "react-flow__node-desc" , FH = "react-flow__edge-desc" , dTe = "react-flow__aria-live" , pTe = e => e . ariaLiveMessage , hTe = e => e . ariaLabelConfig ; function fTe ( { rfId : e } ) { const r = Rt ( pTe ) ; return y . jsx ( "div" , { id : ` ${ dTe } - ${ e } ` , "aria-live" : "assertive" , "aria-atomic" : "true" , style : uTe , children : r } ) } function mTe ( { rfId : e , disableKeyboardA11y : r } ) { const n = Rt ( hTe ) ; return y . jsxs ( y . Fragment , { children : [ y . jsx ( "div" , { id : ` ${ jH } - ${ e } ` , style : BH , children : r ? n [ "node.a11yDescription.default" ] : n [ "node.a11yDescription.keyboardDisabled" ] } ) , y . jsx ( "div" , { id : ` ${ FH } - ${ e } ` , style : BH , children : n [ "edge.a11yDescription.default" ] } ) , ! r && y . jsx ( fTe , { rfId : e } ) ] } ) } const ou = E . forwardRef ( ( { position : e = "top-left" , children : r , className : n , style : o , ... a } , i ) => { const l = ` ${ e } ` . split ( "-" ) ; return y . jsx ( "div" , { className : an ( [ "react-flow__panel" , n , ... l ] ) , style : o , ref : i , ... a , children : r } ) } ) ; ou . displayName = "Panel" ; function gTe ( { proOptions : e , position : r = "bottom-right" } ) { return e ? . hideAttribution ? null : y . jsx ( ou , { position : r , className : "react-flow__attribution" , "data-message" : "Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev" , children : y . jsx ( "a" , { href : "https://reactflow.dev" , target : "_blank" , rel : "noopener noreferrer" , "aria-label" : "React Flow attribution" , children : " Reac
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
` ).replace( `
` , `
+ ` ).split( `
2025-11-07 11:50:17 +01:00
` )),u=c.reduce((d,p)=>d.concat(...p),[]);return[c,u]}return[[],[]]},[e]);return E.useEffect(()=>{const c=r?.target??YH,u=r?.actInsideInputWithModifier??!0;if(e!==null){const d=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!u)&&tH(g))return!1;const b=GH(g.code,s);if(i.current.add(g[b]),WH(l,i.current,!1)){const x=g.composedPath?.()?.[0]||g.target,w=x?.nodeName==="BUTTON"||x?.nodeName==="A";r.preventDefault!==!1&&(a.current||!w)&&g.preventDefault(),o(!0)}},p=g=>{const b=GH(g.code,s);WH(l,i.current,!0)?(o(!1),i.current.clear()):i.current.delete(g[b]),g.key==="Meta"&&i.current.clear(),a.current=!1},f=()=>{i.current.clear(),o(!1)};return c?.addEventListener("keydown",d),c?.addEventListener("keyup",p),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",d),c?.removeEventListener("keyup",p),window.removeEventListener("blur",f),window.removeEventListener("contextmenu",f)}}},[e,o]),n}function WH(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function GH(e,r){return r.includes(e)?"code":"key"}const TTe=()=>{const e=fr();return E.useMemo(()=>({zoomIn:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomOut:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1/1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomTo:(r,n)=>{const{panZoom:o}=e.getState();return o?o.scaleTo(r,{duration:n?.duration}):Promise.resolve(!1)},getZoom:()=>e.getState().transform[2],setViewport:async(r,n)=>{const{transform:[o,a,i],panZoom:l}=e.getState();return l?(await l.setViewport({x:r.x??o,y:r.y??a,zoom:r.zoom??i},n),Promise.resolve(!0)):Promise.resolve(!1)},getViewport:()=>{const[r,n,o]=e.getState().transform;return{x:r,y:n,zoom:o}},setCenter:async(r,n,o)=>e.getState().setCenter(r,n,o),fitBounds:async(r,n)=>{const{width:o,height:a,minZoom:i,maxZoom:l,panZoom:s}=e.getState(),c=tu(r,o,a,i,l,n?.padding??.1);return s?(await s.setViewport(c,{duration:n?.duration,ease:n?.ease,interpolate:n?.interpolate}),Promise.resolve(!0)):Promise.resolve(!1)},screenToFlowPosition:(r,n={})=>{const{transform:o,snapGrid:a,snapToGrid:i,domNode:l}=e.getState();if(!l)return r;const{x:s,y:c}=l.getBoundingClientRect(),u={x:r.x-s,y:r.y-c},d=n.snapGrid??a,p=n.snapToGrid??i;return y0(u,o,p,d)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:a,y:i}=o.getBoundingClientRect(),l=xx(r,n);return{x:l.x+a,y:l.y+i}}}),[])};function XH(e,r){const n=[],o=new Map,a=[];for(const i of e)if(i.type==="add"){a.push(i);continue}else if(i.type==="remove"||i.type==="replace")o.set(i.id,[i]);else{const l=o.get(i.id);l?l.push(i):o.set(i.id,[i])}for(const i of r){const l=o.get(i.id);if(!l){n.push(i);continue}if(l[0].type==="remove")continue;if(l[0].type==="replace"){n.push({...l[0].item});continue}const s={...i};for(const c of l)RTe(c,s);n.push(s)}return a.length&&a.forEach(i=>{i.index!==void 0?n.splice(i.index,0,{...i.item}):n.push({...i.item})}),n}function RTe(e,r){switch(e.type){case"select":{r.selected=e.selected;break}case"position":{typeof e.position<"u"&&(r.position=e.position),typeof e.dragging<"u"&&(r.dragging=e.dragging);break}case"dimensions":{typeof e.dimensions<"u"&&(r.measured??={},r.measured.width=e.dimensions.width,r.measured.height=e.dimensions.height,e.setAttributes&&((e.setAttributes===!0||e.setAttributes==="width")&&(r.width=e.dimensions.width),(e.setAttributes===!0||e.setAttributes==="height")&&(r.height=e.dimensions.height))),typeof e.resizing=="boolean"&&(r.resizing=e.resizing);break}}}function Rx(e,r){return XH(e,r)}function Ax(e,r){return XH(e,r)}function Fd(e,r){return{id:e,type:"select",selected:r}}function cf(e,r=new Set,n=!1){const o=[];for(const[a,i]of e){const l=r.has(a);!(i.selected===void 0&&!l)&&i.selected!==l&&(n&&(i.selected=l),o.push(Fd(i.id,l)))}return o}function KH({items:e=[],lookup:r}){const n=[],o=new Map(e.map(a=>[a.id,a]));for(const[a,i]of e.entries()){const l=r.get(i.id),s=l?.internals?.userNode??l;s!==void 0&&s!==i&&n.push({id:i.id,item:i,typ
M$ { N . x } , $ { N . y } h$ { N . width } v$ { N . height } h$ { - N . width } z ` ,fillRule:"evenodd",pointerEvents:"none"})]})})}zq.displayName="MiniMap",E.memo(zq);const yAe=e=>r=>e? ` $ { Math . max ( 1 / r . transform [ 2 ] , 1 ) } ` :void 0,bAe={[sf.Line]:"right",[sf.Handle]:"bottom-right"};function vAe({nodeId:e,position:r,variant:n=sf.Handle,className:o,style:a=void 0,children:i,color:l,minWidth:s=10,minHeight:c=10,maxWidth:u=Number.MAX_VALUE,maxHeight:d=Number.MAX_VALUE,keepAspectRatio:p=!1,resizeDirection:f,autoScale:g=!0,shouldResize:b,onResizeStart:x,onResize:w,onResizeEnd:k}){const C=LE(),_=typeof e=="string"?e:C,T=fr(),R=E.useRef(null),A=n===sf.Handle,D=Rt(E.useCallback(yAe(A&&g),[A,g]),Ar),N=E.useRef(null), $ =r??bAe[n];E.useEffect(()=>{if(!(!R.current||!_))return N.current||(N.current=QCe({domNode:R.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:j,transform:L,snapGrid:Y,snapToGrid:O,nodeOrigin:U,domNode:I}=T.getState();return{nodeLookup:j,transform:L,snapGrid:Y,snapToGrid:O,nodeOrigin:U,paneDomNode:I}},onChange:(j,L)=>{const{triggerNodeChanges:Y,nodeLookup:O,parentLookup:U,nodeOrigin:I}=T.getState(),q=[],V={x:j.x,y:j.y},G=O.get(_);if(G&&G.expandParent&&G.parentId){const F=G.origin??I,J=j.width??G.measured.width??0,Q=j.height??G.measured.height??0,z={id:G.id,parentId:G.parentId,rect:{width:J,height:Q,...QF({x:j.x??G.position.x,y:j.y??G.position.y},{width:J,height:Q},G.parentId,O,F)}},W=CE([z],O,U,I);q.push(...W),V.x=j.x?Math.max(F[0]*J,j.x):void 0,V.y=j.y?Math.max(F[1]*Q,j.y):void 0}if(V.x!==void 0&&V.y!==void 0){const F={id:_,type:"position",position:{...V}};q.push(F)}if(j.width!==void 0&&j.height!==void 0){const F={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:j.width,height:j.height}};q.push(F)}for(const F of L){const J={...F,type:"position"};q.push(J)}Y(q)},onEnd:({width:j,height:L})=>{const Y={id:_,type:"dimensions",resizing:!1,dimensions:{width:j,height:L}};T.getState().triggerNodeChanges([Y])}})),N.current.update({controlPosition: $ ,boundaries:{minWidth:s,minHeight:c,maxWidth:u,maxHeight:d},keepAspectRatio:p,resizeDirection:f,onResizeStart:x,onResize:w,onResizeEnd:k,shouldResize:b}),()=>{N.current?.destroy()}},[ $ ,s,c,u,d,p,x,w,k,b]);const M= $ .split("-");return y.jsx("div",{className:an(["react-flow__resize-control","nodrag",...M,n,o]),ref:R,style:{...a,scale:D,...l&&{[A?"backgroundColor":"borderColor"]:l}},children:i})}E.memo(vAe);const xAe=e=>e.domNode?.querySelector(".react-flow__renderer");function wAe({children:e}){const r=Rt(xAe);return r?Bi.createPortal(e,r):null}const kAe=(e,r)=>e?.internals.positionAbsolute.x!==r?.internals.positionAbsolute.x||e?.internals.positionAbsolute.y!==r?.internals.positionAbsolute.y||e?.measured.width!==r?.measured.width||e?.measured.height!==r?.measured.height||e?.selected!==r?.selected||e?.internals.z!==r?.internals.z,_Ae=(e,r)=>{if(e.size!==r.size)return!1;for(const[n,o]of e)if(kAe(o,r.get(n)))return!1;return!0},EAe=e=>({x:e.transform[0],y:e.transform[1],zoom:e.transform[2],selectedNodesCount:e.nodes.filter(r=>r.selected).length});function Bq({nodeId:e,children:r,className:n,style:o,isVisible:a,position:i=tt.Top,offset:l=10,align:s="center",...c}){const u=LE(),d=E.useCallback(T=>(Array.isArray(e)?e:[e||u||""]).reduce((R,A)=>{const D=T.nodeLookup.get(A);return D&&R.set(D.id,D),R},new Map),[e,u]),p=Rt(d,_Ae),{x:f,y:g,zoom:b,selectedNodesCount:x}=Rt(EAe,Ar);if(!(typeof a=="boolean"?a:p.size===1&&p.values().next().value?.selected&&x===1)||!p.size)return null;const w=tf(p),k=Array.from(p.values()),C=Math.max(...k.map(T=>T.internals.z+1)),_={position:"absolute",transform:xCe(w,{x:f,y:g,zoom:b},i,l,s),zIndex:C,...o};return y.jsx(wAe,{children:y.jsx("div",{style:_,className:an(["react-flow__node-toolbar",n]),...c,"data-id":k.reduce((T,R)=> ` $ { T } $ { R . id } ` ,"").trim(),children:r})})}var SAe=Object.getOwnPropertyNames,CAe=Object.getOwnPropertySymbols,TAe=Object.prototype.hasOwnProperty;function jq(e,r){return function(n,o,a){return e(n,o,a)&&r(n,o,a)}}function Ox(e){return function(r,n,o){if(!r||!n||typeof r!="object"||typeof n!="object")return e(r,n,o);var
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
. ` .concat(cDe, ` {
overflow : hidden ` ).concat(o, ` ;
padding - right : ` ).concat(s,"px ").concat(o, ` ;
}
body [ ` ).concat(ff, ` ] {
overflow : hidden ` ).concat(o, ` ;
overscroll - behavior : contain ;
` ).concat([r&&"position: relative ".concat(o,";"),n==="margin"&& `
padding - left : ` .concat(a, ` px ;
padding - top : ` ).concat(i, ` px ;
padding - right : ` ).concat(l, ` px ;
margin - left : 0 ;
margin - top : 0 ;
margin - right : ` ).concat(s,"px ").concat(o, ` ;
` ),n==="padding"&&"padding-right: ".concat(s,"px ").concat(o,";")].filter(Boolean).join(""), `
}
. ` ).concat(Fx, ` {
right : ` ).concat(s,"px ").concat(o, ` ;
}
. ` ).concat(Hx, ` {
margin - right : ` ).concat(s,"px ").concat(o, ` ;
}
. ` ).concat(Fx," .").concat(Fx, ` {
right : 0 ` ).concat(o, ` ;
}
. ` ).concat(Hx," .").concat(Hx, ` {
margin - right : 0 ` ).concat(o, ` ;
}
body [ ` ).concat(ff, ` ] {
` ).concat(uDe,": ").concat(s, ` px ;
}
2025-11-07 11:50:17 +01:00
` )},gU=function(){var e=parseInt(document.body.getAttribute(ff)||"0",10);return isFinite(e)?e:0},ADe=function(){E.useEffect(function(){return document.body.setAttribute(ff,(gU()+1).toString()),function(){var e=gU()-1;e<=0?document.body.removeAttribute(ff):document.body.setAttribute(ff,e.toString())}},[])},NDe=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;ADe();var i=E.useMemo(function(){return CDe(a)},[a]);return E.createElement(TDe,{styles:RDe(i,!r,a,n?"":"!important")})},KE=!1;if(typeof window<"u")try{var Ux=Object.defineProperty({},"passive",{get:function(){return KE=!0,!0}});window.addEventListener("test",Ux,Ux),window.removeEventListener("test",Ux,Ux)}catch{KE=!1}var mf=KE?{passive:!1}:!1,DDe=function(e){return e.tagName==="TEXTAREA"},yU=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!DDe(e)&&n[r]==="visible")},PDe=function(e){return yU(e,"overflowY")}, $ De=function(e){return yU(e,"overflowX")},bU=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=vU(e,o);if(a){var i=xU(e,o),l=i[1],s=i[2];if(l>s)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},MDe=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},ODe=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},vU=function(e,r){return e==="v"?PDe(r): $ De(r)},xU=function(e,r){return e==="v"?MDe(r):ODe(r)},IDe=function(e,r){return e==="h"&&r==="rtl"?-1:1},LDe=function(e,r,n,o,a){var i=IDe(e,window.getComputedStyle(r).direction),l=i*o,s=n.target,c=r.contains(s),u=!1,d=l>0,p=0,f=0;do{if(!s)break;var g=xU(e,s),b=g[0],x=g[1],w=g[2],k=x-w-i*b;(b||k)&&vU(e,s)&&(p+=k,f+=b);var C=s.parentNode;s=C&&C.nodeType===Node.DOCUMENT_FRAGMENT_NODE?C.host:C}while(!c&&s!==document.body||c&&(r.contains(s)||r===s));return(d&&Math.abs(p)<1||!d&&Math.abs(f)<1)&&(u=!0),u},Vx=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},wU=function(e){return[e.deltaX,e.deltaY]},kU=function(e){return e&&"current"in e?e.current:e},zDe=function(e,r){return e[0]===r[0]&&e[1]===r[1]},BDe=function(e){return `
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
. block - interactivity - ` .concat(e, ` { pointer - events : none ; }
. allow - interactivity - ` ).concat(e, ` { pointer - events : all ; }
2025-11-07 11:50:17 +01:00
` )},jDe=0,gf=[];function FDe(e){var r=E.useRef([]),n=E.useRef([0,0]),o=E.useRef(),a=E.useState(jDe++)[0],i=E.useState(mU)[0],l=E.useRef(e);E.useEffect(function(){l.current=e},[e]),E.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(a));var x=sDe([e.lockRef.current],(e.shards||[]).map(kU)).filter(Boolean);return x.forEach(function(w){return w.classList.add("allow-interactivity-".concat(a))}),function(){document.body.classList.remove("block-interactivity-".concat(a)),x.forEach(function(w){return w.classList.remove("allow-interactivity-".concat(a))})}}},[e.inert,e.lockRef.current,e.shards]);var s=E.useCallback(function(x,w){if("touches"in x&&x.touches.length===2||x.type==="wheel"&&x.ctrlKey)return!l.current.allowPinchZoom;var k=Vx(x),C=n.current,_="deltaX"in x?x.deltaX:C[0]-k[0],T="deltaY"in x?x.deltaY:C[1]-k[1],R,A=x.target,D=Math.abs(_)>Math.abs(T)?"h":"v";if("touches"in x&&D==="h"&&A.type==="range")return!1;var N=bU(D,A);if(!N)return!0;if(N?R=D:(R=D==="v"?"h":"v",N=bU(D,A)),!N)return!1;if(!o.current&&"changedTouches"in x&&(_||T)&&(o.current=R),!R)return!0;var $ =o.current||R;return LDe( $ ,w,x, $ ==="h"?_:T)},[]),c=E.useCallback(function(x){var w=x;if(!(!gf.length||gf[gf.length-1]!==i)){var k="deltaY"in w?wU(w):Vx(w),C=r.current.filter(function(R){return R.name===w.type&&(R.target===w.target||w.target===R.shadowParent)&&zDe(R.delta,k)})[0];if(C&&C.should){w.cancelable&&w.preventDefault();return}if(!C){var _=(l.current.shards||[]).map(kU).filter(Boolean).filter(function(R){return R.contains(w.target)}),T=_.length>0?s(w,_[0]):!l.current.noIsolation;T&&w.cancelable&&w.preventDefault()}}},[]),u=E.useCallback(function(x,w,k,C){var _={name:x,delta:w,target:k,should:C,shadowParent:HDe(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function(T){return T!==_})},1)},[]),d=E.useCallback(function(x){n.current=Vx(x),o.current=void 0},[]),p=E.useCallback(function(x){u(x.type,wU(x),x.target,s(x,e.lockRef.current))},[]),f=E.useCallback(function(x){u(x.type,Vx(x),x.target,s(x,e.lockRef.current))},[]);E.useEffect(function(){return gf.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,mf),document.addEventListener("touchmove",c,mf),document.addEventListener("touchstart",d,mf),function(){gf=gf.filter(function(x){return x!==i}),document.removeEventListener("wheel",c,mf),document.removeEventListener("touchmove",c,mf),document.removeEventListener("touchstart",d,mf)}},[]);var g=e.removeScrollBar,b=e.inert;return E.createElement(E.Fragment,null,b?E.createElement(i,{styles:BDe(a)}):null,g?E.createElement(NDe,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function HDe(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const qDe=yDe(fU,FDe);var S0=E.forwardRef(function(e,r){return E.createElement(qx,Jl({},e,{ref:r,sideCar:qDe}))});S0.classNames=qx.classNames;function Ao(e){return Object.keys(e)}function ZE(e){return e&&typeof e=="object"&&!Array.isArray(e)}function QE(e,r){const n={...e},o=r;return ZE(e)&&ZE(r)&&Object.keys(r).forEach(a=>{ZE(o[a])&&a in e?n[a]=QE(n[a],o[a]):n[a]=o[a]}),n}function UDe(e){return e.replace(/[A-Z]/g,r=> ` - $ { r . toLowerCase ( ) } ` )}function VDe(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc \( (.*?) \) $ /)?.[1].split("*")[0].trim()}function JE(e){const r=VDe(e);return typeof r=="number"?r:typeof r=="string"?r.includes("calc")||r.includes("var")?r:r.includes("px")?Number(r.replace("px","")):r.includes("rem")?Number(r.replace("rem",""))*16:r.includes("em")?Number(r.replace("em",""))*16:Number(r):NaN}function _U(e){return e==="0rem"?"0rem": ` calc ( $ { e } * var ( -- mantine - scale ) ) ` }function EU(e,{shouldScale:r=!1}={}){function n(o){if(o===0||o==="0")return ` 0 $ { e } ` ;if(typeof o=="number"){const a= ` $ { o / 16 } $ { e } ` ;return r?_U(a):a}if(typeof o=="string"){if(o===""||o.startsWith("calc(")||o.startsWith("clamp(")||o.includes("rgba("))return o;if(o.includes(","))return o.split(",").map(i=>n(i)).join(",");if(o.includes(" "))return o.split(" ")
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
$ { l }
2025-11-07 11:50:17 +01:00
$ { s } ` }function f9({color:e,theme:r,autoContrast:n}){return(typeof n=="boolean"?n:r.autoContrast)&&uu({color:e||r.primaryColor,theme:r}).isLight?"var(--mantine-color-black)":"var(--mantine-color-white)"}function tV(e,r){return f9({color:e.colors[e.primaryColor][N0(e,r)],theme:e,autoContrast:null})}function ew({theme:e,color:r,colorScheme:n,name:o=r,withColorValues:a=!0}){if(!e.colors[r])return{};if(n==="light"){const s=N0(e,"light"),c={[ ` -- mantine - color - $ { o } - text ` ]: ` var ( -- mantine - color - $ { o } - filled ) ` ,[ ` -- mantine - color - $ { o } - filled ` ]: ` var ( -- mantine - color - $ { o } - $ { s } ) ` ,[ ` -- mantine - color - $ { o } - filled - hover ` ]: ` var ( -- mantine - color - $ { o } - $ { s === 9 ? 8 : s + 1 } ) ` ,[ ` -- mantine - color - $ { o } - light ` ]:wf(e.colors[r][s],.1),[ ` -- mantine - color - $ { o } - light - hover ` ]:wf(e.colors[r][s],.12),[ ` -- mantine - color - $ { o } - light - color ` ]: ` var ( -- mantine - color - $ { o } - $ { s } ) ` ,[ ` -- mantine - color - $ { o } - outline ` ]: ` var ( -- mantine - color - $ { o } - $ { s } ) ` ,[ ` -- mantine - color - $ { o } - outline - hover ` ]:wf(e.colors[r][s],.05)};return a?{[ ` -- mantine - color - $ { o } - 0 ` ]:e.colors[r][0],[ ` -- mantine - color - $ { o } - 1 ` ]:e.colors[r][1],[ ` -- mantine - color - $ { o } - 2 ` ]:e.colors[r][2],[ ` -- mantine - color - $ { o } - 3 ` ]:e.colors[r][3],[ ` -- mantine - color - $ { o } - 4 ` ]:e.colors[r][4],[ ` -- mantine - color - $ { o } - 5 ` ]:e.colors[r][5],[ ` -- mantine - color - $ { o } - 6 ` ]:e.colors[r][6],[ ` -- mantine - color - $ { o } - 7 ` ]:e.colors[r][7],[ ` -- mantine - color - $ { o } - 8 ` ]:e.colors[r][8],[ ` -- mantine - color - $ { o } - 9 ` ]:e.colors[r][9],...c}:c}const i=N0(e,"dark"),l={[ ` -- mantine - color - $ { o } - text ` ]: ` var ( -- mantine - color - $ { o } - 4 ) ` ,[ ` -- mantine - color - $ { o } - filled ` ]: ` var ( -- mantine - color - $ { o } - $ { i } ) ` ,[ ` -- mantine - color - $ { o } - filled - hover ` ]: ` var ( -- mantine - color - $ { o } - $ { i === 9 ? 8 : i + 1 } ) ` ,[ ` -- mantine - color - $ { o } - light ` ]:wf(e.colors[r][Math.max(0,i-2)],.15),[ ` -- mantine - color - $ { o } - light - hover ` ]:wf(e.colors[r][Math.max(0,i-2)],.2),[ ` -- mantine - color - $ { o } - light - color ` ]: ` var ( -- mantine - color - $ { o } - $ { Math . max ( i - 5 , 0 ) } ) ` ,[ ` -- mantine - color - $ { o } - outline ` ]: ` var ( -- mantine - color - $ { o } - $ { Math . max ( i - 4 , 0 ) } ) ` ,[ ` -- mantine - color - $ { o } - outline - hover ` ]:wf(e.colors[r][Math.max(i-4,0)],.05)};return a?{[ ` -- mantine - color - $ { o } - 0 ` ]:e.colors[r][0],[ ` -- mantine - color - $ { o } - 1 ` ]:e.colors[r][1],[ ` -- mantine - color - $ { o } - 2 ` ]:e.colors[r][2],[ ` -- mantine - color - $ { o } - 3 ` ]:e.colors[r][3],[ ` -- mantine - color - $ { o } - 4 ` ]:e.colors[r][4],[ ` -- mantine - color - $ { o } - 5 ` ]:e.colors[r][5],[ ` -- mantine - color - $ { o } - 6 ` ]:e.colors[r][6],[ ` -- mantine - color - $ { o } - 7 ` ]:e.colors[r][7],[ ` -- mantine - color - $ { o } - 8 ` ]:e.colors[r][8],[ ` -- mantine - color - $ { o } - 9 ` ]:e.colors[r][9],...l}:l}function o $ e(e){return!!e&&typeof e=="object"&&"mantine-virtual-color"in e}function kf(e,r,n){Ao(r).forEach(o=>Object.assign(e,{[ ` -- mantine - $ { n } - $ { o } ` ]:r[o]}))}const rV=e=>{const r=N0(e,"light"),n=e.defaultRadius in e.radius?e.radius[e.defaultRadius]:Ae(e.defaultRadius),o={variables:{"--mantine-z-index-app":"100","--mantine-z-index-modal":"200","--mantine-z-index-popover":"300","--mantine-z-index-overlay":"400","--mantine-z-index-max":"9999","--mantine-scale":e.scale.toString(),"--mantine-cursor-type":e.cursorType,"--mantine-webkit-font-smoothing":e.fontSmoothing?"antialiased":"unset","--mantine-moz-font-smoothing":e.fontSmoothing?"grayscale":"unset","--mantine-color-white":e.white,"--mantine-color-black":e.black,"--mantine-line-height":e.lineHeights.md,"--mantine-font-family":e.fontFamily,"--mantine-font-family-monospace":e.fontFamilyMonospace,"--mantine-font-family-headings":e.headings.fontFamily,"--mantine-heading-font-weight":e.headings.fontWeight,"--mantine-heading-text-wrap":e.headings.textWrap,"--mantine-radius-default":n,"--mantine-primary-color-filled": ` var ( -- mantine - color - $ { e . primaryColor } - filled ) ` ,"--mantine-primary-color-filled-hover": ` var ( -- mantine - color - $ { e . primaryColor } - filled - hover ) ` ,"--mantine-primary-color-light": ` var ( -- mantine - color - $ { e . primaryColor } - light ) ` ,"--mantine-primary-color-light-hover": ` var ( -- mantine - color - $ { e . primaryColor } - light - hover ) ` ,"--mantine-primary-color-light-color": ` var ( -- mantine - color - $ { e . primaryColor } - light - color ) ` },light:{"--mantine-color-scheme":"light","--mantine-primary-color-contrast":tV(e,"light"),"--mantine-color-bright":"var(--mantine-color-black)","--mantine-color-text
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
$ { e } [ data - mantine - color - scheme = "dark" ] { -- mantine - color - scheme : dark ; }
$ { e } [ data - mantine - color - scheme = "light" ] { -- mantine - color - scheme : light ; }
2025-11-07 11:50:17 +01:00
` }function nV({cssVariablesSelector:e,deduplicateCssVariables:r}){const n=po(),o=Yd(),a=zPe(),i=a $ e({theme:n,generator:a}),l=e===":root"&&r,s=l?i $ e(i):i,c=n $ e(s,e);return c?y.jsx("style",{"data-mantine-styles":!0,nonce:o?.(),dangerouslySetInnerHTML:{__html: ` $ { c } $ { l ? "" : l$e ( e ) } ` }}):null}nV.displayName="@mantine/CssVariables";function _f(e,r){const n=typeof window<"u"&&"matchMedia"in window&&window.matchMedia("(prefers-color-scheme: dark)")?.matches,o=e!=="auto"?e:n?"dark":"light";r()?.setAttribute("data-mantine-color-scheme",o)}function s $ e({manager:e,defaultColorScheme:r,getRootElement:n,forceColorScheme:o}){const a=E.useRef(null),[i,l]=E.useState(()=>e.get(r)),s=o||i,c=E.useCallback(d=>{o||(_f(d,n),l(d),e.set(d))},[e.set,s,o]),u=E.useCallback(()=>{l(r),_f(r,n),e.clear()},[e.clear,r]);return E.useEffect(()=>(e.subscribe(c),e.unsubscribe),[e.subscribe,e.unsubscribe]),A0(()=>{_f(e.get(r),n)},[]),E.useEffect(()=>{if(o)return _f(o,n),()=>{};o===void 0&&_f(i,n),typeof window<"u"&&"matchMedia"in window&&(a.current=window.matchMedia("(prefers-color-scheme: dark)"));const d=p=>{i==="auto"&&_f(p.matches?"dark":"light",n)};return a.current?.addEventListener("change",d),()=>a.current?.removeEventListener("change",d)},[i,o]),{colorScheme:s,setColorScheme:c,clearColorScheme:u}}function c $ e({respectReducedMotion:e,getRootElement:r}){A0(()=>{e&&r()?.setAttribute("data-respect-reduced-motion","true")},[e])}function g9({theme:e,children:r,getStyleNonce:n,withStaticClasses:o=!0,withGlobalClasses:a=!0,deduplicateCssVariables:i=!0,withCssVariables:l=!0,cssVariablesSelector:s=":root",classNamesPrefix:c="mantine",colorSchemeManager:u=QPe(),defaultColorScheme:d="light",getRootElement:p=()=>document.documentElement,cssVariablesResolver:f,forceColorScheme:g,stylesTransform:b,env:x}){const{colorScheme:w,setColorScheme:k,clearColorScheme:C}=s $ e({defaultColorScheme:d,forceColorScheme:g,manager:u,getRootElement:p});return c $ e({respectReducedMotion:e?.respectReducedMotion||!1,getRootElement:p}),y.jsx(Zx.Provider,{value:{colorScheme:w,setColorScheme:k,clearColorScheme:C,getRootElement:p,classNamesPrefix:c,getStyleNonce:n,cssVariablesResolver:f,cssVariablesSelector:s,withStaticClasses:o,stylesTransform:b,env:x},children:y.jsxs(eV,{theme:e,children:[l&&y.jsx(nV,{cssVariablesSelector:s,deduplicateCssVariables:i}),a&&y.jsx(r $ e,{}),r]})})}g9.displayName="@mantine/core/MantineProvider";function y9({classNames:e,styles:r,props:n,stylesCtx:o}){const a=po();return{resolvedClassNames:Xx({theme:a,classNames:e,props:n,stylesCtx:o||void 0}),resolvedStyles:Kx({theme:a,styles:r,props:n,stylesCtx:o||void 0})}}const u $ e={always:"mantine-focus-always",auto:"mantine-focus-auto",never:"mantine-focus-never"};function d $ e({theme:e,options:r,unstyled:n}){return Ji(r?.focusable&&!n&&(e.focusClassName||u $ e[e.focusRing]),r?.active&&!n&&e.activeClassName)}function p $ e({selector:e,stylesCtx:r,options:n,props:o,theme:a}){return Xx({theme:a,classNames:n?.classNames,props:n?.props||o,stylesCtx:r})[e]}function oV({selector:e,stylesCtx:r,theme:n,classNames:o,props:a}){return Xx({theme:n,classNames:o,props:a,stylesCtx:r})[e]}function h $ e({rootSelector:e,selector:r,className:n}){return e===r?n:void 0}function f $ e({selector:e,classes:r,unstyled:n}){return n?void 0:r[e]}function m $ e({themeName:e,classNamesPrefix:r,selector:n,withStaticClass:o}){return o===!1?[]:e.map(a=> ` $ { r } - $ { a } - $ { n } ` )}function g $ e({themeName:e,theme:r,selector:n,props:o,stylesCtx:a}){return e.map(i=>Xx({theme:r,classNames:r.components[i]?.classNames,props:o,stylesCtx:a})?.[n])}function y $ e({options:e,classes:r,selector:n,unstyled:o}){return e?.variant&&!o?r[ ` $ { n } -- $ { e . variant } ` ]:void 0}function b $ e({theme:e,options:r,themeName:n,selector:o,classNamesPrefix:a,classNames:i,classes:l,unstyled:s,className:c,rootSelector:u,props:d,stylesCtx:p,withStaticClasses:f,headless:g,transformedStyles:b}){return Ji(d $ e({theme:e,options:r,unstyled:s||g}),g $ e({theme:e,themeName:n,selector:o,props:d,stylesCtx:p}),y $ e({options:r,classes:l,selector:o,unstyled:s}),oV({selector:o,stylesCtx:p,theme:e,classNames:i,props:d}),oV({selector:o,sty
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
-- colors - likec4 - tag - bg : $ { r } ;
-- colors - likec4 - tag - bg - hover : color - mix ( in srgb , $ { r } , var ( -- colors - likec4 - mix - color ) 20 % ) ;
` ;if(!Nze.includes(r))return"";let n="12";return["mint","grass","lime","yellow","amber"].includes(r)&&(n="dark-2"), `
-- colors - likec4 - tag - border : var ( -- colors - $ { r } - 8 ) ;
-- colors - likec4 - tag - bg : var ( -- colors - $ { r } - 9 ) ;
-- colors - likec4 - tag - bg - hover : var ( -- colors - $ { r } - 10 ) ;
-- colors - likec4 - tag - text : var ( -- colors - $ { r } - $ { n } ) ;
2025-11-07 11:50:17 +01:00
` };function Pze(e,r){return!e||iu(e)?"":yn(jE(e),ENe(([n,o])=>[ ` : is ( $ { r } [ data - likec4 - tag = "${n}" ] ) { ` ,Dze(o),"}"]),oU( `
` ))}function $ ze({children:e,rootSelector:r}){const n=Aze().tags,o=Pze(n,r);return y.jsxs(KW.Provider,{value:n,children:[o!==""&&y.jsx(Mze,{stylesheet:o}),e]})}const Mze=E.memo(({stylesheet:e})=>{const r=Yd()?.();return y.jsx("style",{"data-likec4-tags":!0,type:"text/css",dangerouslySetInnerHTML:{__html:e},nonce:r})});function Oze(e){return E.useContext(KW)[e]??{color:"tomato"}}function ZW(){return Ta().replace("mantine-","likec4-")}var Ize="css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borde
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const Kze=[["path",{d:"M18 6l-12 12",key:"svg-0"}],["path",{d:"M6 6l12 12",key:"svg-1"}]],Hf=yt("outline","x","X",Kze);function j7({error:e,resetErrorBoundary:r}){const n=e instanceof Error?e.message:"Unknown error";return y.jsx(Ur,{css:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",padding:"0",backdropFilter:"blur(5px)",backgroundColor:{_dark:"[rgb(34 34 34 / 10%)]",_light:"[rgb(15 15 15/ 20%)]"},zIndex:1e3},children:y.jsxs(Uw,{icon:y.jsx(Hf,{style:{width:16,height:16}}),styles:{icon:{alignSelf:"flex-start"}},color:"red",title:"Oops, something went wrong",p:"xl",withCloseButton:!1,children:[y.jsx(ta,{maw:"100%",mah:400,children:y.jsx(Bw,{block:!0,children:n})}),y.jsx(qr,{gap:"xs",mt:"xl",children:y.jsx(Zn,{color:"gray",size:"xs",variant:"light",onClick:()=>r(),children:"Reset"})})]})})}function sG(e){return y.jsx(B7,{FallbackComponent:j7,onError:(r,n)=>{console.error(r,n)},...e})}function Zze(){if(typeof globalThis<"u")return globalThis;if(typeof self<"u")return self;if(typeof window<"u")return window;if(typeof global<"u")return global}function Qze(){const e=Zze();if(e.__xstate__)return e.__xstate__}const Jze=e=>{if(typeof window>"u")return;const r=Qze();r&&r.register(e)};class cG{constructor(r){this._process=r,this._active=!1,this._current=null,this._last=null}start(){this._active=!0,this.flush()}clear(){this._current&&(this._current.next=null,this._last=this._current)}enqueue(r){const n={value:r,next:null};if(this._current){this._last.next=n,this._last=n;return}this._current=n,this._last=n,this._active&&this.flush()}flush(){for(;this._current;){const r=this._current;this._process(r.value),this._current=r.next}this._last=null}}const uG=".",eBe="",dG="",tBe="#",rBe="*",pG="xstate.init",nBe="xstate.error",X0="xstate.stop";function oBe(e,r){return{type:`xstate.after.${e}.${r}`}}function F7(e,r){return{type:`xstate.done.state.${e}`,output:r}}function aBe(e,r){return{type:`xstate.done.actor.${e}`,output:r,actorId:e}}function hG(e,r){return{type:`xstate.error.actor.${e}`,error:r,actorId:e}}function fG(e){return{type:pG,input:e}}function as(e){setTimeout(()=>{throw e})}const iBe=typeof Symbol=="function"&&Symbol.observable||"@@observable";function mG(e,r){const n=gG(e),o=gG(r);return typeof o=="string"?typeof n=="string"?o===n:!1:typeof n=="string"?n in o:Object.keys(n).every(a=>a in o?mG(n[a],o[a]):!1)}function H7(e){if(vG(e))return e;const r=[];let n="";for(let o=0;o<e.length;o++){switch(e.charCodeAt(o)){case 92:n+=e[o+1],o++;continue;case 46:r.push(n),n="";continue}n+=e[o]}return r.push(n),r}function gG(e){if(jBe(e))return e.value;if(typeof e!="string")return e;const r=H7(e);return lBe(r)}function lBe(e){if(e.length===1)return e[0];const r={};let n=r;for(let o=0;o<e.length-1;o++)if(o===e.length-2)n[e[o]]=e[o+1];else{const a=n;n={},a[e[o]]=n}return r}function yG(e,r){const n={},o=Object.keys(e);for(let a=0;a<o.length;a++){const i=o[a];n[i]=r(e[i],i,e,a)}return n}function bG(e){return vG(e)?e:[e]}function Js(e){return e===void 0?[]:bG(e)}function q7(e,r,n,o){return typeof e=="function"?e({context:r,event:n,self:o}):e}function vG(e){return Array.isArray(e)}function sBe(e){return e.type.startsWith("xstate.error.actor")}function qf(e){return bG(e).map(r=>typeof r>"u"||typeof r=="string"?{target:r}:r)}function xG(e){if(!(e===void 0||e===eBe))return Js(e)}function Kw(e,r,n){const o=typeof e=="object",a=o?e:void 0;return{next:(o?e.next:e)?.bind(a),error:(o?e.error:r)?.bind(a),complete:(o?e.complete:n)?.bind(a)}}function wG(e,r){return`${r}.${e}`}function U7(e,r){const n=r.match(/ ^ xstate \ . invoke \ . ( \ d + ) \ . ( . * ) / ) ; if ( ! n ) return e . implementations . actors [ r ] ; const [ , o , a ] = n , i = e . getStateNodeById ( a ) . config . invoke ; return ( Array . isArray ( i ) ? i [ o ] : i ) . src } function kG ( e , r ) { return ` ${ e . sessionId } . ${ r } ` } let cBe = 0 ; function uBe ( e , r ) { const n = new Map , o = new Map , a = new WeakMap , i = new Set , l = { } , { clock : s , logger : c } = r , u = { schedule : ( f , g , b , x , w = Math . random ( ) . toString ( 36 ) . slice ( 2 ) ) => { const k = { source : f , target : g , event : b , delay : x , id : w , startedAt : Date . now ( ) } , C = kG ( f , w ) ; p . _snapshot . _scheduledEvents [ C ] = k ; const _ = s . setTimeout ( ( ) => { delete l [ C ] , delete p . _snapsho
$ { i . message } ` )}else throw new Error( ` Invalid target : "${n}" is not a valid target from the root node . Did you mean ".${n}" ? ` )})}function TG(e){const r=xG(e.config.target);return r?{target:r.map(n=>typeof n=="string"?e2(e.parent,n):n)}:e.parent.initial}function rp(e){return e.type==="history"}function RG(e){const r=AG(e);for(const n of r)for(const o of K0(n,e))r.add(o);return r}function AG(e){const r=new Set;function n(o){if(!r.has(o)){if(r.add(o),o.type==="compound")n(o.initial.target[0]);else if(o.type==="parallel")for(const a of Wf(o))n(a)}}return n(e),r}function Gf(e,r){if(Jw(r))return e.machine.getStateNodeById(r);if(!e.states)throw new Error( ` Unable to retrieve child state '${r}' from '${e.id}' ; no child states exist . ` );const n=e.states[r];if(!n)throw new Error( ` Child state '${r}' does not exist on '${e.id}' ` );return n}function e2(e,r){if(typeof r=="string"&&Jw(r))try{return e.machine.getStateNodeById(r)}catch{}const n=H7(r).slice();let o=e;for(;n.length;){const a=n.shift();if(!a.length)break;o=Gf(o,a)}return o}function t2(e,r){if(typeof r=="string"){const a=e.states[r];if(!a)throw new Error( ` State '${r}' does not exist on '${e.id}' ` );return[e,a]}const n=Object.keys(r),o=n.map(a=>Gf(e,a)).filter(Boolean);return[e.machine.root,e].concat(o,n.reduce((a,i)=>{const l=Gf(e,i);if(!l)return a;const s=t2(l,r[i]);return a.concat(s)},[]))}function CBe(e,r,n,o){const a=Gf(e,r).next(n,o);return!a||!a.length?e.next(n,o):a}function TBe(e,r,n,o){const a=Object.keys(r),i=Gf(e,a[0]),l=X7(i,r[a[0]],n,o);return!l||!l.length?e.next(n,o):l}function RBe(e,r,n,o){const a=[];for(const i of Object.keys(r)){const l=r[i];if(!l)continue;const s=Gf(e,i),c=X7(s,l,n,o);c&&a.push(...c)}return a.length?a:e.next(n,o)}function X7(e,r,n,o){return typeof r=="string"?CBe(e,r,n,o):Object.keys(r).length===1?TBe(e,r,n,o):RBe(e,r,n,o)}function ABe(e){return Object.keys(e.states).map(r=>e.states[r]).filter(r=>r.type==="history")}function bu(e,r){let n=e;for(;n.parent&&n.parent!==r;)n=n.parent;return n.parent===r}function NBe(e,r){const n=new Set(e),o=new Set(r);for(const a of n)if(o.has(a))return!0;for(const a of o)if(n.has(a))return!0;return!1}function NG(e,r,n){const o=new Set;for(const a of e){let i=!1;const l=new Set;for(const s of o)if(NBe(Z7([a],r,n),Z7([s],r,n)))if(bu(a.source,s.source))l.add(s);else{i=!0;break}if(!i){for(const s of l)o.delete(s);o.add(a)}}return Array.from(o)}function DBe(e){const[r,...n]=e;for(const o of K0(r,void 0))if(n.every(a=>bu(a,o)))return o}function K7(e,r){if(!e.target)return[];const n=new Set;for(const o of e.target)if(rp(o))if(r[o.id])for(const a of r[o.id])n.add(a);else for(const a of K7(TG(o),r))n.add(a);else n.add(o);return[...n]}function DG(e,r){const n=K7(e,r);if(!n)return;if(!e.reenter&&n.every(a=>a===e.source||bu(a,e.source)))return e.source;const o=DBe(n.concat(e.source));if(o)return o;if(!e.reenter)return e.source.machine.root}function Z7(e,r,n){const o=new Set;for(const a of e)if(a.target?.length){const i=DG(a,n);a.reenter&&a.source===i&&o.add(i);for(const l of r)bu(l,i)&&o.add(l)}return[...o]}function PBe(e,r){if(e.length!==r.size)return!1;for(const n of e)if(!r.has(n))return!1;return!0}function Q7(e,r,n,o,a,i){if(!e.length)return r;const l=new Set(r._nodes);let s=r.historyValue;const c=NG(e,l,s);let u=r;a||([u,s]=IBe(u,o,n,c,l,s,i,n.actionExecutor)),u=Kf(u,o,n,c.flatMap(p=>p.actions),i,void 0),u=MBe(u,o,n,c,l,i,s,a);const d=[...l];u.status==="done"&&(u=Kf(u,o,n,d.sort((p,f)=>f.order-p.order).flatMap(p=>p.exit),i,void 0));try{return s===r.historyValue&&PBe(r._nodes,l)?u:np(u,{_nodes:d,historyValue:s})}catch(p){throw p}}function $ Be(e,r,n,o,a){if(o.output===void 0)return;const i=F7(a.id,a.output!==void 0&&a.parent?q7(a.output,e.context,r,n.self):void 0);return q7(o.output,e.context,i,n.self)}function MBe(e,r,n,o,a,i,l,s){let c=e;const u=new Set,d=new Set;OBe(o,l,d,u),s&&d.add(e.machine.root);const p=new Set;for(const f of[...u].sort((g,b)=>g.order-b.order)){a.add(f);const g=[];g.push(...f.entry);for(const b of f.invoke)g.push(Vf(b.src,{...b,syncSnapshot:!!b.onSnapshot}));if(d.has(f)){const b=f.initial.actions;g.
$ { p . message } ` )}if(d){a.push(...s.actions),i=s;break}}return i?[i]:void 0}get events(){return Zf(this,"events",()=>{const{states:r}=this,n=new Set(this.ownEvents);if(r)for(const o of Object.keys(r)){const a=r[o];if(a.states)for(const i of a.events)n.add( ` $ { i } ` )}return Array.from(n)})}get ownEvents(){const r=new Set([...this.transitions.keys()].filter(n=>this.transitions.get(n).some(o=>!(!o.target&&!o.actions.length&&!o.reenter))));return Array.from(r)}}const eje="#";class tS{constructor(r,n){this.config=r,this.version=void 0,this.schemas=void 0,this.implementations=void 0,this.__xstatenode=!0,this.idMap=new Map,this.root=void 0,this.id=void 0,this.states=void 0,this.events=void 0,this.id=r.id||"(machine)",this.implementations={actors:n?.actors??{},actions:n?.actions??{},delays:n?.delays??{},guards:n?.guards??{}},this.version=this.config.version,this.schemas=this.config.schemas,this.transition=this.transition.bind(this),this.getInitialSnapshot=this.getInitialSnapshot.bind(this),this.getPersistedSnapshot=this.getPersistedSnapshot.bind(this),this.restoreSnapshot=this.restoreSnapshot.bind(this),this.start=this.start.bind(this),this.root=new o2(r,{_key:this.id,_machine:this}),this.root._initialize(),this.states=this.root.states,this.events=this.root.events}provide(r){const{actions:n,guards:o,actors:a,delays:i}=this.implementations;return new tS(this.config,{actions:{...n,...r.actions},guards:{...o,...r.guards},actors:{...a,...r.actors},delays:{...i,...r.delays}})}resolveState(r){const n=BBe(this.root,r.value),o=Qw(t2(this.root,n));return r2({_nodes:[...o],context:r.context||{},children:{},status:G7(o,this.root)?"done":r.status||"active",output:r.output,error:r.error,historyValue:r.historyValue},this)}transition(r,n,o){return eS(r,n,o,[]).snapshot}microstep(r,n,o){return eS(r,n,o,[]).microstates}getTransitionData(r,n){return X7(this.root,r.value,r,n)||[]}getPreInitialState(r,n,o){const{context:a}=this.config,i=r2({context:typeof a!="function"&&a?a:{},_nodes:[this.root],children:{},status:"active"},this);return typeof a=="function"?Kf(i,n,r,[et(({spawn:l,event:s,self:c})=>a({spawn:l,input:s.input,self:c}))],o,void 0):i}getInitialSnapshot(r,n){const o=fG(n),a=[],i=this.getPreInitialState(r,o,a),l=Q7([{target:[...AG(this.root)],source:this.root,reenter:!0,actions:[],eventType:null,toJSON:null}],i,r,o,!0,a),{snapshot:s}=eS(l,o,r,a);return s}start(r){Object.values(r.children).forEach(n=>{n.getSnapshot().status==="active"&&n.start()})}getStateNodeById(r){const n=H7(r),o=n.slice(1),a=Jw(n[0])?n[0].slice(eje.length):n[0],i=this.idMap.get(a);if(!i)throw new Error( ` Child state node '#${a}' does not exist on machine '${this.id}' ` );return e2(i,o)}get definition(){return this.root.definition}toJSON(){return this.definition}getPersistedSnapshot(r,n){return WBe(r,n)}restoreSnapshot(r,n){const o={},a=r.children;Object.keys(a).forEach(p=>{const f=a[p],g=f.snapshot,b=f.src,x=typeof b=="string"?U7(this,b):b;if(!x)return;const w=Uf(x,{id:p,parent:n.self,syncSnapshot:f.syncSnapshot,snapshot:g,src:b,systemId:f.systemId});o[p]=w});function i(p,f){if(f instanceof o2)return f;try{return p.machine.getStateNodeById(f.id)}catch{}}function l(p,f){if(!f||typeof f!="object")return{};const g={};for(const b in f){const x=f[b];for(const w of x){const k=i(p,w);k&&(g[b]??=[],g[b].push(k))}}return g}const s=l(this.root,r.historyValue),c=r2({...r,children:o,_nodes:Array.from(Qw(t2(this.root,r.value))),historyValue:s},this),u=new Set;function d(p,f){if(!u.has(p)){u.add(p);for(const g in p){const b=p[g];if(b&&typeof b=="object"){if("xstate $ $ type"in b&&b.xstate $ $ type===Y7){p[g]=f[b.id];continue}d(b,f)}}}}return d(c.context,o),c}}function tje(e,r,n,o,{event:a}){const i=typeof a=="function"?a(n,o):a;return[r,{event:i},void 0]}function rje(e,{event:r}){e.defer(()=>e.emit(r))}function ui(e){function r(n,o){}return r.type="xstate.emit",r.event=e,r.resolve=tje,r.execute=rje,r}let rS=(function(e){return e.Parent="#_parent",e.Internal="#_internal",e})({});function nje(e,r,n,o,{to:a,event:i,id:l,delay:s},c){const u=r.machine.implementations.delays;if(typeof i=="string")throw
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
[ data - motion - pop - id = "${a}" ] {
position : absolute ! important ;
width : $ { u } px ! important ;
height : $ { d } px ! important ;
$ { b } px ! important ;
top : $ { p } px ! important ;
}
2025-11-07 11:50:17 +01:00
` ),()=>{w.contains(x)&&w.removeChild(x)}},[r]),y.jsx(dqe,{isPresent:r,childRef:i,sizeRef:l,children:E.cloneElement(e,{ref:c})})}const hqe=({children:e,initial:r,isPresent:n,onExitComplete:o,custom:a,presenceAffectsLayout:i,mode:l,anchorX:s,root:c})=>{const u=um(fqe),d=E.useId();let p=!0,f=E.useMemo(()=>(p=!1,{id:d,initial:r,isPresent:n,custom:a,onExitComplete:g=>{u.set(g,!0);for(const b of u.values())if(!b)return;o&&o()},register:g=>(u.set(g,!1),()=>u.delete(g))}),[n,u,o]);return i&&p&&(f={...f}),E.useMemo(()=>{u.forEach((g,b)=>u.set(b,!1))},[n]),E.useEffect(()=>{!n&&!u.size&&o&&o()},[n]),l==="popLayout"&&(e=y.jsx(pqe,{isPresent:n,anchorX:s,root:c,children:e})),y.jsx(g2.Provider,{value:f,children:e})};function fqe(){return new Map}function HK(e=!0){const r=E.useContext(g2);if(r===null)return[!0,null];const{isPresent:n,onExitComplete:o,register:a}=r,i=E.useId();E.useEffect(()=>{if(e)return a(i)},[e]);const l=E.useCallback(()=>e&&o&&o(i),[i,o,e]);return!n&&o?[!1,l]:[!0]}const y2=e=>e.key||"";function qK(e){const r=[];return E.Children.forEach(e,n=>{E.isValidElement(n)&&r.push(n)}),r}const Pa=({children:e,custom:r,initial:n=!0,onExitComplete:o,presenceAffectsLayout:a=!0,mode:i="sync",propagate:l=!1,anchorX:s="left",root:c})=>{const[u,d]=HK(l),p=E.useMemo(()=>qK(e),[e]),f=l&&!u?[]:p.map(y2),g=E.useRef(!0),b=E.useRef(p),x=um(()=>new Map),[w,k]=E.useState(p),[C,_]=E.useState(p);cC(()=>{g.current=!1,b.current=p;for(let A=0;A<C.length;A++){const D=y2(C[A]);f.includes(D)?x.delete(D):x.get(D)!==!0&&x.set(D,!1)}},[C,f.length,f.join("-")]);const T=[];if(p!==w){let A=[...p];for(let D=0;D<C.length;D++){const N=C[D], $ =y2(N);f.includes( $ )||(A.splice(D,0,N),T.push(N))}return i==="wait"&&T.length&&(A=T),_(qK(A)),k(p),null}const{forceRender:R}=E.useContext(uy);return y.jsx(y.Fragment,{children:C.map(A=>{const D=y2(A),N=l&&!u?!1:p===C||f.includes(D), $ =()=>{if(x.has(D))x.set(D,!0);else return;let M=!0;x.forEach(j=>{j||(M=!1)}),M&&(R?.(),_(b.current),l&&d?.(),o&&o())};return y.jsx(hqe,{isPresent:N,initial:!g.current||n?void 0:!1,custom:r,presenceAffectsLayout:a,mode:i,root:c,onExitComplete:N?void 0: $ ,anchorX:s,children:A},D)})})},mqe=E.createContext(null);function gqe(){const e=E.useRef(!1);return cC(()=>(e.current=!0,()=>{e.current=!1}),[]),e}function yqe(){const e=gqe(),[r,n]=E.useState(0),o=E.useCallback(()=>{e.current&&n(r+1)},[r]);return[E.useCallback(()=> $ r.postRender(o),[o]),r]}const bqe=e=>!e.isLayoutDirty&&e.willUpdate(!1);function vqe(){const e=new Set,r=new WeakMap,n=()=>e.forEach(bqe);return{add:o=>{e.add(o),r.set(o,o.addEventListener("willUpdate",n))},remove:o=>{e.delete(o);const a=r.get(o);a&&(a(),r.delete(o)),n()},dirty:n}}const UK=e=>e===!0,xqe=e=>UK(e===!0)||e==="id",dm=({children:e,id:r,inherit:n=!0})=>{const o=E.useContext(uy),a=E.useContext(mqe),[i,l]=yqe(),s=E.useRef(null),c=o.id||a;s.current===null&&(xqe(n)&&c&&(r=r?c+"-"+r:c),s.current={id:r,group:UK(n)&&o.group||vqe()});const u=E.useMemo(()=>({...s.current,forceRender:i}),[l]);return y.jsx(uy.Provider,{value:u,children:e})},uC=E.createContext({strict:!1});function dC(e){for(const r in e)sm[r]={...sm[r],...e[r]}}function wqe({children:e,features:r,strict:n=!1}){const[,o]=E.useState(!pC(r)),a=E.useRef(void 0);if(!pC(r)){const{renderer:i,...l}=r;a.current=i,dC(l)}return E.useEffect(()=>{pC(r)&&r().then(({renderer:i,...l})=>{dC(l),a.current=i,o(!0)})},[]),y.jsx(uC.Provider,{value:{renderer:a.current,strict:n},children:e})}function pC(e){return typeof e=="function"}const kqe=new Set(["animate","exit","variants","initial","style","values","variants","transition","transformTemplate","custom","inherit","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","_dragX","_dragY","onHoverStart","onHoverEnd","onViewportEnter","onViewportLeave","globalTapTarget","ignoreStrict","viewport"]);function b2(e){return e.startsWith("while")||e.startsWith("drag")&&e!=="draggable"||e.startsWith("layout")||e.startsWith("onTap")||e.startsWith("onPan")||e.startsWith("
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const oYe=[["path",{d:"M5 12l5 5l10 -10",key:"svg-0"}]],TQ=yt("outline","check","Check",oYe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const aYe=[["path",{d:"M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z",key:"svg-0"}],["path",{d:"M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1",key:"svg-1"}]],iYe=yt("outline","copy","Copy",aYe),RQ="https:/ / github . com / ",BC=E.forwardRef(({value:e,className:r,...n},o)=>{const a=e.url.includes(" : //")?e.url:new window.URL(e.url,window.location.href).toString();let i=a.startsWith(RQ);return y.jsx(Xs,{ref:o,variant:"default",radius:"sm",size:"sm",tt:"none",leftSection:e.title?y.jsx(y.Fragment,{children:e.title}):null,rightSection:y.jsx(cW,{value:a,timeout:1500,children:({copy:l,copied:s})=>y.jsx(or,{className:ye({opacity:s?1:.45,transition:"fast",_hover:{opacity:1}}),tabIndex:-1,size:"20",variant:s?"light":"transparent",color:s?"teal":"gray","data-active":s,onClick:c=>{c.stopPropagation(),c.preventDefault(),l()},children:s?y.jsx(TQ,{}):y.jsx(iYe,{stroke:2.5})})}),...n,className:Je(r,"group"),classNames:{root:ye({flexWrap:"nowrap",minHeight:24,maxWidth:500,userSelect:"all",pr:"0",backgroundColor:{base:"transparent",_hover:{base:"mantine.colors.gray[1]",_dark:"mantine.colors.dark[5]"}}}),section:ye({'&:is([data-position="left"])':{color:"mantine.colors.dimmed",userSelect:"none",pointerEvents:"none",_groupHover:{color:"[var(--badge-color)]",opacity:.7}}})},children:y.jsxs(Qs.a,{href:a,target:"_blank",style:{color:"var(--badge-color)",cursor:"pointer"},css:{transition:"fast",opacity:{base:.7,_hover:1},textDecoration:{base:"none",_hover:"underline"}},children:[i&&y.jsx(nYe,{height:"12",width:"12",style:{verticalAlign:"middle",marginRight:"4px"}}),i?a.replace(RQ,""):a]})})});function AQ(){const e=E.useContext(M7);if(!e)throw new Error("No LikeC4ViewModel in context found");return e}const T2="--_blur",R2="--_opacity",lYe=ye({boxSizing:"border-box",margin:"0",padding:"0",position:"fixed",inset:"0",width:"100vw",height:"100vh",maxWidth:"100vw",maxHeight:"100vh",background:"transparent",border:"transparent",_backdrop:{backdropFilter:"auto",backdropBlur:`var(${T2})`,backgroundColor:`[rgb(36 36 36 / var(${R2}, 5%))]`}}),sYe=ye({position:"absolute",pointerEvents:"all",display:"flex",flexDirection:"column",padding:"4",gap:"lg",justifyContent:"stretch",color:"mantine.colors.text",backgroundColor:{base:"mantine.colors.body",_dark:"mantine.colors.dark[6]"},boxShadow:"md",overflow:"hidden",border:"none",backgroundImage:`
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
linear - gradient ( 180 deg ,
color - mix ( in srgb , var ( -- likec4 - palette - fill ) 60 % , transparent ) ,
color - mix ( in srgb , var ( -- likec4 - palette - fill ) 20 % , transparent ) 8 px ,
color - mix ( in srgb , var ( -- likec4 - palette - fill ) 14 % , transparent ) 20 px ,
transparent 80 px
) ,
linear - gradient ( 180 deg , var ( -- likec4 - palette - fill ) , var ( -- likec4 - palette - fill ) 4 px , transparent 4 px )
2025-11-07 11:50:17 +01:00
` ,"& .react-flow__attribution":{display:"none"}}),cYe=ye({flex:0,cursor:"move"}),uYe=ye({display:"block",fontFamily:"likec4.element",fontOpticalSizing:"auto",fontStyle:"normal",fontWeight:600,fontSize:"24px",lineHeight:"xs"}),jC="40px",dYe=ye({flex: ` 0 0 $ { jC } ` ,height:jC,width:jC,display:"flex",alignItems:"center",justifyContent:"center",alignSelf:"flex-start",cursor:"move",_dark:{mixBlendMode:"hard-light"},"& :where(svg, img)":{width:"100%",height:"auto",maxHeight:"100%",pointerEvents:"none",filter: `
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
drop - shadow ( 0 0 3 px rgb ( 0 0 0 / 10 % ) )
drop - shadow ( 0 1 px 8 px rgb ( 0 0 0 / 5 % ) )
drop - shadow ( 1 px 1 px 16 px rgb ( 0 0 0 / 2 % ) )
` },"& img":{objectFit:"contain"}}),A2="--view-title-color",N2="--icon-color",pYe=ye({width:"100%",background:"mantine.colors.body",borderRadius:"sm",padding:"[10px 8px]",transition:"fast",border:"1px dashed",borderColor:"mantine.colors.defaultBorder",[A2]:"{colors.mantine.colors.dark[1]}",_hover:{background:"mantine.colors.defaultHover",[N2]:"{colors.mantine.colors.dark[1]}",[A2]:"{colors.mantine.colors.defaultColor}"},_dark:{background:"mantine.colors.dark[6]"},_light:{[N2]:"{colors.mantine.colors.gray[6]}",[A2]:"{colors.mantine.colors.gray[7]}",_hover:{[N2]:"{colors.mantine.colors.gray[7]}"}},"& .mantine-ThemeIcon-root":{transition:"fast",color: ` [ var ( $ { N2 } , { colors . mantine . colors . dark [ 2 ] } ) ] ` ,"--ti-size":"22px",_hover:{color:"mantine.colors.defaultColor"}},"& > *":{transition:"all 130ms {easings.inOut}"},"&:hover > *":{transitionTimingFunction:"out",transform:"translateX(1.6px)"}}),hYe=ye({transition:"fast",color: ` [ var ( $ { A2 } , { colors . mantine . colors . gray [ 7 ] } ) ] ` ,fontSize:"15px",fontWeight:500,lineHeight:"1.4"}),fYe=ye({flex:1,display:"flex",flexDirection:"column",justifyContent:"stretch",overflow:"hidden",gap:"sm"}),mYe=ye({background:"mantine.colors.gray[1]",borderRadius:"sm",flexWrap:"nowrap",gap:"1.5",padding:"1",_dark:{background:"mantine.colors.dark[7]"}}),gYe=ye({fontSize:"xs",fontWeight:500,flexGrow:1,padding:"[6px 8px]",transition:"fast",borderRadius:"sm",color:"mantine.colors.gray[7]",_hover:{transitionTimingFunction:"out",color:"mantine.colors.defaultColor",background:"mantine.colors.gray[3]"},"&[data-active]":{transition:"none",background:"mantine.colors.white",shadow:"xs",color:"mantine.colors.defaultColor"},_dark:{color:"mantine.colors.dark[1]",_hover:{color:"mantine.colors.white",background:"mantine.colors.dark[6]"},"&:is([data-active])":{color:"mantine.colors.white",background:"mantine.colors.dark[5]"}}}),yYe=ye({flex:1,overflow:"hidden",position:"relative","&:not(:has(.mantine-ScrollArea-root))":{paddingLeft:"1",paddingRight:"1"},"& .mantine-ScrollArea-root":{width:"100%",height:"100%","& > div":{paddingLeft:"1",paddingRight:"1"}}}),bYe=ye({flex:1,display:"grid",gridTemplateColumns:"min-content 1fr",gridAutoRows:"min-content max-content",gap:"[24px 20px]",alignItems:"baseline",justifyItems:"stretch"}),vYe=ye({justifySelf:"end",textAlign:"right",userSelect:"none"}),xYe=ye({position:"absolute",width:"14px",height:"14px",border:"3.5px solid",borderColor:"mantine.colors.dark[3]",borderTop:"none",borderLeft:"none",borderRadius:"2px",bottom:"0.5",right:"0.5",transition:"fast",cursor:"se-resize",_hover:{borderWidth:"4px",borderColor:"mantine.colors.dark[1]"}}),wYe=ye({"&[data-level='1']":{marginBottom:"sm"}}),kYe=ye({cursor:"default",marginTop:"0",marginBottom:"0"}),NQ=ye({transition:"fast",color:"mantine.colors.gray[7]",_dark:{color:"mantine.colors.dark[1]"},"& > *":{transition:"fast"},_hover:{transitionTimingFunction:"out","& > :not([data-no-transform])":{transitionTimingFunction:"out",transform:"translateX(1px)"}}}),_Ye=Je(NQ),EYe=Je(NQ,ye({cursor:"pointer",width:"100%",justifyContent:"stretch",flexWrap:"nowrap",height:"36px",paddingInlineStart:"[16px]",paddingInlineEnd:"2.5",borderRadius:"sm",alignItems:"center",color:"mantine.colors.gray[7]",_dark:{color:"mantine.colors.gray.lightColor"},_hover:{background:"mantine.colors.gray.lightHover"},"& .tabler-icon":{transition:"fast",width:"90%",opacity:.65}}));/**
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const SYe=[["path",{d:"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",key:"svg-0"}],["path",{d:"M12 9h.01",key:"svg-1"}],["path",{d:"M11 12h1v4h1",key:"svg-2"}]],FC=yt("outline","info-circle","InfoCircle",SYe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const CYe=[["path",{d:"M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",key:"svg-0"}],["path",{d:"M12 12m-5 0a5 5 0 1 0 10 0a5 5 0 1 0 -10 0",key:"svg-1"}],["path",{d:"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",key:"svg-2"}]],TYe=yt("outline","target","Target",CYe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / c o n s t R Y e = [ [ " p a t h " , { d : " M 4 8 v - 2 a 2 2 0 0 1 2 - 2 h 2 " , k e y : " s v g - 0 " } ] , [ " p a t h " , { d : " M 4 1 6 v 2 a 2 2 0 0 0 2 2 h 2 " , k e y : " s v g - 1 " } ] , [ " p a t h " , { d : " M 1 6 4 h 2 a 2 2 0 0 1 2 2 v 2 " , k e y : " s v g - 2 " } ] , [ " p a t h " , { d : " M 1 6 2 0 h 2 a 2 2 0 0 0 2 - 2 v - 2 " , k e y : " s v g - 3 " } ] , [ " p a t h " , { d : " M 8 1 1 a 3 3 0 1 0 6 0 a 3 3 0 0 0 - 6 0 " , k e y : " s v g - 4 " } ] , [ " p a t h " , { d : " M 1 6 1 6 l - 2 . 5 - 2 . 5 " , k e y : " s v g - 5 " } ] ] , g i = y t ( " o u t l i n e " , " z o o m - s c a n " , " Z o o m S c a n " , R Y e ) , A Y e = ( { n o d e : e } ) = > y . j s x s ( q r , { c l a s s N a m e : _ Y e , g a p : 6 , a l i g n : " b a s e l i n e " , w r a p : " n o w r a p " , c h i l d r e n : [ y . j s x s ( w t , { c o m p o n e n t : " d i v " , f z : 1 1 , c : " d i m m e d " , c h i l d r e n : [ e . k i n d , " : " ] } ) , y . j s x ( w t , { c o m p o n e n t : " d i v " , f z : " s m " , f w : " 5 0 0 " , c h i l d r e n : e . t i t l e } ) ] } ) , N Y e = ( { i n s t a n c e : e } ) = > { c o n s t r = W t ( ) , n = r . c u r r e n t V i e w . i d , o = [ . . . e . v i e w s ( ) ] ; r e t u r n y . j s x s ( q r , { c l a s s N a m e : E Y e , g a p : 4 , c h i l d r e n : [ y . j s x ( c i , { c o l o r : " g r a y " , v a r i a n t : " t r a n s p a r e n t " , s i z e : " x s " , f l e x : 0 , c h i l d r e n : y . j s x ( T Y e , { s t r o k e : 1 . 2 } ) } ) , y . j s x ( w t , { c o m p o n e n t : " d i v " , f z : " s m " , f w : " 5 0 0 " , f l e x : " 1 1 1 0 0 % " , c h i l d r e n : e . t i t l e } ) , y . j s x s ( S e , { o n C l i c k : c n , p o s : " r e l a t i v e " , " d a t a - n o - t r a n s f o r m " : ! 0 , f l e x : 0 , c h i l d r e n : [ o . l e n g t h = = = 0 & & y . j s x ( Z n , { s i z e : " c o m p a c t - x s " , v a r i a n t : " t r a n s p a r e n t " , c o l o r : " g r a y " , d i s a b l e d : ! 0 , c h i l d r e n : " n o v i e w s " } ) , o . l e n g t h > 0 & & y . j s x s ( h o , { s h a d o w : " m d " , w i t h i n P o r t a l : ! 1 , p o s i t i o n : " b o t t o m - s t a r t " , o f f s e t : 0 , c l o s e O n C l i c k O u t s i d e : ! 0 , c l i c k O u t s i d e E v e n t s : [ " p o i n t e r d o w n " , " m o u s e d o w n " , " c l i c k " ] , c l o s e O n E s c a p e : ! 0 , t r a p F o c u s : ! 0 , c h i l d r e n : [ y . j s x ( h o . T a r g e t , { c h i l d r e n : y . j s x s ( Z n , { s i z e : " c o m p a c t - x s " , v a r i a n t : " s u b t l e " , c o l o r : " g r a y " , c h i l d r e n : [ o . l e n g t h , " v i e w " , o . l e n g t h > 1 ? " s " : " " ] } ) } ) , y . j s x ( h o . D r o p d o w n , { c h i l d r e n : o . m a p ( a = > y . j s x ( h o . I t e m , { p x : " x s " , p y : 4 , d i s a b l e d : a . i d = = = n , l e f t S e c t i o n : y . j s x ( c i , { s i z e : " s m " , v a r i a n t : " t r a n s p a r e n t " , c o l o r : " g r a y " , c h i l d r e n : y . j s x ( g i , { s t r o k e : 1 . 8 , o p a c i t y : . 6 5 } ) } ) , s t y l e s : { i t e m S e c t i o n : { m a r g i n I n l i n e E n d : A e ( 8 ) } } , o n C l i c k : i = > { i . s t o p P r o p a g a t i o n ( ) , r . n a v i g a t e T o ( a . i d ) } , c h i l d r e n : a . t i t l e } , a . i d ) ) } ) ] } ) ] } ) ] } ) } , D Y e = ( ) = > { } , P Y e = E . m e m o ( ( { e l e m e n t F q n : e } ) = > { c o n s t r = H o ( ) . e l e m e n t ( e ) , n = [ . . . r . d e p l o y m e n t s ( ) ] , o = Y 0 ( { m u l t i p l e : ! 1 } ) ; o . s e t H o v e r e d N o d e = D Y e ; c o n s t a = E . u s e M e m o ( ( ) = > { l e t i = [ ] , l = n e w M a p ; f o r ( c o n s t s o f r . d e p l o y m e n t s ( ) ) { l e t c = { l a b e l : y . j s x ( N Y e , { i n s t a n c e : s } ) , v a l u e : s . i d , t y p e : " i n s t a n c e " , c h i l d r e n : [ ] } ; l . s e t ( s . i d , c ) ; l e t u = s . p a r e n t ; f o r ( ; u ; ) { l e t d = l . g e t ( u . i d ) ; i f ( d ) { d . c h i l d r e n . p u s h ( c ) ; b r e a k } d = { l a b e l : y . j s x ( A Y e , { n o d e : u } ) , v a l u e : u . i d , t y p e : " n o d e " , c h i l d r e n : [ c ] } , l . s e t ( u . i d , d ) , c = d , u = u . p a r e n t } ! u & & ! i . i n c l u d e s ( c ) & & i . p u s h ( c ) } r e t u r n i } , [ r ] ) ; r e t u r n E . u s e E f f e c t ( ( ) = > { o . e x p a n d A l l N o d e s ( ) } , [ a ] ) , n . l e n g t h = = = 0 ? y . j s x ( $ w , { v a r i a n t : " l i g h t " , c o l o r : " g r a y " , i c o n : y . j s x ( F C , { } ) , c h i l d r e n : " T h i s e l e m e n t d o e s n o t h a v e a n y d e p l o y m e n t s " } ) : y . j s x ( j f , { l e v e l O f f s e t : " s m " , a l l o w R a n g e S e l e c t i o n : ! 1 , c l a s s N a m e s : { n o d e : w Y e , l a b e l : k Y e } , s t y l e s : { r o o t : { p o s i t i o n : " r e l a t i v e " , w i d t h : " m i n - c o n t e n t " , m i n W i d t h : 3 0 0 } } , d a t a : a , t r e e : o , r e n d e r N o d e : ( { n o d e : i , s e l e c t e d : l , e l e m e n t P r o p s : s , h a s C h i l d r e n : c } ) = > y . j s x ( S e , { . . . s , s t y l e : { . . . ! c & & { m a r g i n B o t t o m : A e ( 4 ) } } , c h i l d r e n : c ? y . j s x ( Z n , { f u l l W i d t h : ! 0 , c o l o r : " g r a y " , v a r i a n t : l ? " t r a n s p a r e n t " : " s u b t l e " , s i z e : " x s " , j u s t i f y : " f l e x - s t a r t " , s t y l e s : { r o o t : { p o s i t i o n : " u n s e t " , p a d d i n g I n l i n e S t a r t : A e ( 1 6 ) } } , c h i l d r e n : i . l a b e l } ) : i . l a b e l } ) } ) } ) , $ Y e = ( ) = > { } , D Q = ( e , r ) = > { i f ( e = = = r ) r e t u r n ! 0 ; i f ( e . l e n g t h ! = = r . l e n g t h ) r e t u r n ! 1 ; f o r ( c o n s t [ n , o ] o f e . e n t r i e s ( ) ) i f ( o ! = = r [ n ] & & ! G n ( o , r [ n ] ) ) r e t u r n ! 1 ; r e t u r n ! 0 } ; f u n c t i o n D 2 ( e , r , n , o ) { c o n s t a = F j ( ) ; j j ( a ? $ Y e : e , r , D Q , o ) } f u n c t i o n M Y e ( ) { c o n s t e = t y p e o f w i n d o w < " u " & & t y p e o f w i n d o w . d e v i c e P i x e l R a t i o = = " n u m b e r " ? w i n d o w . d e v i c e P i x e l R a t i o : 1 ; r e t u r n K i ( M a t h . f l o o r ( e ) , { m i n : 1 , m a x : 4 } ) } l e t P 2 ; f u n c t i o n y i ( e ) { r e t u r n P 2 ? ? = M Y e ( ) , P 2 < 2 ? M a t h . r o u n d ( e ) : M a t h . r o u n d ( e * P 2 ) / P 2 } f u n c t i o n O Y e ( e ) { s w i t c h ( e ) { c a s e " d o t s " : r e t u r n X i . D o t s ; c a s e " l i n e s " : r e t u r n X i . L i n e s ; c a s e " c r o s s " : r e t u r n X i . C r o s s ; d e f a u l t : X a ( e ) } } f u n c t i o n I Y e ( { b a c k g r o u n d : e } ) { r e t u r n t y p e o f e = = " s t r i n g " ? y . j s x ( I q , { v a r i a n t : O Y e ( e ) , s i z e : 2 , g a p : 2 0 } ) : y . j s x ( I q , { . . . e } ) } c o n s t d l = { C o m p o u n d : 1 , E d g e : 2 0 , E l e m e n t : 2 0 , M a x : 3 0 } , p l = . 0 5 , H C = 3 , $ 2 = { d e f a u l t : " 1 6 p x " , w i t h C o n t r o l s : { t o p : " 5 0 p x " , l e f t : " 1 6 p x " , r i g h t : " 1 6 p x " , b o t t o m : " 1 6 p x " } } , P Q = ( e , r ) = > ( e . d a t a . d i m m e d ? ? ! 1 ) = = = r ? e : { . . . e , d a t a : { . . . e . d a t a , d i m m e d : r } } ; f u n c t i o n L Y e ( e , r ) { r e t u r n r ! = = v o i d 0 ? P Q ( e , r ) : n = > P Q ( n , e ) } c o n s t $ Q = ( e , r ) = > ( e . d a t a . h o v e r e d ? ? ! 1 ) = = = r ? e : { . . . e , d a t a : { . . . e . d a t a , h o v e r e d : r } } ; f u n c t i o n z Y e ( e , r ) { r e t u r n r ! = = v o i d 0 ? $ Q ( e , r ) : n = > $ Q ( n , e ) } f u n c t i o n M Q ( e , r ) { r e t u r n O N e ( e . d a t a , r ) ? e : { . . . e , d a t a : { . . . e . d a t a , . . . r } } } f u n c t i o n B Y e ( e , r ) { r e t u r n r ! = = v o i d 0 ? M Q ( e , r ) : n = > M Q ( n , e ) } c o n
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const MWe=[["path",{d:"M8 9l4 -4l4 4",key:"svg-0"}],["path",{d:"M16 15l-4 4l-4 -4",key:"svg-1"}]],IT=yt("outline","selector","Selector",MWe);/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / c o n s t O W e = [ [ " p a t h " , { d : " M 9 6 l 6 6 l - 6 6 " , k e y : " s v g - 0 " } ] ] , p p = y t ( " o u t l i n e " , " c h e v r o n - r i g h t " , " C h e v r o n R i g h t " , O W e ) , I W e = e = > { c o n s t r = e . c o n t e x t . l a y o u t e d ? . s u b j e c t E x i s t s I n S c o p e ? ? ! 1 ; r e t u r n { s u b j e c t I d : e . c o n t e x t . s u b j e c t , v i e w I d : e . c o n t e x t . v i e w I d , s c o p e : e . c o n t e x t . s c o p e , s u b j e c t E x i s t s I n S c o p e : r , e n a b l e S e l e c t S u b j e c t : e . c o n t e x t . e n a b l e S e l e c t S u b j e c t , e n a b l e C h a n g e S c o p e : e . c o n t e x t . e n a b l e C h a n g e S c o p e } } , L W e = ( ) = > { } , z W e = E . m e m o ( ( ) = > { c o n s t e = S y ( ) , { s u b j e c t I d : r , v i e w I d : n , s c o p e : o , s u b j e c t E x i s t s I n S c o p e : a , e n a b l e S e l e c t S u b j e c t : i , e n a b l e C h a n g e S c o p e : l } = M 2 ( I W e ) , s = E . u s e R e f ( n u l l ) , c = E . u s e R e f ( n u l l ) , u = H o ( ) . f i n d E l e m e n t ( r ) , d = N W e ( o = = = " v i e w " & & n ? n : v o i d 0 ) , p = Y 0 ( { m u l t i p l e : ! 1 } ) ; r e t u r n p . s e t H o v e r e d N o d e = L W e , E . u s e E f f e c t ( ( ) = > { b d ( r ) . r e v e r s e ( ) . f o r E a c h ( f = > { p . e x p a n d ( f ) } ) , p . s e l e c t ( r ) } , [ r ] ) , y . j s x s ( q r , { r e f : s , g a p : " x s " , p o s : " r e l a t i v e " , c h i l d r e n : [ i & & y . j s x s ( q r , { g a p : 4 , w r a p : " n o w r a p " , c h i l d r e n : [ y . j s x ( S e , { f z : " x s " , f w : " 5 0 0 " , s t y l e : { w h i t e S p a c e : " n o w r a p " , u s e r S e l e c t : " n o n e " } , c h i l d r e n : " R e l a t i o n s h i p s o f " } ) , y . j s x ( S e , { p o s : " r e l a t i v e " , c h i l d r e n : y . j s x s ( m r , { p o s i t i o n : " b o t t o m - s t a r t " , s h a d o w : " m d " , k e e p M o u n t e d : ! 1 , w i t h i n P o r t a l : ! 1 , c l o s e O n C l i c k O u t s i d e : ! 0 , c l i c k O u t s i d e E v e n t s : [ " p o i n t e r d o w n " , " m o u s e d o w n " , " c l i c k " ] , o f f s e t : 4 , o n O p e n : ( ) = > { s e t T i m e o u t ( ( ) = > { c . c u r r e n t ? . q u e r y S e l e c t o r ( ` [ d a t a - v a l u e = " $ { r } " ] ` ) ? . s c r o l l I n t o V i e w ( { b e h a v i o r : " i n s t a n t " , b l o c k : " n e a r e s t " } ) } , 1 0 0 ) } , c h i l d r e n : [ y . j s x ( f u , { c h i l d r e n : y . j s x ( Z n , { s i z e : " x s " , v a r i a n t : " d e f a u l t " , m a w : 2 5 0 , r i g h t S e c t i o n : y . j s x ( I T , { s i z e : 1 6 } ) , c h i l d r e n : y . j s x ( w t , { f z : " x s " , f w : " 5 0 0 " , t r u n c a t e : ! 0 , c h i l d r e n : u ? . t i t l e ? ? " ? ? ? " } ) } ) } ) , y . j s x ( G s , { p : 0 , m i w : 2 5 0 , m a w : 4 0 0 , c h i l d r e n : y . j s x ( t a , { s c r o l l b a r s : " y " , t y p e : " n e v e r " , v i e w p o r t R e f : c , c l a s s N a m e : F J , c h i l d r e n : y . j s x ( j f , { a l l o w R a n g e S e l e c t i o n : ! 1 , s e l e c t O n C l i c k : ! 1 , t r e e : p , d a t a : d , c l a s s N a m e s : $ W e , l e v e l O f f s e t : 8 , s t y l e s : { r o o t : { m a x W i d t h : 4 0 0 , o v e r f l o w : " h i d d e n " } , l a b e l : { p a d d i n g T o p : 5 , p a d d i n g B o t t o m : 6 } } , r e n d e r N o d e : ( { n o d e : f , s e l e c t e d : g , e x p a n d e d : b , e l e m e n t P r o p s : x , h a s C h i l d r e n : w } ) = > y . j s x s ( q r , { g a p : 2 , w r a p : " n o w r a p " , . . . x , p y : " 3 " , c h i l d r e n : [ y . j s x ( o r , { v a r i a n t : " s u b t l e " , s i z e : 1 8 , c : " d i m m e d " , s t y l e : { v i s i b i l i t y : w ? " v i s i b l e " : " h i d d e n " } , c h i l d r e n : y . j s x ( p p , { s t r o k e : 3 . 5 , s t y l e : { t r a n s i t i o n : " t r a n s f o r m 1 5 0 m s e a s e " , t r a n s f o r m : ` r o t a t e ( $ { b ? " 9 0 d e g " : " 0 " } ) ` , w i d t h : " 8 0 % " } } ) } ) , y . j s x ( S e , { f l e x : " 1 1 1 0 0 % " , w : " 1 0 0 % " , o n C l i c k : k = > { k . s t o p P r o p a g a t i o n ( ) , p . s e l e c t ( f . v a l u e ) , p . e x p a n d ( f . v a l u e ) , e . n a v i g a t e T o ( f . v a l u e ) } , c h i l d r e n : y . j s x ( w t , { f z : " s m " , f w : g ? " 6 0 0 " : " 4 0 0 " , t r u n c a t e : " e n d " , c h i l d r e n : f . l a b e l } ) } ) ] } ) } ) } ) } ) ] } ) } ) ] } ) , l & & y . j s x s ( q r , { g a p : 4 , w r a p : " n o w r a p " , c h i l d r e n : [ i & & y . j s x ( S e , { f z : " x s " , f w : " 5 0 0 " , . . . ! a & & { c : " d i m m e d " } , s t y l e : { w h i t e S p a c e : " n o w r a p " , u s e r S e l e c t : " n o n e " } , c h i l d r e n : " S c o p e " } ) , y . j s x ( " d i v " , { c h i l d r e n : y . j s x ( f o , { c o l o r : " o r a n g e " , l a b e l : y . j s x s ( y . F r a g m e n t , { c h i l d r e n : [ " T h i s e l e m e n t d o e s n o t e x i s t i n t h e c u r r e n t v i e w " , o = = = " v i e w " & & y . j s x s ( y . F r a g m e n t , { c h i l d r e n : [ y . j s x ( " b r " , { } ) , " S c o p e i s s e t t o g l o b a l " ] } ) ] } ) , p o s i t i o n : " b o t t o m - s t a r t " , d i s a b l e d : a , p o r t a l P r o p s : { t a r g e t : s . c u r r e n t } , c h i l d r e n : y . j s x ( q 0 , { f l e x : " 1 0 a u t o " , s i z e : " x s " , w i t h I t e m s B o r d e r s : ! 1 , v a l u e : o , s t y l e s : { l a b e l : { p a d d i n g L e f t : 8 , p a d d i n g R i g h t : 8 } } , o n C h a n g e : f = > { e . c h a n g e S c o p e ( f ) } , d a t a : [ { l a b e l : " G l o b a l " , v a l u e : " g l o b a l " } , { l a b e l : y . j s x ( " s p a n " , { c h i l d r e n : " C u r r e n t v i e w " } ) , v a l u e : " v i e w " , d i s a b l e d : ! a } ] } ) } ) } ) ] } ) ] } ) } ) , z 2 = ( e , r ) = > M a t h . a b s ( e - r ) < 2 . 5 , B W e = ( e , r ) = > e . i d = = = r . i d & & u t ( e . s e l e c t e d ? ? ! 1 , r . s e l e c t e d ? ? ! 1 ) & & u t ( e . a n i m a t e d ? ? ! 1 , r . a n i m a t e d ? ? ! 1 ) & & u t ( e . s o u r c e , r . s o u r c e ) & & u t ( e . s o u r c e H a n d l e I d ? ? n u l l , r . s o u r c e H a n d l e I d ? ? n u l l ) & & u t ( e . s o u r c e P o s i t i o n , r . s o u r c e P o s i t i o n ) & & u t ( e . t a r g e t , r . t a r g e t ) & & u t ( e . t a r g e t H a n d l e I d ? ? n u l l , r . t a r g e t H a n d l e I d ? ? n u l l ) & & u t ( e . t a r g e t P o s i t i o n , r . t a r g e t P o s i t i o n ) & & z 2 ( e . s o u r c e X , r . s o u r c e X ) & & z 2 ( e . s o u r c e Y , r . s o u r c e Y ) & & z 2 ( e . t a r g e t X , r . t a r g e t X ) & & z 2 ( e . t a r g e t Y , r . t a r g e t Y ) & & u t ( e . d a t a , r . d a t a ) ; f u n c t i o n L T ( e ) { r e t u r n E . m e m o ( e , B W e ) } c o n s t j W e = [ " C o n t r o l s " , " R e a d O n l y " , " F o c u s M o d e " , " N a v i g a t e T o " , " E l e m e n t D e t a i l s " , " R e l a t i o n s h i p D e t a i l s " , " R e l a t i o n s h i p B r o w s e r " , " S e a r c h " , " N a v i g a t i o n B u t t o n s " , " N o t a t i o n s " , " D y n a m i c V i e w W a l k t h r o u g h " , " E d g e E d i t i n g " , " F i t V i e w " , " V s c o d e " , " E l e m e n t T a g s " ] , H J = E 0 ( j W e , e = > [ ` e n a b l e $ { e } ` , ! 1 ] ) , z T = E . c r e a t e C o n t e x t ( H J ) , F W e = e = > { l e t { e n a b l e R e a d O n l y : r , e n a b l e E d g e E d i t i n g : n , . . . o } = e ; r e t u r n r & & ( n = ! 1 ) , { e n a b l e R e a d O n l y : r , e n a b l e E d g e E d i t i n g : n , . . . o } } ; f u n c t i o n h p ( { c h i l d r e n : e , f e a t u r e s : r , o v e r r i d e s : n } ) { c o n s t o = E . u s e C o n t e x t ( z T ) , [ a , i ] = E . u s e S t a t e ( o ) ; r e t u r n E . u s e E f f e c t ( ( ) = > { i ( l = > { c o n s t s = F W e ( { . . . o , . . . r , . . . n } ) ; r e t u r n G n ( l , s )
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const lGe=[["path",{d:"M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11",key:"svg-0"}]],sGe=yt("outline","bolt","Bolt",lGe),cGe=qo({position:"absolute",zIndex:1,justifyContent:"center",alignItems:"center",_smallZoom:{display:"none"}}),uGe=qo({gap:"1.5",justifyContent:"center",alignItems:"center"});function H2({selected:e=!1,data:{hovered:r=!1},buttons:n}){const o=Ta();return n.length?y.jsx(Ur,{className:cGe,style:{top:"calc(100% - 30px)",transform:"translateX(-50%)",left:"50%",width:"auto",minHeight:30},children:y.jsx(Qr,{layoutRoot:!0,initial:!1,style:{originY:0},animate:{opacity:r||e?1:.75,scale:r?1.1:e?.9:.8,y:r||e?6:0},"data-likec4-hovered":r,className:Je("nodrag nopan",uGe),children:n.map((a,i)=>y.jsx(or,{component:fl,className:E2({}),initial:!1,whileTap:{scale:1},whileHover:{scale:1.3},onClick:a.onClick,onDoubleClick:cn,children:a.icon||y.jsx(sGe,{})},`${o}-${a.key??i}`))},`${o}-action-buttons`)}):null}/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const dGe=[["path",{d:"M3 6a3 3 0 1 0 6 0a3 3 0 0 0 -6 0",key:"svg-0"}],["path",{d:"M21 11v-3a2 2 0 0 0 -2 -2h-6l3 3m0 -6l-3 3",key:"svg-1"}],["path",{d:"M3 13v3a2 2 0 0 0 2 2h6l-3 -3m0 6l3 -3",key:"svg-2"}],["path",{d:"M15 18a3 3 0 1 0 6 0a3 3 0 0 0 -6 0",key:"svg-3"}]],Ny=yt("outline","transform","Transform",dGe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / c o n s t p G e = [ [ " p a t h " , { d : " M 4 2 1 v - 4 a 3 3 0 0 1 3 - 3 h 5 " , k e y : " s v g - 0 " } ] , [ " p a t h " , { d : " M 9 1 7 l 3 - 3 l - 3 - 3 " , k e y : " s v g - 1 " } ] , [ " p a t h " , { d : " M 1 4 3 v 4 a 1 1 0 0 0 1 1 h 4 " , k e y : " s v g - 2 " } ] , [ " p a t h " , { d : " M 5 1 1 v - 6 a 2 2 0 0 1 2 - 2 h 7 l 5 5 v 1 1 a 2 2 0 0 1 - 2 2 h - 9 . 5 " , k e y : " s v g - 3 " } ] ] , f m = y t ( " o u t l i n e " , " f i l e - s y m l i n k " , " F i l e S y m l i n k " , p G e ) , h G e = e = > { c o n s t { e n a b l e N a v i g a t e T o : r , e n a b l e V s c o d e : n } = w r ( ) , o = W t ( ) , a = F 2 ( ) , i = S y ( ) , l = M 2 ( d = > d . c o n t e x t . s u b j e c t ) , s = [ ] , { n a v i g a t e T o : c , f q n : u } = e . d a t a ; r e t u r n c & & r & & a ! = = c & & s . p u s h ( { k e y : " n a v i g a t e " , i c o n : y . j s x ( g i , { } ) , o n C l i c k : d = > { d . s t o p P r o p a g a t i o n ( ) , o . n a v i g a t e T o ( c ) } } ) , u ! = = l & & s . p u s h ( { k e y : " r e l a t i o n s h i p s " , i c o n : y . j s x ( N y , { } ) , o n C l i c k : d = > { d . s t o p P r o p a g a t i o n ( ) , i . n a v i g a t e T o ( u , e . i d ) } } ) , n & & s . p u s h ( { k e y : " g o T o S o u r c e " , i c o n : y . j s x ( f m , { } ) , o n C l i c k : d = > { d . s t o p P r o p a g a t i o n ( ) , o . o p e n S o u r c e ( { e l e m e n t : u } ) } } ) , y . j s x ( H 2 , { b u t t o n s : s , . . . e } ) } ; f u n c t i o n D y ( { n o d e P r o p s : { d a t a : { h o v e r e d : e = ! 1 , d i m m e d : r = ! 1 , . . . n } } , c l a s s N a m e : o , c h i l d r e n : a , s t y l e : i , . . . l } ) { l e t s = K i ( n . s t y l e . o p a c i t y ? ? 1 0 0 , { m i n : 0 , m a x : 1 0 0 } ) ; c o n s t c = s < 9 9 , u = 6 5 , d = u + K i ( ( 1 0 0 - u ) * ( s / 1 0 0 ) , { m i n : 0 , m a x : 1 0 0 - u } ) , p = _ V e ( { i s T r a n s p a r e n t : c , i n v e r s e C o l o r : s < 6 0 , b o r d e r S t y l e : n . s t y l e . b o r d e r ? ? ( c ? " d a s h e d " : " n o n e " ) } ) , f = K i ( n . d e p t h ? ? 1 , { m i n : 1 , m a x : 5 } ) ; r e t u r n y . j s x ( Q r , { c l a s s N a m e : J e ( p , o ) , i n i t i a l : ! 1 , " d a t a - l i k e c 4 - h o v e r e d " : e , " d a t a - l i k e c 4 - c o l o r " : n . c o l o r , " d a t a - c o m p o u n d - d e p t h " : f , . . . r ! = = ! 1 & & { " d a t a - l i k e c 4 - d i m m e d " : r } , s t y l e : { . . . i , " - - _ b o r d e r - t r a n s p a r e n c y " : ` $ { d } % ` , " - - _ c o m p o u n d - t r a n s p a r e n c y " : ` $ { s } % ` } , . . . l , c h i l d r e n : a } ) } f u n c t i o n P y ( { d a t a : e } ) { c o n s t r = U 3 ( { e l e m e n t : e , c l a s s N a m e : " l i k e c 4 - c o m p o u n d - i c o n " } ) ; r e t u r n y . j s x s ( " d i v " , { c l a s s N a m e : " l i k e c 4 - c o m p o u n d - t i t l e - c o n t a i n e r " , c h i l d r e n : [ r , y . j s x ( w t , { c o m p o n e n t : " h 3 " , c l a s s N a m e : " l i k e c 4 - c o m p o u n d - t i t l e " , t r u n c a t e : " e n d " , c h i l d r e n : e . t i t l e } ) ] } ) } c o n s t Y J = J 1 ( { b a s e : { t r a n s i t i o n D u r a t i o n : " n o r m a l " } , v a r i a n t s : { d e l a y : { t r u e : { t r a n s i t i o n D e l a y : { b a s e : " 0 . 2 s " , _ h o v e r : " 0 s " } } } } } ) ; / * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / c o n s t f G e = [ [ " p a t h " , { d : " M 3 4 m 0 3 a 3 3 0 0 1 3 - 3 h 1 2 a 3 3 0 0 1 3 3 v 1 0 a 3 3 0 0 1 - 3 3 h - 1 2 a 3 3 0 0 1 - 3 - 3 z " , k e y : " s v g - 0 " } ] , [ " p a t h " , { d : " M 9 1 0 m - 2 0 a 2 2 0 1 0 4 0 a 2 2 0 1 0 - 4 0 " , k e y : " s v g - 1 " } ] , [ " p a t h " , { d : " M 1 5 8 l 2 0 " , k e y : " s v g - 2 " } ] , [ " p a t h " , { d : " M 1 5 1 2 l 2 0 " , k e y : " s v g - 3 " } ] , [ " p a t h " , { d : " M 7 1 6 l 1 0 0 " , k e y : " s v g - 4 " } ] ] , j T = y t ( " o u t l i n e " , " i d " , " I d " , f G e ) ; f u n c t i o n W J ( { d a t a : { h o v e r e d : e = ! 1 } , i c o n : r , o n C l i c k : n } ) { c o n s t o = t 9 ( e , e ? 1 3 0 : 0 ) [ 0 ] & & e ; r e t u r n y . j s x ( Q r , { i n i t i a l : ! 1 , a n i m a t e : { s c a l e : o ? 1 . 2 : 1 } , w h i l e H o v e r : { s c a l e : 1 . 4 } , w h i l e T a p : { s c a l e : 1 } , c l a s s N a m e : " l i k e c 4 - c o m p o u n d - d e t a i l s d e t a i l s - b u t t o n " , c h i l d r e n : y . j s x ( o r , { c l a s s N a m e : J e ( " n o d r a g n o p a n " , Y J ( { d e l a y : e & & ! o } ) , E 2 ( { v a r i a n t : " t r a n s p a r e n t " } ) ) , o n C l i c k : n , o n D o u b l e C l i c k : c n , c h i l d r e n : r ? ? y . j s x ( j T , { s t r o k e : 1 . 8 , s t y l e : { w i d t h : " 7 5 % " } } ) } ) } ) } c o n s t m G e = y e ( { p o s i t i o n : " r e l a t i v e " , w i d t h : " 1 0 0 % " , h e i g h t : " 1 0 0 % " , p a d d i n g : " 0 " , m a r g i n : " 0 " , d i s p l a y : " f l e x " , a l i g n I t e m s : " c e n t e r " , j u s t i f y C o n t e n t : " c e n t e r " , p o i n t e r E v e n t s : " n o n e " , _ b e f o r e : { c o n t e n t : ' " " ' , p o s i t i o n : " a b s o l u t e " , t o p : " [ c a l c ( 1 0 0 % - 4 p x ) ] " , l e f t : " 0 " , w i d t h : " 1 0 0 % " , h e i g h t : " 2 4 p x " , b a c k g r o u n d : " [ t r a n s p a r e n t ] " , p o i n t e r E v e n t s : " a l l " } , _ f o c u s V i s i b l e : { o u t l i n e : " n o n e " } , _ r e d u c e G r a p h i c s O n P a n : { _ b e f o r e : { d i s p l a y : " n o n e " } } , " : w h e r e ( . r e a c t - f l o w _ _ n o d e . s e l e c t a b l e : n o t ( . d r a g g i n g ) ) & " : { c u r s o r : " p o i n t e r " } } ) , m m = E . f o r w a r d R e f ( ( { n o d e P r o p s : { s e l e c t e d : e = ! 1 , s e l e c t a b l e : r = ! 1 , d a t a : { h o v e r e d : n = ! 1 , d i m m e d : o = ! 1 , . . . a } } , c l a s s N a m e : i , s t y l e : l , c h i l d r e n : s , . . . c } , u ) = > { l e t d = 1 ; s w i t c h ( ! 0 ) { c a s e n : d = 1 . 0 5 ; b r e a k ; c a s e e : d = 1 . 0 2 ; b r e a k } c o n s t { s i z e : p , p a d d i n g : f , t e x t S i z e : g } = e 3 ( a . s t y l e ? ? { } ) ; r e t u r n y . j s x ( Q r , { r e f : u , c l a s s N a m e : J e ( m G e , " g r o u p " , " l i k e c 4 - e l e m e n t - n o d e " , i ) , i n i t i a l : ! 1 , . . . r & & { a n i m a t e : { s c a l e : d } , w h i l e T a p : { s c a l e : . 9 8 } } , " d a t a - l i k e c 4 - h o v e r e d " : n , " d a t a - l i k e c 4 - c o l o r " : a . c o l o r , " d a t a - l i k e c 4 - s h a p e " : a . s h a p e , " d a t a - l i k e c 4 - s h a p e - s i z e " : p , " d a t a - l i k e c 4 - s p a c i n g " : f , " d a t a - l i k e c 4 - t e x t - s i z e " : g , . . . o ! = = ! 1 & & { " d a t a - l i k e c 4 - d i m m e d " : o } , s t y l e : { . . . l } , . . . c , c h i l d r e n : s } ) } ) ; m m . d i s p l a y N a m e = " E l e m e n t N o d e C o n t a i n e r " ; f u n c t i o n G J ( e , r , n = . 0 6 5 ) { c o n s t o = M a t h . r o u n d ( e / 2 ) , a = o , i = y i ( n * o ) , l = r - 2 * i ; r e t u r n { p a t h : ` M $ { e } , $ { i }
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
a $ { a } , $ { i } 0 , 0 , 0 $ { - e } 0
l 0 , $ { l }
a $ { a } , $ { i } 0 , 0 , 0 $ { e } 0
l 0 , $ { - l }
z
` .replace(/ \s +/g," ").trim(),ry:i,rx:a}}function XJ(e,r,n=.185){const o=r,a=Math.round(o/2),i=yi(o/2*n),l=e-2*i;return{path: `
M $ { i } , 0
a $ { i } , $ { a } 0 , 0 , 0 0 $ { o }
l $ { l } , 0
a $ { i } , $ { a } 0 , 0 , 0 0 $ { - o }
2025-11-07 11:50:17 +01:00
z ` .replace(/ \s +/g," ").trim(),ry:a,rx:i}}const fp={width:115,height:120,path:"M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z"};function KJ({shape:e,w:r,h:n}){switch(e){case"mobile":return y.jsxs(y.Fragment,{children:[y.jsx("rect",{width:r,height:n,rx:6,"data-likec4-fill":"mix-stroke",strokeWidth:0}),y.jsxs("g",{"data-likec4-fill":"fill",strokeWidth:0,children:[y.jsx("circle",{cx:17,cy:n/2,r:12}),y.jsx("rect",{x:33,y:12,width:r-44,height:n-24,rx:5})]})]});case"browser":return y.jsxs(y.Fragment,{children:[y.jsx("rect",{width:r,height:n,rx:6,"data-likec4-fill":"mix-stroke",strokeWidth:0}),y.jsxs("g",{"data-likec4-fill":"fill",strokeWidth:0,children:[y.jsx("circle",{cx:16,cy:17,r:7}),y.jsx("circle",{cx:36,cy:17,r:7}),y.jsx("circle",{cx:56,cy:17,r:7}),y.jsx("rect",{x:70,y:8,width:r-80,height:17,rx:4}),y.jsx("rect",{x:10,y:32,width:r-20,height:n-42,rx:4})]})]});case"person":return y.jsxs(y.Fragment,{children:[y.jsx("rect",{width:r,height:n,rx:6,strokeWidth:0}),y.jsx("svg",{x:r-fp.width-6,y:n-fp.height,width:fp.width,height:fp.height,viewBox: ` 0 0 $ { fp . width } $ { fp . height } ` ,"data-likec4-fill":"mix-stroke",children:y.jsx("path",{strokeWidth:0,d:fp.path})})]});case"queue":{const{path:o,rx:a,ry:i}=XJ(r,n);return y.jsxs(y.Fragment,{children:[y.jsx("path",{d:o,strokeWidth:2}),y.jsx("ellipse",{cx:a,cy:i,ry:i-.75,rx:a,"data-likec4-fill":"mix-stroke",strokeWidth:2})]})}case"storage":case"cylinder":{const{path:o,rx:a,ry:i}=GJ(r,n);return y.jsxs(y.Fragment,{children:[y.jsx("path",{d:o,strokeWidth:2}),y.jsx("ellipse",{cx:a,cy:i,ry:i,rx:a-.75,"data-likec4-fill":"mix-stroke",strokeWidth:2})]})}default:return Xa(e)}}function gGe({shape:e,w:r,h:n}){let o;switch(e){case"queue":o=y.jsx("path",{d:XJ(r,n).path});break;case"storage":case"cylinder":{o=y.jsx("path",{d:GJ(r,n).path});break}default:{o=y.jsx("rect",{x:-1,y:-1,width:r+2,height:n+2,rx:6});break}}return y.jsx("g",{className:"likec4-shape-outline",children:o})}function yGe({multiple:e,withOutLine:r}){return y.jsxs("div",{className:sQ({shapetype:"html"}),children:[e&&y.jsx("div",{className:"likec4-shape-multiple"}),r&&y.jsx("div",{className:"likec4-shape-outline"})]})}function gm({data:e,width:r,height:n,showSeletionOutline:o=!0}){let a=r&&r>10?r:e.width,i=n&&n>10?n:e.height;const l=e.style?.multiple??!1;if(e.shape==="rectangle")return y.jsx(yGe,{multiple:l,withOutLine:o});const s=sQ({shapetype:"svg"});return y.jsxs(y.Fragment,{children:[l&&y.jsx("svg",{className:s,"data-likec4-shape-multiple":"true",viewBox: ` 0 0 $ { a } $ { i } ` ,children:y.jsx(KJ,{shape:e.shape,w:a,h:i})}),y.jsxs("svg",{className:s,viewBox: ` 0 0 $ { a } $ { i } ` ,children:[o&&y.jsx(gGe,{shape:e.shape,w:a,h:i}),y.jsx(KJ,{shape:e.shape,w:a,h:i})]})]})}const mp=E.forwardRef(({value:e,textScale:r=1,uselikec4palette:n=!1,hideIfEmpty:o=!1,emptyText:a="no content",className:i,style:l,fontSize:s,...c},u)=>{if(e.isEmpty&&o)return null;const d=e.nonEmpty?e.isMarkdown?{dangerouslySetInnerHTML:{__html:e.html}}:{children:y.jsx("p",{children:e.text})}:{children:y.jsx(wt,{component:"span",fz:"xs",c:"dimmed",style:{userSelect:"none"},children:a})};return y.jsx(Ur,{ref:u,...c,className:Je(TVe({uselikec4palette:n,value:e.isMarkdown?"markdown":"plaintext"}),i),style:{...l,...s&&{"--text-fz": ` var ( -- font - sizes - $ { s } , var ( -- font - sizes - md ) ) ` },"--mantine-scale":r},...d})});mp.displayName="Markdown";const ZJ=E.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,ref:n,className:Je(e,SVe(),"likec4-element")})),QJ=({data:e,...r})=>y.jsx(U3,{element:e,...r}),JJ=E.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,className:Je(e,"likec4-element-node-content"),ref:n})),eee=E.forwardRef(({data:{title:e,style:r},className:n,...o},a)=>{const{size:i}=e3(r),l=i==="sm"||i==="xs";return y.jsx(wt,{component:"div",...o,className:Je(n,"likec
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / c o n s t E G e = [ [ " p a t h " , { d : " M 1 5 6 l - 6 6 l 6 6 " , k e y : " s v g - 0 " } ] ] , n e e = y t ( " o u t l i n e " , " c h e v r o n - l e f t " , " C h e v r o n L e f t " , E G e ) , S G e = { e l e m e n t : x G e , c o m p o u n d : w G e , e m p t y : a G e } , C G e = { r e l a t i o n s h i p : n G e } ; f u n c t i o n o e e ( { a c t o r R e f : e } ) { c o n s t r = E . u s e R e f ( n u l l ) ; r e t u r n r . c u r r e n t = = n u l l & & ( r . c u r r e n t = { i n i t i a l N o d e s : [ ] , i n i t i a l E d g e s : [ ] } ) , y . j s x ( O Q . P r o v i d e r , { v a l u e : e , c h i l d r e n : y . j s x ( $ x , { . . . r . c u r r e n t , c h i l d r e n : y . j s x ( d m , { i d : e . s e s s i o n I d , i n h e r i t : ! 1 , c h i l d r e n : y . j s x ( P a , { c h i l d r e n : y . j s x ( A G e , { } ) } ) } ) } ) } ) } c o n s t T G e = e = > ( { i s A c t i v e : e . h a s T a g ( " a c t i v e " ) , n o d e s : e . c o n t e x t . x y n o d e s , e d g e s : e . c o n t e x t . x y e d g e s } ) , R G e = ( e , r ) = > e . i s A c t i v e = = = r . i s A c t i v e & & G n ( e . n o d e s , r . n o d e s ) & & G n ( e . e d g e s , r . e d g e s ) , A G e = E . m e m o ( ( ) = > { c o n s t e = S y ( ) , { i s A c t i v e : r , n o d e s : n , e d g e s : o } = M 2 ( T G e , R G e ) ; r e t u r n y . j s x ( q C , { i d : e . r o o t E l e m e n t I d , n o d e s : n , e d g e s : o , c l a s s N a m e : J e ( r ? " i n i t i a l i z e d " : " n o t - i n i t i a l i z e d " , " r e l a t i o n s h i p s - b r o w s e r " ) , n o d e T y p e s : S G e , e d g e T y p e s : C G e , f i t V i e w : ! 1 , o n N o d e C l i c k : i t ( ( a , i ) = > { a . s t o p P r o p a g a t i o n ( ) , e . s e n d ( { t y p e : " x y f l o w . n o d e C l i c k " , n o d e : i } ) } ) , o n E d g e C l i c k : i t ( ( a , i ) = > { a . s t o p P r o p a g a t i o n ( ) , e . s e n d ( { t y p e : " x y f l o w . e d g e C l i c k " , e d g e : i } ) } ) , o n P a n e C l i c k : i t ( a = > { a . s t o p P r o p a g a t i o n ( ) , e . s e n d ( { t y p e : " x y f l o w . p a n e C l i c k " } ) } ) , o n D o u b l e C l i c k : i t ( a = > { e . s e n d ( { t y p e : " x y f l o w . p a n e D b l C l i c k " } ) } ) , o n V i e w p o r t R e s i z e : i t ( ( ) = > { e . s e n d ( { t y p e : " x y f l o w . r e s i z e d " } ) } ) , o n N o d e s C h a n g e : i t ( a = > { e . s e n d ( { t y p e : " x y f l o w . a p p l y N o d e C h a n g e s " , c h a n g e s : a } ) } ) , o n E d g e s C h a n g e : i t ( a = > { e . s e n d ( { t y p e : " x y f l o w . a p p l y E d g e C h a n g e s " , c h a n g e s : a } ) } ) , o n E d g e M o u s e E n t e r : i t ( ( a , i ) = > { i . d a t a . h o v e r e d | | e . s e n d ( { t y p e : " x y f l o w . e d g e M o u s e E n t e r " , e d g e : i } ) } ) , o n E d g e M o u s e L e a v e : i t ( ( a , i ) = > { i . d a t a . h o v e r e d & & e . s e n d ( { t y p e : " x y f l o w . e d g e M o u s e L e a v e " , e d g e : i } ) } ) , o n S e l e c t i o n C h a n g e : i t ( a = > { e . s e n d ( { t y p e : " x y f l o w . s e l e c t i o n C h a n g e " , . . . a } ) } ) , n o d e s D r a g g a b l e : ! 1 , p a n n a b l e : ! 0 , z o o m a b l e : ! 0 , c h i l d r e n : y . j s x ( D G e , { } ) } ) } ) , N G e = e = > ( { s u b j e c t I d : e . c o n t e x t . s u b j e c t , v i e w I d : e . c o n t e x t . v i e w I d , s c o p e : e . c o n t e x t . s c o p e , c l o s e a b l e : e . c o n t e x t . c l o s e a b l e } ) , D G e = E . m e m o ( ( ) = > { c o n s t e = S y ( ) , { s u b j e c t I d : r , v i e w I d : n , s c o p e : o , c l o s e a b l e : a } = M 2 ( N G e ) , i = f r ( ) , l = u f ( ) ; E . u s e E f f e c t ( ( ) = > { l . v i e w p o r t I n i t i a l i z e d & & e . s e n d ( { t y p e : " x y f l o w . i n i t " , i n s t a n c e : l , s t o r e : i } ) } , [ i , l . v i e w p o r t I n i t i a l i z e d , e ] ) ; c o n s t s = A W e ( r , n , o ) , [ c , u , { h i s t o r y : d , c u r r e n t : p } ] = Y U ( r ) ; E . u s e E f f e c t ( ( ) = > { c ! = = r & & u . s e t ( r ) } , [ r ] ) , E . u s e E f f e c t ( ( ) = > { c ! = = r & & e . n a v i g a t e T o ( c ) } , [ c , e ] ) , H j ( ( ) = > { e . u p d a t e V i e w ( s ) } , [ s , e ] ) ; c o n s t f = p > 0 , g = p + 1 < d . l e n g t h ; r e t u r n y . j s x s ( y . F r a g m e n t , { c h i l d r e n : [ y . j s x ( P G e , { h a s S t e p B a c k : f , h a s S t e p F o r w a r d : g , o n S t e p B a c k : ( ) = > u . b a c k ( ) , o n S t e p F o r w a r d : ( ) = > u . f o r w a r d ( ) } ) , a & & y . j s x ( o u , { p o s i t i o n : " t o p - r i g h t " , c h i l d r e n : y . j s x ( o r , { v a r i a n t : " d e f a u l t " , c o l o r : " g r a y " , o n C l i c k : b = > { b . s t o p P r o p a g a t i o n ( ) , e . c l o s e ( ) } , c h i l d r e n : y . j s x ( H f , { } ) } ) } ) ] } ) } ) , P G e = ( { h a s S t e p B a c k : e , h a s S t e p F o r w a r d : r , o n S t e p B a c k : n , o n S t e p F o r w a r d : o } ) = > y . j s x ( o u , { p o s i t i o n : " t o p - l e f t " , c h i l d r e n : y . j s x s ( q r , { g a p : 4 , w r a p : " n o w r a p " , c h i l d r e n : [ y . j s x s ( P a , { m o d e : " p o p L a y o u t " , c h i l d r e n : [ e & & y . j s x ( c l . d i v , { l a y o u t : ! 0 , i n i t i a l : { o p a c i t y : . 0 5 , t r a n s f o r m : " t r a n s l a t e X ( - 5 p x ) " } , a n i m a t e : { o p a c i t y : 1 , t r a n s f o r m : " t r a n s l a t e X ( 0 ) " } , e x i t : { o p a c i t y : . 0 5 , t r a n s f o r m : " t r a n s l a t e X ( - 1 0 p x ) " } , c h i l d r e n : y . j s x ( o r , { v a r i a n t : " d e f a u l t " , c o l o r : " g r a y " , o n C l i c k : a = > { a . s t o p P r o p a g a t i o n ( ) , n ( ) } , c h i l d r e n : y . j s x ( n e e , { } ) } ) } , " b a c k " ) , r & & y . j s x ( c l . d i v , { l a y o u t : ! 0 , i n i t i a l : { o p a c i t y : . 0 5 , t r a n s f o r m : " t r a n s l a t e X ( 5 p x ) " } , a n i m a t e : { o p a c i t y : 1 , t r a n s f o r m : " t r a n s l a t e X ( 0 ) " } , e x i t : { o p a c i t y : 0 , t r a n s f o r m : " t r a n s l a t e X ( 5 p x ) " } , c h i l d r e n : y . j s x ( o r , { v a r i a n t : " d e f a u l t " , c o l o r : " g r a y " , o n C l i c k : a = > { a . s t o p P r o p a g a t i o n ( ) , o ( ) } , c h i l d r e n : y . j s x ( p p , { } ) } ) } , " f o r w a r d " ) ] } ) , y . j s x ( z W e , { } ) ] } ) } ) , $ G e = y e ( { d i s p l a y : " i n l i n e - b l o c k " , f o n t S i z e : " s m " , f o n t W e i g h t : 5 0 0 , w h i t e S p a c e : " n o w r a p " , p a d d i n g : " [ 3 p x 6 p x ] " , b o r d e r R a d i u s : 3 , b a c k g r o u n d : " v a r ( - - l i k e c 4 - p a l e t t e - f i l l ) / 7 5 " , l i n e H e i g h t : 1 . 2 , c o l o r : " v a r ( - - l i k e c 4 - p a l e t t e - h i C o n t r a s t ) " } ) , M G e = y e ( { _ l i g h t : { b a c k g r o u n d : " m a n t i n e . c o l o r s . g r a y [ 1 ] " , " & [ d a t a - m i s s i n g " : { } } , " & [ d a t a - m i s s i n g ] " : { c o l o r : " m a n t i n e . c o l o r s . o r a n g e [ 4 ] " , b a c k g r o u n d : " m a n t i n e . c o l o r s . o r a n g e [ 8 ] / 1 5 " , b o r d e r C o l o r : " m a n t i n e . c o l o r s . o r a n g e [ 5 ] / 2 0 " , _ l i g h t : { c o l o r : " m a n t i n e . c o l o r s . o r a n g e [ 8 ] " } } } ) , O G e = y e ( { f l e x : " 1 1 1 0 0 % " , p o s i t i o n : " r e l a t i v e " , w i d t h : " 1 0 0 % " , h e i g h t : " 1 0 0 % " , b a c k g r o u n d : " m a n t i n e . c o l o r s . b o d y " , b o r d e r : " 1 p x s o l i d { c o l o r s . m a n t i n e . c o l o r s . d e f a u l t B o r d e r } " , b o r d e r R a d i u s : " s m " , _ l i g h t : { b o r d e r C o l o r : " m a n t i n e . c o l o r s . g r a y [ 3 ] " , b a c k g r o u n d : " m a n t i n e . c o l o r s . g r a y [ 1 ] " } } ) ; y e ( { _ b e f o r e : { c o n t e n t : ' " s c o p e : " ' , p o s i t i o n : " a b s o l u t e " , t o p : " 0 " , l e f
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const IGe=[["path",{d:"M5 12l14 0",key:"svg-0"}],["path",{d:"M13 18l6 -6",key:"svg-1"}],["path",{d:"M13 6l6 6",key:"svg-2"}]],ym=yt("outline","arrow-right","ArrowRight",IGe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / c o n s t L G e = [ [ " p a t h " , { d : " M 1 2 6 h - 6 a 2 2 0 0 0 - 2 2 v 1 0 a 2 2 0 0 0 2 2 h 1 0 a 2 2 0 0 0 2 - 2 v - 6 " , k e y : " s v g - 0 " } ] , [ " p a t h " , { d : " M 1 1 1 3 l 9 - 9 " , k e y : " s v g - 1 " } ] , [ " p a t h " , { d : " M 1 5 4 h 5 v 5 " , k e y : " s v g - 2 " } ] ] , a e e = y t ( " o u t l i n e " , " e x t e r n a l - l i n k " , " E x t e r n a l L i n k " , L G e ) , z G e = f o . w i t h P r o p s ( { c o l o r : " d a r k " , f z : " x s " , o p e n D e l a y : 6 0 0 , c l o s e D e l a y : 1 2 0 , l a b e l : " " , c h i l d r e n : n u l l , o f f s e t : 8 , w i t h i n P o r t a l : ! 1 } ) ; f u n c t i o n B G e ( { n o d e : e , e l e m e n t : r } ) { c o n s t n = U G ( ) , o = k V e ( ) , a = w n ( o , d = > d . c h i l d r e n [ ` $ { o . i d } - r e l a t i o n s h i p s ` ] ) , i = [ . . . r . i n c o m i n g ( ) ] . m a p ( d = > d . i d ) , l = [ . . . r . o u t g o i n g ( ) ] . m a p ( d = > d . i d ) , s = e ? Y E ( [ . . . e . i n c o m i n g ( ) ] . f l a t M a p ( d = > d . $ e d g e . r e l a t i o n s ) ) : [ ] , c = e ? Y E ( [ . . . e . o u t g o i n g ( ) ] . f l a t M a p ( d = > d . $ e d g e . r e l a t i o n s ) ) : [ ] , u = [ . . . i , . . . l ] . f i l t e r ( d = > ! s . i n c l u d e s ( d ) & & ! c . i n c l u d e s ( d ) ) . l e n g t h ; r e t u r n y . j s x s ( r a , { g a p : " x s " , p o s : " r e l a t i v e " , w : " 1 0 0 % " , h : " 1 0 0 % " , c h i l d r e n : [ i . l e n g t h + l . l e n g t h > 0 & & y . j s x s ( q r , { g a p : " x s " , w r a p : " n o w r a p " , a l i g n : " c e n t e r " , c h i l d r e n : [ y . j s x ( S e , { c h i l d r e n : y . j s x s ( q r , { g a p : 8 , m b : 4 , w r a p : " n o w r a p " , c h i l d r e n : [ y . j s x ( i e e , { t i t l e : " i n c o m i n g " , t o t a l : i . l e n g t h , i n c l u d e d : s . l e n g t h } ) , y . j s x ( c i , { s i z e : " s m " , v a r i a n t : " t r a n s p a r e n t " , c : " d i m m e d " , c h i l d r e n : y . j s x ( y m , { s t y l e : { w i d t h : 1 6 } } ) } ) , y . j s x ( w t , { c l a s s N a m e : $ G e , c h i l d r e n : g 1 ( r . i d ) } ) , y . j s x ( c i , { s i z e : " s m " , v a r i a n t : " t r a n s p a r e n t " , c : " d i m m e d " , c h i l d r e n : y . j s x ( y m , { s t y l e : { w i d t h : 1 6 } } ) } ) , y . j s x ( i e e , { t i t l e : " o u t g o i n g " , t o t a l : l . l e n g t h , i n c l u d e d : c . l e n g t h } ) ] } ) } ) , u > 0 & & y . j s x ( z G e , { l a b e l : " C u r r e n t v i e w d o e s n o t i n c l u d e s o m e r e l a t i o n s h i p s " , c h i l d r e n : y . j s x s ( q r , { m t : " x s " , g a p : 6 , c : " o r a n g e " , s t y l e : { c u r s o r : " p o i n t e r " } , c h i l d r e n : [ y . j s x ( F C , { s t y l e : { w i d t h : 1 4 } } ) , y . j s x s ( w t , { f z : " s m " , c h i l d r e n : [ u , " r e l a t i o n s h i p " , u > 1 ? " s a r e " : " i s " , " h i d d e n " ] } ) ] } ) } ) ] } ) , y . j s x ( S e , { c l a s s N a m e : O G e , c h i l d r e n : a & & y . j s x s ( y . F r a g m e n t , { c h i l d r e n : [ y . j s x ( o e e , { a c t o r R e f : a } ) , y . j s x ( S e , { p o s : " a b s o l u t e " , t o p : 1 2 , r i g h t : 1 2 , c h i l d r e n : y . j s x ( o r , { s i z e : " m d " , v a r i a n t : " d e f a u l t " , r a d i u s : " s m " , o n C l i c k : d = > { d . s t o p P r o p a g a t i o n ( ) ; c o n s t { s u b j e c t : p , s c o p e : f , v i e w I d : g } = a . g e t S n a p s h o t ( ) . c o n t e x t ; n . s e n d ( { t y p e : " o p e n . r e l a t i o n s h i p s B r o w s e r " , s u b j e c t : p , s c o p e : f , v i e w I d : g } ) } , c h i l d r e n : y . j s x ( a e e , { s t r o k e : 1 . 6 , s t y l e : { w i d t h : " 7 0 % " } } ) } ) } ) ] } ) } ) ] } ) } f u n c t i o n i e e ( { t i t l e : e , t o t a l : r , i n c l u d e d : n } ) { r e t u r n y . j s x ( N f , { w i t h B o r d e r : ! 0 , s h a d o w : " n o n e " , c l a s s N a m e : M G e , p x : " m d " , p y : " x s " , r a d i u s : " m d " , m o d : { z e r o : r = = = 0 , m i s s i n g : r ! = = n } , c h i l d r e n : y . j s x s ( r a , { g a p : 4 , a l i g n : " f l e x - e n d " , c h i l d r e n : [ y . j s x ( w t , { c o m p o n e n t : " d i v " , c : r ! = = n ? " o r a n g e " : " d i m m e d " , t t : " u p p e r c a s e " , f w : 6 0 0 , f z : 1 0 , l h : 1 , c h i l d r e n : e } ) , y . j s x ( w t , { f w : 6 0 0 , f z : " x l " , c o m p o n e n t : " d i v " , l h : 1 , c h i l d r e n : r ! = = n ? y . j s x s ( y . F r a g m e n t , { c h i l d r e n : [ n , " / " , r ] } ) : y . j s x ( y . F r a g m e n t , { c h i l d r e n : r } ) } ) ] } ) } ) } c o n s t j G e = y e ( { m a r g i n T o p : " s m " , m a r g i n B o t t o m : " s m " } ) , F G e = y e ( { d i s p l a y : " i n l i n e - f l e x " , t r a n s i t i o n : " f a s t " , b o r d e r : " 1 p x d a s h e d " , b o r d e r C o l o r : " m a n t i n e . c o l o r s . d e f a u l t B o r d e r " , b o r d e r R a d i u s : " s m " , p x : " m d " , p y : " x s " , a l i g n I t e m s : " c e n t e r " , c u r s o r : " p o i n t e r " , c o l o r : " m a n t i n e . c o l o r s . g r a y [ 7 ] " , _ d a r k : { c o l o r : " m a n t i n e . c o l o r s . d a r k [ 1 ] " } , " & > * " : { t r a n s i t i o n : " f a s t " } , _ h o v e r : { t r a n s i t i o n T i m i n g F u n c t i o n : " o u t " , b o r d e r S t y l e : " s o l i d " , c o l o r : " m a n t i n e . c o l o r s . d e f a u l t C o l o r " , b a c k g r o u n d : " m a n t i n e . c o l o r s . d e f a u l t H o v e r " , " & > * " : { t r a n s i t i o n T i m i n g F u n c t i o n : " o u t " , t r a n s f o r m : " t r a n s l a t e X ( 1 p x ) " } } } ) , H T = ( { e l e m e n t : e } ) = > y . j s x ( S e , { c l a s s N a m e : F G e , c h i l d r e n : y . j s x ( w t , { c o m p o n e n t : " d i v " , f z : " s m " , f w : " 5 0 0 " , c h i l d r e n : e . t i t l e } ) } ) , H G e = ( ) = > { } ; f u n c t i o n q G e ( { e l e m e n t : e } ) { c o n s t r = Y 0 ( { m u l t i p l e : ! 1 } ) ; r . s e t H o v e r e d N o d e = H G e ; c o n s t n = E . u s e M e m o ( ( ) = > { l e t o = 1 ; c o n s t a = l = > ( { l a b e l : l , v a l u e : ` m s g $ { o + + } ` , t y p e : " m e s s a g e " , c h i l d r e n : [ ] } ) , i = { l a b e l : y . j s x ( H T , { t y p e : " c u r r e n t " , e l e m e n t : e } ) , v a l u e : e . i d , e l e m e n t : e , t y p e : " c u r r e n t " , c h i l d r e n : [ . . . e . c h i l d r e n ( ) ] . m a p ( l = > ( { l a b e l : y . j s x ( H T , { t y p e : " d e s c e d a n t " , e l e m e n t : l } ) , v a l u e : l . i d , e l e m e n t : l , t y p e : " d e s c e d a n t " , c h i l d r e n : [ ] } ) ) } ; r e t u r n i . c h i l d r e n . l e n g t h = = = 0 & & i . c h i l d r e n . p u s h ( a ( y . j s x ( q w , { r a d i u s : " s m " , c h i l d r e n : " n o n e s t e d " } ) ) ) , [ [ . . . e . a n c e s t o r s ( ) ] . r e d u c e ( ( l , s ) = > ( { l a b e l : y . j s x ( H T , { t y p e : " a n c e s t o r " , e l e m e n t : s } ) , v a l u e : s . i d , e l e m e n t : s , t y p e : " a n c e s t o r " , c h i l d r e n : [ l ] } ) , i ) ] } , [ e ] ) ; r e t u r n E . u s e E f f e c t ( ( ) = > { r . e x p a n d A l l N o d e s ( ) } , [ n ] ) , y . j s x s ( y . F r a g m e n t , { c h i l d r e n : [ y . j s x s ( $ w , { v a r i a n t : " l i g h t " , c o l o r : " o r a n g e " , t i t l e : " I n d e v e l o p m e n t " , i c o n : y . j s x ( F C , { } ) , c h i l d r e n : [ " W e n e e d y o u r f e e d b a c k . S h a r e y o u r t h o u g h t s a n d i d e a s - " , " " , y . j s x ( r 7 , { f z : " s m " , f w : 5 0 0 , u n d e r l i n e : " h o v e r " , c : " o r a n g e " , h r e f : " h t t p s : / / g i t h u b . c o m / l i k e c 4 / l i k e c 4 / d i s c u s s i o n s / " , t a r g e t : " _ b l a n k " , c h i l d r e n : " G i t H u b d i s c u s s i o n s " } ) ] } ) , y . j s x
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / c o n s t U G e = [ [ " p a t h " , { d : " M 1 2 4 l - 8 4 l 8 4 l 8 - 4 l - 8 - 4 " , k e y : " s v g - 0 " } ] , [ " p a t h " , { d : " M 4 1 2 l 8 4 l 8 - 4 " , k e y : " s v g - 1 " } ] , [ " p a t h " , { d : " M 4 1 6 l 8 4 l 8 - 4 " , k e y : " s v g - 2 " } ] ] , q T = y t ( " o u t l i n e " , " s t a c k - 2 " , " S t a c k 2 " , U G e ) , l e e = I f . w i t h P r o p s ( { m b : 8 , l a b e l P o s i t i o n : " l e f t " , v a r i a n t : " d a s h e d " } ) , s e e = f o . w i t h P r o p s ( { c o l o r : " d a r k " , f z : " x s " , o p e n D e l a y : 4 0 0 , c l o s e D e l a y : 1 5 0 , l a b e l : " " , c h i l d r e n : n u l l , o f f s e t : 4 } ) , c e e = w t . w i t h P r o p s ( { c o m p o n e n t : " d i v " , f z : 1 1 , f w : 5 0 0 , c : " d i m m e d " , l h : 1 } ) , $ y = w t . w i t h P r o p s ( { c o m p o n e n t : " d i v " , f z : " x s " , c : " d i m m e d " , c l a s s N a m e : v Y e } ) , b m = 2 4 , V G e = [ " P r o p e r t i e s " , " R e l a t i o n s h i p s " , " V i e w s " , " S t r u c t u r e " , " D e p l o y m e n t s " ] ; f u n c t i o n Y G e ( { v i e w I d : e , f r o m N o d e : r , r e c t F r o m N o d e : n , f q n : o , o n C l o s e : a } ) { c o n s t [ i , l ] = E . u s e S t a t e ( ! 1 ) , s = _ P e ( ) , c = s . w i d t h | | w i n d o w . i n n e r W i d t h | | 1 2 0 0 , u = s . h e i g h t | | w i n d o w . i n n e r H e i g h t | | 8 0 0 , [ d , p ] = b P e ( { k e y : " l i k e c 4 : e l e m e n t - d e t a i l s : a c t i v e - t a b " , d e f a u l t V a l u e : " P r o p e r t i e s " } ) , f = W t ( ) , g = A Q ( ) , b = r ? g . f i n d N o d e ( r ) : g . f i n d N o d e W i t h E l e m e n t ( o ) , x = g . $ m o d e l . e l e m e n t ( o ) , [ w , k ] = y n ( [ . . . x . v i e w s ( ) ] , R o ( Q = > Q . $ v i e w ) , l U ( Q = > Q . _ t y p e = = = " e l e m e n t " & & Q . v i e w O f = = = o ) ) ; l e t C = b ? . n a v i g a t e T o ? . $ v i e w ? ? x . d e f a u l t V i e w ? . $ v i e w ? ? n u l l ; C ? . i d = = = e & & ( C = n u l l ) ; c o n s t _ = z x ( x . l i n k s ) , T = w V e ( ) , R = ( b ? . $ n o d e . c h i l d r e n ? . l e n g t h ? ? 0 ) > 0 , A = M a t h . m i n ( 7 0 0 , c - b m * 2 ) , D = M a t h . m i n ( 6 5 0 , u - b m * 2 ) , N = n ? { x : n . x + ( R ? n . w i d t h - A / 2 : n . w i d t h / 2 ) , y : n . y + ( R ? 0 : n . h e i g h t / 2 ) } : { x : c / 2 , y : u / 2 } , $ = n ? M a t h . m i n ( n . w i d t h / A , n . h e i g h t / D , . 9 ) : 1 , M = M a t h . r o u n d ( K i ( N . x - A / 2 , { m i n : b m , m a x : c - A - b m } ) ) , j = M a t h . r o u n d ( K i ( N . y - ( R ? 0 : 6 0 ) , { m i n : b m , m a x : u - D - b m } ) ) , L = K i ( ( N . x - M ) / A , { m i n : . 1 , m a x : . 9 } ) , Y = K i ( ( N . y - j ) / D , { m i n : . 1 , m a x : . 9 } ) , O = K Z ( A ) , U = K Z ( D ) ; D 2 ( ( ) = > { O . s e t ( A ) , U . s e t ( D ) } , [ A , D ] ) ; c o n s t I = E . u s e C a l l b a c k ( ( Q , z ) = > { O . s e t ( M a t h . m a x ( O . g e t ( ) + z . d e l t a . x , 3 2 0 ) ) , U . s e t ( M a t h . m a x ( U . g e t ( ) + z . d e l t a . y , 3 0 0 ) ) } , [ ] ) , q = E . u s e R e f ( n u l l ) , V = X h ( a ) , G = V 3 ( ( ) = > { V . c u r r e n t ( ) } , [ ] , 5 0 ) , F = b ? . $ n o d e . n o t a t i o n ? ? n u l l , J = U 3 ( { e l e m e n t : { i d : o , t i t l e : x . t i t l e , i c o n : b ? . i c o n ? ? x . i c o n } , c l a s s N a m e : d Y e } ) ; r e t u r n W 3 ( ( ) = > { q . c u r r e n t ? . o p e n | | q . c u r r e n t ? . s h o w M o d a l ( ) } , 2 0 ) , W 3 ( ( ) = > { l ( ! 0 ) } , 2 2 0 ) , y . j s x ( c l . d i a l o g , { r e f : q , c l a s s N a m e : J e ( l Y e , S 0 . c l a s s N a m e s . f u l l W i d t h ) , l a y o u t : ! 0 , i n i t i a l : { [ T 2 ] : " 0 p x " , [ R 2 ] : " 5 % " } , a n i m a t e : { [ T 2 ] : " 3 p x " , [ R 2 ] : " 6 0 % " } , e x i t : { [ T 2 ] : " 0 p x " , [ R 2 ] : " 0 % " , t r a n s i t i o n : { d u r a t i o n : . 1 } } , o n C l i c k : Q = > { Q . s t o p P r o p a g a t i o n ( ) , Q . t a r g e t ? . n o d e N a m e ? . t o U p p e r C a s e ( ) = = = " D I A L O G " & & q . c u r r e n t ? . c l o s e ( ) } , o n D o u b l e C l i c k : c n , o n P o i n t e r D o w n : c n , o n C l o s e : Q = > { Q . s t o p P r o p a g a t i o n ( ) , G ( ) } , c h i l d r e n : y . j s x ( S 0 , { f o r w a r d P r o p s : ! 0 , r e m o v e S c r o l l B a r : ! 1 , c h i l d r e n : y . j s x s ( c l . d i v , { l a y o u t : ! 0 , l a y o u t R o o t : ! 0 , d r a g : ! 0 , d r a g C o n t r o l s : T , d r a g E l a s t i c : 0 , d r a g M o m e n t u m : ! 1 , d r a g L i s t e n e r : ! 1 , " d a t a - l i k e c 4 - c o l o r " : b ? . c o l o r ? ? x . c o l o r , c l a s s N a m e : s Y e , i n i t i a l : { t o p : j , l e f t : M , w i d t h : A , h e i g h t : D , o p a c i t y : 0 , o r i g i n X : L , o r i g i n Y : Y , s c a l e : M a t h . m a x ( $ , . 6 5 ) } , a n i m a t e : { o p a c i t y : 1 , s c a l e : 1 } , e x i t : { o p a c i t y : 0 , s c a l e : . 9 , t r a n s l a t e Y : - 1 0 , t r a n s i t i o n : { d u r a t i o n : . 1 } } , s t y l e : { w i d t h : O , h e i g h t : U } , c h i l d r e n : [ y . j s x s ( " d i v " , { c l a s s N a m e : c Y e , o n P o i n t e r D o w n : Q = > T . s t a r t ( Q ) , c h i l d r e n : [ y . j s x s ( x n , { a l i g n I t e m s : " s t a r t " , j u s t i f y : " s p a c e - b e t w e e n " , g a p : " s m " , m b : " s m " , f l e x W r a p : " n o w r a p " , c h i l d r e n : [ y . j s x s ( x n , { a l i g n I t e m s : " s t a r t " , g a p : " s m " , s t y l e : { c u r s o r : " d e f a u l t " } , f l e x W r a p : " n o w r a p " , c h i l d r e n : [ J , y . j s x s ( " d i v " , { c h i l d r e n : [ y . j s x ( w t , { c o m p o n e n t : " d i v " , c l a s s N a m e : u Y e , c h i l d r e n : x . t i t l e } ) , F & & y . j s x ( w t , { c o m p o n e n t : " d i v " , c : " d i m m e d " , f z : " s m " , f w : 5 0 0 , l h : 1 . 3 , l i n e C l a m p : 1 , c h i l d r e n : F } ) ] } ) ] } ) , y . j s x ( K d , { s i z e : " l g " , o n C l i c k : Q = > { Q . s t o p P r o p a g a t i o n ( ) , G ( ) } } ) ] } ) , y . j s x s ( x n , { a l i g n I t e m s : " b a s e l i n e " , g a p : " s m " , f l e x W r a p : " n o w r a p " , c h i l d r e n : [ y . j s x s ( " d i v " , { c h i l d r e n : [ y . j s x ( c e e , { c h i l d r e n : " k i n d " } ) , y . j s x ( X s , { r a d i u s : " s m " , s i z e : " s m " , f w : 6 0 0 , c o l o r : " g r a y " , s t y l e : { c u r s o r : " p o i n t e r " } , o n C l i c k : Q = > { Q . s t o p P r o p a g a t i o n ( ) , f . o p e n S e a r c h ( ` k i n d : $ { x . k i n d } ` ) } , c h i l d r e n : x . k i n d } ) ] } ) , y . j s x s ( " d i v " , { s t y l e : { f l e x : 1 } , c h i l d r e n : [ y . j s x ( c e e , { c h i l d r e n : " t a g s " } ) , y . j s x s ( M f , { g a p : 4 , f l e x : 1 , m t : 6 , w r a p : " w r a p " , c h i l d r e n : [ x . t a g s . m a p ( Q = > y . j s x ( C 2 , { t a g : Q , c u r s o r : " p o i n t e r " , o n C l i c k : z = > { z . s t o p P r o p a g a t i o n ( ) , f . o p e n S e a r c h ( ` # $ { Q } ` ) } } , Q ) ) , x . t a g s . l e n g t h = = = 0 & & y . j s x ( X s , { r a d i u s : " s m " , s i z e : " s m " , f w : 6 0 0 , c o l o r : " g r a y " , c h i l d r e n : " — " } ) ] } ) ] } ) , y . j s x s ( T w , { s t y l e : { a l i g n S e l f : " f l e x - s t a r t " } , c h i l d r e n : [ _ & & y . j s x ( o r , { c o m p o n e n t : " a " , h r e f : _ . u r l , t a r g e t : " _ b l a n k " , s i z e : " l g " , v a r i a n t : " d e f a u l t " , r a d i u s : " s m " , c h i l d r e n : y . j s x ( a e e , { s t r o k e : 1 . 6 , s t y l e : { w i d t h : " 6 5 % " } } ) } ) , y . j s x ( H W e , { f e a t u r e : " V s c o d e " , c h i l d r e n : y . j s x ( s e e , { l a b e l : " O p e n s o u r c e " , c h i l d r e n : y . j s x ( o r , { s i z e : " l g " , v a r i a n t : " d e f a u l t " , r a d i u s : " s m " , o n C l i c k : Q = > { Q . s t o p P r o p a g a t i o n
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const lKe=[["path",{d:"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0",key:"svg-0"}],["path",{d:"M21 21l-6 -6",key:"svg-1"}]],QT=yt("outline","search","Search",lKe);function Cee(e){return e.match(/ ^ ( k | ki | kin | kind | kind : ) $ / ) != null } const sKe = [ "#" , "kind:" ] , cKe = E . memo ( ( ) => { const e = Su ( ) , r = Ho ( ) , n = E . useRef ( null ) , { ref : o , focused : a } = DPe ( ) , [ i , l ] = NXe ( ) , s = tW ( { scrollBehavior : "smooth" , loop : ! 1 } ) ; xf ( "keydown" , d => { try { ! a && ( d . key === "Backspace" || d . key . startsWith ( "Arrow" ) || d . key . match ( new RegExp ( "^\\p{L}$" , "u" ) ) ) && Oy ( n . current ) } catch ( p ) { console . warn ( p ) } } ) ; let c = [ ] , u = ! 1 ; switch ( ! 0 ) { case i . startsWith ( "#" ) : { const d = i . toLocaleLowerCase ( ) . slice ( 1 ) , p = r . tags . filter ( f => f . toLocaleLowerCase ( ) . includes ( d ) ) ; p . length === 0 ? ( u = ! 1 , c = [ y . jsx ( L0 , { children : "No tags found" } , "empty-tags" ) ] ) : ( u = r . tags . some ( f => f . toLocaleLowerCase ( ) === d ) , c = p . map ( f => y . jsxs ( z0 , { value : ` # ${ f } ` , children : [ y . jsx ( wt , { component : "span" , opacity : . 5 , mr : 1 , fz : "sm" , children : "#" } ) , f ] } , f ) ) ) ; break } case i . startsWith ( "kind:" ) : case Cee ( i ) : { const d = i . length > 5 ? i . slice ( 5 ) . toLocaleLowerCase ( ) : "" ; let p = VE ( r . specification . elements ) ; d && ( p = p . filter ( f => f . toLocaleLowerCase ( ) . includes ( d ) ) ) , p . length === 0 ? ( u = ! 1 , c = [ y . jsx ( L0 , { children : "No kinds found" } , "empty-kinds" ) ] ) : ( u = p . some ( f => f . toLocaleLowerCase ( ) === d ) , c = p . map ( f => y . jsxs ( z0 , { value : ` kind: ${ f } ` , children : [ y . jsx ( wt , { component : "span" , opacity : . 5 , mr : 1 , fz : "sm" , children : "kind:" } ) , f ] } , f ) ) ) ; break } } return y . jsxs ( Kn , { onOptionSubmit : d => { l ( d ) , s . resetSelectedOption ( ) , sKe . includes ( d ) || ( s . closeDropdown ( ) , setTimeout ( ( ) => { X2 ( n . current ) } , 350 ) ) } , width : "max-content" , position : "bottom-start" , shadow : "md" , offset : { mainAxis : 4 , crossAxis : 50 } , store : s , withinPortal : ! 1 , children : [ y . jsx ( c7 , { children : y . jsx ( Na , { ref : Nr ( n , o ) , placeholder : "Search by title, description or start with # or kind:" , autoFocus : ! 0 , "data-autofocus" : ! 0 , "data-likec4-search-input" : ! 0 , tabIndex : 0 , classNames : { input : rKe } , size : "lg" , value : i , leftSection : y . jsx ( QT , { style : { width : Ae ( 20 ) } , stroke : 2 } ) , rightSection : y . jsx ( Na . ClearButton , { onClick : d => { d . stopPropagation ( ) ; const p = e . getSnapshot ( ) . context . openedWithSearch ; i === "" || i === p ? e . send ( { type : "close" } ) : l ( "" ) } } ) , rightSectionPointerEvents : "auto" , onChange : d => { l ( d . currentTarget . value ) , s . openDropdown ( ) , s . updateSelectedOptionIndex ( ) } , onClick : ( ) => s . openDropdown ( ) , onFocus : ( ) => s . openDropdown ( ) , onBlur : ( ) => s . closeDropdown ( ) , onKeyDownCapture : d => { if ( d . key === "Tab" ) { switch ( ! 0 ) { case s . getSelectedOptionIndex ( ) >= 0 : return s . clickSelectedOption ( ) , bi ( d ) ; case c . length === 1 : return s . selectFirstOption ( ) && s . clickSelectedOption ( ) , bi ( d ) ; case Cee ( i ) : return l ( "kind:" ) , bi ( d ) } return } if ( d . key === "Backspace" && s . dropdownOpened ) { if ( i === "kind:" ) return l ( "" ) , s . resetSelectedOption ( ) , bi ( d ) ; if ( i . startsWith ( "kind:" ) && u ) return l ( "kind:" ) , s . resetSelectedOption ( ) , bi ( d ) ; if ( i . startsWith ( "#" ) && u ) return l ( "#" ) , s . resetSelectedOption ( ) , bi ( d ) } if ( d . key === "Escape" && s . dropdownOpened && c . length > 0 ) { bi ( d ) , s . closeDropdown ( ) ; return } if ( d . key === "ArrowUp" && s . dropdownOpened && i === "" && s . getSelectedOptionIndex ( ) === 0 ) { s . closeDropdown ( ) , bi ( d ) ; return } if ( d . key === "ArrowDown" && ( ! s . dropdownOpened || c . length === 0 || u || i === "" && s . getSelectedOptionIndex ( ) === c . length - 1 ) ) { s . closeDropdown ( ) , bi ( d ) , X2 ( n . current ) ; return } } } ) } ) , y . jsx ( Mw , { hidden : c . length === 0 , style : { minWidth : 300 } , children : y . jsx ( Ow , { children : y . jsx ( ta , { mah : "min(322px, calc(100cqh - 50px))" , type : "scroll" , children : c } ) } ) } ) ] } ) } ) , uKe = ye ( { backgroundColor : "[rgb(34 34 34 / var(--_opacity, 95%))]" , _light : { backgroundColor : "[rgb(250 250 250 / var(--_opacity, 95%))]" } , backdropFilter : "auto" , backdropBlur : "var(--_blur, 10px)" } ) , dKe = ye ( { width : "100%" , height : "100%" , maxHeight : "100vh" , overflow : "hidden" , display : "flex" , flexDirection : "column" , justifyContent : "stretch" , gap : "sm" , paddingTop : "[20px]" , paddingLeft : "md" , paddingRight : "md" , paddingBottom : "sm" , background : "[transparent]" } ) , pKe = e => ! e . matches ( "inactive" ) ; function hKe ( { searchActorRef : e } ) { const r = wn ( e , pKe ) , n = ( ) => { e . send ( { type : "open" } ) } , o = it ( ( ) => { e . send ( { type : "close" } ) } ) ; return RPe ( [ [ "mod+k" , n , { preventDefault : ! 0 } ] , [ "mod+f" , n , { preventDefault : ! 0 } ] ] ) , y . jsx ( RXe , { value : e , children : y . jsx ( hp . Overlays , { children : y . jsx ( B7 , { FallbackComponent : j7 , onReset : o , children : y . jsx ( Pa , { children : r && y . jsx ( My , { fullscreen : ! 0 , withBa
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const PKe=[["path",{d:"M5 12l14 0",key:"svg-0"}],["path",{d:"M5 12l6 6",key:"svg-1"}],["path",{d:"M5 12l6 -6",key:"svg-2"}]],$Ke=yt("outline","arrow-left","ArrowLeft",PKe),MKe=()=>{const e=Wt(),{hasStepBack:r,hasStepForward:n}=Da(o=>({hasStepBack:o.navigationHistory.currentIndex>0,hasStepForward:o.navigationHistory.currentIndex<o.navigationHistory.history.length-1}));return y.jsxs(Qr,{layout:"position",className:qo({gap:"0.5"}),children:[y.jsx(gp,{disabled:!r,onClick:o=>{o.stopPropagation(),e.navigate("back")},children:y.jsx($Ke,{size:14})}),y.jsx(gp,{disabled:!n,onClick:o=>{o.stopPropagation(),e.navigate("forward")},children:y.jsx(ym,{size:14})})]})};/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / c o n s t O K e = [ [ " p a t h " , { d : " M 9 1 5 l 6 - 6 " , k e y : " s v g - 0 " } ] , [ " p a t h " , { d : " M 1 1 6 l . 4 6 3 - . 5 3 6 a 5 5 0 0 1 7 . 0 7 1 7 . 0 7 2 l - . 5 3 4 . 4 6 4 " , k e y : " s v g - 1 " } ] , [ " p a t h " , { d : " M 1 3 1 8 l - . 3 9 7 . 5 3 4 a 5 . 0 6 8 5 . 0 6 8 0 0 1 - 7 . 1 2 7 0 a 4 . 9 7 2 4 . 9 7 2 0 0 1 0 - 7 . 0 7 1 l . 5 2 4 - . 4 6 3 " , k e y : " s v g - 2 " } ] ] , I K e = y t ( " o u t l i n e " , " l i n k " , " L i n k " , O K e ) , L K e = ( { c o n t e x t : e } ) = > { c o n s t r = e . v i e w M o d e l ; r e t u r n { i d : r . i d , t i t l e : r . t i t l e O r U n t i t l e d , d e s c r i p t i o n : r . d e s c r i p t i o n , t a g s : r . t a g s , l i n k s : r . l i n k s } } , z K e = e = > { c o n s t [ r , n ] = E . u s e S t a t e ( ! 1 ) , o = P e e ( L K e ) , a = w m ( ) ; r e t u r n y . j s x s ( m r , { p o s i t i o n : " b o t t o m - e n d " , s h a d o w : " x l " , c l i c k O u t s i d e E v e n t s : [ " p o i n t e r d o w n " , " m o u s e d o w n " , " c l i c k " ] , o f f s e t : { m a i n A x i s : 4 } , o p e n e d : r , o n C h a n g e : n , . . . a , . . . e , c h i l d r e n : [ y . j s x ( B K e , { l i n k s C o u n t : o . l i n k s . l e n g t h , o n O p e n : ( ) = > n ( ! 0 ) } ) , r & & y . j s x ( j K e , { d a t a : o , o n C l o s e : ( ) = > n ( ! 1 ) } ) ] } ) } , B K e = ( { l i n k s C o u n t : e , o n O p e n : r } ) = > y . j s x ( m r . T a r g e t , { c h i l d r e n : y . j s x s ( P r , { c o m p o n e n t : f l , l a y o u t : " p o s i t i o n " , w h i l e T a p : { s c a l e : . 9 5 , t r a n s l a t e Y : 1 } , o n C l i c k : n = > { n . s t o p P r o p a g a t i o n ( ) , r ( ) } , c l a s s N a m e : J e ( " g r o u p " , q o ( { g a p : " 2 " , p a d d i n g I n l i n e : " 2 " , p a d d i n g B l o c k : " 1 " , r o u n d e d : " s m " , u s e r S e l e c t : " n o n e " , c u r s o r : " p o i n t e r " , c o l o r : { b a s e : " l i k e c 4 . p a n e l . a c t i o n - i c o n . t e x t " , _ h o v e r : " l i k e c 4 . p a n e l . a c t i o n - i c o n . t e x t . h o v e r " } , b a c k g r o u n d C o l o r : { _ h o v e r : " l i k e c 4 . p a n e l . a c t i o n - i c o n . b g . h o v e r " } , d i s p l a y : { b a s e : " n o n e " , " @ / x s " : " f l e x " } } ) , " " ) , c h i l d r e n : [ y . j s x ( j T , { s i z e : 1 6 , s t r o k e : 1 . 8 } ) , e > 0 & & y . j s x s ( x n , { g a p : " [ 1 p x ] " , c h i l d r e n : [ y . j s x ( I K e , { s i z e : 1 4 , s t r o k e : 2 } ) , y . j s x ( U r , { c s s : { f o n t S i z e : " 1 1 p x " , f o n t W e i g h t : 6 0 0 , l i n e H e i g h t : 1 , o p a c i t y : . 8 } , c h i l d r e n : e } ) ] } ) ] } ) } ) , O e e = Q s ( " d i v " , { b a s e : { f o n t S i z e : " x s " , c o l o r : " m a n t i n e . c o l o r s . d i m m e d " , f o n t W e i g h t : 5 0 0 , u s e r S e l e c t : " n o n e " , m b : " x x s " } } ) , j K e = ( { d a t a : { i d : e , t i t l e : r , d e s c r i p t i o n : n , t a g s : o , l i n k s : a } , o n C l o s e : i } ) = > { c o n s t l = W t ( ) ; r e t u r n i l ( " p a n e C l i c k " , i ) , i l ( " n o d e C l i c k " , i ) , y . j s x s ( m r . D r o p d o w n , { c l a s s N a m e : J e ( " n o w h e e l n o p a n n o d r a g " , G 0 ( { m a r g i n : " x s " , l a y e r S t y l e : " l i k e c 4 . d r o p d o w n " , g a p : " m d " , p a d d i n g : " m d " , p a d d i n g B o t t o m : " l g " , p o i n t e r E v e n t s : " a l l " , m a x W i d t h : " c a l c ( 1 0 0 c q w - 5 2 p x ) " , m i n W i d t h : " 2 0 0 p x " , m a x H e i g h t : " c a l c ( 1 0 0 c q h - 1 0 0 p x ) " , w i d t h : " m a x - c o n t e n t " , c u r s o r : " d e f a u l t " , o v e r f l o w : " a u t o " , o v e r s c r o l l B e h a v i o r : " c o n t a i n " , " @ / s m " : { m i n W i d t h : 4 0 0 , m a x W i d t h : 5 5 0 } , " @ / l g " : { m a x W i d t h : 7 0 0 } } ) ) , c h i l d r e n : [ y . j s x s ( " s e c t i o n " , { c h i l d r e n : [ y . j s x ( w t , { c o m p o n e n t : " d i v " , f w : 5 0 0 , s i z e : " x l " , l h : " s m " , c h i l d r e n : r } ) , y . j s x s ( x n , { a l i g n I t e m s : " f l e x - s t a r t " , m t : " 1 " , c h i l d r e n : [ y . j s x ( F K e , { l a b e l : " i d " , v a l u e : e } ) , y . j s x ( x n , { g a p : " x s " , f l e x W r a p : " w r a p " , c h i l d r e n : o . m a p ( s = > y . j s x ( C 2 , { t a g : s , c u r s o r : " p o i n t e r " , o n C l i c k : c = > { c . s t o p P r o p a g a t i o n ( ) , l . o p e n S e a r c h ( ` # $ { s } ` ) } } , s ) ) } ) ] } ) ] } ) , a . l e n g t h > 0 & & y . j s x s ( " s e c t i o n " , { c l a s s N a m e : q o ( { a l i g n I t e m s : " b a s e l i n e " } ) , c h i l d r e n : [ y . j s x ( O e e , { c h i l d r e n : " L i n k s " } ) , y . j s x ( x n , { g a p : " x s " , f l e x W r a p : " w r a p " , c h i l d r e n : a . m a p ( ( s , c ) = > y . j s x ( B C , { v a l u e : s } , ` $ { c } - $ { s . u r l } ` ) ) } ) ] } ) , n . i s E m p t y & & y . j s x ( w t , { c o m p o n e n t : " d i v " , f w : 5 0 0 , s i z e : " x s " , c : " d i m m e d " , s t y l e : { u s e r S e l e c t : " n o n e " } , c h i l d r e n : " N o d e s c r i p t i o n " } ) , n . n o n E m p t y & & y . j s x s ( " s e c t i o n " , { c h i l d r e n : [ y . j s x ( O e e , { c h i l d r e n : " D e s c r i p t i o n " } ) , y . j s x ( m p , { v a l u e : n , f o n t S i z e : " s m " , e m p t y T e x t : " N o d e s c r i p t i o n " , c l a s s N a m e : y e ( { u s e r S e l e c t : " a l l " } ) } ) ] } ) ] } ) } , F K e = ( { l a b e l : e , v a l u e : r } ) = > y . j s x s ( x n , { g a p : " 0 . 5 " , c h i l d r e n : [ y . j s x ( H K e , { c h i l d r e n : e } ) , y . j s x ( X s , { s i z e : " s m " , r a d i u s : " s m " , v a r i a n t : " l i g h t " , c o l o r : " g r a y " , t t : " n o n e " , f w : 5 0 0 , c l a s s N a m e s : { r o o t : y e ( { w i d t h : " m a x - c o n t e n t " , o v e r f l o w : " v i s i b l e " , p x : " 1 " , c o l o r : { _ d a r k : " m a n t i n e . c o l o r s . g r a y [ 4 ] " , _ l i g h t : " m a n t i n e . c o l o r s . g r a y [ 8 ] " } } ) , l a b e l : y e ( { o v e r f l o w : " v i s i b l e " } ) , s e c t i o n : y e ( { o p a c i t y : . 5 , u s e r S e l e c t : " n o n e " , m a r g i n I n l i n e E n d : " 0 . 5 " } ) } , c h i l d r e n : r } ) ] } ) , H K e = Q s ( " d i v " , { b a s e : { c o l o r : " m a n t i n e . c o l o r s . d i m m e d " , f o n t W e i g h t : 5 0 0 , f o n t S i z e : " x x s " , u s e r S e l e c t : " n o n e " } } ) , q K e = ( ) = > { c o n s t e = F 2 ( ) , { e n a b l e V s c o d e : r } = w r ( ) , { o n O p e n S o u r c e : n } = l c ( ) ; r e t u r n r ? y . j s x ( $ e e , { l a b e l : " O p e n V i e w S o u r c e " , c h i l d r e n : y . j s x ( g p , { o n C l i c k : o = > { o . s t o p P r o p a g a t i o n ( ) , n ? . ( { v i e w : e } ) } , c h i l d r e n : y . j s x ( f m , { s t y l e : { w i d t h : " 6 0 % " , h e i g h t : " 6 0 % " } } ) } ) } ) : n u l l } ; / * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const UKe=[["path",{d:"M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z",key:"svg-0"}],["path",{d:"M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0",key:"svg-1"}],["path",{d:"M8 11v-4a4 4 0 1 1 8 0v4",key:"svg-2"}]],VKe=yt("outline","lock","Lock",UKe);/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const YKe=[["path",{d:"M3 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z",key:"svg-0"}],["path",{d:"M9 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0",key:"svg-1"}],["path",{d:"M13 11v-4a4 4 0 1 1 8 0v4",key:"svg-2"}]],WKe=yt("outline","lock-open-2","LockOpen2",YKe),GKe=e=>({visible:e.features.enableReadOnly!==!0,isReadOnly:e.toggledFeatures.enableReadOnly??e.features.enableReadOnly}),XKe=()=>{const{visible:e,isReadOnly:r}=Da(GKe),n=Wt();return e?y.jsxs(Pr,{component:fl,layout:"position",onClick:o=>{o.stopPropagation(),n.toggleFeature("ReadOnly")},whileTap:{translateY:1},className:Je("group",qo({gap:"0.5",paddingInline:"xxs",paddingBlock:"xxs",rounded:"sm",userSelect:"none",cursor:"pointer",color:{base:"likec4.panel.action-icon.text",_hover:"likec4.panel.action-icon.text.hover"},backgroundColor:{_hover:"likec4.panel.action-icon.bg.hover"}})),children:[r?y.jsx(VKe,{size:14,stroke:2}):y.jsx(WKe,{size:14,stroke:2}),r&&y.jsx(Qr,{className:ye({fontSize:"11px",fontWeight:600,lineHeight:1,opacity:.8}),children:"Unlock"})]}):null};/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / c o n s t K K e = [ [ " p a t h " , { d : " M 6 4 v 1 6 a 1 1 0 0 0 1 . 5 2 4 . 8 5 2 l 1 3 - 8 a 1 1 0 0 0 0 - 1 . 7 0 4 l - 1 3 - 8 a 1 1 0 0 0 - 1 . 5 2 4 . 8 5 2 z " , k e y : " s v g - 0 " } ] ] , Z K e = y t ( " f i l l e d " , " p l a y e r - p l a y - f i l l e d " , " P l a y e r P l a y F i l l e d " , K K e ) , I e e = E . f o r w a r d R e f ( ( e , r ) = > y . j s x ( Z n , { v a r i a n t : " f i l l e d " , s i z e : " x s " , f w : " 5 0 0 " , . . . e , r e f : r , c o m p o n e n t : f l , l a y o u t I d : " t r i g g e r - d y n a m i c - w a l k t h r o u g h " , c l a s s N a m e : y e ( { f l e x S h r i n k : 0 } ) } ) ) ; f u n c t i o n Q K e ( ) { c o n s t e = W t ( ) , r = I y ( ) ; r e t u r n y . j s x ( $ e e , { l a b e l : " S t a r t D y n a m i c V i e w W a l k t h r o u g h " , c h i l d r e n : y . j s x ( I e e , { o n C l i c k : n = > { n . s t o p P r o p a g a t i o n ( ) , r . c l o s e D r o p d o w n ( ) , e . s t a r t W a l k t h r o u g h ( ) } , s i z e : " c o m p a c t - x s " , h : 2 6 , c l a s s N a m e s : { l a b e l : y e ( { d i s p l a y : { b a s e : " n o n e " , " @ / m d " : " [ i n h e r i t ] " } } ) , s e c t i o n : y e ( { m a r g i n I n l i n e S t a r t : { b a s e : " 0 " , " @ / m d " : " 2 " } } ) } , r i g h t S e c t i o n : y . j s x ( Z K e , { s i z e : 1 0 } ) , c h i l d r e n : " S t a r t " } ) } ) } f u n c t i o n J K e ( { v a l u e : e , o n C h a n g e : r } ) { r e t u r n y . j s x ( Q r , { l a y o u t : " p o s i t i o n " , c h i l d r e n : y . j s x ( q 0 , { s i z e : " x s " , v a l u e : e , c o m p o n e n t : Q r , o n C h a n g e : n = > { n t ( n = = = " d i a g r a m " | | n = = = " s e q u e n c e " , " I n v a l i d d y n a m i c v i e w v a r i a n t " ) , r ( n ) } , c l a s s N a m e s : { l a b e l : y e ( { f o n t S i z e : " x x s " } ) } , d a t a : [ { v a l u e : " d i a g r a m " , l a b e l : " D i a g r a m " } , { v a l u e : " s e q u e n c e " , l a b e l : " S e q u e n c e " } ] } ) } ) } f u n c t i o n e Z e ( ) { c o n s t e = D a ( n = > n . d y n a m i c V i e w V a r i a n t ) , r = W t ( ) ; r e t u r n y . j s x s ( y . F r a g m e n t , { c h i l d r e n : [ y . j s x ( J K e , { v a l u e : e , o n C h a n g e : n = > { r . s w i t c h D y n a m i c V i e w V a r i a n t ( n ) } } , " d y n a m i c - v i e w - m o d e - s w i t c h e r " ) , y . j s x ( Q K e , { } , " t r i g g e r - d y n a m i c - w a l k t h r o u g h " ) ] } ) } f u n c t i o n t Z e ( ) { c o n s t e = W t ( ) , r = o f ( ) ; r e t u r n y . j s x s ( P r , { c o m p o n e n t : f l , l a y o u t : " p o s i t i o n " , o n C l i c k : n = > { n . s t o p P r o p a g a t i o n ( ) , e . o p e n S e a r c h ( ) } , w h i l e T a p : { s c a l e : . 9 5 , t r a n s l a t e Y : 1 } , c l a s s N a m e : J e ( " g r o u p " , q o ( { g a p : " x x s " , p a d d i n g I n l i n e : " s m " , p a d d i n g B l o c k : " x x s " , r o u n d e d : " s m " , u s e r S e l e c t : " n o n e " , c u r s o r : " p o i n t e r " , c o l o r : { b a s e : " l i k e c 4 . p a n e l . a c t i o n - i c o n . t e x t " , _ h o v e r : " l i k e c 4 . p a n e l . a c t i o n - i c o n . t e x t . h o v e r " } , b a c k g r o u n d C o l o r : { b a s e : " l i k e c 4 . p a n e l . a c t i o n - i c o n . b g " , _ h o v e r : " l i k e c 4 . p a n e l . a c t i o n - i c o n . b g . h o v e r " } , d i s p l a y : { b a s e : " n o n e " , " @ / m d " : " f l e x " } } ) ) , c h i l d r e n : [ y . j s x ( Q T , { s i z e : 1 4 , s t r o k e : 2 . 5 } ) , y . j s x ( U r , { c s s : { f o n t S i z e : " 1 1 p x " , f o n t W e i g h t : 6 0 0 , l i n e H e i g h t : 1 , o p a c i t y : . 8 , w h i t e S p a c e : " n o w r a p " } , c h i l d r e n : r ? " ⌘ + K " : " C t r l + K " } ) ] } ) } c o n s t r Z e = ( { c o n t e x t : e } ) = > { c o n s t r = e . v i e w M o d e l . f o l d e r ; r e t u r n { f o l d e r s : r . i s R o o t ? [ ] : r . b r e a d c r u m b s . m a p ( n = > ( { f o l d e r P a t h : n . p a t h , t i t l e : n . t i t l e } ) ) , v i e w I d : e . v i e w M o d e l . i d , v i e w T i t l e : e . v i e w M o d e l . t i t l e O r U n t i t l e d , i s D y n a m i c V i e w : e . v i e w M o d e l . i s D y n a m i c V i e w ( ) } } , n Z e = ( ) = > { c o n s t e = I y ( ) , { e n a b l e S e a r c h : r , e n a b l e N a v i g a t i o n B u t t o n s : n , e n a b l e D y n a m i c V i e w W a l k t h r o u g h : o } = w r ( ) , { f o l d e r s : a , v i e w T i t l e : i , i s D y n a m i c V i e w : l } = w n ( e . a c t o r R e f , r Z e , u t ) , s = a . f l a t M a p ( ( { f o l d e r P a t h : u , t i t l e : d } , p ) = > [ y . j s x ( P r , { c o m p o n e n t : f l , c l a s s N a m e : J e ( Q 2 ( { d i m m e d : ! 0 , t r u n c a t e : ! 0 } ) , " m a n t i n e - a c t i v e " , y e ( { u s e r S e l e c t : " n o n e " , m a x W i d t h : " 2 0 0 p x " , d i s p l a y : { b a s e : " n o n e " , " @ / m d " : " b l o c k " } } ) ) , t i t l e : d , o n M o u s e E n t e r : ( ) = > e . s e n d ( { t y p e : " b r e a d c r u m b s . m o u s e E n t e r . f o l d e r " , f o l d e r P a t h : u } ) , o n M o u s e L e a v e : ( ) = > e . s e n d ( { t y p e : " b r e a d c r u m b s . m o u s e L e a v e . f o l d e r " , f o l d e r P a t h : u } ) , o n C l i c k : f = > { f . s t o p P r o p a g a t i o n ( ) , e . s e n d ( { t y p e : " b r e a d c r u m b s . c l i c k . f o l d e r " , f o l d e r P a t h : u } ) } , c h i l d r e n : d } , u ) , y . j s x ( M e e , { } , ` s e p a r a t o r - $ { p } ` ) ] ) , c = y . j s x ( P r , { c o m p o n e n t : f l , c l a s s N a m e : J e ( " m a n t i n e - a c t i v e " , Q 2 ( { t r u n c a t e : ! 0 } ) , y e ( { u s e r S e l e c t : " n o n e " } ) ) , t i t l e : i , o n M o u s e E n t e r : ( ) = > e . s e n d ( { t y p e : " b r e a d c r u m b s . m o u s e E n t e r . v i e w t i t l e " } ) , o n M o u s e L e a v e : ( ) = > e . s e n d ( { t y p e : " b r e a d c r u m b s . m o u s e L e a v e . v i e w t i t l e " } ) , o n C l i c k : u = > { u . s t o p P r o p a g a t i o n ( ) , e . s e n d ( { t y p e : " b r e a d c r u m b s . c l i c k . v i e w t i t l e " } ) } , c h i l d r e n : i } , " v i e w - t i t l e " ) ; r e t u r n y . j s x s ( P a , { p r o p a g a t e : ! 0 , c h i l d r e n : [ y . j s x ( D K e , { } , " b u r g e r - b u t t o n " ) , n & & y . j s x ( M K e , { } , " n a v - b u t t o n s " ) , y . j s x s ( Q r , { l a y o u t : " p o s i t i o n " , c l a s s N a m e : q o ( { g a p : " 1 " , f l e x S h r i n k : 1 , f l e x G r o w : 1 , o v e r f l o w : " h i d d e n " } ) , c h i l d r e n : [ s , c ] } , " b r e a d c r u m b s " ) , y . j s x s ( Q r , { l a y o u t : " p o s i t i o n " , c l a s s N a m e : q o ( { g a p : " 0 . 5 " , f l e x G r o w : 0 , _ e m p t y : { d i s p l a y : " n o n e " } } ) , c h i l d r e n : [ y . j s x ( z K e , { o n O p e n : ( ) = > e . c l o s e D r o p d o w n ( ) } ) , y . j s x ( q K e , { } ) , y . j s x ( X K e , { } ) ] } , " a c t i o n s " ) , o & & l & & y . j s x ( e Z e , { } , " d y n a m i c - v i e w - c o n t r o l s " ) , r & & y . j s x ( t Z e , { } , " s e a r c h - c o n t r o l " ) ] } ) } , n R = E . f o r w a r d R e f ( ( { c l a s s N a m e : e , t r u n c a t e L a b e l : r = ! 0 , . . . n } , o ) = > y . j s x ( S 7 , { . . . n , c o m p o n e n t : " b u t t o n " , c l a s s N a m e s : F V e ( { t r u n c a t e L a b e l : r } ) , c l a s s N a m e : J e ( " g r o u p " , " m a n t i n e - a c t i v e " , e ) , r e f : o } ) ) ; n R . d i s p l a y N a m e = " N a v i g a t i o n L i n k " ; c o n s t o Z e = E . c r e a t e C o n t e x t ( n u l l ) , a Z e = [ ] , i Z e = ( ) = > { } , l Z e = { p r o j e c t s : a Z e , o n P r o j e c t C h a n g e : i Z e } ; f u n c t i o n s Z e ( ) { r e t u r n E . u s e C o n t e x t ( o Z e ) ? ? l Z e } f u n c t i o n c Z e ( ) { c o n s t e = E . u s e C o n t e x t (
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const uZe=[["path",{d:"M6 9l6 6l6 -6",key:"svg-0"}]],dZe=yt("outline","chevron-down","ChevronDown",uZe);function pZe(e){const{projects:r,onProjectChange:n}=sZe(),o=cZe();return r.length<=1?null:y.jsxs(xn,{gap:"0.5",alignItems:"baseline",children:[y.jsx(Ur,{css:{fontWeight:"400",fontSize:"xxs",color:"mantine.colors.dimmed",userSelect:"none"},children:"Project"}),y.jsxs(ho,{withinPortal:!1,shadow:"md",position:"bottom-start",offset:{mainAxis:2},children:[y.jsx(Fw,{children:y.jsx(Zn,{tabIndex:-1,autoFocus:!1,variant:"subtle",size:"compact-xs",color:"gray",classNames:{root:ye({fontWeight:"400",fontSize:"xxs",height:"auto",lineHeight:1.1,color:{_light:"mantine.colors.gray[9]"}}),section:ye({'&:is([data-position="right"])':{marginInlineStart:"1"}})},rightSection:y.jsx(dZe,{opacity:.5,size:12,stroke:1.5}),...e,children:o})}),y.jsx(F0,{children:r.map(({id:a,title:i})=>y.jsx(H0,{onClick:l=>{if(o===a){l.stopPropagation();return}n(a)},children:i??a},a))})]})]})}/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const hZe=[["path",{d:"M10.52 2.614a2.095 2.095 0 0 1 2.835 -.117l.126 .117l7.905 7.905c.777 .777 .816 2.013 .117 2.836l-.117 .126l-7.905 7.905a2.094 2.094 0 0 1 -2.836 .117l-.126 -.117l-7.907 -7.906a2.096 2.096 0 0 1 -.115 -2.835l.117 -.126l7.905 -7.905zm5.969 9.535l.01 -.116l-.003 -.12l-.016 -.114l-.03 -.11l-.044 -.112l-.052 -.098l-.076 -.105l-.07 -.081l-3.5 -3.5l-.095 -.083a1 1 0 0 0 -1.226 0l-.094 .083l-.083 .094a1 1 0 0 0 0 1.226l.083 .094l1.792 1.793h-5.085l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h5.085l-1.792 1.793l-.083 .094a1 1 0 0 0 1.403 1.403l.094 -.083l3.5 -3.5l.097 -.112l.05 -.074l.037 -.067l.05 -.112l.023 -.076l.025 -.117z",key:"svg-0"}]],fZe=yt("filled","direction-sign-filled","DirectionSignFilled",hZe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const mZe=[["path",{d:"M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z",key:"svg-0"}]],gZe=yt("filled","star-filled","StarFilled",mZe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / c o n s t y Z e = [ [ " p a t h " , { d : " M 9 3 a 1 1 0 0 1 . 6 0 8 . 2 0 6 l . 1 . 0 8 7 l 2 . 7 0 6 2 . 7 0 7 h 6 . 5 8 6 a 3 3 0 0 1 2 . 9 9 5 2 . 8 2 4 l . 0 0 5 . 1 7 6 v 8 a 3 3 0 0 1 - 2 . 8 2 4 2 . 9 9 5 l - . 1 7 6 . 0 0 5 h - 1 4 a 3 3 0 0 1 - 2 . 9 9 5 - 2 . 8 2 4 l - . 0 0 5 - . 1 7 6 v - 1 1 a 3 3 0 0 1 2 . 8 2 4 - 2 . 9 9 5 l . 1 7 6 - . 0 0 5 h 4 z " , k e y : " s v g - 0 " } ] ] , b Z e = y t ( " f i l l e d " , " f o l d e r - f i l l e d " , " F o l d e r F i l l e d " , y Z e ) , L e e = T 0 ( { s i b l i n g S e l e c t o r : " [ d a t a - l i k e c 4 - f o c u s a b l e ] " , p a r e n t S e l e c t o r : " [ d a t a - l i k e c 4 - b r e a d c r u m b s - d r o p d o w n ] " , a c t i v a t e O n F o c u s : ! 1 , l o o p : ! 0 , o r i e n t a t i o n : " v e r t i c a l " } ) ; f u n c t i o n v Z e ( ) { c o n s t e = I y ( ) , r = w n ( e . a c t o r R e f , a = > a . c o n t e x t . s e a r c h Q u e r y ) ; i l ( " p a n e C l i c k " , ( ) = > { e . c l o s e D r o p d o w n ( ) } ) , i l ( " n o d e C l i c k " , ( ) = > { e . c l o s e D r o p d o w n ( ) } ) ; c o n s t n = M P e ( a = > { e . s e n d ( { t y p e : " s e a r c h Q u e r y . c h a n g e " , v a l u e : a } ) } , 2 5 0 ) , o = r . t r i m ( ) . l e n g t h > = 2 ; r e t u r n y . j s x s ( G s , { c l a s s N a m e : J e ( " n o w h e e l " , G 0 ( { l a y e r S t y l e : " l i k e c 4 . d r o p d o w n " , g a p : " x s " , p o i n t e r E v e n t s : " a l l " } ) ) , " d a t a - l i k e c 4 - b r e a d c r u m b s - d r o p d o w n " : ! 0 , o n M o u s e L e a v e : ( ) = > e . s e n d ( { t y p e : " d r o p d o w n . m o u s e L e a v e " } ) , o n M o u s e E n t e r : ( ) = > e . s e n d ( { t y p e : " d r o p d o w n . m o u s e E n t e r " } ) , c h i l d r e n : [ y . j s x ( p Z e , { } ) , y . j s x ( x n , { g a p : " x s " , c h i l d r e n : y . j s x ( N Z e , { v a l u e : r , o n C h a n g e : n , " d a t a - l i k e c 4 - f o c u s a b l e " : ! 0 , o n K e y D o w n : L e e } ) } ) , y . j s x ( t a , { s c r o l l b a r s : " x " , t y p e : " a u t o " , o f f s e t S c r o l l b a r s : " p r e s e n t " , c l a s s N a m e s : { r o o t : y e ( { m a x W i d t h : [ " c a l c ( 1 0 0 v w - 5 0 p x ) " , " c a l c ( 1 0 0 c q w - 5 0 p x ) " ] } ) } , s t y l e s : { v i e w p o r t : { o v e r s c r o l l B e h a v i o r : " n o n e " } } , c h i l d r e n : o ? y . j s x ( w Z e , { s e a r c h Q u e r y : F 3 ( r ) . t o L o w e r C a s e ( ) } ) : y . j s x ( T Z e , { } ) } ) ] } ) } c o n s t x Z e = N I ( k a ) ; f u n c t i o n w Z e ( { s e a r c h Q u e r y : e } ) { c o n s t r = H o ( ) , n = I y ( ) , o = e . i n c l u d e s ( k a ) , a = y n ( r . v i e w s ( ) , N d ( l = > o & & l . $ v i e w . t i t l e ? F 3 ( l . $ v i e w . t i t l e ) . t o L o w e r C a s e ( ) . i n c l u d e s ( e ) : l . i d . t o L o w e r C a s e ( ) . i n c l u d e s ( e ) | | ! ! l . t i t l e ? . t o L o w e r C a s e ( ) . i n c l u d e s ( e ) ) , z _ e ( 2 0 ) , K 1 ( ) , r D e ( ( l , s ) = > x Z e ( l . f o l d e r . p a t h , s . f o l d e r . p a t h ) ) ) ; i f ( a . l e n g t h = = = 0 ) r e t u r n y . j s x ( " d i v " , { c h i l d r e n : " n o r e s u l t s " } ) ; c o n s t i = o ? e . s p l i t ( k a ) : e ; r e t u r n y . j s x ( t a , { s c r o l l b a r s : " x y " , o f f s e t S c r o l l b a r s : ! 1 , c l a s s N a m e : y e ( { w i d t h : " 1 0 0 % " , m a x W i d t h : [ " c a l c ( 1 0 0 v w - 2 5 0 p x ) " , " c a l c ( 1 0 0 c q w - 2 5 0 p x ) " ] , m a x H e i g h t : [ " c a l c ( 1 0 0 v h - 2 0 0 p x ) " , " c a l c ( 1 0 0 c q h - 2 0 0 p x ) " ] } ) , c h i l d r e n : y . j s x ( F f , { g a p : " 0 . 5 " , c h i l d r e n : a . m a p ( l = > y . j s x ( _ Z e , { v i e w : l , h i g h l i g h t : i , o n C l i c k : s = > { s . s t o p P r o p a g a t i o n ( ) , n . s e l e c t V i e w ( l . i d ) } , " d a t a - l i k e c 4 - f o c u s a b l e " : ! 0 , o n K e y D o w n : L e e } , l . i d ) ) } ) } ) } c o n s t k Z e = q o ( { g a p : " x x s " , r o u n d e d : " s m " , p x : " x s " , p y : " x x s " , _ h o v e r : { b a c k g r o u n d C o l o r : { b a s e : " m a n t i n e . c o l o r s . g r a y [ 1 ] " , _ d a r k : " m a n t i n e . c o l o r s . d a r k [ 5 ] " } } , _ f o c u s : { o u t l i n e : " n o n e " , c o l o r : " m a n t i n e . c o l o r s . p r i m a r y . l i g h t C o l o r ! " , b a c k g r o u n d C o l o r : " m a n t i n e . c o l o r s . p r i m a r y . l i g h t H o v e r ! " } } ) , z e e = y e ( { _ g r o u p F o c u s : { c o l o r : " [ i n h e r i t ! ] " , t r a n s i t i o n : " n o n e " } } ) ; f u n c t i o n _ Z e ( { v i e w : e , h i g h l i g h t : r , . . . n } ) { c o n s t o = e . f o l d e r , a = j e e [ e . i d = = = " i n d e x " ? " i n d e x " : e . _ t y p e ] , i = y . j s x ( K s , { c o m p o n e n t : " d i v " , c l a s s N a m e : J e ( z e e , Q 2 ( { t r u n c a t e : ! 0 } ) , y e ( { " & > m a r k " : { b a c k g r o u n d C o l o r : { b a s e : " m a n t i n e . c o l o r s . y e l l o w [ 2 ] / 9 0 " , _ d a r k : " m a n t i n e . c o l o r s . y e l l o w [ 5 ] / 8 0 " , _ g r o u p F o c u s : " [ t r a n s p a r e n t ] " } , c o l o r : { _ g r o u p F o c u s : " [ i n h e r i t ! ] " } } } ) ) , m a w : 3 5 0 , h i g h l i g h t : r , c h i l d r e n : e . t i t l e ? ? e . i d } , e . i d ) , l = J e ( n . c l a s s N a m e , " g r o u p " , k Z e ) ; i f ( o . i s R o o t ) r e t u r n y . j s x s ( P r , { . . . n , c l a s s N a m e : l , c h i l d r e n : [ a , i ] } ) ; c o n s t s = o . b r e a d c r u m b s . m a p ( c = > y . j s x ( K s , { c o m p o n e n t : " d i v " , c l a s s N a m e : J e ( y e ( { _ g r o u p H o v e r : { c o l o r : " m a n t i n e . c o l o r s . d i m m e d " } } ) , z e e , Q 2 ( { d i m m e d : ! 0 , t r u n c a t e : ! 0 } ) ) , m a w : 1 7 0 , h i g h l i g h t : F E ( r ) ? r : [ ] , c h i l d r e n : c . t i t l e } , c . p a t h ) ) ; r e t u r n s . p u s h ( y . j s x s ( x n , { g a p : " [ 4 p x ] " , c h i l d r e n : [ a , i ] } ) ) , y . j s x s ( P r , { . . . n , c l a s s N a m e : l , c h i l d r e n : [ B e e , y . j s x ( I w , { s e p a r a t o r : y . j s x ( p p , { s i z e : 1 2 , s t r o k e : 1 . 5 } ) , s e p a r a t o r M a r g i n : 3 , c h i l d r e n : s } ) ] } ) } c o n s t E Z e = y . j s x ( p p , { s i z e : 1 2 , s t r o k e : 1 . 5 , c l a s s N a m e : " m a n t i n e - r o t a t e - r t l " } ) , B e e = y . j s x ( b Z e , { s i z e : 1 6 , c l a s s N a m e : y e ( { o p a c i t y : { b a s e : . 3 , _ g r o u p H o v e r : . 5 , _ g r o u p A c t i v e : . 5 , _ g r o u p F o c u s : . 5 } } ) } ) , J 2 = y e ( { o p a c i t y : { b a s e : . 3 , _ d a r k : . 5 , _ g r o u p H o v e r : . 8 , _ g r o u p A c t i v e : . 8 , _ g r o u p F o c u s : . 8 } } ) , j e e = { i n d e x : y . j s x ( g Z e , { s i z e : 1 6 , c l a s s N a m e : J 2 } ) , e l e m e n t : y . j s x ( g i , { s i z e : 1 8 , s t r o k e : 2 , c l a s s N a m e : J 2 } ) , d e p l o y m e n t : y . j s x ( q T , { s i z e : 1 6 , s t r o k e : 1 . 5 , c l a s s N a m e : J 2 } ) , d y n a m i c : y . j s x ( f Z e , { s i z e : 1 8 , c l a s s N a m e : J 2 } ) } , S Z e = t a . w i t h P r o p s ( { s c r o l l b a r s : " y " , c l a s s N a m e : y e ( { m a x H e i g h t : [ " c a l c ( 1 0 0 v h - 1 6 0 p x ) " , " c a l c ( 1 0 0 c q h - 1 6 0 p x ) " ] } ) } ) ; f u n c t i o n F e e ( e , r ) { r e t u r n { f o l d e r P a t h : e . p a t h , i t e m s : [ . . . e . f o l d e r s . m a p ( n = > ( { t y p e : " f o l d e r " , f o l d e r P a t h : n . p a t h , t i t l e : n . t i t l e , s e l e c t e d : r . s e l e c t e d F o l d e r . s t a r t s W i t h ( n . p a t h ) } ) ) , . . . e . v i e w s . m a p ( n = > ( { t y p e : " v i e w " , v i e w T y p e : n . i d = = = " i n d e x " ? " i n d e x " : n . _ t y p e , v i e w I d : n . i d , t i t l e : n . t i t l e ? ? n
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const MZe=[["path",{d:"M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",key:"svg-0"}],["path",{d:"M4 8v-2a2 2 0 0 1 2 -2h2",key:"svg-1"}],["path",{d:"M4 16v2a2 2 0 0 0 2 2h2",key:"svg-2"}],["path",{d:"M16 4h2a2 2 0 0 1 2 2v2",key:"svg-3"}],["path",{d:"M16 20h2a2 2 0 0 0 2 -2v-2",key:"svg-4"}]],OZe=yt("outline","focus-centered","FocusCentered",MZe),IZe=()=>{const e=Wt();return y.jsx(e4,{label:"Center camera",children:y.jsx(gp,{onClick:()=>e.fitDiagram(),children:y.jsx(OZe,{})})})};ye({gap:"xxs",_empty:{display:"none"}}),ye({top:"md",left:"md",margin:"0",pointerEvents:"none","& :where(button, .action-icon, [role='dialog'])":{pointerEvents:"all"},"& .action-icon":{"--ai-size":"2rem"},"& .tabler-icon":{width:"65%",height:"65%"},_reduceGraphics:{"& .action-icon":{"--ai-radius":"0px"}}}),ye({shadow:{base:"md",_whenPanning:"none"}}),ye({"& .tabler-icon":{width:"65%",height:"65%"}});const t4=ye({flex:"1 1 40%",textAlign:"center",fontWeight:500,padding:"[4px 6px]",fontSize:"11px",zIndex:1}),LZe=ye({background:"mantine.colors.gray[2]",borderRadius:"sm",border:"1px solid",borderColor:"mantine.colors.gray[4]",_dark:{background:"mantine.colors.dark[5]",borderColor:"mantine.colors.dark[4]"}}),zZe=ye({position:"relative",borderRadius:"sm",background:"mantine.colors.gray[3]",boxShadow:"inset 1px 1px 3px 0px #00000024",_dark:{background:"mantine.colors.dark[7]"}}),BZe=ye({position:"absolute",width:8,height:8,border:"2px solid",borderColor:"mantine.colors.gray[5]",borderRadius:3,transform:"translate(-50%, -50%)"});/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / c o n s t j Z e = [ [ " p a t h " , { d : " M 5 4 h 4 a 1 1 0 0 1 1 1 v 6 a 1 1 0 0 1 - 1 1 h - 4 a 1 1 0 0 1 - 1 - 1 v - 6 a 1 1 0 0 1 1 - 1 " , k e y : " s v g - 0 " } ] , [ " p a t h " , { d : " M 5 1 6 h 4 a 1 1 0 0 1 1 1 v 2 a 1 1 0 0 1 - 1 1 h - 4 a 1 1 0 0 1 - 1 - 1 v - 2 a 1 1 0 0 1 1 - 1 " , k e y : " s v g - 1 " } ] , [ " p a t h " , { d : " M 1 5 1 2 h 4 a 1 1 0 0 1 1 1 v 6 a 1 1 0 0 1 - 1 1 h - 4 a 1 1 0 0 1 - 1 - 1 v - 6 a 1 1 0 0 1 1 - 1 " , k e y : " s v g - 2 " } ] , [ " p a t h " , { d : " M 1 5 4 h 4 a 1 1 0 0 1 1 1 v 2 a 1 1 0 0 1 - 1 1 h - 4 a 1 1 0 0 1 - 1 - 1 v - 2 a 1 1 0 0 1 1 - 1 " , k e y : " s v g - 3 " } ] ] , F Z e = y t ( " o u t l i n e " , " l a y o u t - d a s h b o a r d " , " L a y o u t D a s h b o a r d " , j Z e ) , H Z e = e = > ( { v i e w I d : e . v i e w . i d , a u t o L a y o u t : e . v i e w . a u t o L a y o u t } ) , q Z e = ( ) = > { c o n s t { o n C h a n g e : e } = l c ( ) , r = W t ( ) , [ n , o ] = E . u s e S t a t e ( n u l l ) , [ a , i ] = E . u s e S t a t e ( { } ) , { a u t o L a y o u t : l , v i e w I d : s } = D a ( H Z e ) , { r e f : c , h o v e r e d : u } = a 9 ( ) , d = g = > b = > { a [ g ] = b , i ( a ) } , p = g = > b = > { b . s t o p P r o p a g a t i o n ( ) , e ? . ( { c h a n g e : { o p : " c h a n g e - a u t o l a y o u t " , l a y o u t : { . . . l , d i r e c t i o n : g } } } ) } , f = ( g , b ) = > { r . f i t D i a g r a m ( ) , e ? . ( { c h a n g e : { o p : " c h a n g e - a u t o l a y o u t " , l a y o u t : { . . . l , n o d e S e p : g , r a n k S e p : b } } } ) } ; r e t u r n y . j s x s ( m r , { p o s i t i o n : " r i g h t - s t a r t " , c l i c k O u t s i d e E v e n t s : [ " p o i n t e r d o w n " ] , r a d i u s : " x s " , s h a d o w : " l g " , o f f s e t : { m a i n A x i s : 1 0 } , c h i l d r e n : [ y . j s x ( f u , { c h i l d r e n : y . j s x ( e 4 , { l a b e l : " C h a n g e A u t o L a y o u t " , c h i l d r e n : y . j s x ( g p , { c h i l d r e n : y . j s x ( F Z e , { } ) } ) } ) } ) , y . j s x ( G s , { c l a s s N a m e : " l i k e c 4 - t o p - l e f t - p a n e l " , p : 8 , p t : 6 , o p a c i t y : u ? . 6 : 1 , c h i l d r e n : y . j s x s ( S e , { p o s : " r e l a t i v e " , r e f : o , c h i l d r e n : [ y . j s x ( P w , { t a r g e t : a [ l . d i r e c t i o n ] , p a r e n t : n , c l a s s N a m e : L Z e } ) , y . j s x ( S e , { m b : 1 0 , c h i l d r e n : y . j s x ( w t , { i n l i n e : ! 0 , f z : " x s " , c : " d i m m e d " , f w : 5 0 0 , c h i l d r e n : " A u t o l a y o u t : " } ) } ) , y . j s x s ( M f , { g a p : 2 , w r a p : " w r a p " , j u s t i f y : " s t r e t c h " , m a w : 1 6 0 , c h i l d r e n : [ y . j s x ( P r , { c l a s s N a m e : t 4 , r e f : d ( " T B " ) , o n C l i c k : p ( " T B " ) , c h i l d r e n : " T o p - B o t t o m " } ) , y . j s x ( P r , { c l a s s N a m e : t 4 , r e f : d ( " B T " ) , o n C l i c k : p ( " B T " ) , c h i l d r e n : " B o t t o m - T o p " } ) , y . j s x ( P r , { c l a s s N a m e : t 4 , r e f : d ( " L R " ) , o n C l i c k : p ( " L R " ) , c h i l d r e n : " L e f t - R i g h t " } ) , y . j s x ( P r , { c l a s s N a m e : t 4 , r e f : d ( " R L " ) , o n C l i c k : p ( " R L " ) , c h i l d r e n : " R i g h t - L e f t " } ) ] } ) , y . j s x ( S e , { m y : 1 0 , c h i l d r e n : y . j s x ( w t , { i n l i n e : ! 0 , f z : " x s " , c : " d i m m e d " , f w : 5 0 0 , c h i l d r e n : " S p a c i n g : " } ) } ) , y . j s x ( U Z e , { r e f : c , i s V e r t i c a l : l . d i r e c t i o n = = = " T B " | | l . d i r e c t i o n = = = " B T " , n o d e S e p : l . n o d e S e p , r a n k S e p : l . r a n k S e p , o n C h a n g e : f } , s ) ] } ) } ) ] } ) } , k m = 4 0 0 , U Z e = E . f o r w a r d R e f ( ( { i s V e r t i c a l : e , n o d e S e p : r , r a n k S e p : n , o n C h a n g e : o } , a ) = > { e | | ( [ r , n ] = [ n , r ] ) ; c o n s t i = V 3 ( ( { x : f , y : g } ) = > { e | | ( [ f , g ] = [ g , f ] ) , o ( M a t h . r o u n d ( f * k m ) , M a t h . r o u n d ( g * k m ) ) } , [ o , e ] , 2 5 0 , 2 e 3 ) , [ l , s ] = U s ( { d e f a u l t V a l u e : v P e ( { x : ( r ? ? 1 0 0 ) / k m , y : ( n ? ? 1 2 0 ) / k m } ) , o n C h a n g e : i } ) , { r e f : c } = j U ( s ) ; l e t u = M a t h . r o u n d ( l . x * k m ) , d = M a t h . r o u n d ( l . y * k m ) ; e | | ( [ u , d ] = [ d , u ] ) ; c o n s t p = N r ( c , a ) ; r e t u r n y . j s x s ( S e , { r e f : p , c l a s s N a m e : z Z e , p t : " 1 0 0 % " , c h i l d r e n : [ y . j s x ( S e , { c l a s s N a m e : B Z e , s t y l e : { l e f t : ` $ { l . x * 1 0 0 } % ` , t o p : ` $ { l . y * 1 0 0 } % ` } } ) , y . j s x ( S e , { p o s : " a b s o l u t e " , l e f t : 2 , b o t t o m : 2 , c h i l d r e n : y . j s x s ( w t , { c o m p o n e n t : " d i v " , f z : 8 , c : " d i m m e d " , f w : 5 0 0 , c h i l d r e n : [ d , " , " , u ] } ) } ) ] } ) } ) ; / * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const VZe=[["path",{d:"M12 9v4",key:"svg-0"}],["path",{d:"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z",key:"svg-1"}],["path",{d:"M12 16h.01",key:"svg-2"}]],Hee=yt("outline","alert-triangle","AlertTriangle",VZe),YZe=()=>{const e=wm();return Da(r=>r.view.hasLayoutDrift??!1)?y.jsxs(Lf,{position:"right-start",openDelay:200,closeDelay:100,...e,children:[y.jsx(v7,{children:y.jsx(or,{color:"orange",c:"orange",className:ye({bg:"mantine.colors.orange.light"}),children:y.jsx(Hee,{})})}),y.jsx(y7,{p:"0",children:y.jsxs(Uw,{color:"orange",withBorder:!1,withCloseButton:!1,title:"Manual layout issues",children:[y.jsxs(wt,{mt:2,size:"sm",lh:"xs",children:["View contains new elements or their sizes have changed,",y.jsx("br",{}),"last manual layout can not be applied."]}),y.jsxs(wt,{mt:"xs",size:"sm",lh:"xs",children:["Update view predicates or remove ",y.jsx(Bw,{children:"@likec4-generated"})]})]})})]}):null};/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const WZe=[["path",{d:"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z",key:"svg-0"}],["path",{d:"M10 4l4 16",key:"svg-1"}],["path",{d:"M12 12l-8 2",key:"svg-2"}]],GZe=yt("outline","layout-collage","LayoutCollage",WZe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const XZe=[["path",{d:"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z",key:"svg-0"}],["path",{d:"M4 12h8",key:"svg-1"}],["path",{d:"M12 15h8",key:"svg-2"}],["path",{d:"M12 9h8",key:"svg-3"}],["path",{d:"M12 4v16",key:"svg-4"}]],qee=yt("outline","layout-board-split","LayoutBoardSplit",XZe);/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const KZe=[["path",{d:"M4 4l0 16",key:"svg-0"}],["path",{d:"M8 9m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z",key:"svg-1"}]],ZZe=yt("outline","layout-align-left","LayoutAlignLeft",KZe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const QZe=[["path",{d:"M12 4l0 5",key:"svg-0"}],["path",{d:"M12 15l0 5",key:"svg-1"}],["path",{d:"M6 9m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z",key:"svg-2"}]],JZe=yt("outline","layout-align-center","LayoutAlignCenter",QZe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const eQe=[["path",{d:"M20 4l0 16",key:"svg-0"}],["path",{d:"M4 9m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z",key:"svg-1"}]],tQe=yt("outline","layout-align-right","LayoutAlignRight",eQe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const rQe=[["path",{d:"M4 4l16 0",key:"svg-0"}],["path",{d:"M9 8m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z",key:"svg-1"}]],nQe=yt("outline","layout-align-top","LayoutAlignTop",rQe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const oQe=[["path",{d:"M4 12l5 0",key:"svg-0"}],["path",{d:"M15 12l5 0",key:"svg-1"}],["path",{d:"M9 6m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z",key:"svg-2"}]],aQe=yt("outline","layout-align-middle","LayoutAlignMiddle",oQe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const iQe=[["path",{d:"M4 20l16 0",key:"svg-0"}],["path",{d:"M9 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z",key:"svg-1"}]],lQe=yt("outline","layout-align-bottom","LayoutAlignBottom",iQe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /const sQe=[["path",{d:"M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0",key:"svg-0"}],["path",{d:"M18 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0",key:"svg-1"}],["path",{d:"M12 19h4.5c.71 0 1.372 -.212 1.924 -.576m1.545 -2.459a3.5 3.5 0 0 0 -3.469 -3.965h-.499m-4 0h-3.501a3.5 3.5 0 0 1 -2.477 -5.972m2.477 -1.028h3.5",key:"svg-2"}],["path",{d:"M3 3l18 18",key:"svg-3"}]],cQe=yt("outline","route-off","RouteOff",sQe),sc=({label:e,icon:r,onClick:n})=>y.jsx(e4,{label:e,withinPortal:!1,position:"top",children:y.jsx(gp,{classNames:{root:"action-icon",icon:ye({"& > svg":{width:"70%",height:"70%"}})},onClick:n,children:r})}),uQe=e=>{const r=Wt(),n=wm();return y.jsxs(mr,{position:"right",offset:{mainAxis:12},clickOutsideEvents:["pointerdown"],...n,...e,children:[y.jsx(fu,{children:y.jsx(e4,{label:"Manual layouting tools",children:y.jsx(gp,{children:y.jsx(GZe,{})})})}),y.jsx(Gs,{className:qo({gap:"0.5",layerStyle:"likec4.panel",padding:"1",pointerEvents:"all"}),children:y.jsxs(Qd,{children:[y.jsx(sc,{label:"Align in columns",icon:y.jsx(qee,{}),onClick:o=>{o.stopPropagation(),r.align("Column")}}),y.jsx(sc,{label:"Align left",icon:y.jsx(ZZe,{}),onClick:o=>{o.stopPropagation(),r.align("Left")}}),y.jsx(sc,{label:"Align center",icon:y.jsx(JZe,{}),onClick:o=>{o.stopPropagation(),r.align("Center")}}),y.jsx(sc,{label:"Align right",icon:y.jsx(tQe,{}),onClick:o=>{o.stopPropagation(),r.align("Right")}}),y.jsx(sc,{label:"Align in rows",icon:y.jsx(qee,{style:{transform:"rotate(90deg)"}}),onClick:o=>{o.stopPropagation(),r.align("Row")}}),y.jsx(sc,{label:"Align top",icon:y.jsx(nQe,{}),onClick:o=>{o.stopPropagation(),r.align("Top")}}),y.jsx(sc,{label:"Align middle",icon:y.jsx(aQe,{}),onClick:o=>{o.stopPropagation(),r.align("Middle")}}),y.jsx(sc,{label:"Align bottom",icon:y.jsx(lQe,{}),onClick:o=>{o.stopPropagation(),r.align("Bottom")}}),y.jsx(sc,{label:"Reset all control points",icon:y.jsx(cQe,{}),onClick:o=>{o.stopPropagation(),r.resetEdgeControlPoints()}})]})})]})};function dQe(){const{enableReadOnly:e}=wr();return y.jsx(Pa,{children:!e&&y.jsx(Qr,{layout:"position",className:G0({gap:"xs",layerStyle:"likec4.panel",position:"relative",cursor:"pointer",padding:"xxs",pointerEvents:"all"}),initial:{opacity:0,translateX:-20},animate:{opacity:1,translateX:0},exit:{opacity:0,translateX:-20},children:y.jsxs(Qd,{openDelay:600,closeDelay:120,children:[y.jsx(qZe,{}),y.jsx(uQe,{}),y.jsx(YZe,{}),y.jsx(IZe,{})]})})})}/ * *
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
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const pQe=[["path",{d:"M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z",key:"svg-0"}]],hQe=yt("filled","player-stop-filled","PlayerStopFilled",pQe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const fQe=[["path",{d:"M19.496 4.136l-12 7a1 1 0 0 0 0 1.728l12 7a1 1 0 0 0 1.504 -.864v-14a1 1 0 0 0 -1.504 -.864z",key:"svg-0"}],["path",{d:"M4 4a1 1 0 0 1 .993 .883l.007 .117v14a1 1 0 0 1 -1.993 .117l-.007 -.117v-14a1 1 0 0 1 1 -1z",key:"svg-1"}]],mQe=yt("filled","player-skip-back-filled","PlayerSkipBackFilled",fQe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / c o n s t g Q e = [ [ " p a t h " , { d : " M 3 5 v 1 4 a 1 1 0 0 0 1 . 5 0 4 . 8 6 4 l 1 2 - 7 a 1 1 0 0 0 0 - 1 . 7 2 8 l - 1 2 - 7 a 1 1 0 0 0 - 1 . 5 0 4 . 8 6 4 z " , k e y : " s v g - 0 " } ] , [ " p a t h " , { d : " M 2 0 4 a 1 1 0 0 1 . 9 9 3 . 8 8 3 l . 0 0 7 . 1 1 7 v 1 4 a 1 1 0 0 1 - 1 . 9 9 3 . 1 1 7 l - . 0 0 7 - . 1 1 7 v - 1 4 a 1 1 0 0 1 1 - 1 z " , k e y : " s v g - 1 " } ] ] , y Q e = y t ( " f i l l e d " , " p l a y e r - s k i p - f o r w a r d - f i l l e d " , " P l a y e r S k i p F o r w a r d F i l l e d " , g Q e ) , U e e = Z n . w i t h P r o p s ( { c o m p o n e n t : f l , v a r i a n t : " l i g h t " , s i z e : " x s " , f w : " 5 0 0 " } ) , b Q e = ( ) = > { c o n s t { p o r t a l P r o p s : e } = w m ( ) ; r e t u r n y . j s x ( O 0 , { . . . e , c h i l d r e n : y . j s x ( U r , { c s s : { p o s i t i o n : " a b s o l u t e " , m a r g i n : " 0 " , p a d d i n g : " 0 " , t o p : " 0 " , l e f t : " 0 " , w i d t h : " 1 0 0 % " , h e i g h t : " 1 0 0 % " , b o r d e r : " 2 p x s o l i d " , b o r d e r C o l o r : " m a n t i n e . c o l o r s . o r a n g e [ 6 ] " , p o i n t e r E v e n t s : " n o n e " , m d : { b o r d e r W i d t h : 4 } } } ) } ) } ; f u n c t i o n v Q e ( ) { c o n s t e = W t ( ) , { i s P a r a l l e l : r , h a s N e x t : n , h a s P r e v i o u s : o , c u r r e n t S t e p : a , t o t a l S t e p s : i } = D a ( l = > { c o n s t s = l . x y e d g e s . f i n d I n d e x ( c = > c . i d = = = l . a c t i v e W a l k t h r o u g h ? . s t e p I d ) ; r e t u r n { i s P a r a l l e l : S a ( l . a c t i v e W a l k t h r o u g h ? . p a r a l l e l P r e f i x ) , h a s N e x t : s < l . x y e d g e s . l e n g t h - 1 , h a s P r e v i o u s : s > 0 , c u r r e n t S t e p : s + 1 , t o t a l S t e p s : l . x y e d g e s . l e n g t h } } ) ; r e t u r n y . j s x s ( P a , { p r o p a g a t e : ! 0 , c h i l d r e n : [ y . j s x ( I e e , { v a r i a n t : " l i g h t " , s i z e : " x s " , c o l o r : " o r a n g e " , m r : " s m " , o n C l i c k : l = > { l . s t o p P r o p a g a t i o n ( ) , e . s t o p W a l k t h r o u g h ( ) } , r i g h t S e c t i o n : y . j s x ( h Q e , { s i z e : 1 0 } ) , c h i l d r e n : " S t o p " } , " s t o p - w a l k t h r o u g h " ) , y . j s x ( U e e , { d i s a b l e d : ! o , o n C l i c k : ( ) = > e . w a l k t h r o u g h S t e p ( " p r e v i o u s " ) , l e f t S e c t i o n : y . j s x ( m Q e , { s i z e : 1 0 } ) , c h i l d r e n : " P r e v i o u s " } , " p r e v " ) , y . j s x ( X s , { c o m p o n e n t : Q r , s i z e : " m d " , r a d i u s : " s m " , v a r i a n t : r ? " g r a d i e n t " : " t r a n s p a r e n t " , g r a d i e n t : { f r o m : " r e d " , t o : " o r a n g e " , d e g : 9 0 } , r i g h t S e c t i o n : y . j s x ( Q r , { c l a s s N a m e : y e ( { f o n t S i z e : " x x s " , d i s p l a y : r ? " b l o c k " : " n o n e " } ) , c h i l d r e n : " p a r a l l e l " } ) , c l a s s N a m e : y e ( { a l i g n I t e m s : " b a s e l i n e " } ) , c h i l d r e n : y . j s x s ( q W e , { c h i l d r e n : [ a , " / " , i ] } ) } , " s t e p - b a d g e " ) , y . j s x ( U e e , { d i s a b l e d : ! n , o n C l i c k : ( ) = > e . w a l k t h r o u g h S t e p ( " n e x t " ) , r i g h t S e c t i o n : y . j s x ( y Q e , { s i z e : 1 0 } ) , c h i l d r e n : " N e x t " } , " n e x t " ) , r & & y . j s x ( b Q e , { } , " p a r a l l e l - f r a m e " ) ] } ) } c o n s t V e e = E . m e m o ( ( ) = > { c o n s t e = J f ( ) , r = A Q ( ) , n = n S ( C K e , { i n p u t : { v i e w M o d e l : r } } ) ; r e t u r n E . u s e E f f e c t ( ( ) = > { c o n s t o = n . o n ( " n a v i g a t e T o " , a = > { e . g e t S n a p s h o t ( ) . c o n t e x t . v i e w . i d ! = = a . v i e w I d & & e . s e n d ( { t y p e : " n a v i g a t e . t o " , v i e w I d : a . v i e w I d } ) } ) ; r e t u r n ( ) = > o . u n s u b s c r i b e ( ) } , [ n , e ] ) , q j ( ( ) = > { n . s e n d ( { t y p e : " u p d a t e . i n p u t s " , i n p u t s : { v i e w M o d e l : r } } ) } , [ r ] ) , y . j s x ( F f , { c s s : { a l i g n I t e m s : " f l e x - s t a r t " , p o i n t e r E v e n t s : " n o n e " , p o s i t i o n : " a b s o l u t e " , t o p : " 0 " , l e f t : " 0 " , m a r g i n : " 0 " , w i d t h : " 1 0 0 % " , g a p : " x x s " , m a x W i d t h : [ " c a l c ( 1 0 0 v w ) " , " c a l c ( 1 0 0 c q w ) " ] , " @ / s m " : { m a r g i n : " x s " , g a p : " x s " , w i d t h : " m a x - c o n t e n t " , m a x W i d t h : [ " c a l c ( 1 0 0 v w - 2 * { s p a c i n g . m d } ) " , " c a l c ( 1 0 0 c q w - 2 * { s p a c i n g . m d } ) " ] } } , c h i l d r e n : y . j s x s ( T K e , { v a l u e : n , c h i l d r e n : [ y . j s x ( x Q e , { a c t o r : n } ) , y . j s x ( d Q e , { } ) , y . j s x ( $ Z e , { } ) ] } ) } ) } ) ; V e e . d i s p l a y N a m e = " N a v i g a t i o n P a n e l " ; c o n s t x Q e = ( { a c t o r : e } ) = > { c o n s t r = w n ( e , o = > o . h a s T a g ( " a c t i v e " ) ) , n = w m ( ) ; r e t u r n y . j s x s ( m r , { o f f s e t : { m a i n A x i s : 4 } , o p e n e d : r , p o s i t i o n : " b o t t o m - s t a r t " , t r a p F o c u s : ! 0 , . . . n , c l i c k O u t s i d e E v e n t s : [ " p o i n t e r d o w n " , " m o u s e d o w n " , " c l i c k " ] , o n D i s m i s s : ( ) = > e . s e n d ( { t y p e : " d r o p d o w n . d i s m i s s " } ) , c h i l d r e n : [ y . j s x ( w Q e , { a c t o r : e } ) , r & & y . j s x ( v Z e , { } ) ] } ) } , w Q e = ( { a c t o r : e } ) = > { c o n s t r = D a ( n = > n . a c t i v e W a l k t h r o u g h ! = = n u l l ) ; r e t u r n y . j s x ( d m , { c h i l d r e n : y . j s x ( f u , { c h i l d r e n : y . j s x ( Q r , { l a y o u t : ! 0 , c l a s s N a m e : q o ( { l a y e r S t y l e : " l i k e c 4 . p a n e l " , p o s i t i o n : " r e l a t i v e " , g a p : " x s " , c u r s o r : " p o i n t e r " , p a d d i n g R i g h t : " m d " , p o i n t e r E v e n t s : " a l l " , w i d t h : " 1 0 0 % " } ) , o n M o u s e L e a v e : ( ) = > e . s e n d ( { t y p e : " b r e a d c r u m b s . m o u s e L e a v e " } ) , c h i l d r e n : y . j s x ( P a , { m o d e : " p o p L a y o u t " , c h i l d r e n : r ? y . j s x ( v Q e , { } ) : y . j s x ( n Z e , { } ) } ) } ) } ) } ) } , o R = y e ( { p o s i t i o n : " a b s o l u t e " , b o t t o m : " 0 " , r i g h t : " 0 " , p a d d i n g : " 2 " , m a r g i n : " 0 " , w i d t h : " m i n - c o n t e n t " , h e i g h t : " m i n - c o n t e n t " } ) , k Q e = y e ( { " - - a i - r a d i u s " : " 0 p x " , _ n o R e d u c e G r a p h i c s : { " - - a i - r a d i u s " : " { r a d i i . m d } " } } ) , _ Q e = y e ( { c u r s o r : " d e f a u l t " , u s e r S e l e c t : " n o n e " , m i n W i d t h : 2 0 0 , m a x W i d t h : " c a l c ( 1 0 0 v w - 2 0 p x ) " , b a c k g r o u n d C o l o r : " m a n t i n e . c o l o r s . b o d y / 8 0 " , s m : { m i n W i d t h : 3 0 0 , m a x W i d t h : " 6 5 v w " } , m d : { m a x W i d t h : " 4 0 v w " } , _ d a r k : { b a c k g r o u n d C o l o r : " m a n t i n e . c o l o r s . d a r k [ 6 ] / 8 0 " } } ) , E Q e = y e ( { p a d d i n g : " x x s " } ) , S Q e = y e ( { b a c k g r o u n d C o l o r : " t r a n s p a r e n t " , t r a n s i t i o n : " a l l 1 0 0 m s e a s e - i n " , _ h o v e r : { t r a n s i t i o n : " a l l 1 2 0 m s e a s e - o u t " , b a c k g r o u n d C o l o r : " m a n t i n e . c o l o r s . p r i m a r y [ 2 ] / 5 0 " } , _ d a r k : { _ h o v e r : { b a c k g r o u n d C o l o r : " m a n t i n e . c o l o r s . d a r k [ 3 ] / 4 0 " } } } ) ; y e ( { f i l l : " v a r ( - - l i k e c 4 - p a l e t t e - f i l l ) " , s t r o k e : " v a r ( - - l i k e c 4 - p a l e t t e - s t r o k e ) " , s t r o k e W i d t h : 1 , o v e r f l o w : " v i s i b l e " , w i d t h : " 1 0 0 % " , h e i g h t : " a u t o " , f i l t e r : `
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
drop - shadow ( 0 2 px 3 px rgb ( 0 0 0 / 22 % ) )
drop - shadow ( 0 1 px 8 px rgb ( 0 0 0 / 10 % ) )
` });const CQe=ye({fontWeight:500,letterSpacing:"0.2px",paddingTop:"0",paddingBottom:"0",textTransform:"lowercase",transition:"all 150ms ease-in-out",cursor:"pointer","--badge-radius":"2px","--badge-fz":"9.5px","--badge-padding-x":"3px","--badge-height":"13.5px","--badge-lh":"1","--badge-bg":"var(--likec4-palette-fill)","--badge-color":"var(--likec4-palette-hiContrast)"});/**
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
* /const TQe=[["path",{d:"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",key:"svg-0"}],["path",{d:"M12 16v.01",key:"svg-1"}],["path",{d:"M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483",key:"svg-2"}]],RQe=yt("outline","help-circle","HelpCircle",TQe);/ * *
* @ license @ tabler / icons - react v3 . 35.0 - MIT
*
* This source code is licensed under the MIT license .
* See the LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / c o n s t A Q e = [ [ " p a t h " , { d : " M 7 7 l 1 0 1 0 " , k e y : " s v g - 0 " } ] , [ " p a t h " , { d : " M 1 7 8 l 0 9 l - 9 0 " , k e y : " s v g - 1 " } ] ] , N Q e = y t ( " o u t l i n e " , " a r r o w - d o w n - r i g h t " , " A r r o w D o w n R i g h t " , A Q e ) , D Q e = ( { v a l u e : e } ) = > { c o n s t { t i t l e : r , c o l o r : n = " p r i m a r y " , s h a p e : o = " r e c t a n g l e " } = e , [ a , i ] = E . u s e S t a t e ( n u l l ) , l = W t ( ) , s = 3 0 0 , c = 2 0 0 ; r e t u r n y . j s x ( z w , { s h a d o w : " n o n e " , p x : " x s " , p y : " s m " , c l a s s N a m e : J e ( S Q e ) , " d a t a - l i k e c 4 - c o l o r " : n , o n M o u s e E n t e r : ( ) = > { i ( n u l l ) , l . h i g h l i g h t N o t a t i o n ( e ) } , o n M o u s e L e a v e : ( ) = > { i ( n u l l ) , l . u n h i g h l i g h t N o t a t i o n ( ) } , c h i l d r e n : y . j s x s ( q r , { g a p : " s m " , a l i g n : " s t r e t c h " , w r a p : " n o w r a p " , c h i l d r e n : [ y . j s x ( S e , { f l e x : " 0 0 7 0 p x " , s t y l e : { p o s i t i o n : " r e l a t i v e " , w i d t h : 7 0 , h e i g h t : l N e ( 7 0 * ( c / s ) , 0 ) } , c h i l d r e n : y . j s x ( g m , { d a t a : { s h a p e : o , w i d t h : s , h e i g h t : c } } ) } ) , y . j s x s ( r a , { g a p : 4 , f l e x : 1 , c h i l d r e n : [ y . j s x ( q r , { g a p : 4 , f l e x : " 0 0 a u t o " , c h i l d r e n : e . k i n d s . m a p ( u = > y . j s x ( X s , { c l a s s N a m e : J e ( C Q e ) , o n M o u s e E n t e r : ( ) = > { i ( u ) , l . h i g h l i g h t N o t a t i o n ( e , u ) } , o n M o u s e L e a v e : ( ) = > { i ( n u l l ) , l . h i g h l i g h t N o t a t i o n ( e ) } , o p a c i t y : t U ( a ) & & a ! = = u ? . 2 5 : 1 , c h i l d r e n : u } , u ) ) } ) , y . j s x ( w t , { c o m p o n e n t : " d i v " , f z : " s m " , f w : 5 0 0 , l h : " 1 . 2 5 " , s t y l e : { t e x t W r a p : " p r e t t y " } , c h i l d r e n : r } ) ] } ) ] } ) } ) } , P Q e = e = > ( { i d : e . v i e w . i d , n o t a t i o n s : e . v i e w . n o t a t i o n ? . n o d e s ? ? [ ] , i s V i s i b l e : ! 0 } ) , $ Q e = E . m e m o ( ( ) = > { c o n s t e = O C ( c = > c . h e i g h t ) , { i d : r , n o t a t i o n s : n , i s V i s i b l e : o } = D a ( P Q e ) , [ a , i ] = y P e ( { k e y : " n o t a t i o n - w e b v i e w - c o l l a p s e d " , d e f a u l t V a l u e : ! 0 } ) , l = n . l e n g t h > 0 , s = w m ( ) ; r e t u r n y . j s x s ( P a , { c h i l d r e n : [ ! l & & o & & y . j s x ( c l . d i v , { i n i t i a l : { o p a c i t y : . 7 5 , t r a n s l a t e X : " 5 0 % " } , a n i m a t e : { o p a c i t y : 1 , t r a n s l a t e X : 0 } , e x i t : { t r a n s l a t e X : " 1 0 0 % " , o p a c i t y : . 6 } , c l a s s N a m e : o R , c h i l d r e n : y . j s x ( f o , { l a b e l : " V i e w h a s n o n o t a t i o n s " , c o l o r : " o r a n g e " , . . . s , c h i l d r e n : y . j s x ( c i , { s i z e : " l g " , v a r i a n t : " l i g h t " , c o l o r : " o r a n g e " , r a d i u s : " m d " , c h i l d r e n : y . j s x ( H e e , { } ) } ) } ) } , " e m p t y " ) , l & & o & & a & & y . j s x ( c l . d i v , { i n i t i a l : { o p a c i t y : . 7 5 , t r a n s l a t e X : " 5 0 % " } , a n i m a t e : { o p a c i t y : 1 , t r a n s l a t e X : 0 } , e x i t : { t r a n s l a t e X : " 1 0 0 % " , o p a c i t y : . 6 } , c l a s s N a m e : o R , c h i l d r e n : y . j s x ( f o , { l a b e l : " S h o w n o t a t i o n " , c o l o r : " d a r k " , f z : " x s " , . . . s , c h i l d r e n : y . j s x ( o r , { s i z e : " l g " , v a r i a n t : " d e f a u l t " , c o l o r : " g r a y " , c l a s s N a m e : k Q e , o n C l i c k : ( ) = > i ( ! 1 ) , c h i l d r e n : y . j s x ( R Q e , { s t r o k e : 1 . 5 } ) } ) } ) } , " c o l l a p s e d " ) , l & & o & & ! a & & y . j s x ( c l . d i v , { i n i t i a l : { o p a c i t y : . 7 5 , s c a l e : . 2 } , a n i m a t e : { o p a c i t y : 1 , s c a l e : 1 } , e x i t : { o p a c i t y : 0 , s c a l e : . 2 5 } , c l a s s N a m e : J e ( " r e a c t - f l o w _ _ p a n e l " , o R ) , s t y l e : { t r a n s f o r m O r i g i n : " b o t t o m r i g h t " } , c h i l d r e n : y . j s x ( N f , { r a d i u s : " s m " , w i t h B o r d e r : ! 0 , s h a d o w : " l g " , c l a s s N a m e : _ Q e , c h i l d r e n : y . j s x s ( J d , { d e f a u l t V a l u e : " f i r s t " , r a d i u s : " x s " , c h i l d r e n : [ y . j s x s ( V 0 , { c h i l d r e n : [ y . j s x ( o r , { s i z e : " m d " , v a r i a n t : " s u b t l e " , c o l o r : " g r a y " , m l : 2 , s t y l e : { a l i g n S e l f : " c e n t e r " } , o n C l i c k : ( ) = > i ( ! 0 ) , c h i l d r e n : y . j s x ( N Q e , { s t r o k e : 2 } ) } ) , y . j s x ( B f , { v a l u e : " f i r s t " , f z : " x s " , c h i l d r e n : " E l e m e n t s " } ) , y . j s x ( B f , { v a l u e : " s e c o n d " , f z : " x s " , d i s a b l e d : ! 0 , c h i l d r e n : " R e l a t i o n s h i p s " } ) ] } ) , y . j s x ( Z s , { v a l u e : " f i r s t " , c l a s s N a m e : E Q e , h i d d e n : a , c h i l d r e n : y . j s x ( t a , { v i e w p o r t P r o p s : { s t y l e : { m a x H e i g h t : ` m i n ( 4 0 v h , $ { M a t h . m a x ( e - 6 0 , 5 0 ) } p x ) ` } } , c h i l d r e n : y . j s x ( r a , { g a p : 0 , c h i l d r e n : n . m a p ( ( c , u ) = > y . j s x ( D Q e , { v a l u e : c } , u ) ) } ) } ) } ) ] } ) } ) } , r ) ] } ) } ) , Y e e = E . m e m o ( ( ) = > { c o n s t { e n a b l e C o n t r o l s : e , e n a b l e N o t a t i o n s : r , e n a b l e S e a r c h : n , e n a b l e R e l a t i o n s h i p D e t a i l s : o } = w r ( ) , a = v E e ( ) , i = U G ( ) , l = v j e ( ) ; r e t u r n y . j s x s ( s G , { o n R e s e t : a , c h i l d r e n : [ e & & y . j s x ( T z e , { c h i l d r e n : y . j s x ( V e e , { } ) } ) , i & & y . j s x ( T X e , { o v e r l a y s A c t o r R e f : i } ) , r & & y . j s x ( $ Q e , { } ) , n & & l & & y . j s x ( h K e , { s e a r c h A c t o r R e f : l } ) , o & & y . j s x ( w K e , { } ) ] } ) } ) ; Y e e . d i s p l a y N a m e = " D i a g r a m U I " ; f u n c t i o n _ m ( e ) { r e t u r n f u n c t i o n ( ) { r e t u r n e } } c o n s t W e e = 1 e - 1 2 , a R = M a t h . P I , i R = 2 * a R , y p = 1 e - 6 , M Q e = i R - y p ; f u n c t i o n G e e ( e ) { t h i s . _ + = e [ 0 ] ; f o r ( l e t r = 1 , n = e . l e n g t h ; r < n ; + + r ) t h i s . _ + = a r g u m e n t s [ r ] + e [ r ] } f u n c t i o n O Q e ( e ) { l e t r = M a t h . f l o o r ( e ) ; i f ( ! ( r > = 0 ) ) t h r o w n e w E r r o r ( ` i n v a l i d d i g i t s : $ { e } ` ) ; i f ( r > 1 5 ) r e t u r n G e e ; c o n s t n = 1 0 * * r ; r e t u r n f u n c t i o n ( o ) { t h i s . _ + = o [ 0 ] ; f o r ( l e t a = 1 , i = o . l e n g t h ; a < i ; + + a ) t h i s . _ + = M a t h . r o u n d ( a r g u m e n t s [ a ] * n ) / n + o [ a ] } } c l a s s I Q e { c o n s t r u c t o r ( r ) { t h i s . _ x 0 = t h i s . _ y 0 = t h i s . _ x 1 = t h i s . _ y 1 = n u l l , t h i s . _ = " " , t h i s . _ a p p e n d = r = = n u l l ? G e e : O Q e ( r ) } m o v e T o ( r , n ) { t h i s . _ a p p e n d ` M $ { t h i s . _ x 0 = t h i s . _ x 1 = + r } , $ { t h i s . _ y 0 = t h i s . _ y 1 = + n } ` } c l o s e P a t h ( ) { t h i s . _ x 1 ! = = n u l l & & ( t h i s . _ x 1 = t h i s . _ x 0 , t h i s . _ y 1 = t h i s . _ y 0 , t h i s . _ a p p e n d ` Z ` ) } l i n e T o ( r , n ) { t h i s . _ a p p e n d ` L $ { t h i s . _ x 1 = + r } , $ { t h i s . _ y 1 = + n } ` } q u a d r a t i c C u r v e T o ( r , n , o , a ) { t h i s . _ a p p e n d ` Q $ { + r } , $ { + n } , $ { t h i s . _ x 1 = + o } , $ { t h i s . _ y 1 = + a } ` } b e z i e r C u r v e T o ( r , n , o , a , i , l ) { t h i s . _ a p p e n d ` C $ { + r } , $ { + n } , $ { + o } , $ { + a } , $ { t h i s . _ x 1 = + i } , $ { t h i s . _ y 1 = + l } ` } a r c T o ( r , n , o , a , i ) { i f ( r = + r , n = + n , o = + o , a = + a , i = + i , i <
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
$ { l } {
-- likec4 - palette - fill : $ { i ( n . elements . fill ) } ;
-- likec4 - palette - stroke : $ { i ( n . elements . stroke ) } ;
}
$ { Dte } $ { l } {
-- likec4 - palette - fill : $ { a ( n . elements . fill ) } ;
-- likec4 - palette - stroke : $ { a ( n . elements . stroke ) } ;
}
` .trim()};function wet(e,r,n){const{elements:o,relationships:a}=n,i= ` : where ( $ { e } [ data - likec4 - color = $ { r } ] ) ` ;return[ `
$ { i } {
-- likec4 - palette - fill : $ { o . fill } ;
-- likec4 - palette - stroke : $ { o . stroke } ;
-- likec4 - palette - hiContrast : $ { o . hiContrast } ;
-- likec4 - palette - loContrast : $ { o . loContrast } ;
-- likec4 - palette - relation - stroke : $ { a . line } ;
-- likec4 - palette - relation - label : $ { a . label } ;
-- likec4 - palette - relation - label - bg : $ { a . labelBg } ;
}
$ { bet } $ { i } {
-- likec4 - palette - relation - stroke - selected : $ { Tte ( Rte ( a . line , "black" , 85 ) ) } ;
}
$ { Dte } $ { i } {
-- likec4 - palette - relation - stroke - selected : $ { Tte ( Rte ( a . line , "white" , 70 ) ) } ;
}
` .trim(),...ZNe(1,vet+1).map(l=>xet(e,r,n,l))].join( `
2025-11-07 11:50:17 +01:00
` )}function ket(e,r){return yn(r.colors,jE(),Ro(([n,o])=>wet(e,n,o)),oU( `
` ))}const _et=E.memo(({id:e})=>{const r= ` # $ { e } ` ,n=Yd()?.(),{theme:o}=nte(),a=ket(r,o);return y.jsx("style",{type:"text/css","data-likec4-colors":e,dangerouslySetInnerHTML:{__html:a},nonce:n})});function Pte(e,r){if(e._type==="dynamic")try{if(r??=e.variant,r==="sequence")return e.sequenceLayout.bounds}catch{}return e.bounds}function $ te({children:e}){const r=E.useContext(Zx);return E.useEffect(()=>{r||console.warn("LikeC4Diagram must be a child of MantineProvider")},[]),r?y.jsx(y.Fragment,{children:e}):y.jsx(g9,{defaultColorScheme:"auto",children:e})} $ te.displayName="EnsureMantine";const mR=({reducedMotion:e="user",children:r})=>{const n=Yd()?.();return y.jsx(wqe,{features:yVe,strict:!0,children:y.jsx(Eqe,{reducedMotion:e,...n&&{nonce:n},children:r})})};function Mte({onCanvasClick:e,onCanvasContextMenu:r,onCanvasDblClick:n,onEdgeClick:o,onChange:a,onEdgeContextMenu:i,onNavigateTo:l,onNodeClick:s,onNodeContextMenu:c,onOpenSource:u,onBurgerMenuClick:d,onInitialized:p,view:f,className:g,readonly:b=!0,controls:x=!b,fitView:w=!0,fitViewPadding:k=x? $ 2.withControls: $ 2.default,pannable:C=!0,zoomable:_=!0,background:T="dots",enableElementTags:R=!1,enableFocusMode:A=!1,enableElementDetails:D=!1,enableRelationshipDetails:N=!1,enableRelationshipBrowser: $ =!1,nodesDraggable:M=!b,nodesSelectable:j=!b||A||!!l||!!s,showNotations:L=!0,showNavigationButtons:Y=!!l,enableDynamicViewWalkthrough:O=!1,dynamicViewVariant:U,enableSearch:I=!1,initialWidth:q,initialHeight:V,experimentalEdgeEditing:G=!b,reduceGraphics:F="auto",renderIcon:J,where:Q,reactFlowProps:z,renderNodes:W,children:X}){const Z=ZW(),oe=E.useRef(null),ee=Pte(f,U),re=Eet(k);oe.current==null&&(oe.current={defaultEdges:[],defaultNodes:[],initialWidth:q??ee.width,initialHeight:V??ee.height,initialFitViewOptions:{maxZoom:HC,minZoom:pl,padding:re},initialMaxZoom:HC,initialMinZoom:pl});const pe=F==="auto"?C&&(ee.width??1)*(ee.height??1)>6e6&&f.nodes.some(Ce=>Ce.children?.length>0):F;return y.jsx( $ te,{children:y.jsx(mR,{...pe&&{reducedMotion:"always"},children:y.jsx(uEe,{value:J??null,children:y.jsx(hp,{features:{enableFitView:w,enableReadOnly:b,enableFocusMode:A,enableNavigateTo:!!l,enableElementDetails:D,enableRelationshipDetails:N,enableRelationshipBrowser: $ ,enableSearch:I,enableNavigationButtons:Y&&!!l,enableDynamicViewWalkthrough:f._type==="dynamic"&&O,enableEdgeEditing:G,enableNotations:L,enableVscode:!!u,enableControls:x,enableElementTags:R},children:y.jsxs(gKe,{handlers:{onCanvasClick:e,onCanvasContextMenu:r,onCanvasDblClick:n,onEdgeClick:o,onChange:a,onEdgeContextMenu:i,onNavigateTo:l,onNodeClick:s,onNodeContextMenu:c,onOpenSource:u,onBurgerMenuClick:d,onInitialized:p},children:[y.jsx(_et,{id:Z}),y.jsx( $ ze,{rootSelector: ` # $ { Z } ` ,children:y.jsx(Cze,{id:Z,className:g,reduceGraphics:pe,children:y.jsx( $ x,{fitView:w,...oe.current,children:y.jsxs(set,{view:f,zoomable:_,pannable:C,fitViewPadding:re,nodesSelectable:j,where:Q??null,dynamicViewVariant:U,children:[y.jsx(EJe,{nodesDraggable:M,nodesSelectable:j,background:T,reactFlowProps:z,renderNodes:W,children:X}),y.jsx(Yee,{})]})})})})]})})})})})}const Ote=e=>typeof e=="number"? ` $ { e } px ` :e;function Eet(e){return Uj(()=>qE(e)?qNe(e,Ote):Ote(e),[e],ut)}function Cet({children:e,likec4model:r}){return y.jsx(W0.Provider,{value:r,children:e})}const gR=({children:e})=>y.jsx("div",{style:{margin:"1rem 0"},children:y.jsx("div",{style:{margin:"0 auto",display:"inline-block",padding:"2rem",background:"rgba(250,82,82,.15)",color:"#ffa8a8"},children:e})}),Tet=({viewId:e})=>y.jsxs(gR,{children:["View ",y.jsx("code",{children:e})," not found"]}),Ret=e=>{throw new Error("LikeC4View is not available SSR")};var Ite={exports:{}},yR,Lte;function Aet(){if(Lte)return yR;Lte=1;var e="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";return yR=e,yR}var bR,zte;function Net(){if(zte)return bR;zte=1;var e=Aet();function r(){}function n(){}return n.resetWarningCache=r,bR=function(){function o(l,s,c,u,d,p){if(p!==e){var f=new Error("Calling PropTypes validators directly is not supported by the ` prop - types ` package. Use PropTypes.checkPropTypes() to call them. Read more at
In order to be iterable , non - array objects must have a [ Symbol . iterator ] ( ) method . ` )},Bet=function(e,r){return Oet(e)||Iet(e,r)||Let(e,r)||zet()},Hte=jte((function(e){function r(){return e.exports=r=Object.assign||function(n){for(var o=1;o<arguments.length;o++){var a=arguments[o];for(var i in a)Object.prototype.hasOwnProperty.call(a,i)&&(n[i]=a[i])}return n},r.apply(this,arguments)}e.exports=r})),jet=function(e,r){if(e==null)return{};var n,o,a={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],r.indexOf(n)>=0||(a[n]=e[n]);return a},qte=function(e,r){if(e==null)return{};var n,o,a=jet(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a},Fet=E.createContext(null);function Ute(e){var r=e.children,n=r===void 0?"":r,o=qte(e,["children"]);return typeof n!="string"&&(n=Ret()),Xr.createElement("template",Hte({},o,{dangerouslySetInnerHTML:{__html:n}}))}function Vte(e){var r=e.root,n=e.children;return Bi.createPortal(n===void 0?null:n,r)}function Het(e){var r=E.forwardRef((function(n,o){var a,i,l=n.mode,s=l===void 0?"open":l,c=n.delegatesFocus,u=c!==void 0&&c,d=n.styleSheets,p=d===void 0?[]:d,f=n.ssr,g=f!==void 0&&f,b=n.children,x=qte(n,["mode","delegatesFocus","styleSheets","ssr","children"]),w=(i=E.useRef((a=o)&&a.current),E.useEffect((function(){a&&(a.current=i.current)}),[a]),i),k=E.useState(null),C=Bet(k,2),_=C[0],T=C[1],R="node_".concat(s).concat(u);return E.useLayoutEffect((function(){if(w.current)try{if(typeof o=="function"&&o(w.current),g){var A=w.current.shadowRoot;return void T(A)}var D=w.current.attachShadow({mode:s,delegatesFocus:u});p.length>0&&(D.adoptedStyleSheets=p),T(D)}catch(N){(function( $ ){var M= $ .error,j= $ .styleSheets,L= $ .root;switch(M.name){case"NotSupportedError":j.length>0&&(L.adoptedStyleSheets=j);break;default:throw M}})({error:N,styleSheets:p,root:_})}}),[o,w,p]),Xr.createElement(Xr.Fragment,null,Xr.createElement(e.tag,Hte({key:R,ref:w},x),(_||g)&&Xr.createElement(Fet.Provider,{value:_},g?Xr.createElement(Ute,{shadowroot:s,shadowrootmode:s},e.render({root:_,ssr:g,children:b})):Xr.createElement(Vte,{root:_},e.render({root:_,ssr:g,children:b})))))}));return r.propTypes={mode:bl.oneOf(["open","closed"]),delegatesFocus:bl.bool,styleSheets:bl.arrayOf(bl.instanceOf(globalThis.CSSStyleSheet)),ssr:bl.bool,children:bl.node},r}Ute.propTypes={children:bl.oneOfType([bl.string,bl.node])},Vte.propTypes={root:bl.object.isRequired,children:bl.node};var vR=new Map;function qet(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},r=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"core",n=arguments.length>2&&arguments[2]!==void 0?arguments[2]:function(o){return o.children};return new Proxy(e,{get:function(o,a){var i=Met(a,{separator:"-"}),l="".concat(r,"-").concat(i);return vR.has(l)||vR.set(l,Het({tag:i,render:n})),vR.get(l)}})}var Uet=qet();const Vet='@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff2) format
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
: where ( [ data - likec4 - instance = "${e}" ] ) {
display : block ;
box - sizing : border - box ;
border : 0 solid transparent ;
background : transparent ;
padding : 0 ;
margin : 0 ;
overflow : hidden ;
width : 100 % ;
height : 100 % ;
min - width : 80 px ;
min - height : 80 px ;
}
` .trim();const{width:n,height:o}=r,a=n>o;return `
: where ( [ data - likec4 - instance = "${e}" ] ) {
display : block ;
box - sizing : border - box ;
border : 0 solid transparent ;
background : transparent ;
padding : 0 ;
overflow : hidden ;
aspect - ratio : $ { Math . ceil ( n ) } / $ { Math . ceil ( o ) } ;
$ { a ? "" : `
max - width : min ( 100 % , var ( -- likec4 - view - max - width , $ { Math . ceil ( n ) } px ) ) ;
margin - left : auto ;
margin - right : auto ; ` }
width : $ { a ? "100%" : "auto" } ;
height : $ { a ? "auto" : "100%" } ;
$ { a ? "min-width: 80px;" : "min-height: 80px;" }
max - height : min ( 100 % , var ( -- likec4 - view - max - height , $ { Math . ceil ( o ) } px ) ) ;
}
2025-11-07 11:50:17 +01:00
` .trim()}const Ket=Uet.div;function Zet({children:e,theme:r=Yet,injectFontCss:n=!0,styleNonce:o,colorScheme:a,keepAspectRatio:i=!1,...l}){const s=Get(a),c=ZW(),u=Xet(c,i),d=E.useRef(null),p=Wet(n,o),f=E.useCallback(()=>d.current??void 0,[d]);let g,b;return HE(o)&&(typeof o=="string"?(b=o,g=()=>o):typeof o=="function"&&(b=o(),g=o)),y.jsxs(y.Fragment,{children:[y.jsx("style",{type:"text/css",nonce:b,dangerouslySetInnerHTML:{__html:u}}),y.jsx(Ket,{ssr:!1,...l,styleSheets:p,"data-likec4-instance":c,children:y.jsx("div",{ref:d,"data-mantine-color-scheme":s,className:"likec4-shadow-root",children:y.jsx(g9,{...a&&{forceColorScheme:a},defaultColorScheme:s,getRootElement:f,...g&&{getStyleNonce:g},cssVariablesSelector:".likec4-shadow-root",theme:r,children:y.jsx(mR,{children:e})})})})]})}const Qet=ye({cursor:"pointer","--mantine-cursor-pointer":"pointer","& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)":{cursor:"pointer"}});function Jet({viewId:e,className:r,pannable:n=!1,zoomable:o=!1,keepAspectRatio:a=!0,colorScheme:i,injectFontCss:l=!0,controls:s=!1,background:c="transparent",browser:u=!0,showNavigationButtons:d=!1,showNotations:p,enableFocusMode:f=!1,enableDynamicViewWalkthrough:g=!1,enableElementDetails:b=!1,enableRelationshipDetails:x=!1,enableRelationshipBrowser:w=x,reduceGraphics:k="auto",mantineTheme:C,styleNonce:_,style:T,reactFlowProps:R,renderNodes:A,children:D,...N}){const $ =Rze(),[M,j]=E.useState(null),L=it(()=>{j(e)});if(! $ )return y.jsx(gR,{children:"LikeC4Model not found. Make sure you provided LikeC4ModelProvider."});const Y= $ .findView(e)?. $ view;if(!Y)return y.jsx(Tet,{viewId:e});if(Y._stage!=="layouted")return y.jsxs(gR,{children:['LikeC4 View " $ ',e,'" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.']});const O=M? $ .findView(M)?. $ view:null,U=(Y.notation?.nodes??[]).length>0;p??=U;const I=u!==!1,q=eU(u)?{}:u,V=Pte(Y,N.dynamicViewVariant);return y.jsx(Zet,{injectFontCss:l,theme:C,colorScheme:i,styleNonce:_,keepAspectRatio:a?V:!1,className:Je("likec4-view",r),style:T,children:y.jsxs(mR,{children:[y.jsx(Mte,{view:Y,readonly:!0,pannable:n,zoomable:o,background:c,fitView:!0,fitViewPadding: $ 2.default,showNotations:p,enableDynamicViewWalkthrough:g,showNavigationButtons:d,experimentalEdgeEditing:!1,enableFocusMode:f,enableRelationshipDetails:x,enableElementDetails:b,enableRelationshipBrowser:w,enableElementTags:!1,controls:s,nodesDraggable:!1,reduceGraphics:k,className:Je("likec4-static-view",I&&Qet),enableSearch:!1,...I&&{onCanvasClick:L,onNodeClick:L},reactFlowProps:R,renderNodes:A,children:D,...N}),O&&y.jsxs(My,{openDelay:0,onClose:()=>j(null),children:[y.jsx(Mte,{view:O,pannable:!0,zoomable:!0,background:"dots",onNavigateTo:j,showNavigationButtons:!0,enableDynamicViewWalkthrough:!0,enableFocusMode:!0,enableRelationshipBrowser:!0,enableElementDetails:!0,enableRelationshipDetails:!0,enableSearch:!0,enableElementTags:!0,controls:!0,readonly:!0,fitView:!0,...N,fitViewPadding: $ 2.withControls,...q,showNotations:q.showNotations??p,renderNodes:A}),y.jsx(Se,{pos:"absolute",top:"1rem",right:"1rem",children:y.jsx(or,{variant:"default",color:"gray",onClick:G=>{G.stopPropagation(),j(null)},children:y.jsx(Hf,{})})})]})]})})}var ett=e=>y.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",...e,children:[y.jsx("path",{fill:"#343741",d:"M4 64c0 5.535.777 10.879 2.098 16H84c8.836 0 16-7.164 16-16s-7.164-16-16-16H6.098A63.7 63.7 0 0 0 4 64"}),y.jsx("path",{fill:"#fec514",d:"M111.695 30.648A61.5 61.5 0 0 0 117.922 24C106.188 9.379 88.199 0 68 0 42.715 0 20.957 14.71 10.574 36H98.04a20.12 20.12 0 0 0 13.652-5.352"}),y.jsx("path",{fill:"#00bfb3",d:"M98.04 92H10.577C20.961 113.29 42.715 128 68 128c20.2 0 38.188-9.383 49.922-24a61 61 0 0 0-6.227-6.648A20.13 20.13 0 0 0 98.04 92"})]}),ttt=e=>y.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",...e,children:y.jsx("path",{fill:"#F34F29",d:"M124.737 58.378 69.621 3.264c-3.172-3.174-8.32-3.174-11.497 0L46.68 14.71l14.518 14.518c3.375-1.139 7.243-.375 9.932 2.314 2.703 2.706 3.461 6.607 2.294 9.993l13.992 13.993
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
addressing a growing number of use cases . It centrally stores your data so you can
discover the expected and uncover the unexpected . ` },title:"Elasticsearch",kind:"container",id:"elasticsearch"},objectstorage:{style:{opacity:20},technology:"S3 Object Storage",description:{txt:"s3 Object Storage"},title:"s3 Object Storage",kind:"container",id:"objectstorage"},postgres:{style:{opacity:20,icon:"tech:postgresql"},technology:"PostgreSQL",description:{txt: ` PostgreSQL is a powerful , open source object - relational database system .
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability , data integrity ,
2025-11-07 11:50:17 +01:00
and correctness . ` },title:"PostgreSQL",kind:"container",id:"postgres"},redis:{style:{opacity:20,icon:"tech:redis"},technology:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},title:"Redis",kind:"container",id:"redis"},developer:{style:{shape:"person",color:"green"},description:{txt:"The regular user of the platform"},title:"Developer",kind:"actor",id:"developer"},platformdeveloper:{style:{shape:"person",color:"gray"},description:{txt:"The EDP engineer"},title:"Platform Developer",kind:"actor",id:"platformdeveloper"},otherProductLifecycleRoles:{style:{shape:"person",color:"green"},description:{txt:"Coworking roles in the outer loop"},title:"Reviewer, Tester, Auditors, Operators",kind:"actor",id:"otherProductLifecycleRoles"},customers:{style:{shape:"person",color:"amber"},description:{txt:"Consumers of your Application"},title:"End Customers",kind:"actor",id:"customers"},cloud:{style:{},technology:"IaaS/PaaS",description:{txt:"Cloud environments"},title:"Cloud",kind:"system",id:"cloud"},enterprise:{style:{},description:{txt:"The customers' enterprise systems"},title:"Customers' Enterprise Systems",kind:"system",id:"enterprise"},edf:{style:{icon:"tech:kubernetes"},technology:"Kubernetes",description:{txt:"EDP Foundry is a platform for building and deploying EDPs tenantwise."},title:"EDF",kind:"system",id:"edf"},edp:{style:{icon:"tech:kubernetes"},technology:"Kubernetes",description:{txt:"EDP Edge Development Platform"},title:"EDP",kind:"system",id:"edp"},localbox:{style:{},technology:"Linux/Windows/Mac",description:{txt:"A local development system"},title:"localbox",kind:"system",id:"localbox"},documentor:{style:{shape:"person",color:"green"},technology:"Hugo, Markdown, LikeC4",description:{txt:"Content creator and maintainer of the developer platform documentation"},title:"Documentor",kind:"person",id:"documentor"},docPlatform:{style:{},description:{txt:"Hugo-based documentation system with integrated architecture visualization"},title:"Documentation Platform",kind:"system",id:"docPlatform"},cicdPipeline:{style:{},description:{txt:"Automated testing and deployment pipeline"},title:"CI/CD Pipeline",kind:"system",id:"cicdPipeline"},deploymentEnv:{style:{},description:{txt:"Edge deployment infrastructure"},title:"Deployment Environment",kind:"system",id:"deploymentEnv"},"edfbuilder_workflow.runEDP":{style:{opacity:25},title:"Run edpbuilder script",kind:"step",id:"edfbuilder_workflow.runEDP"},"edfbuilder_workflow.applyEDFBuilder":{style:{opacity:15},title:"Applies EDFbuilder resource (and triggers creation)",kind:"step",id:"edfbuilder_workflow.applyEDFBuilder"},"applicationspecification.application_gitrepo":{style:{icon:"tech:git"},technology:"Git",description:{txt:"Git Application Repository"},title:"Git App Repo",kind:"component",id:"applicationspecification.application_gitrepo"},"applicationspecification.applicationspec_gitrepo":{style:{icon:"tech:git"},technology:"Git",description:{txt:"Git Application Specification Repository"},title:"Git AppSpec Repo",kind:"component",id:"applicationspecification.applicationspec_gitrepo"},"edp.api":{style:{opacity:20,icon:"tech:swagger"},description:{txt:"API for the EDP platform"},title:"API",kind:"container",id:"edp.api"},"edp.argoCD":{style:{opacity:20},description:{txt:"GitOps Service"},title:"ArgoCD",kind:"container",id:"edp.argoCD"},"edp.ui":{style:{opacity:20},description:{txt:"Developer Portal"},title:"Backstage",kind:"container",id:"edp.ui"},"edp.crossplane":{style:{opacity:20},tags:["internal"],description:{txt:"Declarative management of ressources"},title:"Crossplane",kind:"container",id:"edp.crossplane"},"edp.externalSecrets":{style:{opacity:20},tags:["internal"],description:{txt:"Provider to access externally stored Kubernetes secrets"},title:"external-secrets",kind:"container",id:"edp.externalSecrets"},"edp.forgejo":{style:{opacity:20,icon:"tech:go"},technology:"Golang",description:{txt: ` Fully managed DevOps Platform
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
offering capabilities like
code version controling
collaboration and ticketing
2025-11-07 11:50:17 +01:00
and security scanning ` },title:"Forgejo",kind:"container",id:"edp.forgejo"},"edp.forgejoActions":{style:{icon:"tech:go"},technology:"Golang",description:{txt:"Continuous Integration like Github Actions"},title:"Forgejo Actions",kind:"component",id:"edp.forgejoActions"},"edp.imageregistry":{style:{icon:"tech:go"},technology:"Golang",description:{txt:"Container Image Registry"},title:"Forgejo OCI Image Registry",kind:"component",id:"edp.imageregistry"},"edp.forgejogit":{style:{icon:"tech:git"},title:"ForgejoGit",kind:"component",id:"edp.forgejogit"},"edp.grafana":{style:{opacity:20,icon:"tech:grafana"},description:{txt:"Data visualization and monitoring"},title:"Grafana",kind:"container",id:"edp.grafana"},"edp.ingressNginx":{style:{opacity:20},tags:["internal"],description:{txt:"Ingress Controller for incoming http(s) traffic"},title:"Ingress",kind:"container",id:"edp.ingressNginx"},"edp.keycloak":{style:{opacity:20},description:{txt:"Single Sign On for all EDP products"},title:"Keycloak",kind:"container",id:"edp.keycloak"},"edp.kyverno":{style:{opacity:20},tags:["internal"],description:{txt:"Policy-as-Code"},title:"Kyverno",kind:"container",id:"edp.kyverno"},"edp.loki":{style:{opacity:20},description:{txt:"Log aggregation system"},title:"Loki",kind:"container",id:"edp.loki"},"edp.mailhog":{style:{opacity:20},description:{txt:"Web and API based SMTP testing"},title:"Mailhog",kind:"container",id:"edp.mailhog"},"edp.minio":{style:{opacity:20},description:{txt:"S3 compatible blob storage"},title:"Minio",kind:"container",id:"edp.minio"},"edp.monitoring":{style:{opacity:20},description:{txt:"Observability system to monitor deployed components"},title:"Monitoring",kind:"container",id:"edp.monitoring"},"edp.openbao":{style:{opacity:20},description:{txt:"Secure secret storage"},title:"OpenBao",kind:"container",id:"edp.openbao"},"edp.prometheus":{style:{opacity:20,icon:"tech:prometheus"},description:{txt:"Monitoring and alerting toolkit"},title:"Prometheus",kind:"container",id:"edp.prometheus"},"edp.spark":{style:{opacity:20},tags:["internal"],description:{txt:"Allows running Spark applications on K8s"},title:"Spark",kind:"container",id:"edp.spark"},"edp.velero":{style:{opacity:20},tags:["internal"],description:{txt:"Backup Kubernetes resources"},title:"Velero",kind:"container",id:"edp.velero"},"cloud.application":{style:{color:"primary"},technology:"DSL",description:{txt:"An application description"},title:"application",kind:"schema",id:"cloud.application"},"edp.application":{style:{color:"primary"},technology:"DSL",description:{txt:"An application description"},title:"application",kind:"schema",id:"edp.application"},"edp.testApp":{style:{opacity:20},description:{txt:"Testapp to validate deployments"},title:"Fibonacci",kind:"container",id:"edp.testApp"},"localbox.application":{style:{color:"primary"},technology:"DSL",description:{txt:"An application description"},title:"application",kind:"schema",id:"localbox.application"},"localbox.git":{style:{icon:"tech:git"},technology:"Git",description:{txt:"local git"},title:"git",kind:"component",id:"localbox.git"},"docPlatform.hugoSite":{style:{},technology:"Hugo Extended, Docsy",description:{txt:"Static site generator based on Hugo with Docsy theme"},title:"Hugo Site",kind:"component",id:"docPlatform.hugoSite"},"docPlatform.contentRepo":{style:{shape:"storage"},technology:"Git, Markdown",description:{txt:"Markdown files, images, and configuration"},title:"Content Repository",kind:"repository",id:"docPlatform.contentRepo"},"docPlatform.likec4Integration":{style:{},technology:"LikeC4, Web Components",description:{txt:"Architecture diagram visualization embedded in documentation"},title:"LikeC4 Integration",kind:"component",id:"docPlatform.likec4Integration"},"docPlatform.taskfile":{style:{},technology:"Task (go-task)",description:{txt:"Task automation for local development, build, and testing"},title:"Taskfile",kind:"tool",id:"docPlatform.taskfile"},"docPlatform.devServer":{style:{},technology:"Hugo Server",description:{txt:"Local Hugo server with hot reload for content development"},title:
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
A tenant is a folder in Foundry - Config - Forgejo . On merge triggers reconciliation to EDP .
2025-11-07 11:50:17 +01:00
Optionally we will have a WebUI / API / CLI ` },tags:[],style:{opacity:15,size:"md"},depth:1,x:855,y:79,width:870,height:981,labelBBox:{x:6,y:0,width:280,height:15}},{id:"local.ingressNginx",parent:"local",level:1,children:["local.ingressNginx.ingressNginx"],inEdges:[],outEdges:["15juth8","p2br4p","o229dq","2vnvvg","4ix58c","1hr2s5j","1nksp5g","m2japo","4drflo","ihlgsc"],deploymentRef:"local.ingressNginx",title:"ingress-nginx",kind:"namespace",color:"primary",shape:"rectangle",modelRef:"edp.ingressNginx.ingressNginx",icon:"tech:nginx",tags:[],style:{opacity:15,size:"md"},depth:1,x:4970,y:97,width:384,height:265,labelBBox:{x:6,y:0,width:92,height:15}},{id:"local.velero",parent:"local",level:1,children:["local.velero.velero"],inEdges:[],outEdges:["3znaik"],deploymentRef:"local.velero",title:"Velero",kind:"namespace",color:"primary",shape:"rectangle",modelRef:"edp.velero.velero",tags:[],style:{opacity:15,size:"md"},depth:1,x:8255,y:97,width:384,height:265,labelBBox:{x:6,y:0,width:49,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:[],inEdges:[],outEdges:["109g3jm"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},x:920,y:150,width:342,height:180,labelBBox:{x:18,y:54,width:306,height:66}},{id:"local.crossplane",parent:"local",level:1,children:["local.crossplane.crossplane","local.crossplane.crossplaneFunction","local.crossplane.crossplaneRbacManager","local.crossplane.providerArgoCD","local.crossplane.providerKind","local.crossplane.providerShell"],inEdges:[],outEdges:[],deploymentRef:"local.crossplane",title:"crossplane-system",kind:"namespace",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:8689,y:79,width:2670,height:301,labelBBox:{x:6,y:0,width:129,height:15}},{id:"local.crossplane.crossplane",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Crossplane",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.crossplane",modelRef:"edp.crossplane.crossplane",x:8739,y:150,width:320,height:180,labelBBox:{x:107,y:74,width:105,height:24}},{id:"local.crossplane.crossplaneFunction",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Function Patch and Transform",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.crossplaneFunction",modelRef:"edp.crossplane.crossplaneFunction",x:9189,y:150,width:320,height:180,labelBBox:{x:24,y:74,width:273,height:24}},{id:"local.crossplane.crossplaneRbacManager",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"RBAC Manager",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.crossplaneRbacManager",modelRef:"edp.crossplane.crossplaneRbacManager",x:9639,y:150,width:320,height:180,labelBBox:{x:88,y:74,width:144,height:24}},{id:"local.crossplane.providerArgoCD",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"ArgoCD Provider",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.providerArgoCD",modelRef:"edp.crossplane.providerArgoCD",x:10089,y:150,width:320,height:180,labelBBox:{x:82,y:74,width:155,height:24}},{id:"local.crossplane.providerKind",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Kind Provider",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.providerKind",modelRef:"edp.crossplane.providerKind",x:10539,y:150,width:320,height:180,labelBBox:{x:98,y:74,width:124,height:24}},{id:"local.crossplane.providerShell",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Shel
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
offering capabilities like
code version controling
collaboration and ticketing
2025-11-07 11:50:17 +01:00
and security scanning ` },technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"local.gitea.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:7363,y:497,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"local.keycloak.keycloak",parent:"local.keycloak",level:2,children:[],inEdges:["2vnvvg"],outEdges:["4zwy1m"],kind:"instance",title:"Keycloak",technology:"Java",tags:[],icon:"tech:java",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.keycloak.keycloak",modelRef:"edp.keycloak.keycloak",x:2367,y:497,width:320,height:180,labelBBox:{x:104,y:65,width:143,height:45}},{id:"local.monitoring.alloy",parent:"local.monitoring",level:2,children:[],inEdges:["1hr2s5j"],outEdges:["sb2j38"],kind:"instance",title:"Alloy",description:{txt:"Open Telemetry Collector"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:15,size:"md",multiple:!0},deploymentRef:"local.monitoring.alloy",modelRef:"edp.monitoring.alloy",x:3737,y:497,width:320,height:180,labelBBox:{x:59,y:63,width:233,height:48}},{id:"local.monitoring.queryFrontend",parent:"local.monitoring",level:2,children:[],inEdges:["1nksp5g"],outEdges:[],kind:"instance",title:"Query Frontend",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.monitoring.queryFrontend",modelRef:"edp.monitoring.loki.queryFrontend",x:3287,y:497,width:320,height:180,labelBBox:{x:88,y:74,width:144,height:24}},{id:"local.openbao.openbao",parent:"local.openbao",level:2,children:[],inEdges:["m2japo"],outEdges:[],kind:"instance",title:"Openbao",technology:"Openbao",tags:[],color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.openbao.openbao",modelRef:"edp.openbao.openbao",x:7835,y:497,width:320,height:180,labelBBox:{x:117,y:65,width:86,height:45}},{id:"local.openbao.agentInjector",parent:"local.openbao",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Agent Injector",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.openbao.agentInjector",modelRef:"edp.openbao.agentInjector",x:7835,y:150,width:320,height:180,labelBBox:{x:96,y:74,width:127,height:24}},{id:"local.fibonacci.fibonacci",parent:"local.fibonacci",level:2,children:[],inEdges:["4drflo"],outEdges:[],kind:"instance",title:"Fibonacci",technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.fibonacci.fibonacci",modelRef:"edp.testApp.fibonacci",x:4189,y:497,width:320,height:180,labelBBox:{x:101,y:65,width:148,height:45}},{id:"local.mailhog.mailhog",parent:"local.mailhog",level:2,children:[],inEdges:["ihlgsc"],outEdges:[],kind:"instance",title:"Mailhog",technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.mailhog.mailhog",modelRef:"edp.mailhog.mailhog",x:4639,y:497,width:320,height:180,labelBBox:{x:109,y:65,width:132,height:45}},{id:"local.minio.minio",parent:"local.minio",level:2,children:[],inEdges:["3znaik","4ix58c"],outEdges:[],kind:"instance",title:"S3 Blob Storage",technology:"Minio",tags:[],color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.minio.minio",modelRef:"edp.minio.minio",x:8287,y:497,width:320,height:180,labelBBox:{x:85,y:65,width:150,height:45}},{id:"otc-edp-per-tenant",parent:null,level:0,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure","otc-edp-per-tenant.cce","otc-edp-per-tenant.cloudServices"],inEdges:["r3wxut","1sng0q0","e3benz"],outEdges:[],deploymentRef:"otc-edp-per-tenant",title:"OTC EDP per tenant cluster",kind:"cloud",technology:"OTC",color:"primary",shape:"rectangle",description:{txt: ` OTC environment for EDP . EDP is the environment a customer gets from us .
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
2025-11-07 11:50:17 +01:00
This is kubernetes clusters and other infrastructure like nodes and vms , and platform services . All is set up by IaC - pipelines in the Foundry . ` },tags:[],style:{opacity:15,size:"md"},depth:1,x:1775,y:79,width:442,height:1668,labelBBox:{x:6,y:0,width:181,height:15}},{id:"local.backstage.database",parent:"local.backstage",level:2,children:[],inEdges:["19kg5y"],outEdges:[],kind:"instance",title:"Database",technology:"Postgresql",tags:[],icon:"tech:postgresql",color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.backstage.database",modelRef:"edp.ui.database",x:5091,y:830,width:320,height:180,labelBBox:{x:101,y:64,width:148,height:46}},{id:"local.argocd.argocdRedis",parent:"local.argocd",level:2,children:[],inEdges:["1gfgfhk","qfu5xm","g7xnzs","fon3rk"],outEdges:[],kind:"instance",title:"Redis",technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.argocd.argocdRedis",modelRef:"edp.argoCD.argocdRedis",x:6686,y:830,width:320,height:180,labelBBox:{x:119,y:64,width:113,height:46}},{id:"local.keycloak.keycloakDB",parent:"local.keycloak",level:2,children:[],inEdges:["4zwy1m"],outEdges:[],kind:"instance",title:"Database",technology:"Postgresql",tags:[],icon:"tech:postgresql",color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.keycloak.keycloakDB",modelRef:"edp.keycloak.keycloakDB",x:2367,y:830,width:320,height:180,labelBBox:{x:101,y:64,width:148,height:46}},{id:"local.monitoring.distributor",parent:"local.monitoring",level:2,children:[],inEdges:["sb2j38"],outEdges:[],kind:"instance",title:"Distributor",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.monitoring.distributor",modelRef:"edp.monitoring.loki.distributor",x:3737,y:830,width:320,height:180,labelBBox:{x:112,y:74,width:95,height:24}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:[],outEdges:["fkkf8y"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},x:1825,y:150,width:342,height:180,labelBBox:{x:18,y:54,width:306,height:66}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:["fkkf8y","r3wxut","1sng0q0"],outEdges:["pit45i"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"primary",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},x:1828,y:1206,width:327,height:180,labelBBox:{x:46,y:53,width:266,height:67}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:["pit45i","e3benz"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},x:1832,y:1517,width:320,height:180,labelBBox:{x:67,y:53,width:185,height:67}},{id:"local.spark.sparkoperator",parent:"local",level:1,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Spark Operator",technology:"Spark",tags:[],icon:"tech:spark",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.spark.sparkoperator",modelRef:"edp.spark.sparkoperator",x:12809,y:150,width:320,height:180,labelBBox:{x:76,y:65,width:198,height:45}}],edges:[{id:"pit45i",source:"otc-edp-per-tenant.cce",target:"otc-edp-per-tenant.cloudServices",label:null,dotpos:"e,1992,1517.1 1992,1386 1992,1423.8 1992,1468 1992,1506.9",points:[[1992,1386],[1992,1424],[1992,1468],[1992,1507]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1fzhjm9","15njmlz","hks76r","1w18ve8"],color:"gray",line:"dashed",head:"normal"},{id:"fkkf8y",source:"otc-edp-per-tenant.forgejoRun
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
This is kubernetes clusters and other infrastructure like nodes and vms , and platform services . All is set up by IaC - pipelines in the Foundry . ` },tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:8,width:1994,height:1159,labelBBox:{x:6,y:0,width:181,height:15}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["1dcszi5"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:321,y:150,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cce.edp"],inEdges:["1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:755,y:79,width:954,height:719,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edp-per-tenant.cce.edp",parent:"otc-edp-per-tenant.cce",level:2,children:["otc-edp-per-tenant.cce.edp.externalSecrets","otc-edp-per-tenant.cce.edp.ingressNginx","otc-edp-per-tenant.cce.edp.argoCD","otc-edp-per-tenant.cce.edp.forgejo"],inEdges:["1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce.edp",title:"EDP",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:787,y:132,width:890,height:634,labelBBox:{x:6,y:0,width:27,height:15}},{id:"otc-edp-per-tenant.cce.edp.externalSecrets",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:837,y:204,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:65}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edp-per-tenant.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["1dcszi5"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:353,y:204,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edp-per-tenant.cce.edp.ingressNginx",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:["1ir70dd","1kr1wg1"],kind:"instance",title:"Ingress",description:{txt:"Ingress Controller for incoming http(s) traffic"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.ingressNginx",modelRef:"edp.ingressNginx",navigateTo:"ingressNginx",x:1287,y:204,width:320,height:180,labelBBox:{x:33,y:54,width:255,height:65}},{id:"otc-edp-per-tenant.cce.edp.argoCD",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:["1ir70dd"],outEdges:[],kind:"instance",title:"ArgoCD",description:{txt:"GitOps Service"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.argoCD",modelRef:"edp.argoCD",navigateTo:"argoCD",x:1307,y:536,width:320,height:180,labelBBox:{x:108,y:63,width:105,height:48}},{id:"otc-edp-per-tenant.cce.edp.forgejo",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:["1kr1wg1","1dcszi5"],outE
offering capabilities like
code version controling
collaboration and ticketing
and security scanning ` },technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:837,y:536,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cloudServices.postgres","otc-edp-per-tenant.cloudServices.redis","otc-edp-per-tenant.cloudServices.objectstorage","otc-edp-per-tenant.cloudServices.elasticsearch"],inEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},depth:1,x:58,y:815,width:1894,height:302,labelBBox:{x:6,y:0,width:127,height:15}},{id:"otc-edp-per-tenant.cloudServices.postgres",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["8msu1q"],outEdges:[],kind:"instance",title:"PostgreSQL",description:{txt: ` PostgreSQL is a powerful , open source object - relational database system .
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability , data integrity ,
and correctness . ` },technology:"PostgreSQL",tags:[],icon:"tech:postgresql",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.postgres",modelRef:"postgres",x:108,y:887,width:354,height:180,labelBBox:{x:46,y:17,width:292,height:139}},{id:"otc-edp-per-tenant.cloudServices.redis",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["120qe5o"],outEdges:[],kind:"instance",title:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.redis",modelRef:"redis",x:592,y:887,width:359,height:180,labelBBox:{x:47,y:26,width:297,height:121}},{id:"otc-edp-per-tenant.cloudServices.objectstorage",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["ealiax"],outEdges:[],kind:"instance",title:"s3 Object Storage",description:{txt:"s3 Object Storage"},technology:"S3 Object Storage",tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.objectstorage",modelRef:"objectstorage",x:1082,y:887,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"otc-edp-per-tenant.cloudServices.elasticsearch",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["1trj5u6"],outEdges:[],kind:"instance",title:"Elasticsearch",description:{txt: ` Elasticsearch is a distributed , RESTful search and analytics engine capable of
addressing a growing number of use cases . It centrally stores your data so you can
discover the expected and uncover the unexpected . ` },technology:"Elasticsearch",tags:[],icon:"tech:elasticsearch",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.elasticsearch",modelRef:"elasticsearch",x:1532,y:887,width:370,height:180,labelBBox:{x:46,y:17,width:308,height:139}}],edges:[{id:"1ir70dd",source:"otc-edp-per-tenant.cce.edp.ingressNginx",target:"otc-edp-per-tenant.cce.edp.argoCD",label:"https",dotpos:"e,1461.6,536.51 1452.4,383.25 1455,427.28 1458.2,480.64 1461,526.05",points:[[1452,383],[1455,427],[1458,481],[1461,526]],labelBBox:{x:1459,y:448,width:34,height:18},parent:"otc-edp-per-tenant.cce.edp",relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"1kr1wg1",source:"otc-edp-per-tenant.cce.edp.ingressNginx",target:"otc-edp-per-tenant.cce.edp.forgejo",label:"https",dotpos:"e,1125.1,536.62 1328.8,383.47 1268.4,428.89 1194.8,484.19 1133.3,530.44",points:[[1329,383],[1268,429],[1195,484],[1133,530]],labelBBox:{x:1241,y:448,width:34,height:18},parent:"otc-edp-per-tenant.cce.edp",relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"1dcszi5",source:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",target:"otc-edp-per-tenant.cce.edp.forgejo",label:"registers",dotpos:"e,874.42,536.62 645.71,383.47 713.81,429.07 796.79,484.64 866.04,531.01",points:[[646,383],[714,429],[797,485],[866,531]],labelBBox:{x:776,y:448,width:58,height:18},parent:"otc-edp-per-tenant",relations:["g9oj4f"],color:"gray",line:"dashed",head:"normal"},{id:"8msu1q",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.postgres",label:null,dotpos:"e,408.47,886.62 836.84,684.1 743.28,717.71 626.38,763.79 527,815.4 490.05,834.59 451.75,858.08 416.81,881.1",points:[[837,684],[743,718],[626,764],[527,815],[490,835],[452,858],[417,881]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["hks76r"],color:"gray",line:"dashed",head:"normal"},{id:"120qe5o",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.redis",label:null,dotpos:"e,832,886.69 947.09,716.17 913.73,765.59 872.15,827.21 837.87,877.99",points:[[947,716],[914,766],[872,827],[838,878]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1w18ve8"],color:"gray",line:"dashed",head:"normal"},{id:"ealiax",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.objectstorage",label:null,dotpos:"e,1182,886.69 1066.9,716.17 1100.3,765.59 1141.9,827.21 1176.1,877.99",points:[[1067,716],[1100,766],[1142,827],[1176,878]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["15njmlz"],color:"gray",line:"dashed",head:"normal"},{id:"1trj5u6",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.elasticsearch",label:null,dotpos:"e,1604.5,886.79 1103.6,716.4 1143.6,747.92 1192.2,780.08 1242,798.4 1336.1,833 1371.9,783.6 1467,815.4 1512.1,830.47 1557.1,855.46 1596.3,881.27",points:[[1104,716],[1144,748],[1192,780],[1242,798],[1336,833],[1372,784],[1467,815],[1512,830],[1557,855],[1596,881]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1fzhjm9"],color:"gray",line:"dashed",head:"normal"}]},"edp-foundry-central-service":{_type:"deployment",tags:null,links:null,_stage:"layouted",sourcePath:"views/deployment/otc/foundry.c4",description:null,title:"EDP Foundry Central Service",id:"edp-foundry-central-service",autoLayout:{direction:"TB"},hash:"8f8eb235b0e8ff555a22ed61d124ba68e67e5ee2",bounds:{x:0,y:0,width:3894,height:1218},nodes:[{id:"otc-edpFoundry",parent:null,level:0,children:["otc-edpFoundry.cce","otc-edpFoundry.forgejoRunnerInfrastructure","otc-edpFoundry.workflowSetupEDPInfrastructure","otc-edpFoundry.workflowSetupArgoCDInfrastructure"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry",title:"OTC EDP Foundry Central Service clusters",kind:"cloud",technology:"OTC",color:"slate",shape:"rectangle",description:{txt: ` OTC environments for the central EDP Foundry services . This is kubernetes clusters and other infrastructure like nodes and vms , and optionally platform servi
A tenant is a folder in Foundry - Config - Forgejo . On merge triggers reconciliation to EDP .
Optionally we will have a WebUI / API / CLI ` },tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:8,width:3878,height:1202,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otc-edpFoundry.cce",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.cce.internalServices","otc-edpFoundry.cce.centralObservability"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:58,y:79,width:2360,height:755,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edpFoundry.cce.internalServices",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.internalServices.externalSecrets","otc-edpFoundry.cce.internalServices.ingressNginx","otc-edpFoundry.cce.internalServices.argoCD","otc-edpFoundry.cce.internalServices.forgejo","otc-edpFoundry.cce.internalServices.openbao"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce.internalServices",title:"EDP Foundry Internal Services",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:1028,y:150,width:1340,height:634,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.cce.internalServices.externalSecrets",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:1308,y:222,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:65}},{id:"otc-edpFoundry.cce.centralObservability",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.centralObservability.grafana","otc-edpFoundry.cce.centralObservability.prometheus","otc-edpFoundry.cce.centralObservability.loki"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry.cce.centralObservability",title:"EDP Foundry Central Observability",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:108,y:150,width:870,height:634,labelBBox:{x:6,y:0,width:232,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["628xl1"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"green",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2468,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edpFoundry.cce.centralObservability.grafana",parent:"otc-edpFoundry.cce.centralObservability",level:3,children:[],inEdges:[],outEdges:["qykxlm","yv49z5"],kind:"instance",title:"Grafana",description:{txt:"Data visualization and monitoring"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.centralObservability.grafana",modelRef:"edp.grafana",x:289,y:222,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:47}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edpFoundry.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["628xl1"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2500,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.cce.cent
offering capabilities like
code version controling
collaboration and ticketing
and security scanning ` },technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:1978,y:554,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edpFoundry.cce.internalServices.openbao",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:["u5oqat"],outEdges:[],kind:"instance",title:"OpenBao",description:{txt:"Secure secret storage"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.openbao",modelRef:"edp.openbao",x:1528,y:554,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow"],inEdges:["84397w"],outEdges:[],deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure",title:"EDP infrastructure Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP infrastructure Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2902,y:150,width:442,height:1010,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupArgoCDInfrastructure.edpworkflow"],inEdges:["1oz2va9"],outEdges:[],deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",title:"EDP ArgoCD Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP Setup ArgoCD Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:3394,y:150,width:442,height:1010,labelBBox:{x:6,y:0,width:149,height:15}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["84397w"],outEdges:["1hnil62"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2961,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1oz2va9"],outEdges:["1gtxobu"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:3466,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["1hnil62"],outEdges:["ekzztw"],kind:"instance",title:"Forgejo Runner Worker",description:{txt:"A worker is a service that runs a job invoked by a runner. A worker typically is a container."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",modelRef:"forgejoRunnerWorker",x:2954,y:554,width:333,height:180,labelBBox:{x:18,y:45,width:297,height:84}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1gtxobu"]
A tenant is a folder in Foundry - Config - Forgejo . On merge triggers reconciliation to EDP .
Optionally we will have a WebUI / API / CLI ` },tags:[],style:{opacity:15,size:"md"},depth:3,x:2052,y:8,width:3408,height:1609,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otc-edpFoundry.cce",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.cce.internalServices","otc-edpFoundry.cce.centralObservability"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:2594,y:79,width:1890,height:1488,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edpFoundry.cce.internalServices",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.internalServices.externalSecrets","otc-edpFoundry.cce.internalServices.ingressNginx","otc-edpFoundry.cce.internalServices.argoCD","otc-edpFoundry.cce.internalServices.forgejo","otc-edpFoundry.cce.internalServices.openbao"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce.internalServices",title:"EDP Foundry Internal Services",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:2644,y:883,width:1790,height:634,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.cce.internalServices.externalSecrets",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:2694,y:1287,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:66}},{id:"otc-edpFoundry.cce.centralObservability",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.centralObservability.grafana","otc-edpFoundry.cce.centralObservability.prometheus","otc-edpFoundry.cce.centralObservability.loki"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry.cce.centralObservability",title:"EDP Foundry Central Observability",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:3349,y:150,width:870,height:634,labelBBox:{x:6,y:0,width:232,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["628xl1"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"green",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:5026,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edp-per-tenant",parent:null,level:0,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure","otc-edp-per-tenant.cce","otc-edp-per-tenant.cloudServices"],inEdges:["1asm38z","1or831y","ejqwjt"],outEdges:[],deploymentRef:"otc-edp-per-tenant",title:"OTC EDP per tenant cluster",kind:"cloud",technology:"OTC",color:"slate",shape:"rectangle",description:{txt: ` OTC environment for EDP . EDP is the environment a customer gets from us .
This is kubernetes clusters and other infrastructure like nodes and vms , and platform services . All is set up by IaC - pipelines in the Foundry . ` },tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:97,width:1994,height:1889,labelBBox:{x:6,y:0,width:181,height:15}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["1dcszi5"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:608,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edpFoundry.cce.centralObservability.grafana",parent:"otc-edpFoundry.cce.centralObservability",level:3,children:[],inEdges:[],outEdges:["qykxlm","yv49z5"],kind:"instance",title:"Grafana",description:{txt:"Data visualization and monitoring"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.centralObservability.grafana",modelRef:"edp.grafana",x:3530,y:222,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:47}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edpFoundry.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["628xl1"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:5058,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cce.edp"],inEdges:["1or831y","ejqwjt","1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:548,y:830,width:1404,height:719,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edp-per-tenant.cce.edp",parent:"otc-edp-per-tenant.cce",level:2,children:["otc-edp-per-tenant.cce.edp.externalSecrets","otc-edp-per-tenant.cce.edp.ingressNginx","otc-edp-per-tenant.cce.edp.argoCD","otc-edp-per-tenant.cce.edp.forgejo"],inEdges:["1or831y","ejqwjt","1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce.edp",title:"EDP",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:580,y:883,width:1340,height:634,labelBBox:{x:6,y:0,width:27,height:15}},{id:"otc-edp-per-tenant.cce.edp.externalSecrets",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:1550,y:1287,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:66}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edp-per-tenant.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["1dcszi5"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunn
offering capabilities like
code version controling
collaboration and ticketing
and security scanning ` },technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:4044,y:1287,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edpFoundry.cce.internalServices.openbao",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:["u5oqat"],outEdges:[],kind:"instance",title:"OpenBao",description:{txt:"Secure secret storage"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.openbao",modelRef:"edp.openbao",x:3594,y:1287,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow"],inEdges:["84397w"],outEdges:["1asm38z","1or831y"],deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure",title:"EDP infrastructure Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP infrastructure Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:4534,y:150,width:442,height:1035,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupArgoCDInfrastructure.edpworkflow"],inEdges:["1oz2va9"],outEdges:["ejqwjt"],deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",title:"EDP ArgoCD Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP Setup ArgoCD Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2102,y:150,width:442,height:1035,labelBBox:{x:6,y:0,width:149,height:15}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["84397w"],outEdges:["1hnil62"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:4595,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1oz2va9"],outEdges:["1gtxobu"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2163,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["1hnil62"],outEdges:["ekzztw"],kind:"instance",title:"Forgejo Runner Worker",description:{txt:"A worker is a service that runs a job invoked by a runner. A worker typically is a container."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",modelRef:"forgejoRunnerWorker",x:4588,y:554,width:333,height:180,labelBBox:{x:18,y:45,width:297,height:84}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,ch
offering capabilities like
code version controling
collaboration and ticketing
and security scanning ` },technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:630,y:1287,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cloudServices.postgres","otc-edp-per-tenant.cloudServices.redis","otc-edp-per-tenant.cloudServices.objectstorage","otc-edp-per-tenant.cloudServices.elasticsearch"],inEdges:["1asm38z","8msu1q","120qe5o","ealiax","1trj5u6"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},depth:1,x:58,y:1634,width:1894,height:302,labelBBox:{x:6,y:0,width:127,height:15}},{id:"otc-edp-per-tenant.cloudServices.postgres",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["8msu1q"],outEdges:[],kind:"instance",title:"PostgreSQL",description:{txt: ` PostgreSQL is a powerful , open source object - relational database system .
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability , data integrity ,
and correctness . ` },technology:"PostgreSQL",tags:[],icon:"tech:postgresql",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.postgres",modelRef:"postgres",x:1548,y:1706,width:354,height:180,labelBBox:{x:46,y:17,width:292,height:139}},{id:"otc-edp-per-tenant.cloudServices.redis",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["120qe5o"],outEdges:[],kind:"instance",title:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.redis",modelRef:"redis",x:608,y:1706,width:359,height:180,labelBBox:{x:47,y:26,width:297,height:121}},{id:"otc-edp-per-tenant.cloudServices.objectstorage",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["ealiax"],outEdges:[],kind:"instance",title:"s3 Object Storage",description:{txt:"s3 Object Storage"},technology:"S3 Object Storage",tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.objectstorage",modelRef:"objectstorage",x:1098,y:1706,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"otc-edp-per-tenant.cloudServices.elasticsearch",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["1trj5u6"],outEdges:[],kind:"instance",title:"Elasticsearch",description:{txt: ` Elasticsearch is a distributed , RESTful search and analytics engine capable of
addressing a growing number of use cases . It centrally stores your data so you can
discover the expected and uncover the unexpected . ` },technology:"Elasticsearch",tags:[],icon:"tech:elasticsearch",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.elasticsearch",modelRef:"elasticsearch",x:108,y:1706,width:370,height:180,labelBBox:{x:46,y:17,width:308,height:139}}],edges:[{id:"17kru01",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.argoCD",label:"https",dotpos:"e,3463.8,1312.3 4054.2,1100.1 3915,1148.1 3708,1220.4 3529,1287.4 3511,1294.1 3492.2,1301.3 3473.6,1308.5",points:[[4054,1100],[3915,1148],[3708,1220],[3529,1287],[3511,1294],[3492,1301],[3474,1309]],labelBBox:{x:3755,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"170pc3l",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.forgejo",label:"https",dotpos:"e,4214,1287.5 4214,1134.2 4214,1178.3 4214,1231.6 4214,1277",points:[[4214,1134],[4214,1178],[4214,1232],[4214,1277]],labelBBox:{x:4215,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"u5oqat",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.openbao",label:"https",dotpos:"e,3877.5,1287.6 4090.4,1134.5 4027.1,1180 3950.1,1235.4 3885.6,1281.7",points:[[4090,1134],[4027,1180],[3950,1235],[3886,1282]],labelBBox:{x:3999,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["1p30hav"],color:"gray",line:"dashed",head:"normal"},{id:"qykxlm",source:"otc-edpFoundry.cce.centralObservability.grafana",target:"otc-edpFoundry.cce.centralObservability.prometheus",label:"get metrics and alerts",dotpos:"e,3597.7,554.51 3664.4,401.25 3645.1,445.56 3621.7,499.31 3601.9,544.91",points:[[3664,401],[3645,446],[3622,499],[3602,545]],labelBBox:{x:3636,y:466,width:138,height:18},parent:"otc-edpFoundry.cce.centralObservability",relations:["13uvtiq"],color:"gray",line:"dashed",head:"normal"},{id:"yv49z5",source:"otc-edpFoundry.cce.centralObservability.grafana",target:"otc-edpFoundry.cce.centralObservability.loki",label:"get logs",dotpos:"e,3926.8,554.51 3785,401.25 3826.6,446.21 3877.2,500.89 3919.7,546.91",points:[[3785,401],[3827,446],[3877,501],[3920,547]],labelBBox:{x:3866,y:466,width:53,height:18},parent:"otc-edpFoundry.cce.centralObservability",relations:["1n1utzc"],color:"gray",line:"dashed",head:"normal"},{id:"84397w",source:"otc-edpFoundry.cce.internalServices.forgejo",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",label:"invokes",dotpos:"e,4871.9,401.35 4384,1358.7 4589.5,1333.3 4917.1,1279 4991,1184.6 5006.1,1165.4 5006.3,601.48 4987,554.4 4964.1,498.68 4921.8,448.48 4879.5,408.45",points:[[4384,1359],[4590,1333],[4917,1279],[4991,1185],[5006,1165],[5006,601],[4987,554],[4964,499],[4922,448],[4880,408]],labelBBox:{x:5002,y:799,width:51,height:18},parent:"otc-edpFoundry",relations:["dola40"],color:"gray",line:"dashed",head:"normal"},{id:"1hnil62",source:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",label:"runs",dotpos:"e,4755,554.51 4755,401.25 4755,445.28 4755,498.64 4755,544.05",points:[[4755,401],[4755,445],[4755,499],[4755,544]],labelBBox:{x:4756,y:466,width:31,height:18},parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",relations:["7kqly3"],color:"gray",line:"dashed",head:"normal"},{id:"ekzztw",source:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow",label:"executes",dotpos:"e,4755,954.66 4755,734.27 4755,796.6 4755,879.99 4755,944.48",points:[[4755,734],[4755,797],[4755,880],[4755,944]],labelBBox:{x:4756,y:799,width:60,height:18},parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",relations:["12hf1w4"],color:"gray",line:"dashed",head:"normal"},{id:"1oz2va9",source:"otc-edpFoundry.c
offering capabilities like
code version controling
collaboration and ticketing
and security scanning ` },tags:[],technology:"Golang",kind:"container",isCustomized:!0,navigateTo:"forgejo",x:585,y:69,width:340,height:180,labelBBox:{x:45,y:17,width:279,height:139}}],edges:[{id:"step-01",source:"localbox.git",target:"edp.forgejogit",label:"git push",dotpos:"e,594.97,449 359.74,449 430.11,449 512.98,449 584.5,449",points:[[360,449],[430,449],[513,449],[585,449]],labelBBox:{x:429,y:417,width:75,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@0"},{id:"step-02",source:"edp.forgejogit",target:"forgejoRunner",label:"on push",dotpos:"e,1243.2,909.08 895.71,538.9 1008.4,612.21 1151.2,707.77 1171.7,734 1218.9,794.54 1183.7,836.08 1231.7,896 1233.2,897.83 1234.7,899.63 1236.2,901.41",points:[[896,539],[1008,612],[1151,708],[1172,734],[1219,795],[1184,836],[1232,896],[1233,898],[1235,900],[1236,901]],labelBBox:{x:1051,y:582,width:76,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@1"},{id:"step-03",source:"forgejoRunner",target:"edp.imageregistry",label:"pushes new image",dotpos:"e,823.44,828.86 1231.8,1011.9 1158.8,1011.9 1072.7,1003.2 1001.2,971.8 934.18,942.34 874.24,886.42 830.35,836.77",points:[[1232,1012],[1159,1012],[1073,1003],[1001,972],[934,942],[874,886],[830,837]],labelBBox:{x:1018,y:940,width:143,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@2"},{id:"step-04",source:"forgejoRunner",target:"edp.forgejogit",label:"pushes new appspec",dotpos:"s,892.11,538.97 899.79,546.08 915.25,560.79 929.55,576.84 941.18,594 994.62,672.87 940.47,726.37 1001.2,799.8 1033.6,839.02 1138.8,891.76 1231.7,933.12",points:[[900,546],[915,561],[930,577],[941,594],[995,673],[940,726],[1001,800],[1034,839],[1139,892],[1232,933]],labelBBox:{x:1010,y:768,width:158,height:19},dir:"back",parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@3"},{id:"step-05",source:"edp.forgejogit",target:"edp.argoCD",label:"triggers deployment",dotpos:"e,1231.9,550.99 914.25,482.97 1007.9,503.03 1126.5,528.41 1221.9,548.84",points:[[914,483],[1008,503],[1126,528],[1222,549]],labelBBox:{x:1015,y:473,width:148,height:19},parent:"edp",relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@4"},{id:"step-06",source:"edp.argoCD",target:"cloud",label:"deploys application",dotpos:"e,1894.7,1063.3 1486.9,674.69 1596,778.69 1775.3,949.49 1887.4,1056.4",points:[[1487,675],[1596,779],[1775,949],[1887,1056]],labelBBox:{x:1621,y:769,width:145,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@5"},{id:"step-07",source:"cloud",target:"edp.imageregistry",label:"pulls image",dotpos:"s,812.1,828.53 817.94,836.93 897.44,950.49 1047,1129 1231.7,1182.8 1431.9,1241.1 1674.4,1215.8 1830.1,1188.1",points:[[818,837],[897,950],[1047,1129],[1232,1183],[1432,1241],[1674,1216],[1830,1188]],labelBBox:{x:1346,y:1151,width:97,height:19},dir:"back",parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@6"}]},edpbuilderworkflow:{_type:"element",tags:null,links:null,viewOf:"edfbuilder",_stage:"layouted",sourcePath:"views/edp/edfbuilder.c4",description:{txt:"Describes the process how to create an EDP instance"},title:"edfbuilder",id:"edpbuilderworkflow",autoLayout:{direction:"LR",nodeSep:110,rankSep:120},hash:"40921acf4f52bd8d6d2ac3a0d1810b3b7bc13b2a",bounds:{x:0,y:0,width:320,height:180},nodes:[{id:"edfbuilder",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"edfbuilder",modelRef:"edfbuilder",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"EDP Foundry Builder"},tags:[],technology:"Golang",kind:"component",x:0,y:0,width:320,height:180,labelBBox:{x:74,y:53,width:203,height:67}}],edges:[]},edp:{_type:"element",tags:null,links:null,viewOf:"edp",_stage:"layouted",sourcePath:"views/edp/edp.c4",description:null,title:"Context view",id:"edp",autoLayout:{direction:"TB"},hash:"28d4204eb300a4296f82769be0ee6d6ba8d0882b",bounds:{x:0,y:0,wi
offering capabilities like
code version controling
collaboration and ticketing
and security scanning ` },tags:[],technology:"Golang",kind:"container",navigateTo:"forgejo",x:1830,y:392,width:340,height:180,labelBBox:{x:46,y:17,width:278,height:139}},{id:"edp.imageregistry",parent:"edp",level:1,children:[],inEdges:["1nv0w41"],outEdges:[],title:"Forgejo OCI Image Registry",modelRef:"edp.imageregistry",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:25,size:"md"},description:{txt:"Container Image Registry"},tags:[],technology:"Golang",kind:"component",x:2280,y:392,width:373,height:180,labelBBox:{x:47,y:53,width:311,height:67}},{id:"edp.grafana",parent:"edp",level:1,children:[],inEdges:["3nxrq7"],outEdges:["1tfxhhz","1adt45o"],title:"Grafana",modelRef:"edp.grafana",shape:"rectangle",color:"primary",icon:"tech:grafana",style:{opacity:25,size:"md"},description:{txt:"Data visualization and monitoring"},tags:[],kind:"container",x:2763,y:392,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:48}},{id:"edp.keycloak",parent:"edp",level:1,children:[],inEdges:["bfgapq"],outEdges:[],title:"Keycloak",modelRef:"edp.keycloak",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Single Sign On for all EDP products"},tags:[],kind:"container",navigateTo:"keycloak",x:3219,y:392,width:320,height:180,labelBBox:{x:39,y:63,width:242,height:48}},{id:"edp.forgejogit",parent:"edp",level:1,children:[],inEdges:["1agven9","f6xyb4"],outEdges:[],title:"ForgejoGit",modelRef:"edp.forgejogit",shape:"rectangle",color:"primary",icon:"tech:git",style:{opacity:25,size:"md"},tags:[],kind:"component",x:4079,y:715,width:320,height:180,labelBBox:{x:97,y:74,width:156,height:24}},{id:"edp.loki",parent:"edp",level:1,children:[],inEdges:["1tfxhhz"],outEdges:[],title:"Loki",modelRef:"edp.loki",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Log aggregation system"},tags:[],kind:"container",x:2561,y:715,width:320,height:180,labelBBox:{x:78,y:63,width:164,height:47}},{id:"edp.prometheus",parent:"edp",level:1,children:[],inEdges:["1adt45o"],outEdges:[],title:"Prometheus",modelRef:"edp.prometheus",shape:"rectangle",color:"primary",icon:"tech:prometheus",style:{opacity:25,size:"md"},description:{txt:"Monitoring and alerting toolkit"},tags:[],kind:"container",x:2991,y:715,width:320,height:180,labelBBox:{x:46,y:63,width:258,height:47}},{id:"edp.mailhog",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"Mailhog",modelRef:"edp.mailhog",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Web and API based SMTP testing"},tags:[],kind:"container",navigateTo:"mailhog",x:890,y:69,width:320,height:180,labelBBox:{x:44,y:63,width:232,height:48}},{id:"edp.minio",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"Minio",modelRef:"edp.minio",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"S3 compatible blob storage"},tags:[],kind:"container",navigateTo:"minio",x:1320,y:69,width:320,height:180,labelBBox:{x:67,y:63,width:186,height:48}},{id:"edp.monitoring",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"Monitoring",modelRef:"edp.monitoring",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Observability system to monitor deployed components"},tags:[],kind:"container",navigateTo:"monitoring",x:1860,y:69,width:320,height:180,labelBBox:{x:21,y:54,width:278,height:66}},{id:"edp.openbao",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"OpenBao",modelRef:"edp.openbao",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Secure secret storage"},tags:[],kind:"container",x:430,y:392,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"edp.testApp",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"Fibonacci",modelRef:"edp.testApp",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Testapp to validate deployments"},tags:[],kind:"container",navigateTo:"testapp",x:860,y:392,width:320,height:180,labelBBox:{x:50,y:63,width:220,height:48}},{id:"edp.application",parent:"ed
offering capabilities like
code version controling
collaboration and ticketing
and security scanning ` },tags:[],technology:"Golang",kind:"container",depth:1,x:8,y:239,width:830,height:281,labelBBox:{x:6,y:0,width:58,height:15}},{id:"edp.forgejo.forgejocollaboration",parent:"edp.forgejo",level:1,children:[],inEdges:[],outEdges:[],title:"Collaboration",modelRef:"edp.forgejo.forgejocollaboration",shape:"rectangle",color:"primary",icon:"tech:github",style:{opacity:15,size:"md"},tags:[],kind:"component",x:48,y:300,width:320,height:180,labelBBox:{x:85,y:74,width:180,height:24}},{id:"edp.forgejo.forgejoproject",parent:"edp.forgejo",level:1,children:[],inEdges:[],outEdges:[],title:"Project Mgmt",modelRef:"edp.forgejo.forgejoproject",shape:"rectangle",color:"primary",icon:"tech:github",style:{opacity:15,size:"md"},tags:[],kind:"component",x:478,y:300,width:320,height:180,labelBBox:{x:85,y:74,width:180,height:24}},{id:"edp.ingressNginx",parent:null,level:0,children:[],inEdges:[],outEdges:["1dgzzfb"],title:"Ingress",modelRef:"edp.ingressNginx",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Ingress Controller for incoming http(s) traffic"},tags:["internal"],kind:"container",navigateTo:"ingressNginx",x:48,y:0,width:320,height:180,labelBBox:{x:33,y:54,width:255,height:66}}],edges:[{id:"1dgzzfb",source:"edp.ingressNginx",target:"edp.forgejo",label:"https",dotpos:"e,208,238.8 208,179.6 208,195.09 208,211.63 208,228.36",points:[[208,180],[208,195],[208,212],[208,228]],labelBBox:{x:173,y:186,width:34,height:18},parent:null,relations:["123efwn"],color:"gray",line:"dashed",head:"normal"}]},crossplane:{_type:"element",tags:null,links:null,viewOf:"edp.crossplane",_stage:"layouted",sourcePath:"views/edp/edp.c4",description:null,title:"Crossplane",id:"crossplane",autoLayout:{direction:"TB"},hash:"21cafdc6d03bbe02437c3a01524d368cfd652a88",bounds:{x:0,y:0,width:1276,height:597},nodes:[{id:"edp.crossplane",parent:null,level:0,children:["edp.crossplane.crossplane","edp.crossplane.crossplaneFunction","edp.crossplane.crossplaneRbacManager","edp.crossplane.providerArgoCD","edp.crossplane.providerKind","edp.crossplane.providerShell"],inEdges:[],outEdges:[],title:"Crossplane",modelRef:"edp.crossplane",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Declarative management of ressources"},tags:["internal"],kind:"container",depth:1,x:8,y:8,width:1260,height:581,labelBBox:{x:6,y:0,width:80,height:15}},{id:"edp.crossplane.crossplane",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"Crossplane",modelRef:"edp.crossplane.crossplane",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:48,y:69,width:320,height:180,labelBBox:{x:107,y:74,width:105,height:24}},{id:"edp.crossplane.crossplaneFunction",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"Function Patch and Transform",modelRef:"edp.crossplane.crossplaneFunction",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:478,y:69,width:320,height:180,labelBBox:{x:23,y:74,width:273,height:24}},{id:"edp.crossplane.crossplaneRbacManager",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"RBAC Manager",modelRef:"edp.crossplane.crossplaneRbacManager",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:908,y:69,width:320,height:180,labelBBox:{x:88,y:74,width:144,height:24}},{id:"edp.crossplane.providerArgoCD",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"ArgoCD Provider",modelRef:"edp.crossplane.providerArgoCD",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:48,y:369,width:320,height:180,labelBBox:{x:82,y:74,width:155,height:24}},{id:"edp.crossplane.providerKind",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"Kind Provider",modelRef:"edp.crossplane.providerKind",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:478,y:369,width:320,height:180,labelBBox:{x:98,y:74,width:124,height:24}},{id:"edp.crossplane.providerShe
offering capabilities like
code version controling
collaboration and ticketing
2025-11-07 11:50:17 +01:00
and security scanning ` },tags:[],technology:"Golang",kind:"container",navigateTo:"forgejo",x:860,y:384,width:340,height:180,labelBBox:{x:46,y:17,width:278,height:139}},{id:"edp.keycloak",parent:null,level:0,children:[],inEdges:["dh7ut5"],outEdges:[],title:"Keycloak",modelRef:"edp.keycloak",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Single Sign On for all EDP products"},tags:[],kind:"container",navigateTo:"keycloak",x:1310,y:384,width:320,height:180,labelBBox:{x:39,y:63,width:242,height:48}},{id:"edp.mailhog",parent:null,level:0,children:[],inEdges:["1bv0wod"],outEdges:[],title:"Mailhog",modelRef:"edp.mailhog",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Web and API based SMTP testing"},tags:[],kind:"container",navigateTo:"mailhog",x:1740,y:384,width:320,height:180,labelBBox:{x:44,y:63,width:232,height:48}},{id:"edp.minio",parent:null,level:0,children:[],inEdges:["68hu20"],outEdges:[],title:"Minio",modelRef:"edp.minio",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"S3 compatible blob storage"},tags:[],kind:"container",navigateTo:"minio",x:2170,y:384,width:320,height:180,labelBBox:{x:67,y:63,width:186,height:48}},{id:"edp.monitoring",parent:null,level:0,children:[],inEdges:["nx2xew"],outEdges:[],title:"Monitoring",modelRef:"edp.monitoring",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Observability system to monitor deployed components"},tags:[],kind:"container",navigateTo:"monitoring",x:2600,y:384,width:320,height:180,labelBBox:{x:21,y:54,width:278,height:66}},{id:"edp.openbao",parent:null,level:0,children:[],inEdges:["momp7g"],outEdges:[],title:"OpenBao",modelRef:"edp.openbao",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Secure secret storage"},tags:[],kind:"container",x:3030,y:384,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"edp.testApp",parent:null,level:0,children:[],inEdges:["8cmkj7"],outEdges:[],title:"Fibonacci",modelRef:"edp.testApp",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Testapp to validate deployments"},tags:[],kind:"container",navigateTo:"testapp",x:3460,y:384,width:320,height:180,labelBBox:{x:50,y:63,width:220,height:48}}],edges:[{id:"1poylyw",source:"edp.ingressNginx.ingressNginx",target:"edp.argoCD",label:"https",dotpos:"e,319.96,401.87 1740.1,163.73 1459.5,186.77 861.79,248.41 375.02,384 360.03,388.17 344.69,393.11 329.44,398.47",points:[[1740,164],[1459,187],[862,248],[375,384],[360,388],[345,393],[329,398]],labelBBox:{x:704,y:301,width:34,height:18},parent:null,relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"llqgvs",source:"edp.ingressNginx.ingressNginx",target:"edp.ui",label:"https",dotpos:"e,749.97,403.03 1740.4,176.52 1525.1,211.47 1131,282.97 805.02,384 790.08,388.63 774.74,393.9 759.47,399.5",points:[[1740,177],[1525,211],[1131,283],[805,384],[790,389],[775,394],[759,400]],labelBBox:{x:1102,y:301,width:34,height:18},parent:null,relations:["v8c8aq"],color:"gray",line:"dashed",head:"normal"},{id:"75xltk",source:"edp.ingressNginx.ingressNginx",target:"edp.forgejo",label:"https",dotpos:"e,1200.3,405 1740.1,208.08 1609.3,254.18 1419.6,321.88 1255,384 1240.3,389.56 1225.1,395.4 1209.8,401.31",points:[[1740,208],[1609,254],[1420,322],[1255,384],[1240,390],[1225,395],[1210,401]],labelBBox:{x:1468,y:301,width:34,height:18},parent:null,relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"dh7ut5",source:"edp.ingressNginx.ingressNginx",target:"edp.keycloak",label:"https",dotpos:"e,1589.1,384.17 1780.8,241.13 1723.7,283.73 1655.3,334.77 1597.2,378.11",points:[[1781,241],[1724,284],[1655,335],[1597,378]],labelBBox:{x:1699,y:301,width:34,height:18},parent:null,relations:["h3rut2"],color:"gray",line:"dashed",head:"normal"},{id:"1bv0wod",source:"edp.ingressNginx.ingressNginx",target:"edp.mailhog",label:"https",dotpos:"e,1900,384.17 1900,241.13 1900,282.33 1900,331.44 1900,373.83",points:[[1900,241],[1900,282],[1900,331],[1900,374]],labelBBo
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
addressing a growing number of use cases . It centrally stores your data so you can
2025-11-07 11:50:17 +01:00
discover the expected and uncover the unexpected . ` },tags:[],technology:"Elasticsearch",kind:"container",x:1723,y:810,width:370,height:180,labelBBox:{x:46,y:17,width:308,height:139}},{id:"objectstorage",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"s3 Object Storage",modelRef:"objectstorage",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"s3 Object Storage"},tags:[],technology:"S3 Object Storage",kind:"container",x:9,y:530,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"postgres",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"PostgreSQL",modelRef:"postgres",shape:"rectangle",color:"primary",icon:"tech:postgresql",style:{opacity:20,size:"md"},description:{txt: ` PostgreSQL is a powerful , open source object - relational database system .
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
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability , data integrity ,
2025-11-07 11:50:17 +01:00
and correctness . ` },tags:[],technology:"PostgreSQL",kind:"container",x:472,y:530,width:354,height:180,labelBBox:{x:46,y:17,width:292,height:139}},{id:"redis",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"Redis",modelRef:"redis",shape:"rectangle",color:"primary",icon:"tech:redis",style:{opacity:20,size:"md"},description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},tags:[],technology:"Redis",kind:"container",x:1072,y:530,width:359,height:180,labelBBox:{x:47,y:26,width:297,height:121}},{id:"platformdeveloper",parent:null,level:0,children:[],inEdges:[],outEdges:["mox1r9","x7to90"],title:"Platform Developer",modelRef:"platformdeveloper",shape:"person",color:"gray",style:{opacity:15,size:"md"},description:{txt:"The EDP engineer"},tags:[],kind:"actor",x:9,y:1829,width:320,height:180,labelBBox:{x:73,y:63,width:175,height:48}},{id:"customers",parent:null,level:0,children:[],inEdges:[],outEdges:["8fboq4"],title:"End Customers",modelRef:"customers",shape:"person",color:"amber",style:{opacity:15,size:"md"},description:{txt:"Consumers of your Application"},tags:[],kind:"actor",x:2343,y:935,width:320,height:180,labelBBox:{x:56,y:63,width:208,height:48}},{id:"documentor",parent:null,level:0,children:[],inEdges:[],outEdges:["1ndqohb","1t1nq4"],title:"Documentor",modelRef:"documentor",shape:"person",color:"green",style:{opacity:15,size:"md"},description:{txt:"Content creator and maintainer of the developer platform documentation"},tags:[],technology:"Hugo, Markdown, LikeC4",kind:"person",x:9,y:192,width:320,height:180,labelBBox:{x:34,y:44,width:252,height:85}},{id:"forgejoRunner",parent:null,level:0,children:[],inEdges:["5mpoyf"],outEdges:["1lyfj4n"],title:"Forgejo Runner",modelRef:"forgejoRunner",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],kind:"component",x:2343,y:1718,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:102}},{id:"edfbuilder",parent:null,level:0,children:[],inEdges:["mox1r9"],outEdges:["lnq8uj"],title:"edfbuilder",modelRef:"edfbuilder",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"EDP Foundry Builder"},tags:[],technology:"Golang",kind:"component",navigateTo:"edpbuilderworkflow",x:489,y:1709,width:320,height:180,labelBBox:{x:74,y:53,width:203,height:67}},{id:"docPlatform",parent:null,level:0,children:[],inEdges:["1ndqohb","8lbghe"],outEdges:["jw1mqa"],title:"Documentation Platform",modelRef:"docPlatform",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},description:{txt:"Hugo-based documentation system with integrated architecture visualization"},tags:[],kind:"system",navigateTo:"overview",x:489,y:0,width:320,height:180,labelBBox:{x:25,y:54,width:271,height:66}},{id:"edf",parent:null,level:0,children:[],inEdges:["lnq8uj","x7to90"],outEdges:["109bf6k"],title:"EDF",modelRef:"edf",shape:"rectangle",color:"primary",icon:"tech:kubernetes",style:{opacity:15,size:"md"},description:{txt:"EDP Foundry is a platform for building and deploying EDPs tenantwise."},tags:[],technology:"Kubernetes",kind:"system",x:1091,y:1816,width:321,height:180,labelBBox:{x:47,y:35,width:259,height:103}},{id:"cicdPipeline",parent:null,level:0,children:[],inEdges:["jw1mqa"],outEdges:["8lbghe","1d6ysxt"],title:"CI/CD Pipeline",modelRef:"cicdPipeline",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},description:{txt:"Automated testing and deployment pipeline"},tags:[],kind:"system",navigateTo:"cicdPipeline",x:1088,y:0,width:327,height:180,labelBBox:{x:18,y:63,width:292,height:48}},{id:"@gr1",parent:null,kind:"@group",title:"developer-scope",color:"green",shape:"rectangle",children:["developer","otherProductLifecycleRoles","@gr2","@gr3"],inEdges:["1lyfj4n","109bf6k"],outEdges:["1tbee2v","5mpoyf","17brhnu","35ru8e"],level:0,depth:2,tags:[],style:{border:"none",opacity:20},x:1024,y:1030,width:1129
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
addressing a growing number of use cases . It centrally stores your data so you can
2025-11-07 11:50:17 +01:00
discover the expected and uncover the unexpected . ` },tags:[],technology:"Elasticsearch",kind:"container",x:2236,y:1044,width:520,height:290,labelBBox:{x:72,y:46,width:407,height:189}},{id:"objectstorage",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"s3 Object Storage",modelRef:"objectstorage",shape:"rectangle",color:"primary",style:{opacity:20,size:"xl"},description:{txt:"s3 Object Storage"},tags:[],technology:"S3 Object Storage",kind:"container",x:0,y:654,width:520,height:290,labelBBox:{x:146,y:96,width:228,height:89}},{id:"postgres",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"PostgreSQL",modelRef:"postgres",shape:"rectangle",color:"primary",icon:"tech:postgresql",style:{opacity:20,size:"xl"},description:{txt: ` PostgreSQL is a powerful , open source object - relational database system .
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
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability , data integrity ,
2025-11-07 11:50:17 +01:00
and correctness . ` },tags:[],technology:"PostgreSQL",kind:"container",x:653,y:654,width:520,height:290,labelBBox:{x:83,y:46,width:384,height:189}},{id:"redis",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"Redis",modelRef:"redis",shape:"rectangle",color:"primary",icon:"tech:redis",style:{opacity:20,size:"xl"},description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},tags:[],technology:"Redis",kind:"container",x:1423,y:654,width:520,height:290,labelBBox:{x:79,y:58,width:391,height:165}},{id:"platformdeveloper",parent:null,level:0,children:[],inEdges:[],outEdges:["mox1r9","x7to90"],title:"Platform Developer",modelRef:"platformdeveloper",shape:"person",color:"gray",style:{opacity:15,size:"xl"},description:{txt:"The EDP engineer"},tags:[],kind:"actor",x:0,y:2436,width:520,height:290,labelBBox:{x:138,y:109,width:244,height:63}},{id:"customers",parent:null,level:0,children:[],inEdges:[],outEdges:["8fboq4"],title:"End Customers",modelRef:"customers",shape:"person",color:"amber",style:{opacity:15,size:"xl"},description:{txt:"Consumers of your Application"},tags:[],kind:"actor",x:3019,y:1114,width:520,height:290,labelBBox:{x:114,y:109,width:290,height:63}},{id:"documentor",parent:null,level:0,children:[],inEdges:[],outEdges:["1ndqohb","1t1nq4"],title:"Documentor",modelRef:"documentor",shape:"person",color:"green",style:{opacity:15,size:"xl"},description:{txt:"Content creator and maintainer of the developer platform documentation"},tags:[],technology:"Hugo, Markdown, LikeC4",kind:"person",x:0,y:233,width:520,height:290,labelBBox:{x:84,y:83,width:352,height:115}},{id:"forgejoRunner",parent:null,level:0,children:[],inEdges:["5mpoyf"],outEdges:["1lyfj4n"],title:"Forgejo Runner",modelRef:"forgejoRunner",shape:"rectangle",color:"primary",style:{opacity:15,size:"xl"},description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],kind:"component",x:3019,y:2117,width:520,height:290,labelBBox:{x:68,y:71,width:382,height:139}},{id:"edfbuilder",parent:null,level:0,children:[],inEdges:["mox1r9"],outEdges:["lnq8uj"],title:"edfbuilder",modelRef:"edfbuilder",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"xl"},description:{txt:"EDP Foundry Builder"},tags:[],technology:"Golang",kind:"component",navigateTo:"edpbuilderworkflow",x:653,y:2246,width:520,height:290,labelBBox:{x:146,y:96,width:259,height:89}},{id:"docPlatform",parent:null,level:0,children:[],inEdges:["1ndqohb","8lbghe"],outEdges:["jw1mqa"],title:"Documentation Platform",modelRef:"docPlatform",shape:"rectangle",color:"primary",style:{opacity:15,size:"xl"},description:{txt:"Hugo-based documentation system with integrated architecture visualization"},tags:[],kind:"system",navigateTo:"overview",x:653,y:0,width:520,height:290,labelBBox:{x:72,y:96,width:378,height:89}},{id:"edf",parent:null,level:0,children:[],inEdges:["lnq8uj","x7to90"],outEdges:["109bf6k"],title:"EDF",modelRef:"edf",shape:"rectangle",color:"primary",icon:"tech:kubernetes",style:{opacity:15,size:"xl"},description:{txt:"EDP Foundry is a platform for building and deploying EDPs tenantwise."},tags:[],technology:"Kubernetes",kind:"system",x:1423,y:2380,width:520,height:290,labelBBox:{x:105,y:71,width:339,height:139}},{id:"cicdPipeline",parent:null,level:0,children:[],inEdges:["jw1mqa"],outEdges:["8lbghe","1d6ysxt"],title:"CI/CD Pipeline",modelRef:"cicdPipeline",shape:"rectangle",color:"primary",style:{opacity:15,size:"xl"},description:{txt:"Automated testing and deployment pipeline"},tags:[],kind:"system",navigateTo:"cicdPipeline",x:1423,y:0,width:520,height:290,labelBBox:{x:56,y:109,width:407,height:63}},{id:"@gr1",parent:null,kind:"@group",title:"developer-scope",color:"green",shape:"rectangle",children:["developer","otherProductLifecycleRoles","@gr2","@gr3"],inEdges:["1lyfj4n","109bf6k"],outEdges:["1tbee2v","5mpoyf","17brhnu","35ru8e"],level:0,depth:2,tags:[],style:{border:"none",opacity:20},x:1372,y:1374,w
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
2025-11-07 11:50:17 +01:00
This is kubernetes clusters and other infrastructure like nodes and vms , and platform services . All is set up by IaC - pipelines in the Foundry . ` },technology:"OTC",title:"OTC EDP per tenant cluster",id:"otc-edp-per-tenant"},"otc-faas":{style:{},kind:"cloud",description:{txt:"OTC environments for Prototype faaS."},technology:"OTC",title:"OTC prototype FaaS",id:"otc-faas"},edge:{style:{},kind:"cloud",description:{txt:"Edge environments for distributed workloads."},technology:"Edge",title:"Edge Cloud",id:"edge"},"otc-edpFoundry":{style:{},kind:"cloud",description:{txt: ` OTC environments for the central EDP Foundry services . This is kubernetes clusters and other infrastructure like nodes and vms , and optionally platform services . All is set up by IaC terraform and edpbuilder .
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
A tenant is a folder in Foundry - Config - Forgejo . On merge triggers reconciliation to EDP .
2025-11-07 11:50:17 +01:00
Optionally we will have a WebUI / API / CLI ` },technology:"OTC",title:"OTC EDP Foundry Central Service clusters",id:"otc-edpFoundry"},"local.backstage":{style:{},kind:"namespace",title:"backstage",id:"local.backstage"},"local.argocd":{style:{},kind:"namespace",title:"argocd",id:"local.argocd"},"local.gitea":{style:{},kind:"namespace",title:"gitea",id:"local.gitea"},"local.keycloak":{style:{},kind:"namespace",title:"keycloak",id:"local.keycloak"},"local.crossplane":{style:{},kind:"namespace",title:"crossplane-system",id:"local.crossplane"},"local.externalSecrets":{style:{},kind:"namespace",title:"external-secrets",id:"local.externalSecrets"},"local.velero":{style:{},kind:"namespace",title:"velero",id:"local.velero"},"local.minio":{style:{},kind:"namespace",title:"minio-backup",id:"local.minio"},"local.monitoring":{style:{},kind:"namespace",title:"monitoring",id:"local.monitoring"},"local.ingressNginx":{style:{},kind:"namespace",title:"ingress-nginx",id:"local.ingressNginx"},"local.openbao":{style:{},kind:"namespace",title:"openbao",id:"local.openbao"},"local.fibonacci":{style:{},kind:"namespace",title:"fibonacci-app",id:"local.fibonacci"},"local.mailhog":{style:{},kind:"namespace",title:"mailhog",id:"local.mailhog"},"local.spark":{style:{},kind:"namespace",title:"spark",id:"local.spark"},"otc-edp-per-tenant.cce":{style:{icon:"tech:kubernetes"},kind:"kubernetes",description:{txt:"OTC Container Cluster Engine"},technology:"Kubernetes",title:"OTC CCE",id:"otc-edp-per-tenant.cce"},"otc-edp-per-tenant.cloudServices":{style:{},kind:"paas",description:{txt:"EDP Cloud Services"},technology:"Cloud Services",title:"EDP Cloud Services",id:"otc-edp-per-tenant.cloudServices"},"otc-edp-per-tenant.forgejoRunnerInfrastructure":{style:{},kind:"computeressource",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},title:"EDP ForgejoRunner infrastructure",id:"otc-edp-per-tenant.forgejoRunnerInfrastructure"},"otc-faas.dev":{style:{},kind:"environment",description:{txt:"*.t09.de"},technology:"OTC",title:"tenant Dev",id:"otc-faas.dev"},"otc-faas.prod":{style:{},kind:"environment",description:{txt:"*.buildth.ing"},technology:"OTC",title:"Tenant Prod",id:"otc-faas.prod"},"edge.edge-dev":{style:{},kind:"environment",description:{txt:"Edge development environment"},technology:"Edge",title:"Edge Dev",id:"edge.edge-dev"},"edge.edge-prod":{style:{},kind:"environment",description:{txt:"Edge production environment"},technology:"Edge",title:"Edge Prod",id:"edge.edge-prod"},"otc-edpFoundry.cce":{style:{icon:"tech:kubernetes"},kind:"kubernetes",description:{txt:"OTC Container Cluster Engine"},technology:"Kubernetes",title:"OTC CCE",id:"otc-edpFoundry.cce"},"otc-edpFoundry.workflowSetupEDPInfrastructure":{style:{},kind:"computeressource",description:{txt:"EDP infrastructure Workflow"},title:"EDP infrastructure Workflow",id:"otc-edpFoundry.workflowSetupEDPInfrastructure"},"otc-edpFoundry.workflowSetupArgoCDInfrastructure":{style:{},kind:"computeressource",description:{txt:"EDP Setup ArgoCD Workflow"},title:"EDP ArgoCD Workflow",id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure"},"otc-edpFoundry.forgejoRunnerInfrastructure":{style:{},kind:"computeressource",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},title:"EDP ForgejoRunner infrastructure",id:"otc-edpFoundry.forgejoRunnerInfrastructure"},"local.backstage.backstage":{id:"local.backstage.backstage",element:"edp.ui.backstage",style:{}},"local.backstage.database":{id:"local.backstage.database",element:"edp.ui.database",style:{}},"local.argocd.argocdAppController":{id:"local.argocd.argocdAppController",element:"edp.argoCD.argocdAppController",style:{}},"local.argocd.argocdAppSetController":{id:"local.argocd.argocdAppSetController",element:"edp.argoCD.argocdAppSetController",style:{}},"local.argocd.argocdRedis":{id:"local.argocd.argocdRedis",element:"edp.argoCD.argocdRedis",style:{}},"local.argocd.argocdRepoServer":{id:"local.argocd.argocdRepoServer",element:"edp.argoCD.argocdRepoServer",style:{}},"local.argocd.argocdServer":{id:"local.argocd.argocdS
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
* @ license React
* scheduler . production . js
*
* Copyright ( c ) Meta Platforms , Inc . and affiliates .
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* / v a r J t e ; f u n c t i o n $ t t ( ) { r e t u r n J t e | | ( J t e = 1 , ( f u n c t i o n ( e ) { f u n c t i o n r ( I , q ) { v a r V = I . l e n g t h ; I . p u s h ( q ) ; e : f o r ( ; 0 < V ; ) { v a r G = V - 1 > > > 1 , F = I [ G ] ; i f ( 0 < a ( F , q ) ) I [ G ] = q , I [ V ] = F , V = G ; e l s e b r e a k e } } f u n c t i o n n ( I ) { r e t u r n I . l e n g t h = = = 0 ? n u l l : I [ 0 ] } f u n c t i o n o ( I ) { i f ( I . l e n g t h = = = 0 ) r e t u r n n u l l ; v a r q = I [ 0 ] , V = I . p o p ( ) ; i f ( V ! = = q ) { I [ 0 ] = V ; e : f o r ( v a r G = 0 , F = I . l e n g t h , J = F > > > 1 ; G < J ; ) { v a r Q = 2 * ( G + 1 ) - 1 , z = I [ Q ] , W = Q + 1 , X = I [ W ] ; i f ( 0 > a ( z , V ) ) W < F & & 0 > a ( X , z ) ? ( I [ G ] = X , I [ W ] = V , G = W ) : ( I [ G ] = z , I [ Q ] = V , G = Q ) ; e l s e i f ( W < F & & 0 > a ( X , V ) ) I [ G ] = X , I [ W ] = V , G = W ; e l s e b r e a k e } } r e t u r n q } f u n c t i o n a ( I , q ) { v a r V = I . s o r t I n d e x - q . s o r t I n d e x ; r e t u r n V ! = = 0 ? V : I . i d - q . i d } i f ( e . u n s t a b l e _ n o w = v o i d 0 , t y p e o f p e r f o r m a n c e = = " o b j e c t " & & t y p e o f p e r f o r m a n c e . n o w = = " f u n c t i o n " ) { v a r i = p e r f o r m a n c e ; e . u n s t a b l e _ n o w = f u n c t i o n ( ) { r e t u r n i . n o w ( ) } } e l s e { v a r l = D a t e , s = l . n o w ( ) ; e . u n s t a b l e _ n o w = f u n c t i o n ( ) { r e t u r n l . n o w ( ) - s } } v a r c = [ ] , u = [ ] , d = 1 , p = n u l l , f = 3 , g = ! 1 , b = ! 1 , x = ! 1 , w = ! 1 , k = t y p e o f s e t T i m e o u t = = " f u n c t i o n " ? s e t T i m e o u t : n u l l , C = t y p e o f c l e a r T i m e o u t = = " f u n c t i o n " ? c l e a r T i m e o u t : n u l l , _ = t y p e o f s e t I m m e d i a t e < " u " ? s e t I m m e d i a t e : n u l l ; f u n c t i o n T ( I ) { f o r ( v a r q = n ( u ) ; q ! = = n u l l ; ) { i f ( q . c a l l b a c k = = = n u l l ) o ( u ) ; e l s e i f ( q . s t a r t T i m e < = I ) o ( u ) , q . s o r t I n d e x = q . e x p i r a t i o n T i m e , r ( c , q ) ; e l s e b r e a k ; q = n ( u ) } } f u n c t i o n R ( I ) { i f ( x = ! 1 , T ( I ) , ! b ) i f ( n ( c ) ! = = n u l l ) b = ! 0 , A | | ( A = ! 0 , L ( ) ) ; e l s e { v a r q = n ( u ) ; q ! = = n u l l & & U ( R , q . s t a r t T i m e - I ) } } v a r A = ! 1 , D = - 1 , N = 5 , $ = - 1 ; f u n c t i o n M ( ) { r e t u r n w ? ! 0 : ! ( e . u n s t a b l e _ n o w ( ) - $ < N ) } f u n c t i o n j ( ) { i f ( w = ! 1 , A ) { v a r I = e . u n s t a b l e _ n o w ( ) ; $ = I ; v a r q = ! 0 ; t r y { e : { b = ! 1 , x & & ( x = ! 1 , C ( D ) , D = - 1 ) , g = ! 0 ; v a r V = f ; t r y { t : { f o r ( T ( I ) , p = n ( c ) ; p ! = = n u l l & & ! ( p . e x p i r a t i o n T i m e > I & & M ( ) ) ; ) { v a r G = p . c a l l b a c k ; i f ( t y p e o f G = = " f u n c t i o n " ) { p . c a l l b a c k = n u l l , f = p . p r i o r i t y L e v e l ; v a r F = G ( p . e x p i r a t i o n T i m e < = I ) ; i f ( I = e . u n s t a b l e _ n o w ( ) , t y p e o f F = = " f u n c t i o n " ) { p . c a l l b a c k = F , T ( I ) , q = ! 0 ; b r e a k t } p = = = n ( c ) & & o ( c ) , T ( I ) } e l s e o ( c ) ; p = n ( c ) } i f ( p ! = = n u l l ) q = ! 0 ; e l s e { v a r J = n ( u ) ; J ! = = n u l l & & U ( R , J . s t a r t T i m e - I ) , q = ! 1 } } b r e a k e } f i n a l l y { p = n u l l , f = V , g = ! 1 } q = v o i d 0 } } f i n a l l y { q ? L ( ) : A = ! 1 } } } v a r L ; i f ( t y p e o f _ = = " f u n c t i o n " ) L = f u n c t i o n ( ) { _ ( j ) } ; e l s e i f ( t y p e o f M e s s a g e C h a n n e l < " u " ) { v a r Y = n e w M e s s a g e C h a n n e l , O = Y . p o r t 2 ; Y . p o r t 1 . o n m e s s a g e = j , L = f u n c t i o n ( ) { O . p o s t M e s s a g e ( n u l l ) } } e l s e L = f u n c t i o n ( ) { k ( j , 0 ) } ; f u n c t i o n U ( I , q ) { D = k ( f u n c t i o n ( ) { I ( e . u n s t a b l e _ n o w ( ) ) } , q ) } e . u n s t a b l e _ I d l e P r i o r i t y = 5 , e . u n s t a b l e _ I m m e d i a t e P r i o r i t y = 1 , e . u n s t a b l e _ L o w P r i o r i t y = 4 , e . u n s t a b l e _ N o r m a l P r i o r i t y = 3 , e . u n s t a b l e _ P r o f i l i n g = n u l l , e . u n s t a b l e _ U s e r B l o c k i n g P r i o r i t y = 2 , e . u n s t a b l e _ c a n c e l C a l l b a c k = f u n c t i o n ( I ) { I . c a l l b a c k = n u l l } , e . u n s t a b l e _ f o r c e F r a m e R a t e = f u n c t i o n ( I ) { 0 > I | | 1 2 5 < I ? c o n s o l e . e r r o r ( " f o r c e F r a m e R a t e t a k e s a p o s i t i v e i n t b e t w e e n 0 a n d 1 2 5 , f o r c i n g f r a m e r a t e s h i g h e r t h a n 1 2 5 f p s i s n o t s u p p o r t e d " ) : N = 0 < I ? M a t h . f l o o r ( 1 e 3 / I ) : 5 } , e . u n s t a b l e _ g e t C u r r e n t P r i o r i t y L e v e l = f u n c t i o n ( ) { r e t u r n f } , e . u n s t a b l e _ n e x t = f u n c t i o n ( I ) { s w i t c h ( f ) { c a s e 1 : c a s e 2 : c a s e 3 : v a r q = 3 ; b r e a k ; d e f a u l t : q = f } v a r V = f ; f = q ; t r y { r e t u r n I ( ) } f i n a l l y { f = V } } , e . u n s t a b l e _ r e q u e s t P a i n t = f u n c t i o n ( ) { w = ! 0 } , e . u n s t a b l e _ r u n W i t h P r i o r i t y = f u n c t i o n ( I , q ) { s w i t c h ( I ) { c a s e 1 : c a s e 2 : c a s e 3 : c a s e 4 : c a s e 5 : b r e a k ; d e f a u l t : I = 3 } v a r V = f ; f = I ; t r y { r e t u r n q ( ) } f i n a l l y { f = V } } , e . u n s t a b l e _ s c h e d u l e C a l l b a c k = f u n c t i o n ( I , q , V ) { v a r G = e . u n s t a b l e _ n o w ( ) ; s w i t c h ( t y p e o f V = = " o b j e c t " & & V ! = = n u l l ? ( V = V . d e l a y , V = t y p e o f V = = " n u m b e r " & & 0 < V ? G + V : G ) : V = G , I ) { c a s e 1 : v a r F = - 1 ; b r e a k ; c a s e 2 : F = 2 5 0 ; b r e a k ; c a s e 5 : F = 1 0 7 3 7 4 1 8 2 3 ; b r e a k ; c a s e 4 : F = 1 e 4 ; b r e a k ; d e f a u l t : F = 5 e 3 } r e t u r n F = V + F , I = { i d : d + + , c a l l b a c k : q , p r i o r i t y L e v e l : I , s t a r t T i m e : V , e x p i r a t i o n T i m e : F , s o r t I n d e x : - 1 } , V > G ? ( I . s o r t I n d e x = V , r ( u , I ) , n ( c ) = = = n u l l & & I = = = n ( u ) & & ( x ? ( C ( D ) , D = - 1 ) : x = ! 0 , U ( R , V - G ) ) ) : ( I . s o r t I n d e x = F , r ( c , I ) , b | | g | | ( b = ! 0 , A | | ( A = ! 0 , L ( ) ) ) ) , I } , e . u n s t a b l e _ s h o u l d Y i e l d = M , e . u n s t a b l e _ w r a p C a l l b a c k = f u n c t i o n ( I ) { v a r q = f ; r e t u r n f u n c t i o n ( ) { v a r V = f ; f = q ; t r y { r e t u r n I . a p p l y ( t h i s , a r g u m e n t s ) } f i n a l l y { f = V } } } } ) ( _ R ) ) , _ R } v a r e r e ; f u n c t i o n M t t ( ) { r e t u r n e r e | | ( e r e = 1 , k R . e x p o r t s = $ t t ( ) ) , k R . e x p o r t s } / * *
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
* @ license React
* react - dom - client . production . js
*
* Copyright ( c ) Meta Platforms , Inc . and affiliates .
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /var tre;function Ott(){if(tre)return Fy;tre=1;var e=Mtt(),r=U6(),n=CO();function o(h){var m="https:/ / react . dev / errors / "+h;if(1<arguments.length){m+=" ? args [ ] = "+encodeURIComponent(arguments[1]);for(var v=2;v<arguments.length;v++)m+=" & args [ ] = "+encodeURIComponent(arguments[v])}return" Minified React error # "+h+" ; visit "+m+" for the full message or use the non - minified dev environment for full errors and additional helpful warnings . "}function a(h){return!(!h||h.nodeType!==1&&h.nodeType!==9&&h.nodeType!==11)}function i(h){var m=h,v=h;if(h.alternate)for(;m.return;)m=m.return;else{h=m;do m=h,(m.flags&4098)!==0&&(v=m.return),h=m.return;while(h)}return m.tag===3?v:null}function l(h){if(h.tag===13){var m=h.memoizedState;if(m===null&&(h=h.alternate,h!==null&&(m=h.memoizedState)),m!==null)return m.dehydrated}return null}function s(h){if(i(h)!==h)throw Error(o(188))}function c(h){var m=h.alternate;if(!m){if(m=i(h),m===null)throw Error(o(188));return m!==h?null:h}for(var v=h,S=m;;){var P=v.return;if(P===null)break;var B=P.alternate;if(B===null){if(S=P.return,S!==null){v=S;continue}break}if(P.child===B.child){for(B=P.child;B;){if(B===v)return s(P),h;if(B===S)return s(P),m;B=B.sibling}throw Error(o(188))}if(v.return!==S.return)v=P,S=B;else{for(var K=!1,te=P.child;te;){if(te===v){K=!0,v=P,S=B;break}if(te===S){K=!0,S=P,v=B;break}te=te.sibling}if(!K){for(te=B.child;te;){if(te===v){K=!0,v=B,S=P;break}if(te===S){K=!0,S=B,v=P;break}te=te.sibling}if(!K)throw Error(o(189))}}if(v.alternate!==S)throw Error(o(190))}if(v.tag!==3)throw Error(o(188));return v.stateNode.current===v?h:m}function u(h){var m=h.tag;if(m===5||m===26||m===27||m===6)return h;for(h=h.child;h!==null;){if(m=u(h),m!==null)return m;h=h.sibling}return null}var d=Object.assign,p=Symbol.for(" react . element "),f=Symbol.for(" react . transitional . element "),g=Symbol.for(" react . portal "),b=Symbol.for(" react . fragment "),x=Symbol.for(" react . strict _mode "),w=Symbol.for(" react . profiler "),k=Symbol.for(" react . provider "),C=Symbol.for(" react . consumer "),_=Symbol.for(" react . context "),T=Symbol.for(" react . forward _ref "),R=Symbol.for(" react . suspense "),A=Symbol.for(" react . suspense _list "),D=Symbol.for(" react . memo "),N=Symbol.for(" react . lazy "),$=Symbol.for(" react . activity "),M=Symbol.for(" react . memo _cache _sentinel "),j=Symbol.iterator;function L(h){return h===null||typeof h!=" object "?null:(h=j&&h[j]||h[" @ @ iterator "],typeof h==" function "?h:null)}var Y=Symbol.for(" react . client . reference ");function O(h){if(h==null)return null;if(typeof h==" function ")return h.$$typeof===Y?null:h.displayName||h.name||null;if(typeof h==" string ")return h;switch(h){case b:return" Fragment ";case w:return" Profiler ";case x:return" StrictMode ";case R:return" Suspense ";case A:return" SuspenseList ";case $:return" Activity "}if(typeof h==" object ")switch(h.$$typeof){case g:return" Portal ";case _:return(h.displayName||" Context ")+" . Provider ";case C:return(h._context.displayName||" Context ")+" . Consumer ";case T:var m=h.render;return h=h.displayName,h||(h=m.displayName||m.name||" ",h=h!==" "?" ForwardRef ( "+h+" ) ":" ForwardRef "),h;case D:return m=h.displayName||null,m!==null?m:O(h.type)||" Memo ";case N:m=h._payload,h=h._init;try{return O(h(m))}catch{}}return null}var U=Array.isArray,I=r.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,q=n.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,V={pending:!1,data:null,method:null,action:null},G=[],F=-1;function J(h){return{current:h}}function Q(h){0>F||(h.current=G[F],G[F]=null,F--)}function z(h,m){F++,G[F]=h.current,h.current=m}var W=J(null),X=J(null),Z=J(null),oe=J(null);function ee(h,m){switch(z(Z,m),z(X,h),z(W,null),m.nodeType){case 9:case 11:h=(h=m.documentElement)&&(h=h.namespaceURI)?Gge(h):0;break;default:if(h=m.tagName,m=m.namespaceURI)m=Gge(m),h=Xge(m,h);else switch(h){case" svg ":h=1;break;case" math " : h = 2 ; break ; default : h = 0 } } Q ( W ) , z ( W , h ) } function re ( ) { Q ( W ) , Q ( X ) , Q ( Z ) } function pe ( h ) { h . memoizedState !== null && z ( oe , h ) ; var m = W . current , v = Xge ( m , h . type ) ; m !== v && ( z ( X , h ) , z ( W , v ) ) } function Ce ( h ) { X . current === h && ( Q ( W ) , Q ( X ) ) , oe . current === h && ( Q ( oe ) , Bv . _currentValue = V ) } var ce = Object . prototype . hasOwnProperty , de
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
at ` )?" (<anonymous>)":-1<v.stack.indexOf("@")?"@unknown:0:0":""}return `
2025-11-07 11:50:17 +01:00
` +nh+h+Dg}var oh=!1;function ah(h,m){if(!h||oh)return"";oh=!0;var v=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{var S={DetermineComponentFrameRoot:function(){try{if(m){var Ne=function(){throw Error()};if(Object.defineProperty(Ne.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(Ne,[])}catch(ke){var ve=ke}Reflect.construct(h,[],Ne)}else{try{Ne.call()}catch(ke){ve=ke}h.call(Ne.prototype)}}else{try{throw Error()}catch(ke){ve=ke}(Ne=h())&&typeof Ne.catch=="function"&&Ne.catch(function(){})}}catch(ke){if(ke&&ve&&typeof ke.stack=="string")return[ke.stack,ve.stack]}return[null,null]}};S.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var P=Object.getOwnPropertyDescriptor(S.DetermineComponentFrameRoot,"name");P&&P.configurable&&Object.defineProperty(S.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var B=S.DetermineComponentFrameRoot(),K=B[0],te=B[1];if(K&&te){var se=K.split( `
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
` ),ge=te.split( `
2025-11-07 11:50:17 +01:00
` );for(P=S=0;S<se.length&&!se[S].includes("DetermineComponentFrameRoot");)S++;for(;P<ge.length&&!ge[P].includes("DetermineComponentFrameRoot");)P++;if(S===se.length||P===ge.length)for(S=se.length-1,P=ge.length-1;1<=S&&0<=P&&se[S]!==ge[P];)P--;for(;1<=S&&0<=P;S--,P--)if(se[S]!==ge[P]){if(S!==1||P!==1)do if(S--,P--,0>P||se[S]!==ge[P]){var Te= `
` +se[S].replace(" at new "," at ");return h.displayName&&Te.includes("<anonymous>")&&(Te=Te.replace("<anonymous>",h.displayName)),Te}while(1<=S&&0<=P);break}}}finally{oh=!1,Error.prepareStackTrace=v}return(v=h?h.displayName||h.name:"")?Ni(v):""}function Xb(h){switch(h.tag){case 26:case 27:case 5:return Ni(h.type);case 16:return Ni("Lazy");case 13:return Ni("Suspense");case 19:return Ni("SuspenseList");case 0:case 15:return ah(h.type,!1);case 11:return ah(h.type.render,!1);case 1:return ah(h.type,!0);case 31:return Ni("Activity");default:return""}}function Pg(h){try{var m="";do m+=Xb(h),h=h.return;while(h);return m}catch(v){return `
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
Error generating stack : ` +v.message+ `
2025-11-07 11:50:17 +01:00
` +v.stack}}function Lo(h){switch(typeof h){case"bigint":case"boolean":case"number":case"string":case"undefined":return h;case"object":return h;default:return""}}function $ g(h){var m=h.type;return(h=h.nodeName)&&h.toLowerCase()==="input"&&(m==="checkbox"||m==="radio")}function Kb(h){var m= $ g(h)?"checked":"value",v=Object.getOwnPropertyDescriptor(h.constructor.prototype,m),S=""+h[m];if(!h.hasOwnProperty(m)&&typeof v<"u"&&typeof v.get=="function"&&typeof v.set=="function"){var P=v.get,B=v.set;return Object.defineProperty(h,m,{configurable:!0,get:function(){return P.call(this)},set:function(K){S=""+K,B.call(this,K)}}),Object.defineProperty(h,m,{enumerable:v.enumerable}),{getValue:function(){return S},setValue:function(K){S=""+K},stopTracking:function(){h._valueTracker=null,delete h[m]}}}}function Yu(h){h._valueTracker||(h._valueTracker=Kb(h))}function Wu(h){if(!h)return!1;var m=h._valueTracker;if(!m)return!0;var v=m.getValue(),S="";return h&&(S= $ g(h)?h.checked?"true":"false":h.value),h=S,h!==v?(m.setValue(h),!0):!1}function Gu(h){if(h=h||(typeof document<"u"?document:void 0),typeof h>"u")return null;try{return h.activeElement||h.body}catch{return h.body}}var Zb=/[ \n " \\ ]/g;function zo(h){return h.replace(Zb,function(m){return" \\ "+m.charCodeAt(0).toString(16)+" "})}function jl(h,m,v,S,P,B,K,te){h.name="",K!=null&&typeof K!="function"&&typeof K!="symbol"&&typeof K!="boolean"?h.type=K:h.removeAttribute("type"),m!=null?K==="number"?(m===0&&h.value===""||h.value!=m)&&(h.value=""+Lo(m)):h.value!==""+Lo(m)&&(h.value=""+Lo(m)):K!=="submit"&&K!=="reset"||h.removeAttribute("value"),m!=null?ih(h,K,Lo(m)):v!=null?ih(h,K,Lo(v)):S!=null&&h.removeAttribute("value"),P==null&&B!=null&&(h.defaultChecked=!!B),P!=null&&(h.checked=P&&typeof P!="function"&&typeof P!="symbol"),te!=null&&typeof te!="function"&&typeof te!="symbol"&&typeof te!="boolean"?h.name=""+Lo(te):h.removeAttribute("name")}function Mg(h,m,v,S,P,B,K,te){if(B!=null&&typeof B!="function"&&typeof B!="symbol"&&typeof B!="boolean"&&(h.type=B),m!=null||v!=null){if(!(B!=="submit"&&B!=="reset"||m!=null))return;v=v!=null?""+Lo(v):"",m=m!=null?""+Lo(m):v,te||m===h.value||(h.value=m),h.defaultValue=m}S=S??P,S=typeof S!="function"&&typeof S!="symbol"&&!!S,h.checked=te?h.checked:!!S,h.defaultChecked=!!S,K!=null&&typeof K!="function"&&typeof K!="symbol"&&typeof K!="boolean"&&(h.name=K)}function ih(h,m,v){m==="number"&&Gu(h.ownerDocument)===h||h.defaultValue===""+v||(h.defaultValue=""+v)}function Di(h,m,v,S){if(h=h.options,m){m={};for(var P=0;P<v.length;P++)m[" $ "+v[P]]=!0;for(v=0;v<h.length;v++)P=m.hasOwnProperty(" $ "+h[v].value),h[v].selected!==P&&(h[v].selected=P),P&&S&&(h[v].defaultSelected=!0)}else{for(v=""+Lo(v),m=null,P=0;P<h.length;P++){if(h[P].value===v){h[P].selected=!0,S&&(h[P].defaultSelected=!0);return}m!==null||h[P].disabled||(m=h[P])}m!==null&&(m.selected=!0)}}function Yhe(h,m,v){if(m!=null&&(m=""+Lo(m),m!==h.value&&(h.value=m),v==null)){h.defaultValue!==m&&(h.defaultValue=m);return}h.defaultValue=v!=null?""+Lo(v):""}function Whe(h,m,v,S){if(m==null){if(S!=null){if(v!=null)throw Error(o(92));if(U(S)){if(1<S.length)throw Error(o(93));S=S[0]}v=S}v==null&&(v=""),m=v}v=Lo(m),h.defaultValue=v,S=h.textContent,S===v&&S!==""&&S!==null&&(h.value=S)}function Og(h,m){if(m){var v=h.firstChild;if(v&&v===h.lastChild&&v.nodeType===3){v.nodeValue=m;return}}h.textContent=m}var l5t=new Set("animationIterationCount aspectRatio borderImageOutset borderImageSlice borderImageWidth boxFlex boxFlexGroup boxOrdinalGroup columnCount columns flex flexGrow flexPositive flexShrink flexNegative flexOrder gridArea gridRow gridRowEnd gridRowSpan gridRowStart gridColumn gridColumnEnd gridColumnSpan gridColumnStart fontWeight lineClamp lineHeight opacity order orphans scale tabSize widows zIndex zoom fillOpacity floodOpacity stopOpacity strokeDasharray strokeDashoffset strokeMiterlimit strokeOpacity strokeWidth MozAnimationIterationCount MozBoxFlex MozBoxFlexGroup MozLineClamp msAnimationIterationCount msFlex msZoom msFlexGrow msFlexNegative msFlexOrder msFlexPositive msFlexShrink msGridColumn msGridColumnSpan msG
` ).replace(Pkt,"")}function Wge(h,m){return m=Yge(m),Yge(h)===m}function T6(){}function br(h,m,v,S,P,B){switch(v){case"children":typeof S=="string"?m==="body"||m==="textarea"&&S===""||Og(h,S):(typeof S=="number"||typeof S=="bigint")&&m!=="body"&&Og(h,""+S);break;case"className":Vu(h,"class",S);break;case"tabIndex":Vu(h,"tabindex",S);break;case"dir":case"role":case"viewBox":case"width":case"height":Vu(h,v,S);break;case"style":Xhe(h,S,B);break;case"data":if(m!=="object"){Vu(h,"data",S);break}case"src":case"href":if(S===""&&(m!=="a"||v!=="href")){h.removeAttribute(v);break}if(S==null||typeof S=="function"||typeof S=="symbol"||typeof S=="boolean"){h.removeAttribute(v);break}S=Ok(""+S),h.setAttribute(v,S);break;case"action":case"formAction":if(typeof S=="function"){h.setAttribute(v,"javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you \\ 're trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')");break}else typeof B=="function"&&(v==="formAction"?(m!=="input"&&br(h,m,"name",P.name,P,null),br(h,m,"formEncType",P.formEncType,P,null),br(h,m,"formMethod",P.formMethod,P,null),br(h,m,"formTarget",P.formTarget,P,null)):(br(h,m,"encType",P.encType,P,null),br(h,m,"method",P.method,P,null),br(h,m,"target",P.target,P,null)));if(S==null||typeof S=="symbol"||typeof S=="boolean"){h.removeAttribute(v);break}S=Ok(""+S),h.setAttribute(v,S);break;case"onClick":S!=null&&(h.onclick=T6);break;case"onScroll":S!=null&&Xt("scroll",h);break;case"onScrollEnd":S!=null&&Xt("scrollend",h);break;case"dangerouslySetInnerHTML":if(S!=null){if(typeof S!="object"||!("__html"in S))throw Error(o(61));if(v=S.__html,v!=null){if(P.children!=null)throw Error(o(60));h.innerHTML=v}}break;case"multiple":h.multiple=S&&typeof S!="function"&&typeof S!="symbol";break;case"muted":h.muted=S&&typeof S!="function"&&typeof S!="symbol";break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"defaultValue":case"defaultChecked":case"innerHTML":case"ref":break;case"autoFocus":break;case"xlinkHref":if(S==null||typeof S=="function"||typeof S=="boolean"||typeof S=="symbol"){h.removeAttribute("xlink:href");break}v=Ok(""+S),h.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",v);break;case"contentEditable":case"spellCheck":case"draggable":case"value":case"autoReverse":case"externalResourcesRequired":case"focusable":case"preserveAlpha":S!=null&&typeof S!="function"&&typeof S!="symbol"?h.setAttribute(v,""+S):h.removeAttribute(v);break;case"inert":case"allowFullScreen":case"async":case"autoPlay":case"controls":case"default":case"defer":case"disabled":case"disablePictureInPicture":case"disableRemotePlayback":case"formNoValidate":case"hidden":case"loop":case"noModule":case"noValidate":case"open":case"playsInline":case"readOnly":case"required":case"reversed":case"scoped":case"seamless":case"itemScope":S&&typeof S!="function"&&typeof S!="symbol"?h.setAttribute(v,""):h.removeAttribute(v);break;case"capture":case"download":S===!0?h.setAttribute(v,""):S!==!1&&S!=null&&typeof S!="function"&&typeof S!="symbol"?h.setAttribute(v,S):h.removeAttribute(v);break;case"cols":case"rows":case"size":case"span":S!=null&&typeof S!="function"&&typeof S!="symbol"&&!isNaN(S)&&1<=S?h.setAttribute(v,S):h.removeAttribute(v);break;case"rowSpan":case"start":S==null||typeof S=="function"||typeof S=="symbol"||isNaN(S)?h.removeAttribute(v):h.setAttribute(v,S);break;case"popover":Xt("beforetoggle",h),Xt("toggle",h),Uu(h,"popover",S);break;case"xlinkActuate":Fa(h,"http://www.w3.org/1999/xlink","xlink:actuate",S);break;case"xlinkArcrole":Fa(h,"http://www.w3.org/1999/xlink","xlink:arcrole",S);break;case"xlinkRole":Fa(h,"http://www.w3.org/1999/xlink","xlink:role",S);break;case"xlinkShow":Fa(h,"http://www.w3.org/1999/xlink","xlink:show",S);break;case"xlinkTitle":Fa(h,"http://www.w3.org/1999/xlink","xlink:title",S);break;case"xlinkType":Fa(h,"http://www.w3.org/1999/xlink","xlink:type",S);break;case"xmlBase":Fa(h,"http://www.w3.org/XML/199
. ` .concat(jtt, ` {
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
overflow : hidden ` ).concat(o, ` ;
padding - right : ` ).concat(s,"px ").concat(o, ` ;
}
body [ ` ).concat(Tm, ` ] {
overflow : hidden ` ).concat(o, ` ;
overscroll - behavior : contain ;
` ).concat([r&&"position: relative ".concat(o,";"),n==="margin"&& `
padding - left : ` .concat(a, ` px ;
padding - top : ` ).concat(i, ` px ;
padding - right : ` ).concat(l, ` px ;
margin - left : 0 ;
margin - top : 0 ;
margin - right : ` ).concat(s,"px ").concat(o, ` ;
` ),n==="padding"&&"padding-right: ".concat(s,"px ").concat(o,";")].filter(Boolean).join(""), `
}
. ` ).concat(y4, ` {
right : ` ).concat(s,"px ").concat(o, ` ;
}
. ` ).concat(b4, ` {
margin - right : ` ).concat(s,"px ").concat(o, ` ;
}
. ` ).concat(y4," .").concat(y4, ` {
right : 0 ` ).concat(o, ` ;
}
. ` ).concat(b4," .").concat(b4, ` {
margin - right : 0 ` ).concat(o, ` ;
}
body [ ` ).concat(Tm, ` ] {
` ).concat(Ftt,": ").concat(s, ` px ;
}
` )},sre=function(){var e=parseInt(document.body.getAttribute(Tm)||"0",10);return isFinite(e)?e:0},irt=function(){E.useEffect(function(){return document.body.setAttribute(Tm,(sre()+1).toString()),function(){var e=sre()-1;e<=0?document.body.removeAttribute(Tm):document.body.setAttribute(Tm,e.toString())}},[])},lrt=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;irt();var i=E.useMemo(function(){return nrt(a)},[a]);return E.createElement(ort,{styles:art(i,!r,a,n?"":"!important")})},RR=!1;if(typeof window<"u")try{var x4=Object.defineProperty({},"passive",{get:function(){return RR=!0,!0}});window.addEventListener("test",x4,x4),window.removeEventListener("test",x4,x4)}catch{RR=!1}var Rm=RR?{passive:!1}:!1,srt=function(e){return e.tagName==="TEXTAREA"},cre=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!srt(e)&&n[r]==="visible")},crt=function(e){return cre(e,"overflowY")},urt=function(e){return cre(e,"overflowX")},ure=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=dre(e,o);if(a){var i=pre(e,o),l=i[1],s=i[2];if(l>s)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},drt=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},prt=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},dre=function(e,r){return e==="v"?crt(r):urt(r)},pre=function(e,r){return e==="v"?drt(r):prt(r)},hrt=function(e,r){return e==="h"&&r==="rtl"?-1:1},frt=function(e,r,n,o,a){var i=hrt(e,window.getComputedStyle(r).direction),l=i*o,s=n.target,c=r.contains(s),u=!1,d=l>0,p=0,f=0;do{if(!s)break;var g=pre(e,s),b=g[0],x=g[1],w=g[2],k=x-w-i*b;(b||k)&&dre(e,s)&&(p+=k,f+=b);var C=s.parentNode;s=C&&C.nodeType===Node.DOCUMENT_FRAGMENT_NODE?C.host:C}while(!c&&s!==document.body||c&&(r.contains(s)||r===s));return(d&&Math.abs(p)<1||!d&&Math.abs(f)<1)&&(u=!0),u},w4=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},hre=function(e){return[e.deltaX,e.deltaY]},fre=function(e){return e&&"current"in e?e.current:e},mrt=function(e,r){return e[0]===r[0]&&e[1]===r[1]},grt=function(e){return `
. block - interactivity - ` .concat(e, ` { pointer - events : none ; }
. allow - interactivity - ` ).concat(e, ` { pointer - events : all ; }
2025-11-07 11:50:17 +01:00
` )},yrt=0,Am=[];function brt(e){var r=E.useRef([]),n=E.useRef([0,0]),o=E.useRef(),a=E.useState(yrt++)[0],i=E.useState(lre)[0],l=E.useRef(e);E.useEffect(function(){l.current=e},[e]),E.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(a));var x=Btt([e.lockRef.current],(e.shards||[]).map(fre)).filter(Boolean);return x.forEach(function(w){return w.classList.add("allow-interactivity-".concat(a))}),function(){document.body.classList.remove("block-interactivity-".concat(a)),x.forEach(function(w){return w.classList.remove("allow-interactivity-".concat(a))})}}},[e.inert,e.lockRef.current,e.shards]);var s=E.useCallback(function(x,w){if("touches"in x&&x.touches.length===2||x.type==="wheel"&&x.ctrlKey)return!l.current.allowPinchZoom;var k=w4(x),C=n.current,_="deltaX"in x?x.deltaX:C[0]-k[0],T="deltaY"in x?x.deltaY:C[1]-k[1],R,A=x.target,D=Math.abs(_)>Math.abs(T)?"h":"v";if("touches"in x&&D==="h"&&A.type==="range")return!1;var N=ure(D,A);if(!N)return!0;if(N?R=D:(R=D==="v"?"h":"v",N=ure(D,A)),!N)return!1;if(!o.current&&"changedTouches"in x&&(_||T)&&(o.current=R),!R)return!0;var $ =o.current||R;return frt( $ ,w,x, $ ==="h"?_:T)},[]),c=E.useCallback(function(x){var w=x;if(!(!Am.length||Am[Am.length-1]!==i)){var k="deltaY"in w?hre(w):w4(w),C=r.current.filter(function(R){return R.name===w.type&&(R.target===w.target||w.target===R.shadowParent)&&mrt(R.delta,k)})[0];if(C&&C.should){w.cancelable&&w.preventDefault();return}if(!C){var _=(l.current.shards||[]).map(fre).filter(Boolean).filter(function(R){return R.contains(w.target)}),T=_.length>0?s(w,_[0]):!l.current.noIsolation;T&&w.cancelable&&w.preventDefault()}}},[]),u=E.useCallback(function(x,w,k,C){var _={name:x,delta:w,target:k,should:C,shadowParent:vrt(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function(T){return T!==_})},1)},[]),d=E.useCallback(function(x){n.current=w4(x),o.current=void 0},[]),p=E.useCallback(function(x){u(x.type,hre(x),x.target,s(x,e.lockRef.current))},[]),f=E.useCallback(function(x){u(x.type,w4(x),x.target,s(x,e.lockRef.current))},[]);E.useEffect(function(){return Am.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,Rm),document.addEventListener("touchmove",c,Rm),document.addEventListener("touchstart",d,Rm),function(){Am=Am.filter(function(x){return x!==i}),document.removeEventListener("wheel",c,Rm),document.removeEventListener("touchmove",c,Rm),document.removeEventListener("touchstart",d,Rm)}},[]);var g=e.removeScrollBar,b=e.inert;return E.createElement(E.Fragment,null,b?E.createElement(i,{styles:grt(a)}):null,g?E.createElement(lrt,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function vrt(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const xrt=Gtt(ire,brt);var mre=E.forwardRef(function(e,r){return E.createElement(v4,ss({},e,{ref:r,sideCar:xrt}))});mre.classNames=v4.classNames;function $ o(e){return Object.keys(e)}function wrt(e){return e.replace(/[A-Z]/g,r=> ` - $ { r . toLowerCase ( ) } ` )}function krt(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc \( (.*?) \) $ /)?.[1].split("*")[0].trim()}function k4(e){const r=krt(e);return typeof r=="number"?r:typeof r=="string"?r.includes("calc")||r.includes("var")?r:r.includes("px")?Number(r.replace("px","")):r.includes("rem")?Number(r.replace("rem",""))*16:r.includes("em")?Number(r.replace("em",""))*16:Number(r):NaN}function gre(e){return e==="0rem"?"0rem": ` calc ( $ { e } * var ( -- mantine - scale ) ) ` }function yre(e,{shouldScale:r=!1}={}){function n(o){if(o===0||o==="0")return ` 0 $ { e } ` ;if(typeof o=="number"){const a= ` $ { o / 16 } $ { e } ` ;return r?gre(a):a}if(typeof o=="string"){if(o===""||o.startsWith("calc(")||o.startsWith("clamp(")||o.includes("rgba("))return o;if(o.includes(","))return o.split(",").map(i=>n(i)).join(",");if(o.includes(" "))return o.split(" ").map(i=>n(i)).join(" ");const a=o.replace("px","");if(!Number.isNaN(Number(a))){const i= ` $ { Number ( a ) / 16 } $ { e } ` ;return r?gre(i):i}}return o}return n}const Fe=yre("rem",{shouldScale:!0});
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
* @ license React
* use - sync - external - store - shim . production . js
*
* Copyright ( c ) Meta Platforms , Inc . and affiliates .
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree .
* / v a r m i e ; f u n c t i o n A c t ( ) { i f ( m i e ) r e t u r n v N ; m i e = 1 ; v a r e = X r ; f u n c t i o n r ( p , f ) { r e t u r n p = = = f & & ( p ! = = 0 | | 1 / p = = = 1 / f ) | | p ! = = p & & f ! = = f } v a r n = t y p e o f O b j e c t . i s = = " f u n c t i o n " ? O b j e c t . i s : r , o = e . u s e S t a t e , a = e . u s e E f f e c t , i = e . u s e L a y o u t E f f e c t , l = e . u s e D e b u g V a l u e ; f u n c t i o n s ( p , f ) { v a r g = f ( ) , b = o ( { i n s t : { v a l u e : g , g e t S n a p s h o t : f } } ) , x = b [ 0 ] . i n s t , w = b [ 1 ] ; r e t u r n i ( f u n c t i o n ( ) { x . v a l u e = g , x . g e t S n a p s h o t = f , c ( x ) & & w ( { i n s t : x } ) } , [ p , g , f ] ) , a ( f u n c t i o n ( ) { r e t u r n c ( x ) & & w ( { i n s t : x } ) , p ( f u n c t i o n ( ) { c ( x ) & & w ( { i n s t : x } ) } ) } , [ p ] ) , l ( g ) , g } f u n c t i o n c ( p ) { v a r f = p . g e t S n a p s h o t ; p = p . v a l u e ; t r y { v a r g = f ( ) ; r e t u r n ! n ( p , g ) } c a t c h { r e t u r n ! 0 } } f u n c t i o n u ( p , f ) { r e t u r n f ( ) } v a r d = t y p e o f w i n d o w > " u " | | t y p e o f w i n d o w . d o c u m e n t > " u " | | t y p e o f w i n d o w . d o c u m e n t . c r e a t e E l e m e n t > " u " ? u : s ; r e t u r n v N . u s e S y n c E x t e r n a l S t o r e = e . u s e S y n c E x t e r n a l S t o r e ! = = v o i d 0 ? e . u s e S y n c E x t e r n a l S t o r e : d , v N } v a r g i e ; f u n c t i o n N c t ( ) { r e t u r n g i e | | ( g i e = 1 , f i e . e x p o r t s = A c t ( ) ) , f i e . e x p o r t s } / * *
* @ license React
* use - sync - external - store - shim / with - selector . production . js
*
* Copyright ( c ) Meta Platforms , Inc . and affiliates .
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree .
2025-11-07 11:50:17 +01:00
* /var yie;function Dct(){if(yie)return bN;yie=1;var e=Xr,r=Nct();function n(u,d){return u===d&&(u!==0||1/u === 1 / d ) || u !== u && d !== d } var o = typeof Object . is == "function" ? Object . is : n , a = r . useSyncExternalStore , i = e . useRef , l = e . useEffect , s = e . useMemo , c = e . useDebugValue ; return bN . useSyncExternalStoreWithSelector = function ( u , d , p , f , g ) { var b = i ( null ) ; if ( b . current === null ) { var x = { hasValue : ! 1 , value : null } ; b . current = x } else x = b . current ; b = s ( function ( ) { function k ( A ) { if ( ! C ) { if ( C = ! 0 , _ = A , A = f ( A ) , g !== void 0 && x . hasValue ) { var D = x . value ; if ( g ( D , A ) ) return T = D } return T = A } if ( D = T , o ( _ , A ) ) return D ; var N = f ( A ) ; return g !== void 0 && g ( D , N ) ? ( _ = A , D ) : ( _ = A , T = N ) } var C = ! 1 , _ , T , R = p === void 0 ? null : p ; return [ function ( ) { return k ( d ( ) ) } , R === null ? void 0 : function ( ) { return k ( R ( ) ) } ] } , [ d , p , f , g ] ) ; var w = a ( u , b [ 0 ] , b [ 1 ] ) ; return l ( function ( ) { x . hasValue = ! 0 , x . value = w } , [ w ] ) , c ( w ) , w } , bN } var bie ; function Pct ( ) { return bie || ( bie = 1 , hie . exports = Dct ( ) ) , hie . exports } var vie = Pct ( ) ; const $ct = sae ( vie ) ; function Mct ( e , r = n => n ) { return vie . useSyncExternalStoreWithSelector ( e . subscribe , ( ) => e . state , ( ) => e . state , r , Oct ) } function Oct ( e , r ) { if ( Object . is ( e , r ) ) return ! 0 ; if ( typeof e != "object" || e === null || typeof r != "object" || r === null ) return ! 1 ; if ( e instanceof Map && r instanceof Map ) { if ( e . size !== r . size ) return ! 1 ; for ( const [ o , a ] of e ) if ( ! r . has ( o ) || ! Object . is ( a , r . get ( o ) ) ) return ! 1 ; return ! 0 } if ( e instanceof Set && r instanceof Set ) { if ( e . size !== r . size ) return ! 1 ; for ( const o of e ) if ( ! r . has ( o ) ) return ! 1 ; return ! 0 } const n = Object . keys ( e ) ; if ( n . length !== Object . keys ( r ) . length ) return ! 1 ; for ( let o = 0 ; o < n . length ; o ++ ) if ( ! Object . prototype . hasOwnProperty . call ( r , n [ o ] ) || ! Object . is ( e [ n [ o ] ] , r [ n [ o ] ] ) ) return ! 1 ; return ! 0 } const xN = E . createContext ( null ) ; function Ict ( ) { return typeof document > "u" ? xN : window . _ _TSR _ROUTER _CONTEXT _ _ ? window . _ _TSR _ROUTER _CONTEXT _ _ : ( window . _ _TSR _ROUTER _CONTEXT _ _ = xN , xN ) } function Pp ( e ) { const r = E . useContext ( Ict ( ) ) ; return e ? . warn , r } function Al ( e ) { const r = Pp ( { warn : e ? . router === void 0 } ) , n = e ? . router || r , o = E . useRef ( void 0 ) ; return Mct ( n . _ _store , a => { if ( e ? . select ) { if ( e . structuralSharing ? ? n . options . defaultStructuralSharing ) { const i = oie ( o . current , e . select ( a ) ) ; return o . current = i , i } return e . select ( a ) } return a } ) } const xie = E . createContext ( void 0 ) ; E . createContext ( void 0 ) ; function Lct ( e ) { const r = Al ( { select : n => ` not-found- ${ n . location . pathname } - ${ n . status } ` } ) ; return y . jsx ( pie , { getResetKey : ( ) => r , onCatch : ( n , o ) => { var a ; if ( k5 ( n ) ) ( a = e . onCatch ) == null || a . call ( e , n , o ) ; else throw n } , errorComponent : ( { error : n } ) => { var o ; if ( k5 ( n ) ) return ( o = e . fallback ) == null ? void 0 : o . call ( e , n ) ; throw n } , children : e . children } ) } function zct ( ) { return y . jsx ( "p" , { children : "Not Found" } ) } function wN ( e ) { return y . jsx ( y . Fragment , { children : e . children } ) } function wie ( e , r , n ) { return r . options . notFoundComponent ? y . jsx ( r . options . notFoundComponent , { data : n } ) : e . options . defaultNotFoundComponent ? y . jsx ( e . options . defaultNotFoundComponent , { data : n } ) : y . jsx ( zct , { } ) } var kN , kie ; function Bct ( ) { if ( kie ) return kN ; kie = 1 ; const e = { } , r = e . hasOwnProperty , n = ( N , $ ) => { for ( const M in N ) r . call ( N , M ) && $ ( M , N [ M ] ) } , o = ( N , $ ) => ( $ && n ( $ , ( M , j ) => { N [ M ] = j } ) , N ) , a = ( N , $ ) => { const M = N . length ; let j = - 1 ; for ( ; ++ j < M ; ) $ ( N [ j ] ) } , i = N => "\\u" + ( "0000" + N ) . slice ( - 4 ) , l = ( N , $ ) => { let M = N . toString ( 16 ) ; return $ ? M : M . toUpperCase ( ) } , s = e . toString , c = Array . isArray , u = N => typeof Buffer == "function" && Buffer . isBuffer ( N ) , d = N => s . call ( N ) == "[object Object]" , p = N => typeof N == "string" || s . call ( N ) == "[object String]" , f = N => typeof N == "number" || s . call ( N ) == "[object Number]" , g = N => typeof N == "bigint" , b = N => typeof N == "function" , x = N => s . call ( N ) == "[object Map]" , w = N => s . call ( N ) == "[object Set]" , k = { "\\" : "\\\\" , "\b" : "\\b" , "\f" : "\\f" , "\n" : "\\n" , "\r" : "\\r" , " " : "\\t" } , C = /[\\\b\f\n\r\t]/ , _ = /[0-9]/ , T = /[\xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000]/ , R = /([\uD800-\uDBFF][\uDC00-\uDFFF])|([\uD800-\uDFFF])|(['"`])|[^]/g , A = /([\uD800-\uDBFF][\uDC00-\uDFFF])|([\uD800-\uDFFF])|(['"`])|[^ !#-&\(-\[\]-_a-~]/g , D = ( N , $ ) => { const M = ( ) => { q = I , ++ $ . indentLevel , I = $ . indent . repeat ( $ . indentLevel ) } , j = { escapeEverything : ! 1 , minimal : ! 1 , isScriptContext : ! 1 , quotes : "single" , wrap : ! 1 , es6 : ! 1 , json : ! 1 , compact : ! 0 , lowercaseHex : ! 1 , numbers : "decimal" , indent : " " , indentLevel : 0 , _ _inline1 _ _ : ! 1 , _ _inline2 _ _ : ! 1 } , L = $ && $ . json ; L && ( j . quotes = "double" , j . wrap = ! 0 ) , $ = o ( j , $ ) , $ . quot
` ;let J,Q=!0;const z= $ .numbers=="binary",W= $ .numbers=="octal",X= $ .numbers=="decimal",Z= $ .numbers=="hexadecimal";if(L&&N&&b(N.toJSON)&&(N=N.toJSON()),!p(N)){if(x(N))return N.size==0?"new Map()":(O||( $ .__inline1__=!0, $ .__inline2__=!1),"new Map("+D(Array.from(N), $ )+")");if(w(N))return N.size==0?"new Set()":"new Set("+D(Array.from(N), $ )+")";if(u(N))return N.length==0?"Buffer.from([])":"Buffer.from("+D(Array.from(N), $ )+")";if(c(N))return J=[], $ .wrap=!0,V&&( $ .__inline1__=!1, $ .__inline2__=!0),G||M(),a(N,ee=>{Q=!1,G&&( $ .__inline2__=!1),J.push((O||G?"":I)+D(ee, $ ))}),Q?"[]":G?"["+J.join(", ")+"]":"["+F+J.join(","+F)+F+(O?"":q)+"]";if(f(N)||g(N)){if(L)return JSON.stringify(Number(N));let ee;if(X)ee=String(N);else if(Z){let re=N.toString(16);U||(re=re.toUpperCase()),ee="0x"+re}else z?ee="0b"+N.toString(2):W&&(ee="0o"+N.toString(8));return g(N)?ee+"n":ee}else return g(N)?L?JSON.stringify(Number(N)):N+"n":d(N)?(J=[], $ .wrap=!0,M(),n(N,(ee,re)=>{Q=!1,J.push((O?"":I)+D(ee, $ )+":"+(O?"":" ")+D(re, $ ))}),Q?"{}":"{"+F+J.join(","+F)+F+(O?"":q)+"}"):L?JSON.stringify(N)||"null":String(N)}const oe= $ .escapeEverything?R:A;return J=N.replace(oe,(ee,re,pe,Ce,ce,de)=>{if(re){if( $ .minimal)return re;const Oe=re.charCodeAt(0),Xe=re.charCodeAt(1);if( $ .es6){const Ge=(Oe-55296)*1024+Xe-56320+65536;return" \\ u{"+l(Ge,U)+"}"}return i(l(Oe,U))+i(l(Xe,U))}if(pe)return i(l(pe.charCodeAt(0),U));if(ee==" \0 "&&!L&&!_.test(de.charAt(ce+1)))return" \\ 0";if(Ce)return Ce==Y|| $ .escapeEverything?" \\ "+Ce:Ce;if(C.test(ee))return k[ee];if( $ .minimal&&!T.test(ee))return ee;const be=l(ee.charCodeAt(0),U);return L||be.length>2?i(be):" \\ x"+("00"+be).slice(-2)}),Y==" ` "&&(J=J.replace(/\$\{/g," \ \ $ { ")),$.isScriptContext&&(J=J.replace(/<\/(script|style)/gi," < \ \ / $1 ").replace(/<!--/g,L?" \ \u003C ! -- ":" \ \ x3C ! -- ")),$.wrap&&(J=Y+J+Y),J};return D.version=" 3.0 . 2 ",kN=D,kN}Bct();function jct({children:e,log:r}){return typeof document<" u "?null:y.jsx(" script ",{className:" tsr - once ",dangerouslySetInnerHTML:{__html:[e," ",'if (typeof __TSR_SSR__ !== " undefined " ) _ _TSR _SSR _ _ . cleanScripts ( ) ' ] . filter ( Boolean ) . join ( `
` )}})}function Fct(){const e=Pp(),r=(e.options.getScrollRestorationKey||uie)(e.latestLocation),n=r!==uie(e.latestLocation)?r:null;return!e.isScrollRestoring||!e.isServer?null:y.jsx(jct,{children: ` ( $ { Ect . toString ( ) } ) ( $ { JSON . stringify ( sie ) } , $ { JSON . stringify ( n ) } , undefined , true ) ` ,log:!1})}const Hct=E.memo(function({matchId:e}){var r,n;const o=Pp(),a=Al({select:w=>{var k;return(k=w.matches.find(C=>C.id===e))==null?void 0:k.routeId}});v5(a);const i=o.routesById[a],l=i.options.pendingComponent??o.options.defaultPendingComponent,s=l?y.jsx(l,{}):null,c=i.options.errorComponent??o.options.defaultErrorComponent,u=i.options.onCatch??o.options.defaultOnCatch,d=i.isRoot?i.options.notFoundComponent??((r=o.options.notFoundRoute)==null?void 0:r.options.component):i.options.notFoundComponent,p=(!i.isRoot||i.options.wrapInSuspense)&&(i.options.wrapInSuspense??l??((n=i.options.errorComponent)==null?void 0:n.preload))?E.Suspense:wN,f=c?pie:wN,g=d?Lct:wN,b=Al({select:w=>w.loadedAt}),x=Al({select:w=>{var k;const C=w.matches.findIndex(_=>_.id===e);return(k=w.matches[C-1])==null?void 0:k.routeId}});return y.jsxs(y.Fragment,{children:[y.jsx(xie.Provider,{value:e,children:y.jsx(p,{fallback:s,children:y.jsx(f,{getResetKey:()=>b,errorComponent:c||yN,onCatch:(w,k)=>{if(k5(w))throw w;u?.(w,k)},children:y.jsx(g,{fallback:w=>{if(!d||w.routeId&&w.routeId!==a||!w.routeId&&!i.isRoot)throw w;return E.createElement(d,w)},children:y.jsx(Uct,{matchId:e})})})})}),x===die&&o.options.scrollRestoration?y.jsxs(y.Fragment,{children:[y.jsx(qct,{}),y.jsx(Fct,{})]}):null]})});function qct(){var e;const r=Pp(),n=E.useRef(void 0);return y.jsx("script",{suppressHydrationWarning:!0,ref:o=>{var a;o&&(n.current===void 0||n.current.href!==((a=r.state.resolvedLocation)==null?void 0:a.href))&&(r.emit({type:"onRendered",...Cct(r.state)}),n.current=r.state.resolvedLocation)}},(e=r.state.resolvedLocation)==null?void 0:e.state.key)}const Uct=E.memo(function({matchId:e}){var r,n,o;const a=Pp(),{match:i,key:l,routeId:s}=Al({select:p=>{const f=p.matches.findIndex(k=>k.id===e),g=p.matches[f],b=g.routeId,x=a.routesById[b].options.remountDeps??a.options.defaultRemountDeps,w=x?.({routeId:b,loaderDeps:g.loaderDeps,params:g._strictParams,search:g._strictSearch});return{key:w?JSON.stringify(w):void 0,routeId:b,match:wct(g,["id","status","error"])}},structuralSharing:!0}),c=a.routesById[s],u=E.useMemo(()=>{const p=c.options.component??a.options.defaultComponent;return p?y.jsx(p,{},l):y.jsx(Vct,{})},[l,c.options.component,a.options.defaultComponent]),d=(c.options.errorComponent??a.options.defaultErrorComponent)||yN;if(i.status==="notFound")return v5(k5(i.error)),wie(a,c,i.error);if(i.status==="redirected")throw v5(Sct(i.error)),(r=a.getMatch(i.id))==null?void 0:r.loadPromise;if(i.status==="error"){if(a.isServer)return y.jsx(d,{error:i.error,reset:void 0,info:{componentStack:""}});throw i.error}if(i.status==="pending"){const p=c.options.pendingMinMs??a.options.defaultPendingMinMs;if(p&&!((n=a.getMatch(i.id))!=null&&n.minPendingPromise)&&!a.isServer){const f=kct();Promise.resolve().then(()=>{a.updateMatch(i.id,g=>({...g,minPendingPromise:f}))}),setTimeout(()=>{f.resolve(),a.updateMatch(i.id,g=>({...g,minPendingPromise:void 0}))},p)}throw(o=a.getMatch(i.id))==null?void 0:o.loadPromise}return u}),Vct=E.memo(function(){const e=Pp(),r=E.useContext(xie),n=Al({select:c=>{var u;return(u=c.matches.find(d=>d.id===r))==null?void 0:u.routeId}}),o=e.routesById[n],a=Al({select:c=>{const u=c.matches.find(d=>d.id===r);return v5(u),u.globalNotFound}}),i=Al({select:c=>{var u;const d=c.matches,p=d.findIndex(f=>f.id===r);return(u=d[p+1])==null?void 0:u.id}});if(a)return wie(e,o,void 0);if(!i)return null;const l=y.jsx(Hct,{matchId:i}),s=e.options.defaultPendingComponent?y.jsx(e.options.defaultPendingComponent,{}):null;return r===die?y.jsx(E.Suspense,{fallback:s,children:l}):l}),Yct=typeof window<"u"?E.useLayoutEffect:E.useEffect;function Wct(e,r,n={},o={}){const a=E.useRef(typeof IntersectionObserver=="function"),i=E.useRef(null);return E.useEffect(()=>{if(!(!e.current||!a.current||o.disabled))return i.current=n
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
` ).replace( `
` , `
+ ` ).split( `
2025-11-07 11:50:17 +01:00
` )),u=c.reduce((d,p)=>d.concat(...p),[]);return[c,u]}return[[],[]]},[e]);return E.useEffect(()=>{const c=r?.target??gse,u=r?.actInsideInputWithModifier??!0;if(e!==null){const d=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!u)&& $ le(g))return!1;const b=bse(g.code,s);if(i.current.add(g[b]),yse(l,i.current,!1)){const x=g.composedPath?.()?.[0]||g.target,w=x?.nodeName==="BUTTON"||x?.nodeName==="A";r.preventDefault!==!1&&(a.current||!w)&&g.preventDefault(),o(!0)}},p=g=>{const b=bse(g.code,s);yse(l,i.current,!0)?(o(!1),i.current.clear()):i.current.delete(g[b]),g.key==="Meta"&&i.current.clear(),a.current=!1},f=()=>{i.current.clear(),o(!1)};return c?.addEventListener("keydown",d),c?.addEventListener("keyup",p),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",d),c?.removeEventListener("keyup",p),window.removeEventListener("blur",f),window.removeEventListener("contextmenu",f)}}},[e,o]),n}function yse(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function bse(e,r){return r.includes(e)?"code":"key"}const tmt=()=>{const e=zr();return E.useMemo(()=>({zoomIn:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomOut:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1/1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomTo:(r,n)=>{const{panZoom:o}=e.getState();return o?o.scaleTo(r,{duration:n?.duration}):Promise.resolve(!1)},getZoom:()=>e.getState().transform[2],setViewport:async(r,n)=>{const{transform:[o,a,i],panZoom:l}=e.getState();return l?(await l.setViewport({x:r.x??o,y:r.y??a,zoom:r.zoom??i},n),Promise.resolve(!0)):Promise.resolve(!1)},getViewport:()=>{const[r,n,o]=e.getState().transform;return{x:r,y:n,zoom:o}},setCenter:async(r,n,o)=>e.getState().setCenter(r,n,o),fitBounds:async(r,n)=>{const{width:o,height:a,minZoom:i,maxZoom:l,panZoom:s}=e.getState(),c=UN(r,o,a,i,l,n?.padding??.1);return s?(await s.setViewport(c,{duration:n?.duration,ease:n?.ease,interpolate:n?.interpolate}),Promise.resolve(!0)):Promise.resolve(!1)},screenToFlowPosition:(r,n={})=>{const{transform:o,snapGrid:a,snapToGrid:i,domNode:l}=e.getState();if(!l)return r;const{x:s,y:c}=l.getBoundingClientRect(),u={x:r.x-s,y:r.y-c},d=n.snapGrid??a,p=n.snapToGrid??i;return xb(u,o,p,d)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:a,y:i}=o.getBoundingClientRect(),l=X5(r,n);return{x:l.x+a,y:l.y+i}}}),[])};function vse(e,r){const n=[],o=new Map,a=[];for(const i of e)if(i.type==="add"){a.push(i);continue}else if(i.type==="remove"||i.type==="replace")o.set(i.id,[i]);else{const l=o.get(i.id);l?l.push(i):o.set(i.id,[i])}for(const i of r){const l=o.get(i.id);if(!l){n.push(i);continue}if(l[0].type==="remove")continue;if(l[0].type==="replace"){n.push({...l[0].item});continue}const s={...i};for(const c of l)rmt(c,s);n.push(s)}return a.length&&a.forEach(i=>{i.index!==void 0?n.splice(i.index,0,{...i.item}):n.push({...i.item})}),n}function rmt(e,r){switch(e.type){case"select":{r.selected=e.selected;break}case"position":{typeof e.position<"u"&&(r.position=e.position),typeof e.dragging<"u"&&(r.dragging=e.dragging);break}case"dimensions":{typeof e.dimensions<"u"&&(r.measured??={},r.measured.width=e.dimensions.width,r.measured.height=e.dimensions.height,e.setAttributes&&((e.setAttributes===!0||e.setAttributes==="width")&&(r.width=e.dimensions.width),(e.setAttributes===!0||e.setAttributes==="height")&&(r.height=e.dimensions.height))),typeof e.resizing=="boolean"&&(r.resizing=e.resizing);break}}}function nmt(e,r){return vse(e,r)}function omt(e,r){return vse(e,r)}function Bp(e,r){return{id:e,type:"select",selected:r}}function og(e,r=new Set,n=!1){const o=[];for(const[a,i]of e){const l=r.has(a);!(i.selected===void 0&&!l)&&i.selected!==l&&(n&&(i.selected=l),o.push(Bp(i.id,l)))}return o}function xse({items:e=[],lookup:r}){const n=[],o=new Map(e.map(a=>[a.id,a]));for(const[a,i]of e.entries()){const l=r.get(i.id),s=l?.internals?.userNode??l;s!==void 0&&s!==i&&n.push({id:i
M$ { N . x } , $ { N . y } h$ { N . width } v$ { N . height } h$ { - N . width } z ` ,fillRule:"evenodd",pointerEvents:"none"})]})})}lce.displayName="MiniMap",E.memo(lce);const Vgt=e=>r=>e? ` $ { Math . max ( 1 / r . transform [ 2 ] , 1 ) } ` :void 0,Ygt={[ng.Line]:"right",[ng.Handle]:"bottom-right"};function Wgt({nodeId:e,position:r,variant:n=ng.Handle,className:o,style:a=void 0,children:i,color:l,minWidth:s=10,minHeight:c=10,maxWidth:u=Number.MAX_VALUE,maxHeight:d=Number.MAX_VALUE,keepAspectRatio:p=!1,resizeDirection:f,autoScale:g=!0,shouldResize:b,onResizeStart:x,onResize:w,onResizeEnd:k}){const C=Ase(),_=typeof e=="string"?e:C,T=zr(),R=E.useRef(null),A=n===ng.Handle,D=tr(E.useCallback(Vgt(A&&g),[A,g]),Vr),N=E.useRef(null), $ =r??Ygt[n];E.useEffect(()=>{if(!(!R.current||!_))return N.current||(N.current=Nft({domNode:R.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:j,transform:L,snapGrid:Y,snapToGrid:O,nodeOrigin:U,domNode:I}=T.getState();return{nodeLookup:j,transform:L,snapGrid:Y,snapToGrid:O,nodeOrigin:U,paneDomNode:I}},onChange:(j,L)=>{const{triggerNodeChanges:Y,nodeLookup:O,parentLookup:U,nodeOrigin:I}=T.getState(),q=[],V={x:j.x,y:j.y},G=O.get(_);if(G&&G.expandParent&&G.parentId){const F=G.origin??I,J=j.width??G.measured.width??0,Q=j.height??G.measured.height??0,z={id:G.id,parentId:G.parentId,rect:{width:J,height:Q,...Nle({x:j.x??G.position.x,y:j.y??G.position.y},{width:J,height:Q},G.parentId,O,F)}},W=QN([z],O,U,I);q.push(...W),V.x=j.x?Math.max(F[0]*J,j.x):void 0,V.y=j.y?Math.max(F[1]*Q,j.y):void 0}if(V.x!==void 0&&V.y!==void 0){const F={id:_,type:"position",position:{...V}};q.push(F)}if(j.width!==void 0&&j.height!==void 0){const F={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:j.width,height:j.height}};q.push(F)}for(const F of L){const J={...F,type:"position"};q.push(J)}Y(q)},onEnd:({width:j,height:L})=>{const Y={id:_,type:"dimensions",resizing:!1,dimensions:{width:j,height:L}};T.getState().triggerNodeChanges([Y])}})),N.current.update({controlPosition: $ ,boundaries:{minWidth:s,minHeight:c,maxWidth:u,maxHeight:d},keepAspectRatio:p,resizeDirection:f,onResizeStart:x,onResize:w,onResizeEnd:k,shouldResize:b}),()=>{N.current?.destroy()}},[ $ ,s,c,u,d,p,x,w,k,b]);const M= $ .split("-");return y.jsx("div",{className:Sn(["react-flow__resize-control","nodrag",...M,n,o]),ref:R,style:{...a,scale:D,...l&&{[A?"backgroundColor":"borderColor"]:l}},children:i})}E.memo(Wgt);var Ggt=Object.getOwnPropertyNames,Xgt=Object.getOwnPropertySymbols,Kgt=Object.prototype.hasOwnProperty;function sce(e,r){return function(n,o,a){return e(n,o,a)&&r(n,o,a)}}function lk(e){return function(r,n,o){if(!r||!n||typeof r!="object"||typeof n!="object")return e(r,n,o);var a=o.cache,i=a.get(r),l=a.get(n);if(i&&l)return i===n&&l===r;a.set(r,n),a.set(n,r);var s=e(r,n,o);return a.delete(r),a.delete(n),s}}function cce(e){return Ggt(e).concat(Xgt(e))}var Zgt=Object.hasOwn||(function(e,r){return Kgt.call(e,r)});function jp(e,r){return e===r||!e&&!r&&e!==e&&r!==r}var Qgt="__v",Jgt="__o",e1t="_owner",uce=Object.getOwnPropertyDescriptor,dce=Object.keys;function t1t(e,r,n){var o=e.length;if(r.length!==o)return!1;for(;o-- >0;)if(!n.equals(e[o],r[o],o,o,e,r,n))return!1;return!0}function r1t(e,r){return jp(e.getTime(),r.getTime())}function n1t(e,r){return e.name===r.name&&e.message===r.message&&e.cause===r.cause&&e.stack===r.stack}function o1t(e,r){return e===r}function pce(e,r,n){var o=e.size;if(o!==r.size)return!1;if(!o)return!0;for(var a=new Array(o),i=e.entries(),l,s,c=0;(l=i.next())&&!l.done;){for(var u=r.entries(),d=!1,p=0;(s=u.next())&&!s.done;){if(a[p]){p++;continue}var f=l.value,g=s.value;if(n.equals(f[0],g[0],c,p,e,r,n)&&n.equals(f[1],g[1],f[0],g[0],e,r,n)){d=a[p]=!0;break}p++}if(!d)return!1;c++}return!0}var a1t=jp;function i1t(e,r,n){var o=dce(e),a=o.length;if(dce(r).length!==a)return!1;for(;a-- >0;)if(!fce(e,r,n,o[a]))return!1;return!0}function Sb(e,r,n){var o=cce(e),a=o.length;if(cce(r).length!==a)return!1;for(var i,l,s;a-- >0;)if(i=o[a],!fce(e,r,n,i)||(l=uce(e,i),s=uce(r,i),(l||s)&&(!l||!s||l.configurable!==s.configurable||l.enumerable!==s.enu
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
* @ license
*
* The APCA contrast prediction algorithm is based of the formulas published
* in the APCA - 1.0 . 98 G specification by Myndex . The specification is available at :
* https : //raw.githubusercontent.com/Myndex/apca-w3/master/images/APCAw3_0.1.17_APCA0.0.98G.svg
*
* Note that the APCA implementation is still beta , so please update to
* future versions of chroma . js when they become available .
*
* You can read more about the APCA Readability Criterion at
* https : //readtech.org/ARC/
2025-11-07 11:50:17 +01:00
* / c o n s t O c e = . 0 2 7 , J 0 t = 5 e - 4 , e y t = . 1 , I c e = 1 . 1 4 , p k = . 0 2 2 , L c e = 1 . 4 1 4 , t y t = ( e , r ) = > { e = n e w j e ( e ) , r = n e w j e ( r ) , e . a l p h a ( ) < 1 & & ( e = l g ( r , e , e . a l p h a ( ) , " r g b " ) ) ; c o n s t n = z c e ( . . . e . r g b ( ) ) , o = z c e ( . . . r . r g b ( ) ) , a = n > = p k ? n : n + M a t h . p o w ( p k - n , L c e ) , i = o > = p k ? o : o + M a t h . p o w ( p k - o , L c e ) , l = M a t h . p o w ( i , . 5 6 ) - M a t h . p o w ( a , . 5 7 ) , s = M a t h . p o w ( i , . 6 5 ) - M a t h . p o w ( a , . 6 2 ) , c = M a t h . a b s ( i - a ) < J 0 t ? 0 : a < i ? l * I c e : s * I c e ; r e t u r n ( M a t h . a b s ( c ) < e y t ? 0 : c > 0 ? c - O c e : c + O c e ) * 1 0 0 } ; f u n c t i o n z c e ( e , r , n ) { r e t u r n . 2 1 2 6 7 2 9 * M a t h . p o w ( e / 2 5 5 , 2 . 4 ) + . 7 1 5 1 5 2 2 * M a t h . p o w ( r / 2 5 5 , 2 . 4 ) + . 0 7 2 1 7 5 * M a t h . p o w ( n / 2 5 5 , 2 . 4 ) } c o n s t { s q r t : w c , p o w : C n , m i n : r y t , m a x : n y t , a t a n 2 : B c e , a b s : j c e , c o s : h k , s i n : F c e , e x p : o y t , P I : H c e } = M a t h ; f u n c t i o n a y t ( e , r , n = 1 , o = 1 , a = 1 ) { v a r i = f u n c t i o n ( Q ) { r e t u r n 3 6 0 * Q / ( 2 * H c e ) } , l = f u n c t i o n ( Q ) { r e t u r n 2 * H c e * Q / 3 6 0 } ; e = n e w j e ( e ) , r = n e w j e ( r ) ; c o n s t [ s , c , u ] = A r r a y . f r o m ( e . l a b ( ) ) , [ d , p , f ] = A r r a y . f r o m ( r . l a b ( ) ) , g = ( s + d ) / 2 , b = w c ( C n ( c , 2 ) + C n ( u , 2 ) ) , x = w c ( C n ( p , 2 ) + C n ( f , 2 ) ) , w = ( b + x ) / 2 , k = . 5 * ( 1 - w c ( C n ( w , 7 ) / ( C n ( w , 7 ) + C n ( 2 5 , 7 ) ) ) ) , C = c * ( 1 + k ) , _ = p * ( 1 + k ) , T = w c ( C n ( C , 2 ) + C n ( u , 2 ) ) , R = w c ( C n ( _ , 2 ) + C n ( f , 2 ) ) , A = ( T + R ) / 2 , D = i ( B c e ( u , C ) ) , N = i ( B c e ( f , _ ) ) , $ = D > = 0 ? D : D + 3 6 0 , M = N > = 0 ? N : N + 3 6 0 , j = j c e ( $ - M ) > 1 8 0 ? ( $ + M + 3 6 0 ) / 2 : ( $ + M ) / 2 , L = 1 - . 1 7 * h k ( l ( j - 3 0 ) ) + . 2 4 * h k ( l ( 2 * j ) ) + . 3 2 * h k ( l ( 3 * j + 6 ) ) - . 2 * h k ( l ( 4 * j - 6 3 ) ) ; l e t Y = M - $ ; Y = j c e ( Y ) < = 1 8 0 ? Y : M < = $ ? Y + 3 6 0 : Y - 3 6 0 , Y = 2 * w c ( T * R ) * F c e ( l ( Y ) / 2 ) ; c o n s t O = d - s , U = R - T , I = 1 + . 0 1 5 * C n ( g - 5 0 , 2 ) / w c ( 2 0 + C n ( g - 5 0 , 2 ) ) , q = 1 + . 0 4 5 * A , V = 1 + . 0 1 5 * A * L , G = 3 0 * o y t ( - C n ( ( j - 2 7 5 ) / 2 5 , 2 ) ) , F = - ( 2 * w c ( C n ( A , 7 ) / ( C n ( A , 7 ) + C n ( 2 5 , 7 ) ) ) ) * F c e ( 2 * l ( G ) ) , J = w c ( C n ( O / ( n * I ) , 2 ) + C n ( U / ( o * q ) , 2 ) + C n ( Y / ( a * V ) , 2 ) + F * ( U / ( o * q ) ) * ( Y / ( a * V ) ) ) ; r e t u r n n y t ( 0 , r y t ( 1 0 0 , J ) ) } f u n c t i o n i y t ( e , r , n = " l a b " ) { e = n e w j e ( e ) , r = n e w j e ( r ) ; c o n s t o = e . g e t ( n ) , a = r . g e t ( n ) ; l e t i = 0 ; f o r ( l e t l i n o ) { c o n s t s = ( o [ l ] | | 0 ) - ( a [ l ] | | 0 ) ; i + = s * s } r e t u r n M a t h . s q r t ( i ) } c o n s t l y t = ( . . . e ) = > { t r y { r e t u r n n e w j e ( . . . e ) , ! 0 } c a t c h { r e t u r n ! 1 } } , s y t = { c o o l ( ) { r e t u r n d k ( [ Z t . h s l ( 1 8 0 , 1 , . 9 ) , Z t . h s l ( 2 5 0 , . 7 , . 4 ) ] ) } , h o t ( ) { r e t u r n d k ( [ " # 0 0 0 " , " # f 0 0 " , " # f f 0 " , " # f f f " ] ) . m o d e ( " r g b " ) } } , S D = { O r R d : [ " # f f f 7 e c " , " # f e e 8 c 8 " , " # f d d 4 9 e " , " # f d b b 8 4 " , " # f c 8 d 5 9 " , " # e f 6 5 4 8 " , " # d 7 3 0 1 f " , " # b 3 0 0 0 0 " , " # 7 f 0 0 0 0 " ] , P u B u : [ " # f f f 7 f b " , " # e c e 7 f 2 " , " # d 0 d 1 e 6 " , " # a 6 b d d b " , " # 7 4 a 9 c f " , " # 3 6 9 0 c 0 " , " # 0 5 7 0 b 0 " , " # 0 4 5 a 8 d " , " # 0 2 3 8 5 8 " ] , B u P u : [ " # f 7 f c f d " , " # e 0 e c f 4 " , " # b f d 3 e 6 " , " # 9 e b c d a " , " # 8 c 9 6 c 6 " , " # 8 c 6 b b 1 " , " # 8 8 4 1 9 d " , " # 8 1 0 f 7 c " , " # 4 d 0 0 4 b " ] , O r a n g e s : [ " # f f f 5 e b " , " # f e e 6 c e " , " # f d d 0 a 2 " , " # f d a e 6 b " , " # f d 8 d 3 c " , " # f 1 6 9 1 3 " , " # d 9 4 8 0 1 " , " # a 6 3 6 0 3 " , " # 7 f 2 7 0 4 " ] , B u G n : [ " # f 7 f c f d " , " # e 5 f 5 f 9 " , " # c c e c e 6 " , " # 9 9 d 8 c 9 " , " # 6 6 c 2 a 4 " , " # 4 1 a e 7 6 " , " # 2 3 8 b 4 5 " , " # 0 0 6 d 2 c " , " # 0 0 4 4 1 b " ] , Y l O r B r : [ " # f f f f e 5 " , " # f f f 7 b c " , " # f e e 3 9 1 " , " # f e c 4 4 f " , " # f e 9 9 2 9 " , " # e c 7 0 1 4 " , " # c c 4 c 0 2 " , " # 9 9 3 4 0 4 " , " # 6 6 2 5 0 6 " ] , Y l G n : [ " # f f f f e 5 " , " # f 7 f c b 9 " , " # d 9 f 0 a 3 " , " # a d d d 8 e " , " # 7 8 c 6 7 9 " , " # 4 1 a b 5 d " , " # 2 3 8 4 4 3 " , " # 0 0 6 8 3 7 " , " # 0 0 4 5 2 9 " ] , R e d s : [ " # f f f 5 f 0 " , " # f e e 0 d 2 " , " # f c b b a 1 " , " # f c 9 2 7 2 " , " # f b 6 a 4 a " , " # e f 3 b 2 c " , " # c b 1 8 1 d " , " # a 5 0 f 1 5 " , " # 6 7 0 0 0 d " ] , R d P u : [ " # f f f 7 f 3 " , " # f d e 0 d d " , " # f c c 5 c 0 " , " # f a 9 f b 5 " , " # f 7 6 8 a 1 " , " # d d 3 4 9 7 " , " # a e 0 1 7 e " , " # 7 a 0 1 7 7 " , " # 4 9 0 0 6 a " ] , G r e e n s : [ " # f 7 f c f 5 " , " # e 5 f 5 e 0 " , " # c 7 e 9 c 0 " , " # a 1 d 9 9 b " , " # 7 4 c 4 7 6 " , " # 4 1 a b 5 d " , " # 2 3 8 b 4 5 " , " # 0 0 6 d 2 c " , " # 0 0 4 4 1 b " ] , Y l G n B u : [ " # f f f f d 9 " , " # e d f 8 b 1 " , " # c 7 e 9 b 4 " , " # 7 f c d b b " , " # 4 1 b 6 c 4 " , " # 1 d 9 1 c 0 " , " # 2 2 5 e a 8 " , " # 2 5 3 4 9 4 " , " # 0 8 1 d 5 8 " ] , P u r p l e s : [ " # f c f b f d " , " # e f e d f 5 " , " # d a d a e b " , " # b c b d d c " , " # 9 e 9 a c 8 " , " # 8 0 7 d b a " , " # 6 a 5 1 a 3 " , " # 5 4 2 7 8 f " , " # 3 f 0 0 7 d " ] , G n B u : [ " # f 7 f c f 0 " , " # e 0 f 3 d b " , " # c c e b c 5 " , " # a 8 d d b 5 " , " # 7 b c c c 4 " , " # 4 e b 3 d 3 " , " # 2 b 8 c b e " , " # 0 8 6 8 a c " , " # 0 8 4 0 8 1 " ] , G r e y s : [ " # f f f f f f " , " # f 0 f 0 f 0 " , " # d 9 d 9 d 9 " , " # b d b d b d " , " # 9 6 9 6 9 6 " , " # 7 3 7 3 7 3 " , " # 5 2 5 2 5 2 " , " # 2 5 2 5 2 5 " , " # 0 0 0 0 0 0 " ] , Y l O r R d : [ " # f f f f c c " , " # f f e d a 0 " , " # f e d 9 7 6 " , " # f e b 2 4 c " , " # f d 8 d 3 c " , " # f c 4 e 2 a " , " # e 3 1 a 1 c " , " # b d 0 0 2 6 " , " # 8 0 0 0 2 6 " ] , P u R d : [ " # f 7 f 4 f 9 " , " # e 7 e 1 e f " , " # d 4 b 9 d a " , " # c 9 9 4 c 7 " , " # d f 6 5 b 0 " , " # e 7 2 9 8 a " , " # c e 1 2 5 6 " , " # 9 8 0 0 4 3 " , " # 6 7 0 0 1 f " ] , B l u e s : [ " # f 7 f b f f " , " # d e e b f 7 " , " # c 6 d b e f " , " # 9 e c a e 1 " , " # 6 b a e d 6 " , " # 4 2 9 2 c 6 " , " # 2 1 7 1 b 5 " , " # 0 8 5 1 9 c " , " # 0 8 3 0 6 b " ] , P u B u G n : [ " # f f f 7 f b " , " # e c e 2 f 0 " , " # d 0 d 1 e 6 " , " # a 6 b d d b " , " # 6 7 a 9 c f " , " # 3 6 9 0 c 0 " , " # 0 2 8 1 8 a " , " # 0 1 6 c 5 9 " , " # 0 1 4 6 3 6 " ] , V i r i d i s : [ " # 4 4 0 1 5 4 " , " # 4 8 2 7 7 7 " , " # 3 f 4 a 8 a " , " # 3 1 6 7 8 e " , " # 2 6 8 3 8 f " , " # 1 f 9 d 8 a " , " # 6 c c e 5 a " , " # b 6 d e 2 b " , " # f e e 8 2 5 " ] , S p e c t r a l : [ " # 9 e 0 1 4 2 " , " # d 5 3 e 4 f " , " # f 4 6 d 4 3 " , " # f d a e 6 1 " , " # f e e 0 8 b " , " # f f f f b f " , " # e 6 f 5 9 8 " , " # a b d d a 4 " , " # 6 6 c 2 a 5 " , " # 3 2 8 8 b d " , " # 5 e 4 f a 2 " ] , R d Y l G n : [ " # a 5 0 0 2 6 " , " # d 7 3 0 2 7 " , " # f 4 6 d 4 3 " , " # f d a e 6 1 " , " # f e e 0 8 b " , " # f f f f b f " , " # d 9 e f 8 b " , " # a 6 d 9 6 a " , " # 6 6 b d 6 3 " , " # 1 a 9 8 5 0 " , " # 0 0 6 8 3 7 " ] , R d B u : [ " # 6 7 0 0 1 f " , " # b 2 1 8 2 b " , " # d 6 6 0 4 d " , " # f 4 a 5 8 2 " , " # f d d b c 7 " , " # f 7 f 7 f 7 " , " # d 1 e 5 f 0 " , " # 9 2 c 5 d e " , " # 4 3 9 3 c 3 " , " # 2 1 6 6 a c " , " # 0 5 3 0 6 1 " ] , P i Y G : [ " # 8 e 0 1 5 2 " , " # c 5 1 b 7 d " , " # d e 7 7 a e " , " # f 1 b 6 d a " , " # f d e 0 e f " , " # f 7 f 7 f 7 " , " # e 6 f 5 d 0 " , " # b 8
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
* @ version 1.4 . 0
* @ date 2015 - 10 - 26
* @ stability 3 - Stable
* @ author Lauri Rooden ( https : //github.com/litejs/natural-compare-lite)
* @ license MIT License
2025-11-07 11:50:17 +01:00
* / v a r e = f u n c t i o n ( r , n ) { v a r o , a , i = 1 , l = 0 , s = 0 , c = S t r i n g . a l p h a b e t ; f u n c t i o n u ( d , p , f ) { i f ( f ) { f o r ( o = p ; f = u ( d , o ) , f < 7 6 & & f > 6 5 ; ) + + o ; r e t u r n + d . s l i c e ( p - 1 , o ) } r e t u r n f = c & & c . i n d e x O f ( d . c h a r A t ( p ) ) , f > - 1 ? f + 7 6 : ( f = d . c h a r C o d e A t ( p ) | | 0 , f < 4 5 | | f > 1 2 7 ? f : f < 4 6 ? 6 5 : f < 4 8 ? f - 1 : f < 5 8 ? f + 1 8 : f < 6 5 ? f - 1 1 : f < 9 1 ? f + 1 1 : f < 9 7 ? f - 3 7 : f < 1 2 3 ? f + 5 : f - 6 3 ) } i f ( ( r + = " " ) ! = ( n + = " " ) ) { f o r ( ; i ; ) i f ( a = u ( r , l + + ) , i = u ( n , s + + ) , a < 7 6 & & i < 7 6 & & a > 6 6 & & i > 6 6 & & ( a = u ( r , l , l ) , i = u ( n , s , l = o ) , s = o ) , a ! = i ) r e t u r n a < i ? - 1 : 1 } r e t u r n 0 } ; t r y { N D . e x p o r t s = e } c a t c h { S t r i n g . n a t u r a l C o m p a r e = e } r e t u r n N D . e x p o r t s } _ y t ( ) ; l e t T b = c l a s s { c o n s t r u c t o r ( e , r , n ) { t h i s . n o r m a l = r , t h i s . p r o p e r t y = e , n & & ( t h i s . s p a c e = n ) } } ; T b . p r o t o t y p e . n o r m a l = { } , T b . p r o t o t y p e . p r o p e r t y = { } , T b . p r o t o t y p e . s p a c e = v o i d 0 ; f u n c t i o n l u e ( e , r ) { c o n s t n = { } , o = { } ; f o r ( c o n s t a o f e ) O b j e c t . a s s i g n ( n , a . p r o p e r t y ) , O b j e c t . a s s i g n ( o , a . n o r m a l ) ; r e t u r n n e w T b ( n , o , r ) } f u n c t i o n R b ( e ) { r e t u r n e . t o L o w e r C a s e ( ) } l e t d a = c l a s s { c o n s t r u c t o r ( e , r ) { t h i s . a t t r i b u t e = r , t h i s . p r o p e r t y = e } } ; d a . p r o t o t y p e . a t t r i b u t e = " " , d a . p r o t o t y p e . b o o l e a n i s h = ! 1 , d a . p r o t o t y p e . b o o l e a n = ! 1 , d a . p r o t o t y p e . c o m m a O r S p a c e S e p a r a t e d = ! 1 , d a . p r o t o t y p e . c o m m a S e p a r a t e d = ! 1 , d a . p r o t o t y p e . d e f i n e d = ! 1 , d a . p r o t o t y p e . m u s t U s e P r o p e r t y = ! 1 , d a . p r o t o t y p e . n u m b e r = ! 1 , d a . p r o t o t y p e . o v e r l o a d e d B o o l e a n = ! 1 , d a . p r o t o t y p e . p r o p e r t y = " " , d a . p r o t o t y p e . s p a c e S e p a r a t e d = ! 1 , d a . p r o t o t y p e . s p a c e = v o i d 0 ; l e t E y t = 0 ; c o n s t L t = H p ( ) , R n = H p ( ) , s u e = H p ( ) , U e = H p ( ) , S r = H p ( ) , f g = H p ( ) , L a = H p ( ) ; f u n c t i o n H p ( ) { r e t u r n 2 * * + + E y t } c o n s t D D = O b j e c t . f r e e z e ( O b j e c t . d e f i n e P r o p e r t y ( { _ _ p r o t o _ _ : n u l l , b o o l e a n : L t , b o o l e a n i s h : R n , c o m m a O r S p a c e S e p a r a t e d : L a , c o m m a S e p a r a t e d : f g , n u m b e r : U e , o v e r l o a d e d B o o l e a n : s u e , s p a c e S e p a r a t e d : S r } , S y m b o l . t o S t r i n g T a g , { v a l u e : " M o d u l e " } ) ) , P D = O b j e c t . k e y s ( D D ) ; l e t $ D = c l a s s e x t e n d s d a { c o n s t r u c t o r ( e , r , n , o ) { l e t a = - 1 ; i f ( s u p e r ( e , r ) , c u e ( t h i s , " s p a c e " , o ) , t y p e o f n = = " n u m b e r " ) f o r ( ; + + a < P D . l e n g t h ; ) { c o n s t i = P D [ a ] ; c u e ( t h i s , P D [ a ] , ( n & D D [ i ] ) = = = D D [ i ] ) } } } ; $ D . p r o t o t y p e . d e f i n e d = ! 0 ; f u n c t i o n c u e ( e , r , n ) { n & & ( e [ r ] = n ) } f u n c t i o n m g ( e ) { c o n s t r = { } , n = { } ; f o r ( c o n s t [ o , a ] o f O b j e c t . e n t r i e s ( e . p r o p e r t i e s ) ) { c o n s t i = n e w $ D ( o , e . t r a n s f o r m ( e . a t t r i b u t e s | | { } , o ) , a , e . s p a c e ) ; e . m u s t U s e P r o p e r t y & & e . m u s t U s e P r o p e r t y . i n c l u d e s ( o ) & & ( i . m u s t U s e P r o p e r t y = ! 0 ) , r [ o ] = i , n [ R b ( o ) ] = o , n [ R b ( i . a t t r i b u t e ) ] = o } r e t u r n n e w T b ( r , n , e . s p a c e ) } c o n s t u u e = m g ( { p r o p e r t i e s : { a r i a A c t i v e D e s c e n d a n t : n u l l , a r i a A t o m i c : R n , a r i a A u t o C o m p l e t e : n u l l , a r i a B u s y : R n , a r i a C h e c k e d : R n , a r i a C o l C o u n t : U e , a r i a C o l I n d e x : U e , a r i a C o l S p a n : U e , a r i a C o n t r o l s : S r , a r i a C u r r e n t : n u l l , a r i a D e s c r i b e d B y : S r , a r i a D e t a i l s : n u l l , a r i a D i s a b l e d : R n , a r i a D r o p E f f e c t : S r , a r i a E r r o r M e s s a g e : n u l l , a r i a E x p a n d e d : R n , a r i a F l o w T o : S r , a r i a G r a b b e d : R n , a r i a H a s P o p u p : n u l l , a r i a H i d d e n : R n , a r i a I n v a l i d : n u l l , a r i a K e y S h o r t c u t s : n u l l , a r i a L a b e l : n u l l , a r i a L a b e l l e d B y : S r , a r i a L e v e l : U e , a r i a L i v e : n u l l , a r i a M o d a l : R n , a r i a M u l t i L i n e : R n , a r i a M u l t i S e l e c t a b l e : R n , a r i a O r i e n t a t i o n : n u l l , a r i a O w n s : S r , a r i a P l a c e h o l d e r : n u l l , a r i a P o s I n S e t : U e , a r i a P r e s s e d : R n , a r i a R e a d O n l y : R n , a r i a R e l e v a n t : n u l l , a r i a R e q u i r e d : R n , a r i a R o l e D e s c r i p t i o n : S r , a r i a R o w C o u n t : U e , a r i a R o w I n d e x : U e , a r i a R o w S p a n : U e , a r i a S e l e c t e d : R n , a r i a S e t S i z e : U e , a r i a S o r t : n u l l , a r i a V a l u e M a x : U e , a r i a V a l u e M i n : U e , a r i a V a l u e N o w : U e , a r i a V a l u e T e x t : n u l l , r o l e : n u l l } , t r a n s f o r m ( e , r ) { r e t u r n r = = = " r o l e " ? r : " a r i a - " + r . s l i c e ( 4 ) . t o L o w e r C a s e ( ) } } ) ; f u n c t i o n d u e ( e , r ) { r e t u r n r i n e ? e [ r ] : r } f u n c t i o n p u e ( e , r ) { r e t u r n d u e ( e , r . t o L o w e r C a s e ( ) ) } c o n s t S y t = m g ( { a t t r i b u t e s : { a c c e p t c h a r s e t : " a c c e p t - c h a r s e t " , c l a s s n a m e : " c l a s s " , h t m l f o r : " f o r " , h t t p e q u i v : " h t t p - e q u i v " } , m u s t U s e P r o p e r t y : [ " c h e c k e d " , " m u l t i p l e " , " m u t e d " , " s e l e c t e d " ] , p r o p e r t i e s : { a b b r : n u l l , a c c e p t : f g , a c c e p t C h a r s e t : S r , a c c e s s K e y : S r , a c t i o n : n u l l , a l l o w : n u l l , a l l o w F u l l S c r e e n : L t , a l l o w P a y m e n t R e q u e s t : L t , a l l o w U s e r M e d i a : L t , a l t : n u l l , a s : n u l l , a s y n c : L t , a u t o C a p i t a l i z e : n u l l , a u t o C o m p l e t e : S r , a u t o F o c u s : L t , a u t o P l a y : L t , b l o c k i n g : S r , c a p t u r e : n u l l , c h a r S e t : n u l l , c h e c k e d : L t , c i t e : n u l l , c l a s s N a m e : S r , c o l s : U e , c o l S p a n : n u l l , c o n t e n t : n u l l , c o n t e n t E d i t a b l e : R n , c o n t r o l s : L t , c o n t r o l s L i s t : S r , c o o r d s : U e | f g , c r o s s O r i g i n : n u l l , d a t a : n u l l , d a t e T i m e : n u l l , d e c o d i n g : n u l l , d e f a u l t : L t , d e f e r : L t , d i r : n u l l , d i r N a m e : n u l l , d i s a b l e d : L t , d o w n l o a d : s u e , d r a g g a b l e : R n , e n c T y p e : n u l l , e n t e r K e y H i n t : n u l l , f e t c h P r i o r i t y : n u l l , f o r m : n u l l , f o r m A c t i o n : n u l l , f o r m E n c T y p e : n u l l , f o r m M e t h o d : n u l l , f o r m N o V a l i d a t e : L t , f o r m T a r g e t : n u l l , h e a d e r s : S r , h e i g h t : U e , h i d d e n : L t , h i g h : U e , h r e f : n u l l , h r e f L a n g : n u l l , h t m l F o r : S r , h t t p E q u i v : S r , i d : n u l l , i m a g e S i z e s : n u l l , i m a g e S r c S e t : n u l l , i n e r t : L t , i n p u t M o d e : n u l l , i n t e g r i t y : n u
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
\ f \ r & / = > ` . s p l i t ( " " ) , `
\ f \ r "&'/=>\``.split(" " ) ] , [ ` \0
\ f \ r "&'/<=>`.split(" " ) , ` \0
\ f \ r "&'/<=>\``.split(" " ) ] ] , unquoted : [ [ `
\ f \ r & > ` .split(""), ` \ 0
\ f \ r "&'<=>\``.split(" " ) ] , [ ` \0
\ f \ r "&'<=>\``.split(" " ) , ` \0
2025-11-07 11:50:17 +01:00
\ f \ r "&'<=>\``.split(" ")]],single:[[" & '".split(""),"\"&' ` ".split("")],[" \0 &'".split("")," \0 \" &' ` ".split(" ")]],double:[['" & '.split(""),"\"&' ` ".split("")],[' \0 "&'.split("")," \0 \" &' ` ".split(" ")]]};function lvt(e,r,n,o){const a=o.schema,i=a.space===" svg "?!1:o.settings.omitOptionalTags;let l=a.space===" svg "?o.settings.closeEmptyElements:o.settings.voids.includes(e.tagName.toLowerCase());const s=[];let c;a.space===" html "&&e.tagName===" svg "&&(o.schema=bue);const u=svt(o,e.properties),d=o.all(a.space===" html "&&e.tagName===" template "?e.content:e);return o.schema=a,d&&(l=!1),(u||!i||!tvt(e,r,n))&&(s.push(" < ",e.tagName,u?" "+u:" "),l&&(a.space===" svg "||o.settings.closeSelfClosing)&&(c=u.charAt(u.length-1),(!o.settings.tightSelfClosing||c===" / "||c&&c!=='" '&&c!=="' ")&&s.push(" "),s.push(" / ")),s.push(" > ")),s.push(d),!l&&(!i||!YD(e,r,n))&&s.push(" < /"+e.tagName+">"),s.join("")}function svt(e,r){const n=[];let o=-1,a;if(r){for(a in r)if(r[a]!==null&&r[a]!==void 0){const i=cvt(e,a,r[a]);i&&n.push(i)}}for(;++o<n.length;){const i=e.settings.tightAttributes?n[o].charAt(n[o].length-1):void 0;o!==n.length-1&&i!=='"'&&i!=="'"&&(n[o]+=" ")}return n.join("")}function cvt(e,r,n){const o=yue(e.schema,r),a=e.settings.allowParseErrors&&e.schema.space==="html"?0:1,i=e.settings.allowDangerousCharacters?0:1;let l=e.quote,s;if(o.overloadedBoolean&&(n===o.attribute||n==="")?n=!0:(o.boolean||o.overloadedBoolean)&&(typeof n!="string"||n===o.attribute||n==="")&&(n=!!n),n==null||n===!1||typeof n=="number"&&Number.isNaN(n))return"";const c=vg(o.attribute,Object.assign({},e.settings.characterReferences,{subset:vk.name[a][i]}));return n===!0||(n=Array.isArray(n)?(o.commaSeparated?xue:_ue)(n,{padLeft:!e.settings.tightCommaSeparatedLists}):String(n),e.settings.collapseEmptyAttributes&&!n)?c:(e.settings.preferUnquoted&&(s=vg(n,Object.assign({},e.settings.characterReferences,{attribute:!0,subset:vk.unquoted[a][i]}))),s!==n&&(e.settings.quoteSmart&&Kue(n,l)>Kue(n,e.alternative)&&(l=e.alternative),s=l+vg(n,Object.assign({},e.settings.characterReferences,{subset:(l==="'"?vk.single:vk.double)[a][i],attribute:!0}))+l),c+(s&&"="+s))}const uvt=["<","&"];function nde(e,r,n,o){return n&&n.type==="element"&&(n.tagName==="script"||n.tagName==="style")?e.value:vg(e.value,Object.assign({},o.settings.characterReferences,{subset:uvt}))}function dvt(e,r,n,o){return o.settings.allowDangerousHtml?e.value:nde(e,r,n,o)}function pvt(e,r,n,o){return o.all(e)}zue("type",{invalid:hvt,unknown:fvt,handlers:{comment:zbt,doctype:Bbt,element:lvt,raw:dvt,root:pvt,text:nde}});function hvt(e){throw new Error("Expected node, not `"+e+"`")}function fvt(e){const r=e;throw new Error("Cannot compile unknown node `"+r.type+"`")}const Nb=xk(/ [ A - Za - z ] / ) , GD = xk ( /[\dA-Za-z]/ ) ; function mvt ( e ) { return e !== null && ( e < 32 || e === 127 ) } function xg ( e ) { return e !== null && ( e < 0 || e === 32 ) } const ode = xk ( new RegExp ( "\\p{P}|\\p{S}" , "u" ) ) , Db = xk ( /\s/ ) ; function xk ( e ) { return r ; function r ( n ) { return n !== null && n > - 1 && e . test ( String . fromCharCode ( n ) ) } } Wue ( [ "break" , "delete" , "emphasis" , "footnote" , "footnoteReference" , "image" , "imageReference" , "inlineCode" , "inlineMath" , "link" , "linkReference" , "mdxJsxTextElement" , "mdxTextExpression" , "strong" , "text" , "textDirective" ] ) ; function gvt ( e , r , n , o ) { const a = e . length ; let i = 0 , l ; if ( r < 0 ? r = - r > a ? 0 : a + r : r = r > a ? a : r , n = n > 0 ? n : 0 , o . length < 1e4 ) l = Array . from ( o ) , l . unshift ( r , n ) , e . splice ( ... l ) ; else for ( n && e . splice ( r , n ) ; i < o . length ; ) l = o . slice ( i , i + 1e4 ) , l . unshift ( r , 0 ) , e . splice ( ... l ) , i += 1e4 , r += 1e4 } const yvt = { tokenize : kvt , partial : ! 0 } , ade = { tokenize : _vt , partial : ! 0 } , ide = { tokenize : Evt , partial : ! 0 } , lde = { tokenize : Svt , partial : ! 0 } , bvt = { tokenize : Cvt , partial : ! 0 } , sde = { name : "wwwAutolink" , tokenize : xvt , previous : ude } , cde = { name : "protocolAutolink" , tokenize : wvt , previous : dde } , _c = { name : "emailAutolink" , tokenize : vvt , previous : pde } , Ec = { } ; let Vp = 48 ; for ( ; Vp < 123 ; ) Ec [ Vp ] = _c , Vp ++ , Vp === 58 ? Vp = 65 : Vp === 91 && ( Vp = 97 ) ; Ec [ 43 ] = _c , Ec [ 45 ] = _c , Ec [ 46 ] = _c , Ec [ 95 ] = _c , Ec [ 72 ] = [ _c , cde ] , Ec [ 104 ] = [ _c , cde ] , Ec [ 87 ] = [ _c , sde ] , Ec [ 119 ] = [ _c , sde ] ; function vvt ( e , r , n ) { const o = this ; let a , i ; return l ; function l ( p ) { return ! XD ( p ) || ! pde . call ( o , o . previous ) || KD ( o . events ) ? n ( p ) : ( e . enter ( "literalAutolink" ) , e . ente
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
` ).filter(i=>i),o=Math.min(...n.map(i=>i.length-i.trimStart().length)),a=n.map(i=>i.slice(o)).map(i=>" ".repeat(this.indent*2)+i);for(const i of a)this.content.push(i)}compile(){const r=Function,n=this?.args,o=[...(this?.content??[""]).map(a=> ` $ { a } ` )];return new r(...n,o.join( `
2025-11-07 11:50:17 +01:00
` ))}}const wwt={major:4,minor:0,patch:0},en=Pe(" $ ZodType",(e,r)=>{var n;e??(e={}),e._zod.def=r,e._zod.bag=e._zod.bag||{},e._zod.version=wwt;const o=[...e._zod.def.checks??[]];e._zod.traits.has(" $ ZodCheck")&&o.unshift(e);for(const a of o)for(const i of a._zod.onattach)i(e);if(o.length===0)(n=e._zod).deferred??(n.deferred=[]),e._zod.deferred?.push(()=>{e._zod.run=e._zod.parse});else{const a=(i,l,s)=>{let c=jb(i),u;for(const d of l){if(d._zod.def.when){if(!d._zod.def.when(i))continue}else if(c)continue;const p=i.issues.length,f=d._zod.check(i);if(f instanceof Promise&&s?.async===!1)throw new Lb;if(u||f instanceof Promise)u=(u??Promise.resolve()).then(async()=>{await f,i.issues.length!==p&&(c||(c=jb(i,p)))});else{if(i.issues.length===p)continue;c||(c=jb(i,p))}}return u?u.then(()=>i):i};e._zod.run=(i,l)=>{const s=e._zod.parse(i,l);if(s instanceof Promise){if(l.async===!1)throw new Lb;return s.then(c=>a(c,o,l))}return a(s,o,l)}}e["~standard"]={validate:a=>{try{const i=Lxt(e,a);return i.success?{value:i.data}:{issues:i.error?.issues}}catch{return zxt(e,a).then(i=>i.success?{value:i.data}:{issues:i.error?.issues})}},vendor:"zod",version:1}}),Ak=Pe(" $ ZodString",(e,r)=>{en.init(e,r),e._zod.pattern=[...e?._zod.bag?.patterns??[]].pop()??iwt(e._zod.bag),e._zod.parse=(n,o)=>{if(r.coerce)try{n.value=String(n.value)}catch{}return typeof n.value=="string"||n.issues.push({expected:"string",code:"invalid_type",input:n.value,inst:e}),n}}),jr=Pe(" $ ZodStringFormat",(e,r)=>{Rk.init(e,r),Ak.init(e,r)}),kwt=Pe(" $ ZodGUID",(e,r)=>{r.pattern??(r.pattern=Yxt),jr.init(e,r)}),_wt=Pe(" $ ZodUUID",(e,r)=>{if(r.version){const n={v1:1,v2:2,v3:3,v4:4,v5:5,v6:6,v7:7,v8:8}[r.version];if(n===void 0)throw new Error( ` Invalid UUID version : "${r.version}" ` );r.pattern??(r.pattern=fhe(n))}else r.pattern??(r.pattern=fhe());jr.init(e,r)}),Ewt=Pe(" $ ZodEmail",(e,r)=>{r.pattern??(r.pattern=Wxt),jr.init(e,r)}),Swt=Pe(" $ ZodURL",(e,r)=>{jr.init(e,r),e._zod.check=n=>{try{const o=n.value,a=new URL(o),i=a.href;r.hostname&&(r.hostname.lastIndex=0,r.hostname.test(a.hostname)||n.issues.push({code:"invalid_format",format:"url",note:"Invalid hostname",pattern:twt.source,input:n.value,inst:e,continue:!r.abort})),r.protocol&&(r.protocol.lastIndex=0,r.protocol.test(a.protocol.endsWith(":")?a.protocol.slice(0,-1):a.protocol)||n.issues.push({code:"invalid_format",format:"url",note:"Invalid protocol",pattern:r.protocol.source,input:n.value,inst:e,continue:!r.abort})),!o.endsWith("/")&&i.endsWith("/")?n.value=i.slice(0,-1):n.value=i;return}catch{n.issues.push({code:"invalid_format",format:"url",input:n.value,inst:e,continue:!r.abort})}}}),Cwt=Pe(" $ ZodEmoji",(e,r)=>{r.pattern??(r.pattern=Xxt()),jr.init(e,r)}),Twt=Pe(" $ ZodNanoID",(e,r)=>{r.pattern??(r.pattern=Uxt),jr.init(e,r)}),Rwt=Pe(" $ ZodCUID",(e,r)=>{r.pattern??(r.pattern=Bxt),jr.init(e,r)}),Awt=Pe(" $ ZodCUID2",(e,r)=>{r.pattern??(r.pattern=jxt),jr.init(e,r)}),Nwt=Pe(" $ ZodULID",(e,r)=>{r.pattern??(r.pattern=Fxt),jr.init(e,r)}),Dwt=Pe(" $ ZodXID",(e,r)=>{r.pattern??(r.pattern=Hxt),jr.init(e,r)}),Pwt=Pe(" $ ZodKSUID",(e,r)=>{r.pattern??(r.pattern=qxt),jr.init(e,r)}), $ wt=Pe(" $ ZodISODateTime",(e,r)=>{r.pattern??(r.pattern=awt(r)),jr.init(e,r)}),Mwt=Pe(" $ ZodISODate",(e,r)=>{r.pattern??(r.pattern=nwt),jr.init(e,r)}),Owt=Pe(" $ ZodISOTime",(e,r)=>{r.pattern??(r.pattern=owt(r)),jr.init(e,r)}),Iwt=Pe(" $ ZodISODuration",(e,r)=>{r.pattern??(r.pattern=Vxt),jr.init(e,r)}),Lwt=Pe(" $ ZodIPv4",(e,r)=>{r.pattern??(r.pattern=Kxt),jr.init(e,r),e._zod.onattach.push(n=>{const o=n._zod.bag;o.format="ipv4"})}),zwt=Pe(" $ ZodIPv6",(e,r)=>{r.pattern??(r.pattern=Zxt),jr.init(e,r),e._zod.onattach.push(n=>{const o=n._zod.bag;o.format="ipv6"}),e._zod.check=n=>{try{new URL( ` http : //[${n.value}]`)}catch{n.issues.push({code:"invalid_format",format:"ipv6",input:n.value,inst:e,continue:!r.abort})}}}),Bwt=Pe("$ZodCIDRv4",(e,r)=>{r.pattern??(r.pattern=Qxt),jr.init(e,r)}),jwt=Pe("$ZodCIDRv6",(e,r)=>{r.pattern??(r.pattern=Jxt),jr.init(e,r),e._zod.check=n=>{const[o,a]=n.value.split("/");try{if(!a)throw new Error;const i=Number(a);if(`${i}`!==a)throw new Error;if(i<0||i>128)throw new Err
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 ( $ { C } . issues . length ) {
if ( input [ $ { _ } ] === undefined ) {
if ( $ { _ } in input ) {
newResult [ $ { _ } ] = undefined ;
}
} else {
payload . issues = payload . issues . concat (
$ { C } . issues . map ( ( iss ) => ( {
... iss ,
path : iss . path ? [ $ { _ } , ... iss . path ] : [ $ { _ } ] ,
} ) )
) ;
}
} else if ( $ { C } . value === undefined ) {
if ( $ { _ } in input ) newResult [ $ { _ } ] = undefined ;
} else {
newResult [ $ { _ } ] = $ { C } . value ;
}
` )}else{const C=b[k];p.write( ` const $ { C } = $ { g ( k ) } ; ` ),p.write( `
if ( $ { C } . issues . length ) payload . issues = payload . issues . concat ( $ { C } . issues . map ( iss => ( {
... iss ,
path : iss . path ? [ $ { zb ( k ) } , ... iss . path ] : [ $ { zb ( k ) } ]
2025-11-07 11:50:17 +01:00
} ) ) ) ; ` ),p.write( ` newResult [ $ { zb ( k ) } ] = $ { C } . value ` )}p.write("payload.value = newResult;"),p.write("return payload;");const w=p.compile();return(k,C)=>w(d,k,C)};let a;const i=d $ ,l=!ahe.jitless,s=l&&Sxt.value,c=r.catchall;let u;e._zod.parse=(d,p)=>{u??(u=n.value);const f=d.value;if(!i(f))return d.issues.push({expected:"object",code:"invalid_type",input:f,inst:e}),d;const g=[];if(l&&s&&p?.async===!1&&p.jitless!==!0)a||(a=o(r.shape)),d=a(d,p);else{d.value={};const C=u.shape;for(const _ of u.keys){const T=C[_],R=T._zod.run({value:f[_],issues:[]},p),A=T._zod.optin==="optional"&&T._zod.optout==="optional";R instanceof Promise?g.push(R.then(D=>A?whe(D,d,_,f):Nk(D,d,_))):A?whe(R,d,_,f):Nk(R,d,_)}}if(!c)return g.length?Promise.all(g).then(()=>d):d;const b=[],x=u.keySet,w=c._zod,k=w.def.type;for(const C of Object.keys(f)){if(x.has(C))continue;if(k==="never"){b.push(C);continue}const _=w.run({value:f[C],issues:[]},p);_ instanceof Promise?g.push(_.then(T=>Nk(T,d,C))):Nk(_,d,C)}return b.length&&d.issues.push({code:"unrecognized_keys",keys:b,input:f,inst:e}),g.length?Promise.all(g).then(()=>d):d}});function khe(e,r,n,o){for(const a of e)if(a.issues.length===0)return r.value=a.value,r;return r.issues.push({code:"invalid_union",input:r.value,inst:n,errors:e.map(a=>a.issues.map(i=>Zp(i,o,Xp())))}),r}const Zwt=Pe(" $ ZodUnion",(e,r)=>{en.init(e,r),Br(e._zod,"optin",()=>r.options.some(n=>n._zod.optin==="optional")?"optional":void 0),Br(e._zod,"optout",()=>r.options.some(n=>n._zod.optout==="optional")?"optional":void 0),Br(e._zod,"values",()=>{if(r.options.every(n=>n._zod.values))return new Set(r.options.flatMap(n=>Array.from(n._zod.values)))}),Br(e._zod,"pattern",()=>{if(r.options.every(n=>n._zod.pattern)){const n=r.options.map(o=>o._zod.pattern);return new RegExp( ` ^ ( $ { n . map ( o => c$ ( o . source ) ) . join ( "|" ) } ) $ ` )}}),e._zod.parse=(n,o)=>{let a=!1;const i=[];for(const l of r.options){const s=l._zod.run({value:n.value,issues:[]},o);if(s instanceof Promise)i.push(s),a=!0;else{if(s.issues.length===0)return s;i.push(s)}}return a?Promise.all(i).then(l=>khe(l,n,e,o)):khe(i,n,e,o)}}),Qwt=Pe(" $ ZodIntersection",(e,r)=>{en.init(e,r),e._zod.parse=(n,o)=>{const a=n.value,i=r.left._zod.run({value:a,issues:[]},o),l=r.right._zod.run({value:a,issues:[]},o);return i instanceof Promise||l instanceof Promise?Promise.all([i,l]).then(([s,c])=>_he(n,s,c)):_he(n,i,l)}});function m $ (e,r){if(e===r)return{valid:!0,data:e};if(e instanceof Date&&r instanceof Date&&+e==+r)return{valid:!0,data:e};if(p $ (e)&&p $ (r)){const n=Object.keys(r),o=Object.keys(e).filter(i=>n.indexOf(i)!==-1),a={...e,...r};for(const i of o){const l=m $ (e[i],r[i]);if(!l.valid)return{valid:!1,mergeErrorPath:[i,...l.mergeErrorPath]};a[i]=l.data}return{valid:!0,data:a}}if(Array.isArray(e)&&Array.isArray(r)){if(e.length!==r.length)return{valid:!1,mergeErrorPath:[]};const n=[];for(let o=0;o<e.length;o++){const a=e[o],i=r[o],l=m $ (a,i);if(!l.valid)return{valid:!1,mergeErrorPath:[o,...l.mergeErrorPath]};n.push(l.data)}return{valid:!0,data:n}}return{valid:!1,mergeErrorPath:[]}}function _he(e,r,n){if(r.issues.length&&e.issues.push(...r.issues),n.issues.length&&e.issues.push(...n.issues),jb(e))return e;const o=m $ (r.value,n.value);if(!o.valid)throw new Error( ` Unmergable intersection . Error path : $ { JSON . stringify ( o . mergeErrorPath ) } ` );return e.value=o.data,e}const Jwt=Pe(" $ ZodEnum",(e,r)=>{en.init(e,r);const n=_xt(r.entries);e._zod.values=new Set(n),e._zod.pattern=new RegExp( ` ^ ( $ { n . filter ( o => Cxt . has ( typeof o ) ) . map ( o => typeof o == "string" ? Bb ( o ) : o . toString ( ) ) . join ( "|" ) } ) $ ` ),e._zod.parse=(o,a)=>{const i=o.value;return e._zod.values.has(i)||o.issues.push({code:"invalid_value",values:n,input:i,inst:e}),o}}),e2t=Pe(" $ ZodLiteral",(e,r)=>{en.init(e,r),e._zod.values=new Set(r.values),e._zod.pattern=new RegExp( ` ^ ( $ { r . values . map ( n => typeof n == "string" ? Bb ( n ) : n ? n . toString ( ) : String ( n ) ) . join ( "|" ) } ) $ ` ),e._zod.parse=(n,o)=>{const a=n.value;return e._zod.values.has(a)||n.issues.push({code:"invalid_value",values:r.values,input:a,inst:e}),n}}),Ehe=Pe(" $ ZodTransform",(e,r)=>{en.init(e,r),e._zod.parse=(n,o)=>{const a=r.transform(n.value,n
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
: host {
display : block ;
position : relative ;
background - color : transparent ;
width : 100 % ;
height : 100 % ;
box - sizing : border - box ;
overflow : hidden ;
border : 0 px solid transparent ;
padding : 0 ;
2025-11-07 11:50:17 +01:00
} ` ;r!==this.lastHostCss&&(this.hostCss?.replaceSync(r),this.lastHostCss=r)}connectedCallback(){this.lastHostCss="",this.hostCss=new CSSStyleSheet,this.updateHostCss(),this.shadow.adoptedStyleSheets=[this.hostCss],this.render()}disconnectedCallback(){this.root?.unmount(),this.root=void 0,this.shadow.adoptedStyleSheets.length=0,this.hostCss=void 0}static observedAttributes=["view-id","browser","dynamic-variant"];getProps(){const r=i5t.safeParse({viewId:this.getAttribute("view-id"),browser:this.getAttribute("browser")??void 0,dynamicViewVariant:this.getAttribute("dynamic-variant")??void 0});return r.success?r.data:(console.error("Invalid props",dhe(r.error)),{viewId:"index"})}render(){const r=this.getProps();this.updateHostCss(),this.root??=Ltt.createRoot(this.shadow),this.root.render(y.jsx(Ptt,{...r}))}attributeChangedCallback(r){this.root&&this.render()}}return customElements.define(ztt.View,Vhe),F6.LikeC4View=Vhe,Object.defineProperty(F6,Symbol.toStringTag,{value:"Module"}),F6})({});
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
/* prettier-ignore-end */
