2025-11-07 15:04:16 +01:00
var LikeC4Views = ( function ( G6 ) { "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 15:57:14 +01:00
function Y1e ( 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 AO ( e ) { return e && e . _ _esModule && Object . prototype . hasOwnProperty . call ( e , "default" ) ? e . default : e } var X6 = { exports : { } } , _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
* @ 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 15:57:14 +01:00
* /var RO;function W1e(){if(RO)return _1;RO=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 _1.Fragment=r,_1.jsx=n,_1.jsxs=n,_1}var NO;function G1e(){return NO||(NO=1,X6.exports=W1e()),X6.exports}var y=G1e(),K6={exports:{}},St={};/ * *
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 15:57:14 +01:00
* /var DO;function X1e(){if(DO)return St;DO=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.for("react.activity"),f=Symbol.iterator;function g(X){return X===null||typeof X!="object"?null:(X=f&&X[f]||X["@@iterator"],typeof X=="function"?X:null)}var b={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},x=Object.assign,w={};function k(X,Z,B){this.props=X,this.context=Z,this.refs=w,this.updater=B||b}k.prototype.isReactComponent={},k.prototype.setState=function(X,Z){if(typeof X!="object"&&typeof X!="function"&&X!=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,X,Z,"setState")},k.prototype.forceUpdate=function(X){this.updater.enqueueForceUpdate(this,X,"forceUpdate")};function C(){}C.prototype=k.prototype;function _(X,Z,B){this.props=X,this.context=Z,this.refs=w,this.updater=B||b}var T=_.prototype=new C;T.constructor=_,x(T,k.prototype),T.isPureReactComponent=!0;var A=Array.isArray;function R(){}var D={H:null,A:null,T:null,S:null},N=Object.prototype.hasOwnProperty;function $(X,Z,B){var W=B.ref;return{$$typeof:e,type:X,key:Z,ref:W!==void 0?W:null,props:B}}function O(X,Z){return $(X.type,Z,X.props)}function j(X){return typeof X=="object"&&X!==null&&X.$$typeof===e}function L(X){var Z={"=":"=0",":":"=2"};return"$"+X.replace(/ [ = : ] / g , function ( B ) { return Z [ B ] } ) } var Y = /\/+/g ; function M ( X , Z ) { return typeof X == "object" && X !== null && X . key != null ? L ( "" + X . key ) : Z . toString ( 36 ) } function U ( X ) { switch ( X . status ) { case "fulfilled" : return X . value ; case "rejected" : throw X . reason ; default : switch ( typeof X . status == "string" ? X . then ( R , R ) : ( X . status = "pending" , X . then ( function ( Z ) { X . status === "pending" && ( X . status = "fulfilled" , X . value = Z ) } , function ( Z ) { X . status === "pending" && ( X . status = "rejected" , X . reason = Z ) } ) ) , X . status ) { case "fulfilled" : return X . value ; case "rejected" : throw X . reason } } throw X } function z ( X , Z , B , W , Q ) { var J = typeof X ; ( J === "undefined" || J === "boolean" ) && ( X = null ) ; var ne = ! 1 ; if ( X === null ) ne = ! 0 ; else switch ( J ) { case "bigint" : case "string" : case "number" : ne = ! 0 ; break ; case "object" : switch ( X . $$typeof ) { case e : case r : ne = ! 0 ; break ; case d : return ne = X . _init , z ( ne ( X . _payload ) , Z , B , W , Q ) } } if ( ne ) return Q = Q ( X ) , ne = W === "" ? "." + M ( X , 0 ) : W , A ( Q ) ? ( B = "" , ne != null && ( B = ne . replace ( Y , "$&/" ) + "/" ) , z ( Q , Z , B , "" , function ( pe ) { return pe } ) ) : Q != null && ( j ( Q ) && ( Q = O ( Q , B + ( Q . key == null || X && X . key === Q . key ? "" : ( "" + Q . key ) . replace ( Y , "$&/" ) + "/" ) + ne ) ) , Z . push ( Q ) ) , 1 ; ne = 0 ; var te = W === "" ? "." : W + ":" ; if ( A ( X ) ) for ( var ee = 0 ; ee < X . length ; ee ++ ) W = X [ ee ] , J = te + M ( W , ee ) , ne += z ( W , Z , B , J , Q ) ; else if ( ee = g ( X ) , typeof ee == "function" ) for ( X = ee . call ( X ) , ee = 0 ; ! ( W = X . next ( ) ) . done ; ) W = W . value , J = te + M ( W , ee ++ ) , ne += z ( W , Z , B , J , Q ) ; else if ( J === "object" ) { if ( typeof X . then == "function" ) return z ( U ( X ) , Z , B , W , Q ) ; throw Z = String ( X ) , Error ( "Objects are not valid as a React child (found: " + ( Z === "[object Object]" ? "object with keys {" + Object . keys ( X ) . join ( ", " ) + "}" : Z ) + "). If you meant to render a collection of children, use an array instead." ) } return ne } function H ( X , Z , B ) { if ( X == null ) return X ; var W = [ ] , Q = 0 ; return z ( X , W , "" , "" , function ( J ) { return Z . call ( B , J , Q ++ ) } ) , W } function q ( X ) { if ( X . _status === - 1 ) { var Z = X . _result ; Z = Z ( ) , Z . then ( function ( B ) { ( X . _status === 0 || X . _status === - 1 ) && ( X . _status = 1 , X . _result = B ) } , function ( B ) { ( X . _status === 0 || X . _status === - 1 ) && ( X . _status = 2 , X . _result = B ) } ) , X . _status === - 1 && ( X . _status = 0 , X . _result = Z ) } if ( X . _status === 1 ) return X . _result . default ; throw X . _result } var K = typeof reportError == "function" ? reportError : function ( X ) { if ( typeof window == "object" && typeof window . ErrorEvent == "function" ) { var Z = new window . ErrorEvent ( "error" , { bubbles : ! 0 , cancelable : ! 0 , message : typeof X == "object" && X !== null && typeof X . message == "string" ? String ( X . message ) : String ( X ) , error : X } ) ; if ( ! window . dispatchEvent ( Z ) ) return } else if ( typeof process == " object
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 15:57:14 +01:00
* /var $O;function K1e(){if($O)return So;$O=1;var e=Z6();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 So.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=o,So.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)},So.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()}},So.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))},So.prefetchDNS=function(c){typeof c==" string "&&o.d.D(c)},So.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})}},So.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)},So.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})}},So.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)},So.requestFormReset=function(c){o.d.r(c)},So.unstable_batchedUpdates=function(c,u){return c(u)},So.useFormState=function(c,u,d){return l.H.useFormState(c,u,d)},So.useFormStatus=function(){return l.H.useHostTransitionStatus()},So.version=" 19.2 . 0 ",So}var MO;function OO(){if(MO)return Q6.exports;MO=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(),Q6.exports=K1e(),Q6.exports}var Fi=OO();const IO=AO(Fi);function Z1e(e,r,n){let o=a=>e(a,...r);return n===void 0?o:Object.assign(o,{lazy:n,lazyArgs:r})}function xa(e,r,n){let o=e.length-r.length;if(o===0)return e(...r);if(o===1)return Z1e(e,r,n);throw Error(" Wrong number of arguments ")}function Dh(...e){return xa(Q1e,e)}const Q1e=(e,r)=>e.length>=r;function bt(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 15:57:14 +01:00
* / c o n s t t I = . 0 2 7 , E y e = 5 e - 4 , S y e = . 1 , r I = 1 . 1 4 , Q v = . 0 2 2 , n I = 1 . 4 1 4 , C 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 = M h ( r , e , e . a l p h a ( ) , " r g b " ) ) ; c o n s t n = o I ( . . . e . r g b ( ) ) , o = o I ( . . . r . r g b ( ) ) , a = n > = Q v ? n : n + M a t h . p o w ( Q v - n , n I ) , i = o > = Q v ? o : o + M a t h . p o w ( Q v - o , n I ) , 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 ) < E y e ? 0 : a < i ? l * r I : s * r I ; r e t u r n ( M a t h . a b s ( c ) < S y e ? 0 : c > 0 ? c - t I : c + t I ) * 1 0 0 } ; f u n c t i o n o I ( 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 : I s , p o w : b n , m i n : T y e , m a x : A y e , a t a n 2 : a I , a b s : i I , c o s : J v , s i n : l I , e x p : R y e , P I : s I } = M a t h ; f u n c t i o n N y e ( e , r , n = 1 , o = 1 , a = 1 ) { v a r i = f u n c t i o n ( B ) { r e t u r n 3 6 0 * B / ( 2 * s I ) } , l = f u n c t i o n ( B ) { r e t u r n 2 * s I * B / 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 = I s ( b n ( c , 2 ) + b n ( u , 2 ) ) , x = I s ( b n ( p , 2 ) + b n ( f , 2 ) ) , w = ( b + x ) / 2 , k = . 5 * ( 1 - I s ( b n ( w , 7 ) / ( b n ( w , 7 ) + b n ( 2 5 , 7 ) ) ) ) , C = c * ( 1 + k ) , _ = p * ( 1 + k ) , T = I s ( b n ( C , 2 ) + b n ( u , 2 ) ) , A = I s ( b n ( _ , 2 ) + b n ( f , 2 ) ) , R = ( T + A ) / 2 , D = i ( a I ( u , C ) ) , N = i ( a I ( f , _ ) ) , $ = D > = 0 ? D : D + 3 6 0 , O = N > = 0 ? N : N + 3 6 0 , j = i I ( $ - O ) > 1 8 0 ? ( $ + O + 3 6 0 ) / 2 : ( $ + O ) / 2 , L = 1 - . 1 7 * J v ( l ( j - 3 0 ) ) + . 2 4 * J v ( l ( 2 * j ) ) + . 3 2 * J v ( l ( 3 * j + 6 ) ) - . 2 * J v ( l ( 4 * j - 6 3 ) ) ; l e t Y = O - $ ; Y = i I ( Y ) < = 1 8 0 ? Y : O < = $ ? Y + 3 6 0 : Y - 3 6 0 , Y = 2 * I s ( T * A ) * l I ( l ( Y ) / 2 ) ; c o n s t M = d - s , U = A - T , z = 1 + . 0 1 5 * b n ( g - 5 0 , 2 ) / I s ( 2 0 + b n ( g - 5 0 , 2 ) ) , H = 1 + . 0 4 5 * R , q = 1 + . 0 1 5 * R * L , K = 3 0 * R y e ( - b n ( ( j - 2 7 5 ) / 2 5 , 2 ) ) , X = - ( 2 * I s ( b n ( R , 7 ) / ( b n ( R , 7 ) + b n ( 2 5 , 7 ) ) ) ) * l I ( 2 * l ( K ) ) , Z = I s ( b n ( M / ( n * z ) , 2 ) + b n ( U / ( o * H ) , 2 ) + b n ( Y / ( a * q ) , 2 ) + X * ( U / ( o * H ) ) * ( Y / ( a * q ) ) ) ; r e t u r n A y e ( 0 , T y e ( 1 0 0 , Z ) ) } f u n c t i o n D 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 P 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 } } , $ y e = { c o o l ( ) { r e t u r n Z v ( [ A t . h s l ( 1 8 0 , 1 , . 9 ) , A t . h s l ( 2 5 0 , . 7 , . 4 ) ] ) } , h o t ( ) { r e t u r n Z v ( [ " # 0 0 0 " , " # f 0 0 " , " # f f 0 " , " # f f f " ] ) . m o d e ( " r g b " ) } } , g _ = { 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 15:57:14 +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 { C _ . 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 C _ . e x p o r t s } v a r p b e = d b e ( ) ; c o n s t L I = o 3 ( p b e ) ; f u n c t i o n a 3 ( e , r ) { r e t u r n e = = = r ? 0 : e u ( e ) ? e u ( r ) ? L I ( e , r ) : 1 : e u ( r ) ? - 1 : 0 } f u n c t i o n B 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 = L 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 T _ ( 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 i 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 C 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 T 1 = e = > T _ ( e ) ? e : e . i d ; f u n c t i o n G n ( e , r ) { c o n s t n = T 1 ( e ) ; r e t u r n r ? T 1 ( r ) . s t a r t s W i t h ( n + " . " ) : o = > { c o n s t a = T 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 j I ( e , r ) { i f ( ! r ) r e t u r n a = > j I ( e , a ) ; c o n s t n = T 1 ( e ) , o = T 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 F I ( e , r ) { r e t u r n n = > G n ( e , n ) } f u n c t i o n l 3 ( e ) { r e t u r n ( T _ ( e ) ? e : e . i d ) . s p l i t ( " . " ) . l e n g t h } f u n c t i o n A 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 R 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 b e ( e , r ) { l e t n = r ; f o r ( c o n s t o o f e ) G 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 t u ( 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 b 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 H I ( e , r ) { i f ( ! e | | T _ ( e ) ) { c o n s t o = e ? ? " a s c " ; r e t u r n a = > H 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 = a 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 s 3 = { } , U I ; f u n c t i o n f b e ( ) { r e t u r n U I | | ( U I = 1 , s 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 " , s 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 " ) , s 3 } v a r A _ , q I ; f u n c t i o n m b e ( ) { i f ( q I ) r e t u r n A _ ; q 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 " } , A _ = e , A _ } v a r R _ , V I ; f u n c t i o n g b e ( ) { i f ( V I ) r e t u r n R _ ; V I = 1 ; v a r e = f b 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 R _ = 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 ) } , R _ } v a r N _ , Y I ; f u n c t i o n y b e ( ) { i f ( Y I ) r e t u r n N _ ; Y I = 1 ; v a r e = m b e ( ) , r = g b 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 $ d={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/"},xz={}.hasOwnProperty,qbe=Object.prototype;function Vbe(e,r){const n=r||{};return H_({file:n.file||void 0,location:!1,schema:n.space==="svg"?M1:f3,verbose:n.verbose||!1},e)}function H_(e,r){let n;switch(r.nodeName){case"#comment":{const o=r;return n={type:"comment",value:o.data},m3(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:wz(e,r.childNodes),data:{quirksMode:a}},e.file&&e.location){const i=String(e.file),l=Ube(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"},m3(e,o,n),n}case"#text":{const o=r;return n={type:"text",value:o.value},m3(e,o,n),n}default:return n=Ybe(e,r),n}}function wz(e,r){let n=-1;const o=[];for(;++n<r.length;){const a=H_(e,r[n]);o.push(a)}return o}function Ybe(e,r){const n=e.schema;e.schema=r.namespaceURI=== $ d.svg?M1:f3;let o=-1;const a={};for(;++o<r.attrs.length;){const s=r.attrs[o],c=(s.prefix?s.prefix+":":"")+s.name;xz.call(qbe,c)||(a[c]=s.value)}const l=(e.schema.space==="svg"?Hbe:Fbe)(r.tagName,a,wz(e,r.childNodes));if(m3(e,r,l),l.tagName==="template"){const s=r,c=s.sourceCodeLocation,u=c&&c.startTag&&qh(c.startTag),d=c&&c.endTag&&qh(c.endTag),p=H_(e,s.content);u&&d&&e.file&&(p.position={start:u.end,end:d.start}),l.content=p}return e.schema=n,l}function m3(e,r,n){if("sourceCodeLocation"in r&&r.sourceCodeLocation&&e.file){const o=Wbe(e,n,r.sourceCodeLocation);o&&(e.location=!0,n.position=o)}}function Wbe(e,r,n){const o=qh(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)xz.call(n.attrs,l)&&(i[j_(e.schema,l).property]=qh(n.attrs[l]));n.startTag;const s=qh(n.startTag),c=n.endTag?qh(n.endTag):void 0,u={opening:s};c&&(u.closing=c),u.properties=i,r.data={position:u}}}return o}function qh(e){const r=kz({line:e.startLine,column:e.startCol,offset:e.startOffset}),n=kz({line:e.endLine,column:e.endCol,offset:e.endOffset});return r||n?{start:r,end:n}:void 0}function kz(e){return e.line&&e.column?e:void 0}class O1{constructor(r,n,o){this.property=r,this.normal=n,o&&(this.space=o)}}O1.prototype.property={},O1.prototype.normal={},O1.prototype.space=null;function _z(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 O1(n,o,r)}function U_(e){return e.toLowerCase()}class ri{constructor(r,n){this.property=r,this.attribute=n}}ri.prototype.space=null,ri.prototype.boolean=!1,ri.prototype.booleanish=!1,ri.prototype.overloadedBoolean=!1,ri.prototype.number=!1,ri.prototype.commaSeparated=!1,ri.prototype.spaceSeparated=!1,ri.prototype.commaOrSpaceSeparated=!1,ri.prototype.mustUseProperty=!1,ri.prototype.defined=!1;let Gbe=0;const Ot=Md(),wn=Md(),Ez=Md(),Ue=Md(),Ar=Md(),Vh=Md(),ka=Md();function Md(){return 2**++Gbe}const q_={__proto__:null,boolean:Ot,booleanish:wn,commaOrSpaceSeparated:ka,commaSeparated:Vh,number:Ue,overloadedBoolean:Ez,spaceSeparated:Ar},V_=Object.keys(q_);class Y_ extends ri{constructor(r,n,o,a){let i=-1;if(super(r,n),Sz(this,"space",a),typeof o=="number")for(;++i<V_.length;){const l=V_[i];Sz(this,V_[i],(o&q_[l])===q_[l])}}}Y_.prototype.defined=!0;function Sz(e,r,n){n&&(e[r]=n)}const Xbe={}.hasOwnProperty;function Yh(e){const r={},n={};let o;for(o in e.properties)if(Xbe.call(e.properties,o)){const a=e.properties[o],i=new Y_(o,e.transform(e.attributes||{},o),a,e.space);e.mustUseProperty&&e.mustUseProperty.includes(o)&&(i.mustUseProperty=!0),r[o]=i,n[U_(o)]=o,n[U_(i.attribute)]=o}return new O1(r,n,e.space)}const Cz=Yh({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 15:57:14 +01:00
\ f \ r "&'<=>\``.split(" ")]],single:[[" & '".split(""),"\"&' ` ".split("")],[" \0 &'".split("")," \0 \" &' ` ".split(" ")]],double:[['" & '.split(""),"\"&' ` ".split("")],[' \0 "&'.split("")," \0 \" &' ` ".split(" ")]]};function s2e(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=M1);const u=c2e(o,e.properties),d=o.all(a.space===" html "&&e.tagName===" template "?e.content:e);return o.schema=a,d&&(l=!1),(u||!i||!r2e(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||!d8(e,r,n))&&s.push(" < /"+e.tagName+">"),s.join("")}function c2e(e,r){const n=[];let o=-1,a;if(r){for(a in r)if(r[a]!==null&&r[a]!==void 0){const i=u2e(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 u2e(e,r,n){const o=j_(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=Zh(o.attribute,Object.assign({},e.settings.characterReferences,{subset:N3.name[a][i]}));return n===!0||(n=Array.isArray(n)?(o.commaSeparated?hz:gz)(n,{padLeft:!e.settings.tightCommaSeparatedLists}):String(n),e.settings.collapseEmptyAttributes&&!n)?c:(e.settings.preferUnquoted&&(s=Zh(n,Object.assign({},e.settings.characterReferences,{attribute:!0,subset:N3.unquoted[a][i]}))),s!==n&&(e.settings.quoteSmart&&R3(n,l)>R3(n,e.alternative)&&(l=e.alternative),s=l+Zh(n,Object.assign({},e.settings.characterReferences,{subset:(l==="'"?N3.single:N3.double)[a][i],attribute:!0}))+l),c+(s&&"="+s))}const d2e=["<","&"];function GL(e,r,n,o){return n&&n.type==="element"&&(n.tagName==="script"||n.tagName==="style")?e.value:Zh(e.value,Object.assign({},o.settings.characterReferences,{subset:d2e}))}function p2e(e,r,n,o){return o.settings.allowDangerousHtml?e.value:GL(e,r,n,o)}function h2e(e,r,n,o){return o.all(e)}const f2e=W_("type",{invalid:m2e,unknown:g2e,handlers:{comment:Bwe,doctype:jwe,element:s2e,raw:p2e,root:h2e,text:GL}});function m2e(e){throw new Error("Expected node, not `"+e+"`")}function g2e(e){const r=e;throw new Error("Cannot compile unknown node `"+r.type+"`")}const y2e={},b2e={},v2e=[];function x2e(e,r){const n=r||y2e,o=n.quote||'"',a=o==='"'?"'":'"';if(o!=='"'&&o!=="'")throw new Error("Invalid quote `"+o+"`, expected `'` or `\"`");return{one:w2e,all:k2e,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||Iz,characterReferences:n.characterReferences||b2e,closeSelfClosing:n.closeSelfClosing||!1,closeEmptyElements:n.closeEmptyElements||!1},schema:n.space==="svg"?M1:f3,quote:o,alternative:a}.one(Array.isArray(e)?{type:"root",children:e}:e,void 0,void 0)}function w2e(e,r,n){return f2e(e,r,n,this)}function k2e(e){const r=[],n=e&&e.children||v2e;let o=-1;for(;++o<n.length;)r[o]=this.one(n[o],o,e);return r.join("")}function _2e(e){const r=this,n={...r.data("settings"),...e};r.compiler=o;function o(a){return x2e(a,n)}}const Fo=iu(/ [ A - Za - z ] / ) , Ao = iu ( /[\dA-Za-z]/ ) , E2e = iu ( /[#-'*+\--9=?A-Z^-~]/ ) ; function D3 ( e ) { return e !== null && ( e < 32 || e === 127 ) } const h8 = iu
` :" ")+i.indentLines(i.containerFlow(o,s.current()),r?ZL:t4e))),u(),c}}function t4e(e,r,n){return r===0?e:ZL(e,r,n)}function ZL(e,r,n){return(n?"":" ")+e}const r4e=["autolink","destinationLiteral","destinationRaw","reference","titleQuote","titleApostrophe"];QL.peek=l4e;function n4e(){return{canContainEols:["delete"],enter:{strikethrough:a4e},exit:{strikethrough:i4e}}}function o4e(){return{unsafe:[{character:"~",inConstruct:"phrasing",notInConstruct:r4e}],handlers:{delete:QL}}}function a4e(e){this.enter({type:"delete",children:[]},e)}function i4e(e){this.exit(e)}function QL(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 l4e(){return"~"}function s4e(e){return e.length}function c4e(e,r){const n=r||{},o=(n.align||[]).concat(),a=n.stringLength||s4e,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=u4e(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]=JL(o[p]);else{const x=JL(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 A=c[p]-(w[p]||0),R=i[p];R===114?_=" ".repeat(A):R===99?A%2?(_=" ".repeat(A/2+.5),T=" ".repeat(A/2-.5)):(_=" ".repeat(A/2),T=_):T=" ".repeat(A)}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( `
2025-11-07 15:04:16 +01:00
` )}function u4e(e){return e==null?"":String(e)}function JL(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 d4e(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()),p4e);return a(),l}function p4e(e,r,n){return">"+(n?"":" ")+e}function h4e(e,r){return eB(e,r.inConstruct,!0)&&!eB(e,r.notInConstruct,!1)}function eB(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 tB(e,r,n,o){let a=-1;for(;++a<n.unsafe.length;)if(n.unsafe[a].character=== `
` &&h4e(n.stack,n.unsafe[a]))return/[ \t ]/.test(o.before)?"":" ";return ` \ \
` }function f4e(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 m4e(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 g4e(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 y4e(e,r,n,o){const a=g4e(n),i=e.value||" ",l=a===" ` "?"GraveAccent":"Tilde";if(m4e(e,n)){const p=n.enter("codeIndented"),f=n.indentLines(i,b4e);return p(),f}const s=n.createTracker(o),c=a.repeat(Math.max(f4e(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 15:04:16 +01:00
` )),d+=s.move(c),u(),d}function b4e(e,r,n){return(n?"":" ")+e}function y8(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 v4e ( e , r , n , o ) { const a = y8 ( 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 x4e(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 G1(e){return"&#x"+e.toString(16).toUpperCase()+";"}function Qh(e){if(e===null||_r(e)||Ld(e))return 1;if(P3(e))return 2}function $ 3(e,r,n){const o=Qh(e),a=Qh(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}}rB.peek=w4e;function rB(e,r,n,o){const a=x4e(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= $ 3(o.before.charCodeAt(o.before.length-1),u,a);d.inside&&(c=G1(u)+c.slice(1));const p=c.charCodeAt(c.length-1),f= $ 3(o.after.charCodeAt(0),p,a);f.inside&&(c=c.slice(0,-1)+G1(p));const g=l.move(a);return i(),n.attentionEncodeSurroundingInfo={after:f.outside,before:d.outside},s+c+g}function w4e(e,r,n){return n.options.emphasis||"*"}const k4e={};function M3(e,r){const n=r||k4e,o=typeof n.includeImageAlt=="boolean"?n.includeImageAlt:!0,a=typeof n.includeHtml=="boolean"?n.includeHtml:!0;return nB(e,o,a)}function nB(e,r,n){if(_4e(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 oB(e.children,r,n)}return Array.isArray(e)?oB(e,r,n):""}function oB(e,r,n){const o=[];let a=-1;for(;++a<e.length;)o[a]=nB(e[a],r,n);return o.join("")}function _4e(e){return!!(e&&typeof e=="object")}function E4e(e,r){let n=!1;return l8(e,function(o){if("value"in o&&/ \r ? \n | \r /.test(o.value)||o.type==="break")return n=!0,i8}),!!((!e.depth||e.depth<3)&&M3(e)&&(r.options.setext||n))}function S4e(e,r,n,o){const a=Math.max(Math.min(6,e.depth||1),1),i=n.createTracker(o);if(E4e(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 15:57:14 +01:00
` ,...i.current()});return/^[ \t ]/.test(u)&&(u=G1(u.charCodeAt(0))+u.slice(1)),u=u?l+" "+u:l,n.options.closeAtx&&(u+=" "+l),c(),s(),u}aB.peek=C4e;function aB(e){return e.value||""}function C4e(){return"<"}iB.peek=T4e;function iB(e,r,n,o){const a=y8(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 T4e(){return"!"}lB.peek=A4e;function lB(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 A4e(){return"!"}sB.peek=R4e;function sB(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 R4e(){return" ` "}function cB(e,r){const n=M3(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))}uB.peek=N4e;function uB(e,r,n,o){const a=y8(n),i=a==='" ' ? "Quote" : "Apostrophe" , l = n . createTracker ( o ) ; let s , c ; if ( cB ( 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 N4e ( e , r , n ) { return cB ( e , n ) ? "<" : "[" } dB . peek = D4e ; function dB ( 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 D4e ( ) { return "[" } function b8 ( 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 P4e ( e ) { const r = b8 ( 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 $4e ( e ) { const r = e . options . bulletOrdered || "." ; if ( r !== "."
2025-11-07 15:04:16 +01:00
` ,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 15:57:14 +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 c4e(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=fB.inlineCode(g,b,x);return x.stack.includes("tableCell")&&(w=w.replace(/ \| /g," \\ $ &")),w}}function r5e(){return{exit:{taskListCheckValueChecked:bB,taskListCheckValueUnchecked:bB,paragraph:o5e}}}function n5e(){return{unsafe:[{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{listItem:a5e}}}function bB(e){const r=this.stack[this.stack.length-2];r.type,r.checked=e.type==="taskListCheckValueChecked"}function o5e(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 a5e(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=fB.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 i5e(){return[P2e(),J2e(),n4e(),X4e(),r5e()]}function l5e(e){return{extensions:[ $ 2e(),e4e(e),o4e(),t5e(e),n5e()]}}function _a(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 oi(e,r){return e.length>0?(_a(e,e.length,0,r),e):r}const vB={}.hasOwnProperty;function xB(e){const r={};let n=-1;for(;++n<e.length;)s5e(r,e[n]);return r}function s5e(e,r){let n;for(n in r){const a=(vB.call(e,n)?e[n]:void 0)||(e[n]={}),i=r[n];let l;if(i)for(l in i){vB.call(a,l)||(a[l]=[]);const s=i[l];c5e(a[l],Array.isArray(s)?s:s?[s]:[])}}}function c5e(e,r){let n=-1;const o=[];for(;++n<r.length;)(r[n].add==="after"?e:o).push(r[n]);_a(e,0,0,o)}const u5e={tokenize:g5e,partial:!0},wB={tokenize:y5e,partial:!0},kB={tokenize:b5e,partial:!0},_B={tokenize:v5e,partial:!0},d5e={tokenize:x5e,partial:!0},EB={name:"wwwAutolink",tokenize:f5e,previous:CB},SB={name:"protocolAutolink",tokenize:m5e,previous:TB},Fs={name:"emailAutolink",tokenize:h5e,previous:AB},Xl={};function p5e(){return{text:Xl}}let Bd=48;for(;Bd<123;)Xl[Bd]=Fs,Bd++,Bd===58?Bd=65:Bd===91&&(Bd=97);Xl[43]=Fs,Xl[45]=Fs,Xl[46]=Fs,Xl[95]=Fs,Xl[72]=[Fs,SB],Xl[104]=[Fs,SB],Xl[87]=[Fs,EB],Xl[119]=[Fs,EB];function h5e(e,r,n){const o=this;let a,i;return l;function l(p){return!w8(p)||!AB.call(o,o.previous)||k8(o.events)?n(p):(e.enter("literalAutolink"),e.enter("literalAutolinkEmail"),s(p))}function s(p){return w8(p)?(e.consume(p),s):p===64?(e.consume(p),c):n(p)}function c(p){return p===46?e.check(d5e,d,u)(p):p===45||p===95||Ao(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 f5e(e,r,n){const o=this;return a;function a(l){return l!==87&&l!==119||!CB.call(o,o.previous)||k8(o.events)?n(l):(e.enter("literalAutolink"),e.enter("literalAutolinkWww"),e.check(u5e,e.attempt(wB,e.attempt(kB,i),n),n)(l))}function i(l){return e.exit("literalAutolinkWww"),e.exit("literalAutolink"),r(l)}}function m5e(e,r,n){const o=this;let a="",i=!1;return l;function l(p){return(p===72||p===104)&&TB.call(o,o.previous)&&!k8(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 15:57:14 +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 x6e(e){const o={constructs:xB([g6e,...(e||{}).extensions||[]]),content:a(a6e),defined:[],document:a(l6e),flow:a(u6e),lazy:{},string:a(h6e),text:a(f6e)};return o;function a(i){return l;function l(s){return y6e(o,i,s)}}}function w6e(e){for(;!OB(e););return e}const VB=/[ \0 \t \n \r ]/g;function k6e(){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(VB.lastIndex=p,u=VB.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 Q1(e){return!e||typeof e!="object"?"":"position"in e||"type"in e?YB(e.position):"start"in e||"end"in e?YB(e):"line"in e||"column"in e?T8(e):""}function T8(e){return WB(e&&e.line)+":"+WB(e&&e.column)}function YB(e){return T8(e&&e.start)+"-"+T8(e&&e.end)}function WB(e){return e&&typeof e=="number"?e:1}const GB={}.hasOwnProperty;function XB(e,r,n){return typeof r!="string"&&(n=r,r=void 0),_6e(n)(w6e(x6e(n).document().write(k6e()(e,r,!0))))}function _6e(e){const r={transforms:[],canContainEols:["emphasis","fragment","heading","paragraph","strong"],enter:{autolink:i(Ze),autolinkProtocol: $ ,autolinkEmail: $ ,atxHeading:i(De),blockQuote:i(pe),characterEscape: $ ,characterReference: $ ,codeFenced:i(Te),codeFencedFenceInfo:l,codeFencedFenceMeta:l,codeIndented:i(Te,l),codeText:i(ce,l),codeTextData: $ ,data: $ ,codeFlowValue: $ ,definition:i(de),definitionDestinationString:l,definitionLabelString:l,definitionTitleString:l,emphasis:i(xe),hardBreakEscape:i(Ge),hardBreakTrailing:i(Ge),htmlFlow:i(et,l),htmlFlowData: $ ,htmlText:i(et,l),htmlTextData: $ ,image:i(ft),label:l,link:i(Ze),listItem:i(Xe),listItemValue:f,listOrdered:i(Et,p),listUnordered:i(Et),paragraph:i(We),reference:B,referenceString:l,resourceDestinationString:l,resourceTitleString:l,setextHeading:i(De),strong:i(st),thematicBreak:i(zn)},exit:{atxHeading:c(),atxHeadingSequence:A,autolink:c(),autolinkEmail:ee,autolinkProtocol:te,blockQuote:c(),characterEscapeValue:O,characterReferenceMarkerHexadecimal:Q,characterReferenceMarkerNumeric:Q,characterReferenceValue:J,characterReference:ne,codeFenced:c(w),codeFencedFence:x,codeFencedFenceInfo:g,codeFencedFenceMeta:b,codeFlowValue:O,codeIndented:c(k),codeText:c(U),codeTextData:O,data:O,definition:c(),definitionDestinationString:T,definitionLabelString:C,definitionTitleString:_,emphasis:c(),hardBreakEscape:c(L),hardBreakTrailing:c(L),htmlFlow:c(Y),htmlFlowData:O,htmlText:c(M),htmlTextData:O,image:c(H),label:K,labelText:q,lineEnding:j,link:c(z),listItem:c(),listOrdered:c(),listUnordered:c(),paragraph:c(),referenceString:W,resourceDestinationString:V,resourceTitleString:X,resource:Z,setextHeading:c(N),setextHeadingLineSequence:D,setextHeadingText:R,strong:c(),thematicBreak:c()}};KB(r,(e||{}).mdastExtensions||[]);const n={};return o;function o(we){let _e={type:"root",children:[]};const at={stack:[_e],tokenStack:[],config:r,enter:s,exit:u,buffer:l,resume:d,data:n},vt=[];let Ct=-1;for(;++Ct<we.length;)if(we[Ct][1].type==="listOrdered"||we[Ct][1].type==="listUnordered")if(we[Ct][0]==="enter")vt.push(Ct);else{const Zr=vt.pop();Ct=a(we,Zr,Ct)}for(Ct=-1;++Ct<we.length;){const Zr=r[we[Ct][0]];GB.call(Zr,we[Ct][1].type)&&Zr[we[Ct][1].type].call(Object.assign({sliceSerialize:we[Ct][2].sliceSerialize},at),we[Ct][1])}if(at.tokenStack.length>0){const Zr=at.tokenStack[at.tokenStack.length-1];(Zr[1]||ZB).call(at,void 0,Zr[0])}for(_e.position={start:lu(we.length>0?we[0][1].start:{line:1,column:1,offset:0}),end:lu(we.length>0?we[we.length-2][1].end:{line:1,column:1,offset:0})},Ct=-1;++
` }]}function A6e(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 R6e(e,r){const n={type:"element",tagName:"del",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function N6e(e,r){const n={type:"element",tagName:"em",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function D6e(e,r){const n=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",o=String(r.identifier).toUpperCase(),a=Jh(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 P6e(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 $ 6e(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 M6e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return QB(e,r);const a={src:Jh(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 O6e(e,r){const n={src:Jh(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 I6e(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 z6e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return QB(e,r);const a={href:Jh(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 L6e(e,r){const n={href:Jh(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 B6e(e,r,n){const o=e.all(r),a=n?j6e(n):JB(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 15:57:14 +01:00
` });const u={type:"element",tagName:"li",properties:i,children:l};return e.patch(r,u),e.applyData(r,u)}function j6e(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=JB(n[o])}return r}function JB(e){const r=e.spread;return r??e.children.length>1}function F6e(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 H6e(e,r){const n={type:"element",tagName:"p",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function U6e(e,r){const n={type:"root",children:e.wrap(e.all(r))};return e.patch(r,n),e.applyData(r,n)}function q6e(e,r){const n={type:"element",tagName:"strong",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function V6e(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=js(r.children[1]),c=S3(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 Y6e(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 W6e(e,r){const n={type:"element",tagName:"td",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}const ej=9,tj=32;function G6e(e){const r=String(e),n=/ \r ? \n | \r /g;let o=n.exec(r),a=0;const i=[];for(;o;)i.push(rj(r.slice(a,o.index),a>0,!0),o[0]),a=o.index+o[0].length,o=n.exec(r);return i.push(rj(r.slice(a),a>0,!1)),i.join("")}function rj(e,r,n){let o=0,a=e.length;if(r){let i=e.codePointAt(o);for(;i===ej||i===tj;)o++,i=e.codePointAt(o)}if(n){let i=e.codePointAt(a-1);for(;i===ej||i===tj;)a--,i=e.codePointAt(a-1)}return a>o?e.slice(o,a):""}function X6e(e,r){const n={type:"text",value:G6e(String(r.value))};return e.patch(r,n),e.applyData(r,n)}function K6e(e,r){const n={type:"element",tagName:"hr",properties:{},children:[]};return e.patch(r,n),e.applyData(r,n)}const Z6e={blockquote:C6e,break:T6e,code:A6e,delete:R6e,emphasis:N6e,footnoteReference:D6e,heading:P6e,html: $ 6e,imageReference:M6e,image:O6e,inlineCode:I6e,linkReference:z6e,link:L6e,listItem:B6e,list:F6e,paragraph:H6e,root:U6e,strong:q6e,table:V6e,tableCell:W6e,tableRow:Y6e,text:X6e,thematicBreak:K6e,toml:L3,yaml:L3,definition:L3,footnoteDefinition:L3};function L3(){}function Q6e(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 J6e(e,r){return"Back to reference "+(e+1)+(r>1?"-"+r:"")}function e_e(e){const r=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",n=e.options.footnoteBackContent||Q6e,o=e.options.footnoteBackLabel||J6e,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=Jh(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 15:57:14 +01:00
` }]}}const A8={}.hasOwnProperty,t_e={};function r_e(e,r){const n=r||t_e,o=new Map,a=new Map,i=new Map,l={...Z6e,...n.handlers},s={all:u,applyData:o_e,definitionById:o,footnoteById:a,footnoteCounts:i,footnoteOrder:[],handlers:l,one:c,options:n,patch:n_e,wrap:i_e};return l8(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(A8.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=Dd(w);return k.children=s.all(d),k}return Dd(d)}return(s.options.unknownHandler||a_e)(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=nj(b.value)),!Array.isArray(b)&&b.type==="element")){const x=b.children[0];x&&x.type==="text"&&(x.value=nj(x.value))}Array.isArray(b)?p.push(...b):p.push(b)}}}return p}}function n_e(e,r){e.position&&(r.position=CL(e))}function o_e(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,Dd(i)),"children"in n&&n.children&&a!==null&&a!==void 0&&(n.children=a)}return n}function a_e(e,r){const n=r.data||{},o="value"in r&&!(A8.call(n,"hProperties")||A8.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 i_e(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 15:04:16 +01:00
` }),n}function nj(e){let r=0,n=e.charCodeAt(r);for(;n===9||n===32;)r++,n=e.charCodeAt(r);return e.slice(r)}function oj(e,r){const n=r_e(e,r),o=n.one(e,void 0),a=e_e(n),i=Array.isArray(o)?{type:"root",children:o}:o||{type:"root",children:[]};return a&&i.children.push({type:"text",value: `
2025-11-07 15:57:14 +01:00
` },a),i}function l_e(e,r){return e&&"run"in e?async function(n,o){const a=oj(n,{file:o,...r});await e.run(a,o)}:function(n,o){return oj(n,{file:o,...e||r})}}function aj(e){if(e)throw e}var R8,ij;function s_e(){if(ij)return R8;ij=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 R8=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},R8}var c_e=s_e();const N8=o3(c_e);function D8(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 u_e(){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?d_e(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 d_e(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 Jo=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=Q1(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}};Jo.prototype.file="",Jo.prototype.name="",Jo.prototype.reason="",Jo.prototype.message="",Jo.prototype.stack="",Jo.prototype.column=void 0,Jo.prototype.line=void 0,Jo.prototype.ancestors=void 0,Jo.prototype.cause=void 0,Jo.prototype.fatal=void 0,Jo.prototype.place=void 0,Jo.prototype.ruleId=void 0,Jo.prototype.source=void 0;const Kl={basename:p_e,dirname:h_e,extname:f_e,join:m_e,sep:"/"};function p_e(e,r){if(r!==void 0&&typeof r!="string")throw new TypeError('"ext" argument must be a string');J1(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 ai(this.target,this.source);const[n]=Y8(this.target,this.source,"directed");return n??new ai(this.target,this.source,new Set)}}const Tj={asc:(e,r)=>e>r,desc:(e,r)=>e<r};function _8e(e,r){let[n,...o]=r;if(!E8e(n)){let i=W8(...o);return e(n,i)}let a=W8(n,...o);return i=>e(i,a)}function W8(e,r,...n){let o=typeof e=="function"?e:e[0],a=typeof e=="function"?"asc":e[1],{[a]:i}=Tj,l=r===void 0?void 0:W8(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 E8e(e){if(Aj(e))return!0;if(typeof e!="object"||!Array.isArray(e))return!1;let[r,n,...o]=e;return Aj(r)&&typeof n=="string"&&n in Tj&&o.length===0}const Aj=e=>typeof e=="function"&&e.length===1;function Rj(...e){return xa(Object.entries,e)}function S8e(...e){return xa(C8e,e)}function C8e(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 T8e(e,r);if(e instanceof Set&&r instanceof Set)return A8e(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 T8e(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 A8e(e,r){if(e.size!==r.size)return!1;for(let n of e)if(!r.has(n))return!1;return!0}function R8e(...e){return xa(N8e,e)}const N8e=e=>e.at(-1);function D8e(e,...r){return typeof e=="string"||typeof e=="number"||typeof e=="symbol"?n=>Nj(n,e,...r):Nj(e,...r)}function Nj(e,...r){let n=e;for(let o of r){if(n==null)return;n=n[o]}return n}function G8(...e){return xa(P8e,e)}function P8e(e,r){let n=[...e];return n.sort(r),n}function $ 8e(...e){return _8e(M8e,e)}const M8e=(e,r)=>[...e].sort(r);function Dj(e,r,n){return typeof r=="number"||r===void 0?o=>o.split(e,r):e.split(r,n)}function H3(...e){return xa(Object.values,e)}class U3{constructor(r,n){this. $ model=r,this. $ element=n,this.id=this. $ element.id,this._literalId=this. $ element.id;const[o,a]=_be(this.id);o?(this.imported={from:o,fqn:a},this.hierarchyLevel=l3(a)):(this.imported=null,this.hierarchyLevel=l3(this.id))}id;_literalId;hierarchyLevel;imported;get name(){return C1(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 pr(this,Symbol.for("tags"),()=>V8([...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&&!S8e(this. $ element.summary,this. $ element.description)}get summary(){return Zt.memoize(this,"summary",c3(this. $ element))}get description(){return Zt.memoize(this,"description",u3(this. $ element))}get technology(){return this. $ element.technology??null}get links(){return this. $ element.links??[]}get defaultView(){return pr(this,Symbol.for("defaultView"),()=>yj(this.scopedViews())??null)}get isRoot(){return this.parent===null}get style(){return pr(this,"style",()=>e0({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 Gn(this,r)}isDescendantOf(r){return Gn(r,this)}ancestors(){return this. $ model.ancestors(this)}commonAncestor(r){const n=A1(this.id,r.id);return n?this. $ model.element(n):null}children(){return this. $ model.children(this)}descendants(r){return r?HI([...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(Ea)){const r=e.split(Ea).map(n=>n.trim()).filter(n=>n.length>0);return Dh(r,1)?r:[""]}return[e.trim()]},q3=e=>X8(e).join(Ea),O8e=e=>{const r=X8(e);return Dh(r,2)?r.slice(0,-1).join(Ea):null},I8e=e=>e.includes(Ea)?X8(e).pop()??e:e.trim();class z8e{constructor(r){this. $ model=r;const n=this. $ deployments=r. $ data.deployments,o=H3(n.elements);for(const a of tu(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 H3(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 po(()=>new Set);#a=new po(()=>new Set);#i=new Set;#n=new Map;#o=new po(()=>new Set);#l=new po(()=>new Set);#c=new po(()=>new Set);#s=new po(()=>new Set);#u=new Map; $ deployments;get $ styles(){return this. $ model. $ styles}element(r){if(r instanceof _j||r instanceof Ej)return r;const n=gr(r);return bt(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=gr(r),o=this.#a.get(n);o&&(yield*o)}deploymentRef(r){if(n0.isInsideInstanceRef(r)){const{deployment:n,element:o}=r;return t8e(this.#u, ` $ { n } @ $ { o } ` ,()=>new v8e(this.instance(n),this. $ model.element(o)))}return this.element(r.deployment)}relationships(){return this.#n.values()}relationship(r){return bt(this.#n.get(gr(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=gr(r);return this.#t.get(n)||null}children(r){const n=gr(r);return this.#r.get(n)}*siblings(r){const n=gr(r),o=this.parent(r)?.children()??this.roots();for(const a of o)a.id!==n&&(yield a)}*ancestors(r){let n=gr(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=gr(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=gr(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=U_e(r)?new _j(this,Object.freeze(r)):new Ej(this,Object.freeze(r),this. $ model.element(r.element));this.#e.set(n.id,n);const o=i3(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 x8e(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,...Rd(o)])this.#c.get(a).add(n);for(const a of Rd(n.source.id)){if(a===o)break;this.#l.get(a).add(n)}for(const a of Rd(n.target.id)){if(a===o)break;this.#o.get(a).add(n)}return n}}class Pj{constructor(r,n){this.model=r,this. $ relationship=n,this.source=r.element(n0.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 15:04:16 +01:00
* /var _Ee={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 15:04:16 +01:00
* /const xt=(e,r,n,o)=>{const a=S.forwardRef(({color:i="currentColor",size:l=24,stroke:s=2,title:c,className:u,children:d,...p},f)=>S.createElement("svg",{ref:f,..._Ee[e],width:l,height:l,className:["tabler-icon",`tabler-icon-${r}`,u].join(" "),...e==="filled"?{fill:i}:{strokeWidth:s,stroke:i},...p},[c&&S.createElement("title",{key:"svg-title"},c),...o.map(([g,b])=>S.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 15:04:16 +01:00
* /const EEe=[["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"}]],Wj=xt("outline","cylinder","Cylinder",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 15:04:16 +01:00
* /const SEe=[["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"}]],CEe=xt("outline","rectangular-prism","RectangularPrism",SEe);/ * *
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 15:57:14 +01:00
* /const TEe=[["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"}]],AEe=xt("outline","reorder","Reorder",TEe);/ * *
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 15:57:14 +01:00
* /const REe=[["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"}]],NEe=xt("outline","user","User",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 15:04:16 +01:00
* /const DEe=[["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"}]],PEe=xt("outline","device-mobile","DeviceMobile",DEe);/ * *
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 15:57:14 +01:00
* /const $Ee=[["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"}]],MEe=xt("outline","browser","Browser",$Ee),oE=S.createContext(null);function OEe({value:e,children:r}){return S.useContext(oE)?y.jsx(y.Fragment,{children:r}):y.jsx(oE.Provider,{value:e,children:r})}function W3({element:e,className:r,style:n}){const o=S.useContext(oE);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 IEe={browser:MEe,cylinder:Wj,mobile:PEe,person:NEe,queue:AEe,rectangle:CEe,storage:Wj};function zEe({element:e,className:r}){const n=y.jsx(W3,{element:e,className:r});if(n)return n;const o=IEe[e.shape];return y.jsx("div",{className:Je(r,"likec4-shape-icon"),children:y.jsx(o,{})})}function nf(e){const r=S.useRef(e);return r.current=e,S.useMemo(()=>Object.freeze({get current(){return r.current}}),[])}function Gj(e){const r=nf(e);S.useEffect(()=>()=>{r.current()},[])}function G3(e,r,n,o=0){const a=S.useRef(void 0),i=S.useRef(void 0),l=S.useRef(e),s=S.useRef(void 0),c=()=>{a.current&&(clearTimeout(a.current),a.current=void 0),i.current&&(clearTimeout(i.current),i.current=void 0)};return Gj(c),S.useEffect(()=>{l.current=e},r),S.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 LEe=()=>{},X3=typeof globalThis<"u"&&typeof navigator<"u"&&typeof document<"u";function BEe(e){const r=nf(e),n=S.useRef(0),o=S.useCallback(()=>{X3&&n.current&&(cancelAnimationFrame(n.current),n.current=0)},[]);return Gj(o),[S.useMemo(()=>{const a=(...i)=>{X3&&(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 jEe=(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 Xj(e,r,n=jEe,o=S.useEffect,...a){const i=S.useRef(void 0);(i.current===void 0||X3&&!n(i.current,r))&&(i.current=r),o(e,i.current,...a)}function FEe(e,r,n,o=0){S.useEffect(G3(e,r,n,o),r)}function Kj(){const e=S.useRef(!0);return S.useEffect(()=>{e.current=!1},[]),e.current}const aE=X3?S.useLayoutEffect:S.useEffect;function HEe(e){S.useEffect(()=>{e()},[])}function Zj(e,r){const[n,o]=BEe(e);S.useEffect(()=>(n(),o),r)}const UEe=e=>(e+1)%Number.MAX_SAFE_INTEGER;function qEe(){const[,e]=S.useState(0);return S.useCallback(()=>{e(UEe)},[])}function Qj(e,r){const n=Kj();S.useEffect(n?LEe:e,r)}const VEe=e=>{e&&clearTimeout(e)};function K3(e,r){const n=nf(e),o=nf(r),a=S.useRef(null),i=S.useCallback(()=>{VEe(a.current)},[]),l=S.useCallback(()=>{o.current!==void 0&&(i(),a.current=setTimeout(()=>{n.current()},o.current))},[]);return S.useEffect(()=>(l(),i),[r]),[i,l]}const Jj=(e,r,n)=>{const o=S.useRef(void 0);return(o.current===void 0||!n(o.current,r))&&(o.current=r),S.useMemo(e,o.current)};function dn(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=dn(e[n]))!==""&&(r+=(r&&" ")+o);else for(let n in e)e[n]&&(r+=(r&&" ")+n);return r}var YEe={value:()=>{}};function Z3(){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 Q3(n)}function Q3(e){this._=e}function WEe(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 15:04:16 +01:00
* / v a r j H ; f u n c t i o n _ T e ( ) { i f ( j H ) r e t u r n j E ; j H = 1 ; v a r e = Q 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 j 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 , j E } v a r F H ; f u n c t i o n H H ( ) { r e t u r n F H | | ( F H = 1 , B H . e x p o r t s = _ T e ( ) ) , B 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 15:57:14 +01:00
* /var UH;function ETe(){if(UH)return BE;UH=1;var e=Qr,r=HH();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 BE . 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 ( R ) { if ( ! C ) { if ( C = ! 0 , _ = R , R = f ( R ) , g !== void 0 && x . hasValue ) { var D = x . value ; if ( g ( D , R ) ) return T = D } return T = R } if ( D = T , o ( _ , R ) ) return D ; var N = f ( R ) ; return g !== void 0 && g ( D , N ) ? ( _ = R , D ) : ( _ = R , T = N ) } var C = ! 1 , _ , T , A = p === void 0 ? null : p ; return [ function ( ) { return k ( d ( ) ) } , A === null ? void 0 : function ( ) { return k ( A ( ) ) } ] } , [ 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 } , BE } var qH ; function STe ( ) { return qH || ( qH = 1 , LH . exports = ETe ( ) ) , LH . exports } var VH = STe ( ) ; const CTe = LE ( VH ) , TTe = { } , YH = 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 : ( ) => { ( TTe ? "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 } , ATe = e => e ? YH ( e ) : YH , { useDebugValue : RTe } = Qr , { useSyncExternalStoreWithSelector : NTe } = CTe , DTe = e => e ; function WH ( e , r = DTe , n ) { const o = NTe ( e . subscribe , e . getState , e . getServerState || e . getInitialState , r , n ) ; return RTe ( o ) , o } const GH = ( e , r ) => { const n = ATe ( e ) , o = ( a , i = r ) => WH ( n , a , i ) ; return Object . assign ( o , n ) , o } , PTe = ( e , r ) => e ? GH ( e , r ) : GH ; function $r ( 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 Rx = S . createContext ( null ) , $Te = Rx . Provider , XH = ts . error001 ( ) ; function Rt ( e , r ) { const n = S . useContext ( Rx ) ; if ( n === null ) throw new Error ( XH ) ; return WH ( n , e , r ) } function yr ( ) { const e = S . useContext ( Rx ) ; if ( e === null ) throw new Error ( XH ) ; return S . useMemo ( ( ) => ( { getState : e . getState , setState : e . setState , subscribe : e . subscribe } ) , [ e ] ) } const KH = { display : "none" } , MTe = { position : "absolute" , width : 1 , height : 1 , margin : - 1 , border : 0 , padding : 0 , overflow : "hidden" , clip : "rect(0px, 0px, 0px, 0px)" , clipPath : "inset(100%)" } , ZH = "react-flow__node-desc" , QH = "react-flow__edge-desc" , OTe = "react-flow__aria-live" , ITe = e => e . ariaLiveMessage , zTe = e => e . ariaLabelConfig ; function LTe ( { rfId : e } ) { const r = Rt ( ITe ) ; return y . jsx ( "div" , { id : ` ${ OTe } - ${ e } ` , "aria-live" : "assertive" , "aria-atomic" : "true" , style : MTe , children : r } ) } function BTe ( { rfId : e , disableKeyboardA11y : r } ) { const n = Rt ( zTe ) ; return y . jsxs ( y . Fragment , { children : [ y . jsx ( "div" , { id : ` ${ ZH } - ${ e } ` , style : KH , children : r ? n [ "node.a11yDescription.default" ] : n [ "node.a11yDescription.keyboardDisabled" ] } ) , y . jsx ( "div" , { id : ` ${ QH } - ${ e } ` , style : KH , children : n [ "edge.a11yDescription.default" ] } ) , ! r && y . jsx ( LTe , { rfId : e } ) ] } ) } const fu = S . forwardRef ( ( { position : e = "top-left" , children : r , className : n , style : o , ... a } , i ) => { const l = ` ${ e } ` . split ( "-" ) ; return y . jsx ( "div" , { className : dn ( [ "react-flow__panel" , n , ... l ] ) , style : o , ref : i , ... a , children : r } ) } ) ; fu . displayName = "Panel" ; function jTe ( { proOptions : e , position : r = "bottom-right" } ) { return e ? . hideAttribution ? null : y . jsx ( fu , { 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 15:57:14 +01:00
` )),u=c.reduce((d,p)=>d.concat(...p),[]);return[c,u]}return[[],[]]},[e]);return S.useEffect(()=>{const c=r?.target??nU,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)&&uH(g))return!1;const b=aU(g.code,s);if(i.current.add(g[b]),oU(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=aU(g.code,s);oU(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 oU(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function aU(e,r){return r.includes(e)?"code":"key"}const ZTe=()=>{const e=yr();return S.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=du(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 T0(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=_x(r,n);return{x:l.x+a,y:l.y+i}}}),[])};function iU(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)QTe(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 QTe(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 Dx(e,r){return iU(e,r)}function Px(e,r){return iU(e,r)}function Qd(e,r){return{id:e,type:"select",selected:r}}function yf(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(Qd(i.id,l)))}return o}function lU({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"})]})})}XU.displayName="MiniMap",S.memo(XU);const URe=e=>r=>e? ` $ { Math . max ( 1 / r . transform [ 2 ] , 1 ) } ` :void 0,qRe={[gf.Line]:"right",[gf.Handle]:"bottom-right"};function VRe({nodeId:e,position:r,variant:n=gf.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=qE(),_=typeof e=="string"?e:C,T=yr(),A=S.useRef(null),R=n===gf.Handle,D=Rt(S.useCallback(URe(R&&g),[R,g]), $ r),N=S.useRef(null), $ =r??qRe[n];S.useEffect(()=>{if(!(!A.current||!_))return N.current||(N.current=kTe({domNode:A.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:j,transform:L,snapGrid:Y,snapToGrid:M,nodeOrigin:U,domNode:z}=T.getState();return{nodeLookup:j,transform:L,snapGrid:Y,snapToGrid:M,nodeOrigin:U,paneDomNode:z}},onChange:(j,L)=>{const{triggerNodeChanges:Y,nodeLookup:M,parentLookup:U,nodeOrigin:z}=T.getState(),H=[],q={x:j.x,y:j.y},K=M.get(_);if(K&&K.expandParent&&K.parentId){const V=K.origin??z,X=j.width??K.measured.width??0,Z=j.height??K.measured.height??0,B={id:K.id,parentId:K.parentId,rect:{width:X,height:Z,...lH({x:j.x??K.position.x,y:j.y??K.position.y},{width:X,height:Z},K.parentId,M,V)}},W= $ E([B],M,U,z);H.push(...W),q.x=j.x?Math.max(V[0]*X,j.x):void 0,q.y=j.y?Math.max(V[1]*Z,j.y):void 0}if(q.x!==void 0&&q.y!==void 0){const V={id:_,type:"position",position:{...q}};H.push(V)}if(j.width!==void 0&&j.height!==void 0){const V={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:j.width,height:j.height}};H.push(V)}for(const V of L){const X={...V,type:"position"};H.push(X)}Y(H)},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 O= $ .split("-");return y.jsx("div",{className:dn(["react-flow__resize-control","nodrag",...O,n,o]),ref:A,style:{...a,scale:D,...l&&{[R?"backgroundColor":"borderColor"]:l}},children:i})}S.memo(VRe);const YRe=e=>e.domNode?.querySelector(".react-flow__renderer");function WRe({children:e}){const r=Rt(YRe);return r?Fi.createPortal(e,r):null}const GRe=(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,XRe=(e,r)=>{if(e.size!==r.size)return!1;for(const[n,o]of e)if(GRe(o,r.get(n)))return!1;return!0},KRe=e=>({x:e.transform[0],y:e.transform[1],zoom:e.transform[2],selectedNodesCount:e.nodes.filter(r=>r.selected).length});function KU({nodeId:e,children:r,className:n,style:o,isVisible:a,position:i=tt.Top,offset:l=10,align:s="center",...c}){const u=qE(),d=S.useCallback(T=>(Array.isArray(e)?e:[e||u||""]).reduce((A,R)=>{const D=T.nodeLookup.get(R);return D&&A.set(D.id,D),A},new Map),[e,u]),p=Rt(d,XRe),{x:f,y:g,zoom:b,selectedNodesCount:x}=Rt(KRe, $ r);if(!(typeof a=="boolean"?a:p.size===1&&p.values().next().value?.selected&&x===1)||!p.size)return null;const w=uf(p),k=Array.from(p.values()),C=Math.max(...k.map(T=>T.internals.z+1)),_={position:"absolute",transform:VCe(w,{x:f,y:g,zoom:b},i,l,s),zIndex:C,...o};return y.jsx(WRe,{children:y.jsx("div",{style:_,className:dn(["react-flow__node-toolbar",n]),...c,"data-id":k.reduce((T,A)=> ` $ { T } $ { A . id } ` ,"").trim(),children:r})})}var ZRe=Object.getOwnPropertyNames,QRe=Object.getOwnPropertySymbols,JRe=Object.prototype.hasOwnProperty;function ZU(e,r){return function(n,o,a){return e(n,o,a)&&r(n,o,a)}}function Lx(e){return function(r,n,o){if(!r||!n||typeof r!="object"||typeof n!="object")return e(r,n,o);var
2025-11-07 15:04:16 +01:00
. ` .concat(IDe, ` {
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, ` ;
}
2025-11-07 15:04:16 +01:00
body [ ` ).concat(kf, ` ] {
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, ` ;
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(""), `
}
2025-11-07 15:04:16 +01:00
. ` ).concat(Vx, ` {
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
right : ` ).concat(s,"px ").concat(o, ` ;
}
2025-11-07 15:04:16 +01:00
. ` ).concat(Yx, ` {
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
margin - right : ` ).concat(s,"px ").concat(o, ` ;
}
2025-11-07 15:04:16 +01:00
. ` ).concat(Vx," .").concat(Vx, ` {
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
right : 0 ` ).concat(o, ` ;
}
2025-11-07 15:04:16 +01:00
. ` ).concat(Yx," .").concat(Yx, ` {
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
margin - right : 0 ` ).concat(o, ` ;
}
2025-11-07 15:04:16 +01:00
body [ ` ).concat(kf, ` ] {
` ).concat(zDe,": ").concat(s, ` px ;
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 15:57:14 +01:00
` )},Tq=function(){var e=parseInt(document.body.getAttribute(kf)||"0",10);return isFinite(e)?e:0},rPe=function(){S.useEffect(function(){return document.body.setAttribute(kf,(Tq()+1).toString()),function(){var e=Tq()-1;e<=0?document.body.removeAttribute(kf):document.body.setAttribute(kf,e.toString())}},[])},nPe=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;rPe();var i=S.useMemo(function(){return JDe(a)},[a]);return S.createElement(ePe,{styles:tPe(i,!r,a,n?"":"!important")})},r9=!1;if(typeof window<"u")try{var Gx=Object.defineProperty({},"passive",{get:function(){return r9=!0,!0}});window.addEventListener("test",Gx,Gx),window.removeEventListener("test",Gx,Gx)}catch{r9=!1}var _f=r9?{passive:!1}:!1,oPe=function(e){return e.tagName==="TEXTAREA"},Aq=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!oPe(e)&&n[r]==="visible")},aPe=function(e){return Aq(e,"overflowY")},iPe=function(e){return Aq(e,"overflowX")},Rq=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=Nq(e,o);if(a){var i=Dq(e,o),l=i[1],s=i[2];if(l>s)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},lPe=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},sPe=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},Nq=function(e,r){return e==="v"?aPe(r):iPe(r)},Dq=function(e,r){return e==="v"?lPe(r):sPe(r)},cPe=function(e,r){return e==="h"&&r==="rtl"?-1:1},uPe=function(e,r,n,o,a){var i=cPe(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=Dq(e,s),b=g[0],x=g[1],w=g[2],k=x-w-i*b;(b||k)&&Nq(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},Xx=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},Pq=function(e){return[e.deltaX,e.deltaY]}, $ q=function(e){return e&&"current"in e?e.current:e},dPe=function(e,r){return e[0]===r[0]&&e[1]===r[1]},pPe=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 15:57:14 +01:00
` )},hPe=0,Ef=[];function fPe(e){var r=S.useRef([]),n=S.useRef([0,0]),o=S.useRef(),a=S.useState(hPe++)[0],i=S.useState(Cq)[0],l=S.useRef(e);S.useEffect(function(){l.current=e},[e]),S.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(a));var x=ODe([e.lockRef.current],(e.shards||[]).map( $ q)).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=S.useCallback(function(x,w){if("touches"in x&&x.touches.length===2||x.type==="wheel"&&x.ctrlKey)return!l.current.allowPinchZoom;var k=Xx(x),C=n.current,_="deltaX"in x?x.deltaX:C[0]-k[0],T="deltaY"in x?x.deltaY:C[1]-k[1],A,R=x.target,D=Math.abs(_)>Math.abs(T)?"h":"v";if("touches"in x&&D==="h"&&R.type==="range")return!1;var N=Rq(D,R);if(!N)return!0;if(N?A=D:(A=D==="v"?"h":"v",N=Rq(D,R)),!N)return!1;if(!o.current&&"changedTouches"in x&&(_||T)&&(o.current=A),!A)return!0;var $ =o.current||A;return uPe( $ ,w,x, $ ==="h"?_:T)},[]),c=S.useCallback(function(x){var w=x;if(!(!Ef.length||Ef[Ef.length-1]!==i)){var k="deltaY"in w?Pq(w):Xx(w),C=r.current.filter(function(A){return A.name===w.type&&(A.target===w.target||w.target===A.shadowParent)&&dPe(A.delta,k)})[0];if(C&&C.should){w.cancelable&&w.preventDefault();return}if(!C){var _=(l.current.shards||[]).map( $ q).filter(Boolean).filter(function(A){return A.contains(w.target)}),T=_.length>0?s(w,_[0]):!l.current.noIsolation;T&&w.cancelable&&w.preventDefault()}}},[]),u=S.useCallback(function(x,w,k,C){var _={name:x,delta:w,target:k,should:C,shadowParent:mPe(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function(T){return T!==_})},1)},[]),d=S.useCallback(function(x){n.current=Xx(x),o.current=void 0},[]),p=S.useCallback(function(x){u(x.type,Pq(x),x.target,s(x,e.lockRef.current))},[]),f=S.useCallback(function(x){u(x.type,Xx(x),x.target,s(x,e.lockRef.current))},[]);S.useEffect(function(){return Ef.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,_f),document.addEventListener("touchmove",c,_f),document.addEventListener("touchstart",d,_f),function(){Ef=Ef.filter(function(x){return x!==i}),document.removeEventListener("wheel",c,_f),document.removeEventListener("touchmove",c,_f),document.removeEventListener("touchstart",d,_f)}},[]);var g=e.removeScrollBar,b=e.inert;return S.createElement(S.Fragment,null,b?S.createElement(i,{styles:pPe(a)}):null,g?S.createElement(nPe,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function mPe(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const gPe=qDe(Sq,fPe);var O0=S.forwardRef(function(e,r){return S.createElement(Wx,rs({},e,{ref:r,sideCar:gPe}))});O0.classNames=Wx.classNames;function Do(e){return Object.keys(e)}function n9(e){return e&&typeof e=="object"&&!Array.isArray(e)}function o9(e,r){const n={...e},o=r;return n9(e)&&n9(r)&&Object.keys(r).forEach(a=>{n9(o[a])&&a in e?n[a]=o9(n[a],o[a]):n[a]=o[a]}),n}function yPe(e){return e.replace(/[A-Z]/g,r=> ` - $ { r . toLowerCase ( ) } ` )}function bPe(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc \( (.*?) \) $ /)?.[1].split("*")[0].trim()}function a9(e){const r=bPe(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 Mq(e){return e==="0rem"?"0rem": ` calc ( $ { e } * var ( -- mantine - scale ) ) ` }function Oq(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?Mq(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 15:57:14 +01:00
$ { s } ` }function x9({color:e,theme:r,autoContrast:n}){return(typeof n=="boolean"?n:r.autoContrast)&&xu({color:e||r.primaryColor,theme:r}).isLight?"var(--mantine-color-black)":"var(--mantine-color-white)"}function pV(e,r){return x9({color:e.colors[e.primaryColor][j0(e,r)],theme:e,autoContrast:null})}function ow({theme:e,color:r,colorScheme:n,name:o=r,withColorValues:a=!0}){if(!e.colors[r])return{};if(n==="light"){const s=j0(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 ` ]:Rf(e.colors[r][s],.1),[ ` -- mantine - color - $ { o } - light - hover ` ]:Rf(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 ` ]:Rf(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=j0(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 ` ]:Rf(e.colors[r][Math.max(0,i-2)],.15),[ ` -- mantine - color - $ { o } - light - hover ` ]:Rf(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 ` ]:Rf(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 D $ e(e){return!!e&&typeof e=="object"&&"mantine-virtual-color"in e}function Nf(e,r,n){Do(r).forEach(o=>Object.assign(e,{[ ` -- mantine - $ { n } - $ { o } ` ]:r[o]}))}const hV=e=>{const r=j0(e,"light"),n=e.defaultRadius in e.radius?e.radius[e.defaultRadius]:Re(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":pV(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 15:57:14 +01:00
` }function fV({cssVariablesSelector:e,deduplicateCssVariables:r}){const n=mo(),o=np(),a=d $ e(),i=P $ e({theme:n,generator:a}),l=e===":root"&&r,s=l? $ $ e(i):i,c=N $ e(s,e);return c?y.jsx("style",{"data-mantine-styles":!0,nonce:o?.(),dangerouslySetInnerHTML:{__html: ` $ { c } $ { l ? "" : M$e ( e ) } ` }}):null}fV.displayName="@mantine/CssVariables";function Df(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 O $ e({manager:e,defaultColorScheme:r,getRootElement:n,forceColorScheme:o}){const a=S.useRef(null),[i,l]=S.useState(()=>e.get(r)),s=o||i,c=S.useCallback(d=>{o||(Df(d,n),l(d),e.set(d))},[e.set,s,o]),u=S.useCallback(()=>{l(r),Df(r,n),e.clear()},[e.clear,r]);return S.useEffect(()=>(e.subscribe(c),e.unsubscribe),[e.subscribe,e.unsubscribe]),B0(()=>{Df(e.get(r),n)},[]),S.useEffect(()=>{if(o)return Df(o,n),()=>{};o===void 0&&Df(i,n),typeof window<"u"&&"matchMedia"in window&&(a.current=window.matchMedia("(prefers-color-scheme: dark)"));const d=p=>{i==="auto"&&Df(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 I $ e({respectReducedMotion:e,getRootElement:r}){B0(()=>{e&&r()?.setAttribute("data-respect-reduced-motion","true")},[e])}function k9({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=S $ e(),defaultColorScheme:d="light",getRootElement:p=()=>document.documentElement,cssVariablesResolver:f,forceColorScheme:g,stylesTransform:b,env:x}){const{colorScheme:w,setColorScheme:k,clearColorScheme:C}=O $ e({defaultColorScheme:d,forceColorScheme:g,manager:u,getRootElement:p});return I $ e({respectReducedMotion:e?.respectReducedMotion||!1,getRootElement:p}),y.jsx(tw.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(dV,{theme:e,children:[l&&y.jsx(fV,{cssVariablesSelector:s,deduplicateCssVariables:i}),a&&y.jsx(R $ e,{}),r]})})}k9.displayName="@mantine/core/MantineProvider";function _9({classNames:e,styles:r,props:n,stylesCtx:o}){const a=mo();return{resolvedClassNames:Jx({theme:a,classNames:e,props:n,stylesCtx:o||void 0}),resolvedStyles:ew({theme:a,styles:r,props:n,stylesCtx:o||void 0})}}const z $ e={always:"mantine-focus-always",auto:"mantine-focus-auto",never:"mantine-focus-never"};function L $ e({theme:e,options:r,unstyled:n}){return tl(r?.focusable&&!n&&(e.focusClassName||z $ e[e.focusRing]),r?.active&&!n&&e.activeClassName)}function B $ e({selector:e,stylesCtx:r,options:n,props:o,theme:a}){return Jx({theme:a,classNames:n?.classNames,props:n?.props||o,stylesCtx:r})[e]}function mV({selector:e,stylesCtx:r,theme:n,classNames:o,props:a}){return Jx({theme:n,classNames:o,props:a,stylesCtx:r})[e]}function j $ 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 H $ e({themeName:e,classNamesPrefix:r,selector:n,withStaticClass:o}){return o===!1?[]:e.map(a=> ` $ { r } - $ { a } - $ { n } ` )}function U $ e({themeName:e,theme:r,selector:n,props:o,stylesCtx:a}){return e.map(i=>Jx({theme:r,classNames:r.components[i]?.classNames,props:o,stylesCtx:a})?.[n])}function q $ e({options:e,classes:r,selector:n,unstyled:o}){return e?.variant&&!o?r[ ` $ { n } -- $ { e . variant } ` ]:void 0}function V $ 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 tl(L $ e({theme:e,options:r,unstyled:s||g}),U $ e({theme:e,themeName:n,selector:o,props:d,stylesCtx:p}),q $ e({options:r,classes:l,selector:o,unstyled:s}),mV({selector:o,stylesCtx:p,theme:e,classNames:i,props:d}),mV({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 % ) ;
2025-11-07 15:04:16 +01:00
` ;if(!nBe.includes(r))return"";let n="12";return["mint","grass","lime","yellow","amber"].includes(r)&&(n="dark-2"), `
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 - 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 15:57:14 +01:00
` };function aBe(e,r){return!e||gu(e)?"":kn(WE(e),ZNe(([n,o])=>[ ` : is ( $ { r } [ data - likec4 - tag = "${n}" ] ) { ` ,oBe(o),"}"]),mq( `
` ))}function iBe({children:e,rootSelector:r}){const n=rBe().tags,o=aBe(n,r);return y.jsxs(lG.Provider,{value:n,children:[o!==""&&y.jsx(lBe,{stylesheet:o}),e]})}const lBe=S.memo(({stylesheet:e})=>{const r=np()?.();return y.jsx("style",{"data-likec4-tags":!0,type:"text/css",dangerouslySetInnerHTML:{__html:e},nonce:r})});function sBe(e){return S.useContext(lG)[e]??{color:"tomato"}}function sG(){return Ra().replace("mantine-","likec4-")}var cBe="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 15:57:14 +01:00
* /const _Be=[["path",{d:"M18 6l-12 12",key:"svg-0"}],["path",{d:"M6 6l12 12",key:"svg-1"}]],Xf=xt("outline","x","X",_Be);function Y7({error:e,resetErrorBoundary:r}){const n=e instanceof Error?e.message:"Unknown error";return y.jsx(Gr,{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(Gw,{icon:y.jsx(Xf,{style:{width:16,height:16}}),styles:{icon:{alignSelf:"flex-start"}},color:"red",title:"Oops, something went wrong",p:"xl",withCloseButton:!1,children:[y.jsx(na,{maw:"100%",mah:400,children:y.jsx(Uw,{block:!0,children:n})}),y.jsx(Wr,{gap:"xs",mt:"xl",children:y.jsx(ro,{color:"gray",size:"xs",variant:"light",onClick:()=>r(),children:"Reset"})})]})})}function vG(e){return y.jsx(V7,{FallbackComponent:Y7,onError:(r,n)=>{console.error(r,n)},...e})}function EBe(){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 SBe(){const e=EBe();if(e.__xstate__)return e.__xstate__}const CBe=e=>{if(typeof window>"u")return;const r=SBe();r&&r.register(e)};class xG{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 wG=".",TBe="",kG="",ABe="#",RBe="*",_G="xstate.init",NBe="xstate.error",ay="xstate.stop";function DBe(e,r){return{type:`xstate.after.${e}.${r}`}}function W7(e,r){return{type:`xstate.done.state.${e}`,output:r}}function PBe(e,r){return{type:`xstate.done.actor.${e}`,output:r,actorId:e}}function EG(e,r){return{type:`xstate.error.actor.${e}`,error:r,actorId:e}}function SG(e){return{type:_G,input:e}}function cs(e){setTimeout(()=>{throw e})}const $Be=typeof Symbol=="function"&&Symbol.observable||"@@observable";function CG(e,r){const n=TG(e),o=TG(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?CG(n[a],o[a]):!1)}function G7(e){if(NG(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 TG(e){if(hje(e))return e.value;if(typeof e!="string")return e;const r=G7(e);return MBe(r)}function MBe(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 AG(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 RG(e){return NG(e)?e:[e]}function rc(e){return e===void 0?[]:RG(e)}function X7(e,r,n,o){return typeof e=="function"?e({context:r,event:n,self:o}):e}function NG(e){return Array.isArray(e)}function OBe(e){return e.type.startsWith("xstate.error.actor")}function Kf(e){return RG(e).map(r=>typeof r>"u"||typeof r=="string"?{target:r}:r)}function DG(e){if(!(e===void 0||e===TBe))return rc(e)}function e2(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 PG(e,r){return`${r}.${e}`}function K7(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 $G ( e , r ) { return ` ${ e . sessionId } . ${ r } ` } let IBe = 0 ; function zBe ( 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 = $G ( 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 LG(e){const r=DG(e.config.target);return r?{target:r.map(n=>typeof n=="string"?o2(e.parent,n):n)}:e.parent.initial}function fp(e){return e.type==="history"}function BG(e){const r=jG(e);for(const n of r)for(const o of iy(n,e))r.add(o);return r}function jG(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 Jf(o))n(a)}}return n(e),r}function em(e,r){if(n2(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 o2(e,r){if(typeof r=="string"&&n2(r))try{return e.machine.getStateNodeById(r)}catch{}const n=G7(r).slice();let o=e;for(;n.length;){const a=n.shift();if(!a.length)break;o=em(o,a)}return o}function a2(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=>em(e,a)).filter(Boolean);return[e.machine.root,e].concat(o,n.reduce((a,i)=>{const l=em(e,i);if(!l)return a;const s=a2(l,r[i]);return a.concat(s)},[]))}function JBe(e,r,n,o){const a=em(e,r).next(n,o);return!a||!a.length?e.next(n,o):a}function eje(e,r,n,o){const a=Object.keys(r),i=em(e,a[0]),l=tS(i,r[a[0]],n,o);return!l||!l.length?e.next(n,o):l}function tje(e,r,n,o){const a=[];for(const i of Object.keys(r)){const l=r[i];if(!l)continue;const s=em(e,i),c=tS(s,l,n,o);c&&a.push(...c)}return a.length?a:e.next(n,o)}function tS(e,r,n,o){return typeof r=="string"?JBe(e,r,n,o):Object.keys(r).length===1?eje(e,r,n,o):tje(e,r,n,o)}function rje(e){return Object.keys(e.states).map(r=>e.states[r]).filter(r=>r.type==="history")}function Tu(e,r){let n=e;for(;n.parent&&n.parent!==r;)n=n.parent;return n.parent===r}function nje(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 FG(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(nje(nS([a],r,n),nS([s],r,n)))if(Tu(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 oje(e){const[r,...n]=e;for(const o of iy(r,void 0))if(n.every(a=>Tu(a,o)))return o}function rS(e,r){if(!e.target)return[];const n=new Set;for(const o of e.target)if(fp(o))if(r[o.id])for(const a of r[o.id])n.add(a);else for(const a of rS(LG(o),r))n.add(a);else n.add(o);return[...n]}function HG(e,r){const n=rS(e,r);if(!n)return;if(!e.reenter&&n.every(a=>a===e.source||Tu(a,e.source)))return e.source;const o=oje(n.concat(e.source));if(o)return o;if(!e.reenter)return e.source.machine.root}function nS(e,r,n){const o=new Set;for(const a of e)if(a.target?.length){const i=HG(a,n);a.reenter&&a.source===i&&o.add(i);for(const l of r)Tu(l,i)&&o.add(l)}return[...o]}function aje(e,r){if(e.length!==r.size)return!1;for(const n of e)if(!r.has(n))return!1;return!0}function oS(e,r,n,o,a,i){if(!e.length)return r;const l=new Set(r._nodes);let s=r.historyValue;const c=FG(e,l,s);let u=r;a||([u,s]=cje(u,o,n,c,l,s,i,n.actionExecutor)),u=rm(u,o,n,c.flatMap(p=>p.actions),i,void 0),u=lje(u,o,n,c,l,i,s,a);const d=[...l];u.status==="done"&&(u=rm(u,o,n,d.sort((p,f)=>f.order-p.order).flatMap(p=>p.exit),i,void 0));try{return s===r.historyValue&&aje(r._nodes,l)?u:mp(u,{_nodes:d,historyValue:s})}catch(p){throw p}}function ije(e,r,n,o,a){if(o.output===void 0)return;const i=W7(a.id,a.output!==void 0&&a.parent?X7(a.output,e.context,r,n.self):void 0);return X7(o.output,e.context,i,n.self)}function lje(e,r,n,o,a,i,l,s){let c=e;const u=new Set,d=new Set;sje(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(pp(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 nm(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 Tje="#";class lS{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 s2(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 lS(this.config,{actions:{...n,...r.actions},guards:{...o,...r.guards},actors:{...a,...r.actors},delays:{...i,...r.delays}})}resolveState(r){const n=pje(this.root,r.value),o=r2(a2(this.root,n));return i2({_nodes:[...o],context:r.context||{},children:{},status:eS(o,this.root)?"done":r.status||"active",output:r.output,error:r.error,historyValue:r.historyValue},this)}transition(r,n,o){return iS(r,n,o,[]).snapshot}microstep(r,n,o){return iS(r,n,o,[]).microstates}getTransitionData(r,n){return tS(this.root,r.value,r,n)||[]}getPreInitialState(r,n,o){const{context:a}=this.config,i=i2({context:typeof a!="function"&&a?a:{},_nodes:[this.root],children:{},status:"active"},this);return typeof a=="function"?rm(i,n,r,[Qe(({spawn:l,event:s,self:c})=>a({spawn:l,input:s.input,self:c}))],o,void 0):i}getInitialSnapshot(r,n){const o=SG(n),a=[],i=this.getPreInitialState(r,o,a),l=oS([{target:[...jG(this.root)],source:this.root,reenter:!0,actions:[],eventType:null,toJSON:null}],i,r,o,!0,a),{snapshot:s}=iS(l,o,r,a);return s}start(r){Object.values(r.children).forEach(n=>{n.getSnapshot().status==="active"&&n.start()})}getStateNodeById(r){const n=G7(r),o=n.slice(1),a=n2(n[0])?n[0].slice(Tje.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 o2(i,o)}get definition(){return this.root.definition}toJSON(){return this.definition}getPersistedSnapshot(r,n){return xje(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"?K7(this,b):b;if(!x)return;const w=Zf(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 s2)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=i2({...r,children:o,_nodes:Array.from(r2(a2(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===Q7){p[g]=f[b.id];continue}d(b,f)}}}}return d(c.context,o),c}}function Aje(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 $ a(e){function r(n,o){}return r.type="xstate.emit",r.event=e,r.resolve=Aje,r.execute=Rje,r}let sS=(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 15:57:14 +01:00
` ),()=>{w.contains(x)&&w.removeChild(x)}},[r]),y.jsx(FUe,{isPresent:r,childRef:i,sizeRef:l,children:S.cloneElement(e,{ref:c})})}const UUe=({children:e,initial:r,isPresent:n,onExitComplete:o,custom:a,presenceAffectsLayout:i,mode:l,anchorX:s,root:c})=>{const u=gm(qUe),d=S.useId();let p=!0,f=S.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}),S.useMemo(()=>{u.forEach((g,b)=>u.set(b,!1))},[n]),S.useEffect(()=>{!n&&!u.size&&o&&o()},[n]),l==="popLayout"&&(e=y.jsx(HUe,{isPresent:n,anchorX:s,root:c,children:e})),y.jsx(x2.Provider,{value:f,children:e})};function qUe(){return new Map}function JK(e=!0){const r=S.useContext(x2);if(r===null)return[!0,null];const{isPresent:n,onExitComplete:o,register:a}=r,i=S.useId();S.useEffect(()=>{if(e)return a(i)},[e]);const l=S.useCallback(()=>e&&o&&o(i),[i,o,e]);return!n&&o?[!1,l]:[!0]}const w2=e=>e.key||"";function eZ(e){const r=[];return S.Children.forEach(e,n=>{S.isValidElement(n)&&r.push(n)}),r}const Oa=({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]=JK(l),p=S.useMemo(()=>eZ(e),[e]),f=l&&!u?[]:p.map(w2),g=S.useRef(!0),b=S.useRef(p),x=gm(()=>new Map),[w,k]=S.useState(p),[C,_]=S.useState(p);mC(()=>{g.current=!1,b.current=p;for(let R=0;R<C.length;R++){const D=w2(C[R]);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 R=[...p];for(let D=0;D<C.length;D++){const N=C[D], $ =w2(N);f.includes( $ )||(R.splice(D,0,N),T.push(N))}return i==="wait"&&T.length&&(R=T),_(eZ(R)),k(p),null}const{forceRender:A}=S.useContext(xy);return y.jsx(y.Fragment,{children:C.map(R=>{const D=w2(R),N=l&&!u?!1:p===C||f.includes(D), $ =()=>{if(x.has(D))x.set(D,!0);else return;let O=!0;x.forEach(j=>{j||(O=!1)}),O&&(A?.(),_(b.current),l&&d?.(),o&&o())};return y.jsx(UUe,{isPresent:N,initial:!g.current||n?void 0:!1,custom:r,presenceAffectsLayout:a,mode:i,root:c,onExitComplete:N?void 0: $ ,anchorX:s,children:R},D)})})},VUe=S.createContext(null);function YUe(){const e=S.useRef(!1);return mC(()=>(e.current=!0,()=>{e.current=!1}),[]),e}function WUe(){const e=YUe(),[r,n]=S.useState(0),o=S.useCallback(()=>{e.current&&n(r+1)},[r]);return[S.useCallback(()=>Ir.postRender(o),[o]),r]}const GUe=e=>!e.isLayoutDirty&&e.willUpdate(!1);function XUe(){const e=new Set,r=new WeakMap,n=()=>e.forEach(GUe);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 tZ=e=>e===!0,KUe=e=>tZ(e===!0)||e==="id",ym=({children:e,id:r,inherit:n=!0})=>{const o=S.useContext(xy),a=S.useContext(VUe),[i,l]=WUe(),s=S.useRef(null),c=o.id||a;s.current===null&&(KUe(n)&&c&&(r=r?c+"-"+r:c),s.current={id:r,group:tZ(n)&&o.group||XUe()});const u=S.useMemo(()=>({...s.current,forceRender:i}),[l]);return y.jsx(xy.Provider,{value:u,children:e})},gC=S.createContext({strict:!1});function yC(e){for(const r in e)fm[r]={...fm[r],...e[r]}}function ZUe({children:e,features:r,strict:n=!1}){const[,o]=S.useState(!bC(r)),a=S.useRef(void 0);if(!bC(r)){const{renderer:i,...l}=r;a.current=i,yC(l)}return S.useEffect(()=>{bC(r)&&r().then(({renderer:i,...l})=>{yC(l),a.current=i,o(!0)})},[]),y.jsx(gC.Provider,{value:{renderer:a.current,strict:n},children:e})}function bC(e){return typeof e=="function"}const QUe=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 k2(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 .
2025-11-07 15:04:16 +01:00
* /const MYe=[["path",{d:"M5 12l5 5l10 -10",key:"svg-0"}]],LQ=xt("outline","check","Check",MYe);/ * *
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 15:04:16 +01:00
* /const OYe=[["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=xt("outline","copy","Copy",OYe),BQ="https:/ / github . com / ",VC=S.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(BQ);return y.jsx(Qs,{ref:o,variant:"default",radius:"sm",size:"sm",tt:"none",leftSection:e.title?y.jsx(y.Fragment,{children:e.title}):null,rightSection:y.jsx(xW,{value:a,timeout:1500,children:({copy:l,copied:s})=>y.jsx(ir,{className:me({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(LQ,{}):y.jsx(IYe,{stroke:2.5})})}),...n,className:Je(r,"group"),classNames:{root:me({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:me({'&:is([data-position="left"])':{color:"mantine.colors.dimmed",userSelect:"none",pointerEvents:"none",_groupHover:{color:"[var(--badge-color)]",opacity:.7}}})},children:y.jsxs(tc.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($Ye,{height:"12",width:"12",style:{verticalAlign:"middle",marginRight:"4px"}}),i?a.replace(BQ,""):a]})})});function jQ(){const e=S.useContext(j7);if(!e)throw new Error("No LikeC4ViewModel in context found");return e}const D2="--_blur",P2="--_opacity",zYe=me({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(${D2})`,backgroundColor:`[rgb(36 36 36 / var(${P2}, 5%))]`}}),LYe=me({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 15:04:16 +01:00
` ,"& .react-flow__attribution":{display:"none"}}),BYe=me({flex:0,cursor:"move"}),jYe=me({display:"block",fontFamily:"likec4.element",fontOpticalSizing:"auto",fontStyle:"normal",fontWeight:600,fontSize:"24px",lineHeight:"xs"}),YC="40px",FYe=me({flex: ` 0 0 $ { YC } ` ,height:YC,width:YC,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 % ) )
2025-11-07 15:57:14 +01:00
` },"& img":{objectFit:"contain"}}), $ 2="--view-title-color",M2="--icon-color",HYe=me({width:"100%",background:"mantine.colors.body",borderRadius:"sm",padding:"[10px 8px]",transition:"fast",border:"1px dashed",borderColor:"mantine.colors.defaultBorder",[ $ 2]:"{colors.mantine.colors.dark[1]}",_hover:{background:"mantine.colors.defaultHover",[M2]:"{colors.mantine.colors.dark[1]}",[ $ 2]:"{colors.mantine.colors.defaultColor}"},_dark:{background:"mantine.colors.dark[6]"},_light:{[M2]:"{colors.mantine.colors.gray[6]}",[ $ 2]:"{colors.mantine.colors.gray[7]}",_hover:{[M2]:"{colors.mantine.colors.gray[7]}"}},"& .mantine-ThemeIcon-root":{transition:"fast",color: ` [ var ( $ { M2 } , { 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)"}}),UYe=me({transition:"fast",color: ` [ var ( $ { $2 } , { colors . mantine . colors . gray [ 7 ] } ) ] ` ,fontSize:"15px",fontWeight:500,lineHeight:"1.4"}),qYe=me({flex:1,display:"flex",flexDirection:"column",justifyContent:"stretch",overflow:"hidden",gap:"sm"}),VYe=me({background:"mantine.colors.gray[1]",borderRadius:"sm",flexWrap:"nowrap",gap:"1.5",padding:"1",_dark:{background:"mantine.colors.dark[7]"}}),YYe=me({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]"}}}),WYe=me({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"}}}),GYe=me({flex:1,display:"grid",gridTemplateColumns:"min-content 1fr",gridAutoRows:"min-content max-content",gap:"[24px 20px]",alignItems:"baseline",justifyItems:"stretch"}),XYe=me({justifySelf:"end",textAlign:"right",userSelect:"none"}),KYe=me({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]"}});/**
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 15:04:16 +01:00
* /const ZYe=[["path",{d:"M6 9l6 6l6 -6",key:"svg-0"}]],FQ=xt("outline","chevron-down","ChevronDown",ZYe);/ * *
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 15:57:14 +01:00
* / c o n s t Q Y e = [ [ " p a t h " , { d : " M 9 6 l 6 6 l - 6 6 " , k e y : " s v g - 0 " } ] ] , M u = x 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 " , Q Y e ) ; f u n c t i o n H Q ( { c h i l d r e n : e } ) { r e t u r n y . j s x ( y . F r a g m e n t , { c h i l d r e n : e } ) } f u n c t i o n U Q ( { v a l u e : e , i s E x p a n d e d : r } ) { c o n s t [ n , o ] = S . u s e S t a t e ( ! 1 ) , a = S . u s e R e f ( n u l l ) ; r e t u r n S . u s e E f f e c t ( ( ) = > { a . c u r r e n t & & o ( a . c u r r e n t . s c r o l l W i d t h > a . c u r r e n t . c l i e n t W i d t h ) } , [ e ] ) , y . j s x ( n o , { l a b e l : n & & ! r ? e : n u l l , m u l t i l i n e : ! 0 , w : 3 0 0 , w i t h i n P o r t a l : ! 0 , c h i l d r e n : y . j s x ( p t , { r e f : a , c o m p o n e n t : " d i v " , c l a s s N a m e : m e ( { f o n t S i z e : " s m " , p a d d i n g : " x s " , u s e r S e l e c t : " a l l " , c o l o r : " m a n t i n e . c o l o r s . t e x t " , l i n e H e i g h t : 1 . 4 , w h i t e S p a c e : r ? " p r e - w r a p " : " n o w r a p " , o v e r f l o w : r ? " v i s i b l e " : " h i d d e n " , t e x t O v e r f l o w : r ? " u n s e t " : " e l l i p s i s " , w o r d B r e a k : r ? " b r e a k - w o r d " : " n o r m a l " , m i n W i d t h : 0 , w i d t h : " 1 0 0 % " } ) , c h i l d r e n : e } ) } ) } f u n c t i o n J Y e ( { v a l u e s : e , i s E x p a n d e d : r , o n T o g g l e : n } ) { r e t u r n r ? y . j s x ( H o , { g a p : " x s " , c h i l d r e n : e . m a p ( ( o , a ) = > y . j s x s ( Z s , { a l i g n : " c e n t e r " , g a p : " x s " , c h i l d r e n : [ y . j s x ( p t , { c l a s s N a m e : m 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 . g r a y [ 5 ] " , f o n t W e i g h t : 5 0 0 , f l e x S h r i n k : 0 , _ 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 [ 3 ] " } } ) , c h i l d r e n : " • " } ) , y . j s x ( S e , { c l a s s N a m e : m e ( { m i n H e i g h t : " 3 2 p x " , 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 " , f l e x : 1 } ) , c h i l d r e n : y . j s x ( U Q , { v a l u e : o , i s E x p a n d e d : ! 0 } ) } ) ] } , a ) ) } ) : y . j s x ( S e , { c l a s s N a m e : m e ( { m i n H e i g h t : " 3 2 p x " , 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 " , p a d d i n g : " x s " , g a p : " x s " , f l e x W r a p : " w r a p " , m i n W i d t h : 0 , o v e r f l o w : " h i d d e n " } ) , c h i l d r e n : e . m a p ( ( o , a ) = > y . j s x s ( Z s , { a l i g n : " c e n t e r " , g a p : " x s " , s t y l e : { m i n W i d t h : 0 } , c h i l d r e n : [ y . j s x ( p t , { c l a s s N a m e : m e ( { f o n t S i z e : " s m " , p a d d i n g : " [ 4 p x 8 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 . w h i t e " , c o l o r : " m a n t i n e . c o l o r s . t e x t " , b o r d e r R a d i u s : " s m " , b o r d e r : " 1 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 . g r a y [ 3 ] " , w h i t e S p a c e : " n o w r a p " , o v e r f l o w : " h i d d e n " , t e x t O v e r f l o w : " e l l i p s i s " , m a x W i d t h : " m i n ( 2 0 0 p x , 1 0 0 % ) " , m i n W i d t h : " 6 0 p x " , f l e x : " 0 1 a u t o " , u s e r S e l e c t : " a l l " , _ 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 [ 9 ] " , c o l o r : " m a n t i n e . c o l o r s . t e x 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 . d a r k [ 4 ] " } } ) , t i t l e : o , c h i l d r e n : o } ) , a < e . l e n g t h - 1 & & y . j s x ( p t , { c l a s s N a m e : m 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 . g r a y [ 5 ] " , f o n t W e i g h t : 5 0 0 , f l e x S h r i n k : 0 , _ 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 [ 3 ] " } } ) , c h i l d r e n : " • " } ) ] } , a ) ) } ) } f u n c t i o n e W e ( { l a b e l : e , v a l u e : r } ) { c o n s t n = A r r a y . i s A r r a y ( r ) ? r : t y p e o f r = = " s t r i n g " & & r . i n c l u d e s ( `
2025-11-07 15:04:16 +01:00
` )?r.split( `
2025-11-07 15:57:14 +01:00
` ).map(s=>s.trim()).filter(Boolean):[r],o=n.length>1,[a,i]=S.useState(!1),l=()=>{i(!a)};return y.jsxs(y.Fragment,{children:[o?y.jsx(Rr,{onClick:l,className:me({fontSize:"xs",color:"mantine.colors.dimmed",justifySelf:"end",textAlign:"right",userSelect:"none",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:"xs",padding:"[4px 8px]",borderRadius:"sm",whiteSpace:"nowrap",transition:"all 150ms ease",_hover:{backgroundColor:"mantine.colors.gray[1]",color:"mantine.colors.primary[6]",_dark:{backgroundColor:"mantine.colors.dark[7]",color:"mantine.colors.primary[4]"}}}),children:y.jsxs(Zs,{align:"center",gap:"xs",children:[y.jsxs(pt,{component:"span",size:"xs",fw:700,children:[e,":"]}),y.jsx(pt,{component:"span",className:me({fontSize:"xs",fontWeight:500,color:"mantine.colors.gray[6]",backgroundColor:"mantine.colors.gray[1]",padding:"[1px 4px]",borderRadius:"xs",_dark:{color:"mantine.colors.dark[2]",backgroundColor:"mantine.colors.dark[6]"}}),children:n.length}),a?y.jsx(FQ,{size:12}):y.jsx(Mu,{size:12})]})}):y.jsxs(pt,{component:"div",className:me({fontSize:"xs",color:"mantine.colors.dimmed",justifySelf:"end",textAlign:"right",userSelect:"none",whiteSpace:"nowrap",padding:"[4px 8px]",fontWeight:700}),children:[e,":"]}),y.jsx(Se,{className:me({justifySelf:"stretch",alignSelf:"start"}),children:o?y.jsx(JYe,{values:n,isExpanded:a,onToggle:l}):y.jsx(Se,{className:me({minHeight:"32px",display:"flex",alignItems:"center"}),children:y.jsx(UQ,{value:n[0]||"",isExpanded:a})})})]})}const tWe=me({"&[data-level='1']":{marginBottom:"sm"}}),rWe=me({cursor:"default",marginTop:"0",marginBottom:"0"}),qQ=me({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)"}}}),nWe=Je(qQ),oWe=Je(qQ,me({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}}));/**
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 15:04:16 +01:00
* /const aWe=[["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"}]],WC=xt("outline","info-circle","InfoCircle",aWe);/ * *
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 15:04:16 +01:00
* /const iWe=[["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"}]],lWe=xt("outline","target","Target",iWe);/ * *
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 15:57:14 +01:00
* / c o n s t s W 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 " } ] ] , v i = x t ( " o u t l i n e " , " z o o m - s c a n " , " Z o o m S c a n " , s W e ) , c W e = ( { n o d e : e } ) = > y . j s x s ( W r , { c l a s s N a m e : n W 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 ( p 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 ( p 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 } ) ] } ) , u W e = ( { i n s t a n c e : e } ) = > { c o n s t r = Y 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 ( W r , { c l a s s N a m e : o W e , g a p : 4 , c h i l d r e n : [ y . j s x ( h 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 ( l W e , { s t r o k e : 1 . 2 } ) } ) , y . j s x ( p 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 : p 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 ( r o , { 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 ( g 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 ( g o . T a r g e t , { c h i l d r e n : y . j s x s ( r o , { 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 ( g 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 ( g 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 ( h 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 ( v 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 : R 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 W e = ( ) = > { } , p W e = S . m e m o ( ( { e l e m e n t F q n : e } ) = > { c o n s t r = U o ( ) . e l e m e n t ( e ) , n = [ . . . r . d e p l o y m e n t s ( ) ] , o = r y ( { 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 W e ; c o n s t a = S . 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 ( u W 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 ( c W 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 S . 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 ( z 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 ( W 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 ( W 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 : t W e , l a b e l : r W 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 : R e ( 4 ) } } , c h i l d r e n : c ? y . j s x ( r o , { 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 : R e ( 1 6 ) } } , c h i l d r e n : i . l a b e l } ) : i . l a b e l } ) } ) } ) , h W e = ( ) = > { } , V 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 ] & & ! J 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 O 2 ( e , r , n , o ) { c o n s t a = K j ( ) ; X j ( a ? h W e : e , r , V Q , o ) } f u n c t i o n f W 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 Q i ( M a t h . f l o o r ( e ) , { m i n : 1 , m a x : 4 } ) } l e t I 2 ; f u n c t i o n x i ( e ) { r e t u r n I 2 ? ? = f W e ( ) , I 2 < 2 ? M a t h . r o u n d ( e ) : M a t h . r o u n d ( e * I 2 ) / I 2 } f u n c t i o n m W e ( e ) { s w i t c h ( e ) { c a s e " d o t s " : r e t u r n Z i . D o t s ; c a s e " l i n e s " : r e t u r n Z i . L i n e s ; c a s e " c r o s s " : r e t u r n Z i . C r o s s ; d e f a u l t : J a ( e ) } } f u n c t i o n g W 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 ( W U , { v a r i a n t : m W e ( e ) , s i z e : 2 , g a p : 2 0 } ) : y . j s x ( W U , { . . . e } ) } c o n s t h 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 } , f l = . 0 5 , G C = 3 , z 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 8 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 " } } , Y 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 y W e ( e , r ) { r e t u r n r ! = = v o i d 0 ? Y Q ( e , r ) : n = > Y Q ( n , e ) } c o n s t W 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 b W e ( e , r ) { r e t u r n r ! = = v o i d 0 ? W Q ( e , r ) : n = > W Q ( n , e ) } f u n c t i o n G Q ( e , r ) { r e t u r n s D 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 v W e ( e , r ) { r e t u r n r ! = = v o i d 0 ? G Q ( e , r ) : n = > G 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 15:57:14 +01:00
* / c o n s t f G e = [ [ " p a t h " , { d : " M 8 9 l 4 - 4 l 4 4 " , k e y : " s v g - 0 " } ] , [ " p a t h " , { d : " M 1 6 1 5 l - 4 4 l - 4 - 4 " , k e y : " s v g - 1 " } ] ] , H T = x t ( " o u t l i n e " , " s e l e c t o r " , " S e l e c t o r " , f G e ) , m G 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 } } , g G e = ( ) = > { } , y G e = S . m e m o ( ( ) = > { c o n s t e = O 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 } = L 2 ( m G e ) , s = S . u s e R e f ( n u l l ) , c = S . u s e R e f ( n u l l ) , u = U o ( ) . f i n d E l e m e n t ( r ) , d = u G e ( o = = = " v i e w " & & n ? n : v o i d 0 ) , p = r y ( { 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 = g G e , S . u s e E f f e c t ( ( ) = > { R 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 ( W 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 ( W 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 ( b 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 ( E u , { c h i l d r e n : y . j s x ( r o , { 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 ( H T , { s i z e : 1 6 } ) , c h i l d r e n : y . j s x ( p 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 ( K 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 ( n 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 : t e e , c h i l d r e n : y . j s x ( W 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 : h G 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 ( W 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 ( i 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 ( M u , { 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 ( p 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 ( W 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 ( n 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 ( J 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 } ] } ) } ) } ) ] } ) ] } ) } ) , H 2 = ( e , r ) = > M a t h . a b s ( e - r ) < 2 . 5 , b G 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 ) & & H 2 ( e . s o u r c e X , r . s o u r c e X ) & & H 2 ( e . s o u r c e Y , r . s o u r c e Y ) & & H 2 ( e . t a r g e t X , r . t a r g e t X ) & & H 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 U T ( e ) { r e t u r n S . m e m o ( e , b G e ) } c o n s t v G 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 " ] , r e e = M 0 ( v G e , e = > [ ` e n a b l e $ { e } ` , ! 1 ] ) , q T = S . c r e a t e C o n t e x t ( r e e ) , x G 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 E 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 = S . u s e C o n t e x t ( q T ) , [ a , i ] = S . u s e S t a t e ( o ) ; r e t u r n S . u s e E f f e c t ( ( ) = > { i ( l = > { c o n s 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 15:57:14 +01:00
* /const jGe=[["path",{d:"M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11",key:"svg-0"}]],FGe=xt("outline","bolt","Bolt",jGe),HGe=qo({position:"absolute",zIndex:1,justifyContent:"center",alignItems:"center",_smallZoom:{display:"none"}}),UGe=qo({gap:"1.5",justifyContent:"center",alignItems:"center"});function Y2({selected:e=!1,data:{hovered:r=!1},buttons:n}){const o=Ra();return n.length?y.jsx(Gr,{className:HGe,style:{top:"calc(100% - 30px)",transform:"translateX(-50%)",left:"50%",width:"auto",minHeight:30},children:y.jsx(nn,{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(ir,{component:gl,className:A2({}),initial:!1,whileTap:{scale:1},whileHover:{scale:1.3},onClick:a.onClick,onDoubleClick:pn,children:a.icon||y.jsx(FGe,{})},`${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 .
2025-11-07 15:57:14 +01:00
* /const qGe=[["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"}]],jy=xt("outline","transform","Transform",qGe);/ * *
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 15:04:16 +01:00
* / c o n s t V 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 " } ] ] , x m = x 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 " , V G e ) , Y 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 } = E r ( ) , o = Y t ( ) , a = V 2 ( ) , i = O y ( ) , l = L 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 ( v 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 ( j 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 ( x 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 ( Y 2 , { b u t t o n s : s , . . . e } ) } ; f u n c t i o n F 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 = Q 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 + Q i ( ( 1 0 0 - u ) * ( s / 1 0 0 ) , { m i n : 0 , m a x : 1 0 0 - u } ) , p = J 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 = Q 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 ( n n , { 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 H y ( { d a t a : e } ) { c o n s t r = W 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 ( p 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 i e e = c 0 ( { 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 " } } } } } ) ; / * *
* @ 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 15:57:14 +01:00
* / c o n s t W 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 " } ] ] , Y T = x t ( " o u t l i n e " , " i d " , " I d " , W G e ) ; f u n c t i o n l e e ( { 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 = l 9 ( e , e ? 1 3 0 : 0 ) [ 0 ] & & e ; r e t u r n y . j s x ( n n , { 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 ( i r , { c l a s s N a m e : J e ( " n o d r a g n o p a n " , i e e ( { d e l a y : e & & ! o } ) , A 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 : p n , c h i l d r e n : r ? ? y . j s x ( Y 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 G G e = m 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 " } } ) , w m = S . 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 } = n 3 ( a . s t y l e ? ? { } ) ; r e t u r n y . j s x ( n n , { r e f : u , c l a s s N a m e : J e ( G 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 } ) } ) ; w 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 s e e ( 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 = x 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
2025-11-07 15:04:16 +01:00
` .replace(/ \s +/g," ").trim(),ry:i,rx:a}}function cee(e,r,n=.185){const o=r,a=Math.round(o/2),i=xi(o/2*n),l=e-2*i;return{path: `
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
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 15:57:14 +01:00
z ` .replace(/ \s +/g," ").trim(),ry:a,rx:i}}const Sp={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 uee({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-Sp.width-6,y:n-Sp.height,width:Sp.width,height:Sp.height,viewBox: ` 0 0 $ { Sp . width } $ { Sp . height } ` ,"data-likec4-fill":"mix-stroke",children:y.jsx("path",{strokeWidth:0,d:Sp.path})})]});case"queue":{const{path:o,rx:a,ry:i}=cee(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}=see(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 Ja(e)}}function XGe({shape:e,w:r,h:n}){let o;switch(e){case"queue":o=y.jsx("path",{d:cee(r,n).path});break;case"storage":case"cylinder":{o=y.jsx("path",{d:see(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 KGe({multiple:e,withOutLine:r}){return y.jsxs("div",{className:vQ({shapetype:"html"}),children:[e&&y.jsx("div",{className:"likec4-shape-multiple"}),r&&y.jsx("div",{className:"likec4-shape-outline"})]})}function km({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(KGe,{multiple:l,withOutLine:o});const s=vQ({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(uee,{shape:e.shape,w:a,h:i})}),y.jsxs("svg",{className:s,viewBox: ` 0 0 $ { a } $ { i } ` ,children:[o&&y.jsx(XGe,{shape:e.shape,w:a,h:i}),y.jsx(uee,{shape:e.shape,w:a,h:i})]})]})}const Cp=S.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(pt,{component:"span",fz:"xs",c:"dimmed",style:{userSelect:"none"},children:a})};return y.jsx(Gr,{ref:u,...c,className:Je(nYe({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})});Cp.displayName="Markdown";const dee=S.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,ref:n,className:Je(e,tYe(),"likec4-element")})),pee=({data:e,...r})=>y.jsx(W3,{element:e,...r}),hee=S.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,className:Je(e,"likec4-element-node-content"),ref:n})),fee=S.forwardRef(({data:{title:e,style:r},className:n,...o},a)=>{const{size:i}=n3(r),l=i==="sm"||i==="xs";return y.jsx(pt,{component:"div",...o,className:J
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 15:04:16 +01:00
* / c o n s t n X e = [ [ " p a t h " , { d : " M 1 5 6 l - 6 6 l 6 6 " , k e y : " s v g - 0 " } ] ] , y e e = x 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 " , n X e ) , o X e = { e l e m e n t : J G e , c o m p o u n d : e X e , e m p t y : L G e } , a X e = { r e l a t i o n s h i p : I G e } ; f u n c t i o n b e e ( { a c t o r R e f : e } ) { c o n s t r = S . 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 ( X 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 ( I x , { . . . r . c u r r e n t , c h i l d r e n : y . j s x ( y 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 ( O a , { c h i l d r e n : y . j s x ( s X e , { } ) } ) } ) } ) } ) } c o n s t i X 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 } ) , l X e = ( e , r ) = > e . i s A c t i v e = = = r . i s A c t i v e & & J n ( e . n o d e s , r . n o d e s ) & & J n ( e . e d g e s , r . e d g e s ) , s X e = S . m e m o ( ( ) = > { c o n s t e = O y ( ) , { i s A c t i v e : r , n o d e s : n , e d g e s : o } = L 2 ( i X e , l X e ) ; r e t u r n y . j s x ( X 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 : o X e , e d g e T y p e s : a X e , f i t V i e w : ! 1 , o n N o d e C l i c k : o 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 : o 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 : o 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 : o 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 : o 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 : o 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 : o 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 : o 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 : o 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 : o 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 ( u X e , { } ) } ) } ) , c X 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 } ) , u X e = S . m e m o ( ( ) = > { c o n s t e = O 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 } = L 2 ( c X e ) , i = y r ( ) , l = b f ( ) ; S . 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 = c G e ( r , n , o ) , [ c , u , { h i s t o r y : d , c u r r e n t : p } ] = n V ( r ) ; S . u s e E f f e c t ( ( ) = > { c ! = = r & & u . s e t ( r ) } , [ r ] ) , S . 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 ] ) , Z 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 ( d X 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 ( f 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 ( i 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 ( X f , { } ) } ) } ) ] } ) } ) , d X 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 ( f 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 ( W 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 ( O 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 ( d 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 ( i 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 ( y e e , { } ) } ) } , " b a c k " ) , r & & y . j s x ( d 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 ( i 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 ( M u , { } ) } ) } , " f o r w a r d " ) ] } ) , y . j s x ( y G e , { } ) ] } ) } ) , p X e = m 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 ) " } ) , h X e = m 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 ] " } } } ) , f X e = m 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 ] " } } ) ; m 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 .
2025-11-07 15:04:16 +01:00
* /const mXe=[["path",{d:"M5 12l14 0",key:"svg-0"}],["path",{d:"M13 18l6 -6",key:"svg-1"}],["path",{d:"M13 6l6 6",key:"svg-2"}]],_m=xt("outline","arrow-right","ArrowRight",mXe);/ * *
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 15:04:16 +01:00
* / c o n s t g X 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 " } ] ] , v e e = x 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 " , g X e ) , y X e = n 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 X e ( { n o d e : e , e l e m e n t : r } ) { c o n s t n = t X ( ) , o = Q V e ( ) , a = C 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 ? Q 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 ? Q 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 ( H o , { 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 ( W 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 ( W 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 ( x 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 ( h 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 ( _ m , { s t y l e : { w i d t h : 1 6 } } ) } ) , y . j s x ( p t , { c l a s s N a m e : p X e , c h i l d r e n : C 1 ( r . i d ) } ) , y . j s x ( h 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 ( _ m , { s t y l e : { w i d t h : 1 6 } } ) } ) , y . j s x ( x 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 ( y X 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 ( W 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 ( W C , { s t y l e : { w i d t h : 1 4 } } ) , y . j s x s ( p 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 : f X 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 ( b 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 ( i 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 ( v 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 x 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 ( L 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 : h X 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 ( H o , { 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 ( p 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 ( p 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 v X e = m 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 " } ) , x X e = m 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 ) " } } } ) , G T = ( { e l e m e n t : e } ) = > y . j s x ( S e , { c l a s s N a m e : x X e , c h i l d r e n : y . j s x ( p 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 } ) } ) , w X e = ( ) = > { } ; f u n c t i o n k X e ( { e l e m e n t : e } ) { c o n s t r = r y ( { m u l t i p l e : ! 1 } ) ; r . s e t H o v e r e d N o d e = w X e ; c o n s t n = S . 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 ( G 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 ( G 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 ( W 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 ( G 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 S . 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 ( z 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 ( W 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 ( s 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 15:57:14 +01:00
* / c o n s t _ X 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 " } ] ] , X T = x t ( " o u t l i n e " , " s t a c k - 2 " , " S t a c k 2 " , _ X e ) , w e e = U 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 " } ) , k e e = n 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 } ) , _ e e = p 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 } ) , U y = p 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 : X Y e } ) , E m = 2 4 , E X 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 S X 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 ] = S . u s e S t a t e ( ! 1 ) , s = K 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 ] = V 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 = Y t ( ) , g = j 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 ] = k n ( [ . . . x . v i e w s ( ) ] , N o ( Z = > Z . $ v i e w ) , b q ( Z = > Z . _ t y p e = = = " e l e m e n t " & & Z . 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 _ = H x ( x . l i n k s ) , T = Z V e ( ) , A = ( b ? . $ n o d e . c h i l d r e n ? . l e n g t h ? ? 0 ) > 0 , R = M a t h . m i n ( 7 0 0 , c - E m * 2 ) , D = M a t h . m i n ( 6 5 0 , u - E m * 2 ) , N = n ? { x : n . x + ( A ? n . w i d t h - R / 2 : n . w i d t h / 2 ) , y : n . y + ( A ? 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 / R , n . h e i g h t / D , . 9 ) : 1 , O = M a t h . r o u n d ( Q i ( N . x - R / 2 , { m i n : E m , m a x : c - R - E m } ) ) , j = M a t h . r o u n d ( Q i ( N . y - ( A ? 0 : 6 0 ) , { m i n : E m , m a x : u - D - E m } ) ) , L = Q i ( ( N . x - O ) / R , { m i n : . 1 , m a x : . 9 } ) , Y = Q i ( ( N . y - j ) / D , { m i n : . 1 , m a x : . 9 } ) , M = l Q ( R ) , U = l Q ( D ) ; O 2 ( ( ) = > { M . s e t ( R ) , U . s e t ( D ) } , [ R , D ] ) ; c o n s t z = S . u s e C a l l b a c k ( ( Z , B ) = > { M . s e t ( M a t h . m a x ( M . g e t ( ) + B . d e l t a . x , 3 2 0 ) ) , U . s e t ( M a t h . m a x ( U . g e t ( ) + B . d e l t a . y , 3 0 0 ) ) } , [ ] ) , H = S . u s e R e f ( n u l l ) , q = n f ( a ) , K = G 3 ( ( ) = > { q . c u r r e n t ( ) } , [ ] , 5 0 ) , V = b ? . $ n o d e . n o t a t i o n ? ? n u l l , X = W 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 : F Y e } ) ; r e t u r n K 3 ( ( ) = > { H . c u r r e n t ? . o p e n | | H . c u r r e n t ? . s h o w M o d a l ( ) } , 2 0 ) , K 3 ( ( ) = > { l ( ! 0 ) } , 2 2 0 ) , y . j s x ( d l . d i a l o g , { r e f : H , c l a s s N a m e : J e ( z Y e , O 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 : { [ D 2 ] : " 0 p x " , [ P 2 ] : " 5 % " } , a n i m a t e : { [ D 2 ] : " 3 p x " , [ P 2 ] : " 6 0 % " } , e x i t : { [ D 2 ] : " 0 p x " , [ P 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 : Z = > { Z . s t o p P r o p a g a t i o n ( ) , Z . 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 " & & H . 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 : p n , o n P o i n t e r D o w n : p n , o n C l o s e : Z = > { Z . s t o p P r o p a g a t i o n ( ) , K ( ) } , c h i l d r e n : y . j s x ( O 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 ( d 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 : L Y e , i n i t i a l : { t o p : j , l e f t : O , w i d t h : R , 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 : M , 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 : B Y e , o n P o i n t e r D o w n : Z = > T . s t a r t ( Z ) , c h i l d r e n : [ y . j s x s ( S 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 ( S 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 : [ X , y . j s x s ( " d i v " , { c h i l d r e n : [ y . j s x ( p t , { c o m p o n e n t : " d i v " , c l a s s N a m e : j Y e , c h i l d r e n : x . t i t l e } ) , V & & y . j s x ( p 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 : V } ) ] } ) ] } ) , y . j s x ( l p , { s i z e : " l g " , o n C l i c k : Z = > { Z . s t o p P r o p a g a t i o n ( ) , K ( ) } } ) ] } ) , y . j s x s ( S 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 ( _ e e , { c h i l d r e n : " k i n d " } ) , y . j s x ( Q 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 : 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 ( ` 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 ( _ e e , { c h i l d r e n : " t a g s " } ) , y . j s x s ( Z s , { 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 ( Z = > y . j s x ( N 2 , { t a g : Z , c u r s o r : " p o i n t e r " , o n C l i c k : B = > { B . 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 ( ` # $ { Z } ` ) } } , Z ) ) , x . t a g s . l e n g t h = = = 0 & & y . j s x ( Q 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 ( D 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 ( i 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 ( v 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 ( w G 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 ( k 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 ( i 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 : Z = > { Z . 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 15:57:14 +01:00
* /const jKe=[["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"}]],oA=xt("outline","search","Search",jKe);function jee(e){return e.match(/ ^ ( k | ki | kin | kind | kind : ) $ / ) != null } const FKe = [ "#" , "kind:" ] , HKe = S . memo ( ( ) => { const e = Ou ( ) , r = Uo ( ) , n = S . useRef ( null ) , { ref : o , focused : a } = o$e ( ) , [ i , l ] = cKe ( ) , s = pW ( { scrollBehavior : "smooth" , loop : ! 1 } ) ; Af ( "keydown" , d => { try { ! a && ( d . key === "Backspace" || d . key . startsWith ( "Arrow" ) || d . key . match ( new RegExp ( "^\\p{L}$" , "u" ) ) ) && Vy ( 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 ( W0 , { children : "No tags found" } , "empty-tags" ) ] ) : ( u = r . tags . some ( f => f . toLocaleLowerCase ( ) === d ) , c = p . map ( f => y . jsxs ( G0 , { value : ` # ${ f } ` , children : [ y . jsx ( pt , { component : "span" , opacity : . 5 , mr : 1 , fz : "sm" , children : "#" } ) , f ] } , f ) ) ) ; break } case i . startsWith ( "kind:" ) : case jee ( i ) : { const d = i . length > 5 ? i . slice ( 5 ) . toLocaleLowerCase ( ) : "" ; let p = ZE ( r . specification . elements ) ; d && ( p = p . filter ( f => f . toLocaleLowerCase ( ) . includes ( d ) ) ) , p . length === 0 ? ( u = ! 1 , c = [ y . jsx ( W0 , { children : "No kinds found" } , "empty-kinds" ) ] ) : ( u = p . some ( f => f . toLocaleLowerCase ( ) === d ) , c = p . map ( f => y . jsxs ( G0 , { value : ` kind: ${ f } ` , children : [ y . jsx ( pt , { component : "span" , opacity : . 5 , mr : 1 , fz : "sm" , children : "kind:" } ) , f ] } , f ) ) ) ; break } } return y . jsxs ( to , { onOptionSubmit : d => { l ( d ) , s . resetSelectedOption ( ) , FKe . includes ( d ) || ( s . closeDropdown ( ) , setTimeout ( ( ) => { J2 ( n . current ) } , 350 ) ) } , width : "max-content" , position : "bottom-start" , shadow : "md" , offset : { mainAxis : 4 , crossAxis : 50 } , store : s , withinPortal : ! 1 , children : [ y . jsx ( m7 , { children : y . jsx ( Pa , { ref : Mr ( 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 : OKe } , size : "lg" , value : i , leftSection : y . jsx ( oA , { style : { width : Re ( 20 ) } , stroke : 2 } ) , rightSection : y . jsx ( Pa . 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 ( ) , wi ( d ) ; case c . length === 1 : return s . selectFirstOption ( ) && s . clickSelectedOption ( ) , wi ( d ) ; case jee ( i ) : return l ( "kind:" ) , wi ( d ) } return } if ( d . key === "Backspace" && s . dropdownOpened ) { if ( i === "kind:" ) return l ( "" ) , s . resetSelectedOption ( ) , wi ( d ) ; if ( i . startsWith ( "kind:" ) && u ) return l ( "kind:" ) , s . resetSelectedOption ( ) , wi ( d ) ; if ( i . startsWith ( "#" ) && u ) return l ( "#" ) , s . resetSelectedOption ( ) , wi ( d ) } if ( d . key === "Escape" && s . dropdownOpened && c . length > 0 ) { wi ( d ) , s . closeDropdown ( ) ; return } if ( d . key === "ArrowUp" && s . dropdownOpened && i === "" && s . getSelectedOptionIndex ( ) === 0 ) { s . closeDropdown ( ) , wi ( d ) ; return } if ( d . key === "ArrowDown" && ( ! s . dropdownOpened || c . length === 0 || u || i === "" && s . getSelectedOptionIndex ( ) === c . length - 1 ) ) { s . closeDropdown ( ) , wi ( d ) , J2 ( n . current ) ; return } } } ) } ) , y . jsx ( Lw , { hidden : c . length === 0 , style : { minWidth : 300 } , children : y . jsx ( Bw , { children : y . jsx ( na , { mah : "min(322px, calc(100cqh - 50px))" , type : "scroll" , children : c } ) } ) } ) ] } ) } ) , UKe = me ( { backgroundColor : "[rgb(34 34 34 / var(--_opacity, 95%))]" , _light : { backgroundColor : "[rgb(250 250 250 / var(--_opacity, 95%))]" } , backdropFilter : "auto" , backdropBlur : "var(--_blur, 10px)" } ) , qKe = me ( { 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]" } ) , VKe = e => ! e . matches ( "inactive" ) ; function YKe ( { searchActorRef : e } ) { const r = Cn ( e , VKe ) , n = ( ) => { e . send ( { type : "open" } ) } , o = ot ( ( ) => { e . send ( { type : "close" } ) } ) ; return t$e ( [ [ "mod+k" , n , { preventDefault : ! 0 } ] , [ "mod+f" , n , { preventDefault : ! 0 } ] ] ) , y . jsx ( lKe , { value : e , children : y . jsx ( Ep . Overlays , { children : y . jsx ( V7 , { FallbackComponent : Y7 , onReset : o , children : y . jsx ( Oa , { children : r && y . jsx ( qy , { 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 15:57:14 +01:00
* /const dZe=[["path",{d:"M5 12l14 0",key:"svg-0"}],["path",{d:"M5 12l6 6",key:"svg-1"}],["path",{d:"M5 12l6 -6",key:"svg-2"}]],pZe=xt("outline","arrow-left","ArrowLeft",dZe),hZe=()=>{const e=Yt(),{hasStepBack:r,hasStepForward:n}=Ma(o=>({hasStepBack:o.navigationHistory.currentIndex>0,hasStepForward:o.navigationHistory.currentIndex<o.navigationHistory.history.length-1}));return y.jsxs(nn,{layout:"position",className:qo({gap:"0.5"}),children:[y.jsx(Tp,{disabled:!r,onClick:o=>{o.stopPropagation(),e.navigate("back")},children:y.jsx(pZe,{size:14})}),y.jsx(Tp,{disabled:!n,onClick:o=>{o.stopPropagation(),e.navigate("forward")},children:y.jsx(_m,{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 15:57:14 +01:00
* / c o n s t f Z 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 " } ] ] , m Z e = x t ( " o u t l i n e " , " l i n k " , " L i n k " , f Z e ) , g 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 ; 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 } } , y Z e = e = > { c o n s t [ r , n ] = S . u s e S t a t e ( ! 1 ) , o = Y e e ( g Z e ) , a = T m ( ) ; r e t u r n y . j s x s ( b 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 Z 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 ( v Z e , { d a t a : o , o n C l o s e : ( ) = > n ( ! 1 ) } ) ] } ) } , b Z e = ( { l i n k s C o u n t : e , o n O p e n : r } ) = > y . j s x ( b r . T a r g e t , { c h i l d r e n : y . j s x s ( R r , { c o m p o n e n t : g 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 ( Y T , { s i z e : 1 6 , s t r o k e : 1 . 8 } ) , e > 0 & & y . j s x s ( S n , { g a p : " [ 1 p x ] " , c h i l d r e n : [ y . j s x ( m Z e , { s i z e : 1 4 , s t r o k e : 2 } ) , y . j s x ( G 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 } ) ] } ) ] } ) } ) , X e e = t c ( " 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 " } } ) , v Z 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 = Y t ( ) ; r e t u r n s l ( " p a n e C l i c k " , i ) , s l ( " n o d e C l i c k " , i ) , y . j s x s ( b 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 " , o y ( { 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 ( p 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 ( S 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 ( x Z e , { l a b e l : " i d " , v a l u e : e } ) , y . j s x ( S 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 ( N 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 ( X e e , { c h i l d r e n : " L i n k s " } ) , y . j s x ( S 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 ( V C , { v a l u e : s } , ` $ { c } - $ { s . u r l } ` ) ) } ) ] } ) , n . i s E m p t y & & y . j s x ( p 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 ( X 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 ( C 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 : m e ( { u s e r S e l e c t : " a l l " } ) } ) ] } ) ] } ) } , x Z e = ( { l a b e l : e , v a l u e : r } ) = > y . j s x s ( S n , { g a p : " 0 . 5 " , c h i l d r e n : [ y . j s x ( w Z e , { c h i l d r e n : e } ) , y . j s x ( Q 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 : m 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 : m e ( { o v e r f l o w : " v i s i b l e " } ) , s e c t i o n : m 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 } ) ] } ) , w Z e = t c ( " 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 " } } ) , k Z e = ( ) = > { c o n s t e = V 2 ( ) , { e n a b l e V s c o d e : r } = E r ( ) , { o n O p e n S o u r c e : n } = d c ( ) ; r e t u r n r ? y . j s x ( W 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 ( T 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 ( x 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 15:04:16 +01:00
* /const _Ze=[["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"}]],EZe=xt("outline","lock","Lock",_Ze);/ * *
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 15:57:14 +01:00
* /const SZe=[["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"}]],CZe=xt("outline","lock-open-2","LockOpen2",SZe),TZe=e=>({visible:e.features.enableReadOnly!==!0,isReadOnly:e.toggledFeatures.enableReadOnly??e.features.enableReadOnly}),AZe=()=>{const{visible:e,isReadOnly:r}=Ma(TZe),n=Yt();return e?y.jsxs(Rr,{component:gl,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(EZe,{size:14,stroke:2}):y.jsx(CZe,{size:14,stroke:2}),r&&y.jsx(nn,{className:me({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 15:57:14 +01:00
* / c o n s t R Z 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 " } ] ] , N Z e = x 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 " , R Z e ) , K e e = S . f o r w a r d R e f ( ( e , r ) = > y . j s x ( r o , { 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 : g 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 : m e ( { f l e x S h r i n k : 0 } ) } ) ) ; f u n c t i o n D Z e ( ) { c o n s t e = Y t ( ) , r = Y y ( ) ; r e t u r n y . j s x ( W 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 ( K 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 : m 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 : m 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 ( N Z 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 P Z 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 ( n n , { 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 ( J 0 , { s i z e : " x s " , v a l u e : e , c o m p o n e n t : n n , 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 : m 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 $ Z e ( ) { c o n s t e = M a ( n = > n . d y n a m i c V i e w V a r i a n t ) , r = Y 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 ( P Z 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 ( D Z 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 M Z e ( ) { c o n s t e = Y t ( ) , r = h f ( ) ; r e t u r n y . j s x s ( R r , { c o m p o n e n t : g 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 ( o A , { s i z e : 1 4 , s t r o k e : 2 . 5 } ) , y . j s x ( G 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 O 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 ( ) } } , I Z e = ( ) = > { c o n s t e = Y 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 } = E 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 } = C n ( e . a c t o r R e f , O 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 ( R r , { c o m p o n e n t : g l , c l a s s N a m e : J e ( r 4 ( { 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 " , m 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 ( G e e , { } , ` s e p a r a t o r - $ { p } ` ) ] ) , c = y . j s x ( R r , { c o m p o n e n t : g 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 " , r 4 ( { t r u n c a t e : ! 0 } ) , m 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 ( O a , { p r o p a g a t e : ! 0 , c h i l d r e n : [ y . j s x ( u Z e , { } , " b u r g e r - b u t t o n " ) , n & & y . j s x ( h Z e , { } , " n a v - b u t t o n s " ) , y . j s x s ( n n , { 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 ( n n , { 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 ( y Z 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 ( k Z e , { } ) , y . j s x ( A Z e , { } ) ] } , " a c t i o n s " ) , o & & l & & y . j s x ( $ 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 ( M Z e , { } , " s e a r c h - c o n t r o l " ) ] } ) } , c A = S . 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 ( D 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 : y Y 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 } ) ) ; c A . 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 z Z e = S . c r e a t e C o n t e x t ( n u l l ) , L Z e = [ ] , B Z e = ( ) = > { } , j Z e = { p r o j e c t s : L Z e , o n P r o j e c t C h a n g e : B Z e } ; f u n c t i o n F Z e ( ) { r e t u r n S . u s e C o n t e x t ( z Z e ) ? ? j Z e } f u n c t i o n H Z e ( ) { c o n s t e = S . 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 15:57:14 +01:00
* /const qZe=[["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"}]],VZe=xt("filled","direction-sign-filled","DirectionSignFilled",qZe);/ * *
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 15:04:16 +01:00
* /const YZe=[["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"}]],WZe=xt("filled","star-filled","StarFilled",YZe);/ * *
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 15:57:14 +01:00
* / c o n s t G 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 " } ] ] , X Z e = x 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 " , G Z e ) , Z e e = z 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 K Z e ( ) { c o n s t e = Y y ( ) , r = C 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 ) ; s l ( " p a n e C l i c k " , ( ) = > { e . c l o s e D r o p d o w n ( ) } ) , s 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 = l $ 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 ( K s , { c l a s s N a m e : J e ( " n o w h e e l " , o y ( { 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 ( U Z e , { } ) , y . j s x ( S n , { g a p : " x s " , c h i l d r e n : y . j s x ( l Q 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 : Z e e } ) } ) , y . j s x ( n 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 : m 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 ( Q Z e , { s e a r c h Q u e r y : q 3 ( r ) . t o L o w e r C a s e ( ) } ) : y . j s x ( o Q e , { } ) } ) ] } ) } c o n s t Z Z e = B I ( E a ) ; f u n c t i o n Q Z e ( { s e a r c h Q u e r y : e } ) { c o n s t r = U o ( ) , n = Y y ( ) , o = e . i n c l u d e s ( E a ) , a = k n ( r . v i e w s ( ) , F d ( l = > o & & l . $ v i e w . t i t l e ? q 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 ) ) , c 8 e ( 2 0 ) , i 0 ( ) , R D e ( ( l , s ) = > Z 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 ( E a ) : e ; r e t u r n y . j s x ( n 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 : m 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 ( G f , { g a p : " 0 . 5 " , c h i l d r e n : a . m a p ( l = > y . j s x ( e Q 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 : Z e e } , l . i d ) ) } ) } ) } c o n s t J 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 ! " } } ) , Q e e = m 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 e Q 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 = e t e [ e . i d = = = " i n d e x " ? " i n d e x " : e . _ t y p e ] , i = y . j s x ( J s , { c o m p o n e n t : " d i v " , c l a s s N a m e : J e ( Q e e , r 4 ( { t r u n c a t e : ! 0 } ) , m 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 " , J Z e ) ; i f ( o . i s R o o t ) r e t u r n y . j s x s ( R 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 ( J s , { c o m p o n e n t : " d i v " , c l a s s N a m e : J e ( m 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 " } } ) , Q e e , r 4 ( { 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 : G 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 ( S n , { g a p : " [ 4 p x ] " , c h i l d r e n : [ a , i ] } ) ) , y . j s x s ( R r , { . . . n , c l a s s N a m e : l , c h i l d r e n : [ J e e , y . j s x ( j w , { s e p a r a t o r : y . j s x ( M u , { 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 t Q e = y . j s x ( M u , { 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 " } ) , J e e = y . j s x ( X Z e , { s i z e : 1 6 , c l a s s N a m e : m 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 } } ) } ) , n 4 = m 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 } } ) , e t e = { i n d e x : y . j s x ( W Z e , { s i z e : 1 6 , c l a s s N a m e : n 4 } ) , e l e m e n t : y . j s x ( v i , { s i z e : 1 8 , s t r o k e : 2 , c l a s s N a m e : n 4 } ) , d e p l o y m e n t : y . j s x ( X T , { s i z e : 1 6 , s t r o k e : 1 . 5 , c l a s s N a m e : n 4 } ) , d y n a m i c : y . j s x ( V Z e , { s i z e : 1 8 , c l a s s N a m e : n 4 } ) } , r Q e = n 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 : m 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 t t 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 15:04:16 +01:00
* /const dQe=[["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"}]],pQe=xt("outline","focus-centered","FocusCentered",dQe),hQe=()=>{const e=Yt();return y.jsx(o4,{label:"Center camera",children:y.jsx(Tp,{onClick:()=>e.fitDiagram(),children:y.jsx(pQe,{})})})};me({gap:"xxs",_empty:{display:"none"}}),me({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"}}}),me({shadow:{base:"md",_whenPanning:"none"}}),me({"& .tabler-icon":{width:"65%",height:"65%"}});const a4=me({flex:"1 1 40%",textAlign:"center",fontWeight:500,padding:"[4px 6px]",fontSize:"11px",zIndex:1}),fQe=me({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]"}}),mQe=me({position:"relative",borderRadius:"sm",background:"mantine.colors.gray[3]",boxShadow:"inset 1px 1px 3px 0px #00000024",_dark:{background:"mantine.colors.dark[7]"}}),gQe=me({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 15:57:14 +01:00
* / c o n s t y Q 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 " } ] ] , b Q e = x 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 " , y Q e ) , v Q 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 } ) , x Q e = ( ) = > { c o n s t { o n C h a n g e : e } = d c ( ) , r = Y t ( ) , [ n , o ] = S . u s e S t a t e ( n u l l ) , [ a , i ] = S . 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 } = M a ( v Q e ) , { r e f : c , h o v e r e d : u } = d 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 ( b 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 ( E u , { c h i l d r e n : y . j s x ( o 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 ( T p , { c h i l d r e n : y . j s x ( b Q e , { } ) } ) } ) } ) , y . j s x ( K 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 ( I 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 : f Q e } ) , y . j s x ( S e , { m b : 1 0 , c h i l d r e n : y . j s x ( p 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 ( Z s , { 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 ( R r , { c l a s s N a m e : a 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 ( R r , { c l a s s N a m e : a 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 ( R r , { c l a s s N a m e : a 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 ( R r , { c l a s s N a m e : a 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 ( p 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 ( w Q 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 ) ] } ) } ) ] } ) } , A m = 4 0 0 , w Q e = S . 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 = G 3 ( ( { x : f , y : g } ) = > { e | | ( [ f , g ] = [ g , f ] ) , o ( M a t h . r o u n d ( f * A m ) , M a t h . r o u n d ( g * A m ) ) } , [ o , e ] , 2 5 0 , 2 e 3 ) , [ l , s ] = Y s ( { d e f a u l t V a l u e : Y P e ( { x : ( r ? ? 1 0 0 ) / A m , y : ( n ? ? 1 2 0 ) / A m } ) , o n C h a n g e : i } ) , { r e f : c } = Z q ( s ) ; l e t u = M a t h . r o u n d ( l . x * A m ) , d = M a t h . r o u n d ( l . y * A m ) ; e | | ( [ u , d ] = [ d , u ] ) ; c o n s t p = M 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 : m Q 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 : g Q 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 ( p 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 15:57:14 +01:00
* /const kQe=[["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"}]],rte=xt("outline","alert-triangle","AlertTriangle",kQe),_Qe=()=>{const e=Tm();return Ma(r=>r.view.hasLayoutDrift??!1)?y.jsxs(qf,{position:"right-start",openDelay:200,closeDelay:100,...e,children:[y.jsx(S7,{children:y.jsx(ir,{color:"orange",c:"orange",className:me({bg:"mantine.colors.orange.light"}),children:y.jsx(rte,{})})}),y.jsx(_7,{p:"0",children:y.jsxs(Gw,{color:"orange",withBorder:!1,withCloseButton:!1,title:"Manual layout issues",children:[y.jsxs(pt,{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(pt,{mt:"xs",size:"sm",lh:"xs",children:["Update view predicates or remove ",y.jsx(Uw,{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 .
2025-11-07 15:04:16 +01:00
* /const EQe=[["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"}]],SQe=xt("outline","layout-collage","LayoutCollage",EQe);/ * *
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 15:04:16 +01:00
* /const CQe=[["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"}]],nte=xt("outline","layout-board-split","LayoutBoardSplit",CQe);/ * *
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 15:57:14 +01:00
* /const TQe=[["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"}]],AQe=xt("outline","layout-align-left","LayoutAlignLeft",TQe);/ * *
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 15:57:14 +01:00
* /const RQe=[["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"}]],NQe=xt("outline","layout-align-center","LayoutAlignCenter",RQe);/ * *
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 15:04:16 +01:00
* /const DQe=[["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"}]],PQe=xt("outline","layout-align-right","LayoutAlignRight",DQe);/ * *
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 15:04:16 +01:00
* /const $Qe=[["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"}]],MQe=xt("outline","layout-align-top","LayoutAlignTop",$Qe);/ * *
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 15:04:16 +01:00
* /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"}]],IQe=xt("outline","layout-align-middle","LayoutAlignMiddle",OQe);/ * *
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 15:04:16 +01:00
* /const zQe=[["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=xt("outline","layout-align-bottom","LayoutAlignBottom",zQe);/ * *
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 15:57:14 +01:00
* /const BQe=[["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"}]],jQe=xt("outline","route-off","RouteOff",BQe),pc=({label:e,icon:r,onClick:n})=>y.jsx(o4,{label:e,withinPortal:!1,position:"top",children:y.jsx(Tp,{classNames:{root:"action-icon",icon:me({"& > svg":{width:"70%",height:"70%"}})},onClick:n,children:r})}),FQe=e=>{const r=Yt(),n=Tm();return y.jsxs(br,{position:"right",offset:{mainAxis:12},clickOutsideEvents:["pointerdown"],...n,...e,children:[y.jsx(Eu,{children:y.jsx(o4,{label:"Manual layouting tools",children:y.jsx(Tp,{children:y.jsx(SQe,{})})})}),y.jsx(Ks,{className:qo({gap:"0.5",layerStyle:"likec4.panel",padding:"1",pointerEvents:"all"}),children:y.jsxs(cp,{children:[y.jsx(pc,{label:"Align in columns",icon:y.jsx(nte,{}),onClick:o=>{o.stopPropagation(),r.align("Column")}}),y.jsx(pc,{label:"Align left",icon:y.jsx(AQe,{}),onClick:o=>{o.stopPropagation(),r.align("Left")}}),y.jsx(pc,{label:"Align center",icon:y.jsx(NQe,{}),onClick:o=>{o.stopPropagation(),r.align("Center")}}),y.jsx(pc,{label:"Align right",icon:y.jsx(PQe,{}),onClick:o=>{o.stopPropagation(),r.align("Right")}}),y.jsx(pc,{label:"Align in rows",icon:y.jsx(nte,{style:{transform:"rotate(90deg)"}}),onClick:o=>{o.stopPropagation(),r.align("Row")}}),y.jsx(pc,{label:"Align top",icon:y.jsx(MQe,{}),onClick:o=>{o.stopPropagation(),r.align("Top")}}),y.jsx(pc,{label:"Align middle",icon:y.jsx(IQe,{}),onClick:o=>{o.stopPropagation(),r.align("Middle")}}),y.jsx(pc,{label:"Align bottom",icon:y.jsx(LQe,{}),onClick:o=>{o.stopPropagation(),r.align("Bottom")}}),y.jsx(pc,{label:"Reset all control points",icon:y.jsx(jQe,{}),onClick:o=>{o.stopPropagation(),r.resetEdgeControlPoints()}})]})})]})};function HQe(){const{enableReadOnly:e}=Er();return y.jsx(Oa,{children:!e&&y.jsx(nn,{layout:"position",className:oy({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(cp,{openDelay:600,closeDelay:120,children:[y.jsx(xQe,{}),y.jsx(FQe,{}),y.jsx(_Qe,{}),y.jsx(hQe,{})]})})})}/ * *
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 15:57:14 +01:00
* /const UQe=[["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"}]],qQe=xt("filled","player-stop-filled","PlayerStopFilled",UQe);/ * *
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 15:04:16 +01:00
* /const VQe=[["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"}]],YQe=xt("filled","player-skip-back-filled","PlayerSkipBackFilled",VQe);/ * *
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 15:57:14 +01:00
* / c o n s t W 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 " } ] ] , G Q e = x 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 " , W Q e ) , o t e = r o . w i t h P r o p s ( { c o m p o n e n t : g l , v a r i a n t : " l i g h t " , s i z e : " x s " , f w : " 5 0 0 " } ) , X Q e = ( ) = > { c o n s t { p o r t a l P r o p s : e } = T m ( ) ; r e t u r n y . j s x ( V 0 , { . . . e , c h i l d r e n : y . j s x ( G 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 K Q e ( ) { c o n s t e = Y 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 } = M 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 : T 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 ( O a , { p r o p a g a t e : ! 0 , c h i l d r e n : [ y . j s x ( K 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 ( q 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 ( o t 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 ( Y 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 ( Q s , { c o m p o n e n t : n n , 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 ( n n , { c l a s s N a m e : m 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 : m 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 ( k G e , { c h i l d r e n : [ a , " / " , i ] } ) } , " s t e p - b a d g e " ) , y . j s x ( o t 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 ( G 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 ( X Q e , { } , " p a r a l l e l - f r a m e " ) ] } ) } c o n s t a t e = S . m e m o ( ( ) = > { c o n s t e = a m ( ) , r = j Q ( ) , n = c S ( a Z e , { i n p u t : { v i e w M o d e l : r } } ) ; r e t u r n S . 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 ( G 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 ( i Z e , { v a l u e : n , c h i l d r e n : [ y . j s x ( Z Q e , { a c t o r : n } ) , y . j s x ( H Q e , { } ) , y . j s x ( u Q e , { } ) ] } ) } ) } ) ; a t 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 Z Q e = ( { a c t o r : e } ) = > { c o n s t r = C n ( e , o = > o . h a s T a g ( " a c t i v e " ) ) , n = T m ( ) ; r e t u r n y . j s x s ( b 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 ( Q Q e , { a c t o r : e } ) , r & & y . j s x ( K Z e , { } ) ] } ) } , Q Q e = ( { a c t o r : e } ) = > { c o n s t r = M 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 ( y m , { c h i l d r e n : y . j s x ( E u , { c h i l d r e n : y . j s x ( n n , { 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 ( O 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 ( K Q e , { } ) : y . j s x ( I Z e , { } ) } ) } ) } ) } ) } , u A = m 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 " } ) , J Q e = m 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 } " } } ) , e J e = m 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 " } } ) , t J e = m e ( { p a d d i n g : " x x s " } ) , r J e = m 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 " } } } ) ; m 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 % ) )
2025-11-07 15:04:16 +01:00
` });const nJe=me({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)"});/**
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 15:04:16 +01:00
* /const oJe=[["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"}]],aJe=xt("outline","help-circle","HelpCircle",oJe);/ * *
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 15:57:14 +01:00
* / c o n s t i J 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 " } ] ] , l J e = x 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 " , i J e ) , s J 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 ] = S . u s e S t a t e ( n u l l ) , l = Y t ( ) , s = 3 0 0 , c = 2 0 0 ; r e t u r n y . j s x ( H 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 ( r J 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 ( W 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 : M N e ( 7 0 * ( c / s ) , 0 ) } , c h i l d r e n : y . j s x ( k 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 ( H o , { g a p : 4 , f l e x : 1 , c h i l d r e n : [ y . j s x ( W 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 ( Q s , { c l a s s N a m e : J e ( n J 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 : p q ( a ) & & a ! = = u ? . 2 5 : 1 , c h i l d r e n : u } , u ) ) } ) , y . j s x ( p 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 } ) ] } ) ] } ) } ) } , c J 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 ? ? [ ] } ) , u J e = S . m e m o ( ( ) = > { c o n s t e = F C ( s = > s . h e i g h t ) , { i d : r , n o t a t i o n s : n } = M a ( c J e ) , [ o , a ] = q 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 } ) , i = n . l e n g t h > 0 , l = T m ( ) ; r e t u r n y . j s x s ( O a , { c h i l d r e n : [ ! i & & y . j s x ( d 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 : u A , c h i l d r e n : y . j s x ( n 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 " , . . . l , c h i l d r e n : y . j s x ( h 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 ( r t e , { } ) } ) } ) } , " e m p t y " ) , i & & o & & y . j s x ( d 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 : u A , c h i l d r e n : y . j s x ( n 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 " , . . . l , c h i l d r e n : y . j s x ( i 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 : J Q e , o n C l i c k : ( ) = > a ( ! 1 ) , c h i l d r e n : y . j s x ( a J e , { s t r o k e : 1 . 5 } ) } ) } ) } , " c o l l a p s e d " ) , i & & ! o & & y . j s x ( d 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 " , u A ) , 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 ( L 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 : e J e , c h i l d r e n : y . j s x s ( u p , { 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 ( t y , { c h i l d r e n : [ y . j s x ( i 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 : ( ) = > a ( ! 0 ) , c h i l d r e n : y . j s x ( l J e , { s t r o k e : 2 } ) } ) , y . j s x ( Y 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 ( Y 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 ( e c , { v a l u e : " f i r s t " , c l a s s N a m e : t J e , h i d d e n : o , c h i l d r e n : y . j s x ( n 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 ( H o , { g a p : 0 , c h i l d r e n : n . m a p ( ( s , c ) = > y . j s x ( s J e , { v a l u e : s } , c ) ) } ) } ) } ) ] } ) } ) } , r ) ] } ) } ) , i t e = S . 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 } = E r ( ) , a = q E e ( ) , i = t X ( ) , l = X j e ( ) ; r e t u r n y . j s x s ( v G , { o n R e s e t : a , c h i l d r e n : [ e & & y . j s x ( e B e , { c h i l d r e n : y . j s x ( a t e , { } ) } ) , i & & y . j s x ( i K e , { o v e r l a y s A c t o r R e f : i } ) , r & & y . j s x ( u J e , { } ) , n & & l & & y . j s x ( Y K e , { s e a r c h A c t o r R e f : l } ) , o & & y . j s x ( e Z e , { } ) ] } ) } ) ; i t 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 R 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 l t e = 1 e - 1 2 , d A = M a t h . P I , p A = 2 * d A , A p = 1 e - 6 , d J e = p A - A p ; f u n c t i o n s t 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 p J 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 s t 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 h J 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 ? s t e : p J 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 < 0 ) t h r o w n e w E r r o r ( ` n e g a t i v e r a d i u 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
$ { l } {
-- likec4 - palette - fill : $ { i ( n . elements . fill ) } ;
-- likec4 - palette - stroke : $ { i ( n . elements . stroke ) } ;
}
2025-11-07 15:04:16 +01:00
$ { Yte } $ { 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
-- likec4 - palette - fill : $ { a ( n . elements . fill ) } ;
-- likec4 - palette - stroke : $ { a ( n . elements . stroke ) } ;
}
2025-11-07 15:04:16 +01:00
` .trim()};function Jet(e,r,n){const{elements:o,relationships:a}=n,i= ` : where ( $ { e } [ data - likec4 - color = $ { r } ] ) ` ;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
$ { 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 } ;
}
2025-11-07 15:04:16 +01:00
$ { Ket } $ { i } {
2025-11-07 15:57:14 +01:00
-- likec4 - palette - relation - stroke - selected : $ { Hte ( Ute ( a . line , "black" , 85 ) ) } ;
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 15:04:16 +01:00
$ { Yte } $ { i } {
2025-11-07 15:57:14 +01:00
-- likec4 - palette - relation - stroke - selected : $ { Hte ( Ute ( a . line , "white" , 70 ) ) } ;
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 15:04:16 +01:00
` .trim(),...EDe(1,Zet+1).map(l=>Qet(e,r,n,l))].join( `
2025-11-07 15:57:14 +01:00
` )}function ett(e,r){return kn(r.colors,WE(),No(([n,o])=>Jet(e,n,o)),mq( `
` ))}const ttt=S.memo(({id:e})=>{const r= ` # $ { e } ` ,n=np()?.(),{theme:o}=yte(),a=ett(r,o);return y.jsx("style",{type:"text/css","data-likec4-colors":e,dangerouslySetInnerHTML:{__html:a},nonce:n})});function Wte(e,r){if(e._type==="dynamic")try{if(r??=e.variant,r==="sequence")return e.sequenceLayout.bounds}catch{}return e.bounds}function Gte({children:e}){const r=S.useContext(tw);return S.useEffect(()=>{r||console.warn("LikeC4Diagram must be a child of MantineProvider")},[]),r?y.jsx(y.Fragment,{children:e}):y.jsx(k9,{defaultColorScheme:"auto",children:e})}Gte.displayName="EnsureMantine";const wA=({reducedMotion:e="user",children:r})=>{const n=np()?.();return y.jsx(ZUe,{features:WVe,strict:!0,children:y.jsx(eqe,{reducedMotion:e,...n&&{nonce:n},children:r})})};function Xte({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?z2.withControls:z2.default,pannable:C=!0,zoomable:_=!0,background:T="dots",enableElementTags:A=!1,enableFocusMode:R=!1,enableElementDetails:D=!1,enableRelationshipDetails:N=!1,enableRelationshipBrowser: $ =!1,nodesDraggable:O=!b,nodesSelectable:j=!b||R||!!l||!!s,enableNotations:L=!1,showNavigationButtons:Y=!!l,enableDynamicViewWalkthrough:M=!1,dynamicViewVariant:U,enableSearch:z=!1,initialWidth:H,initialHeight:q,experimentalEdgeEditing:K=!b,reduceGraphics:V="auto",renderIcon:X,where:Z,reactFlowProps:B,renderNodes:W,children:Q}){const J=sG(),ne=S.useRef(null),te=Wte(f,U),ee=rtt(k);ne.current==null&&(ne.current={defaultEdges:[],defaultNodes:[],initialWidth:H??te.width,initialHeight:q??te.height,initialFitViewOptions:{maxZoom:GC,minZoom:fl,padding:ee},initialMaxZoom:GC,initialMinZoom:fl});const pe=V==="auto"?C&&(te.width??1)*(te.height??1)>6e6&&f.nodes.some(Te=>Te.children?.length>0):V;return y.jsx(Gte,{children:y.jsx(wA,{...pe&&{reducedMotion:"always"},children:y.jsx(OEe,{value:X??null,children:y.jsx(Ep,{features:{enableFitView:w,enableReadOnly:b,enableFocusMode:R,enableNavigateTo:!!l,enableElementDetails:D,enableRelationshipDetails:N,enableRelationshipBrowser: $ ,enableSearch:z,enableNavigationButtons:Y&&!!l,enableDynamicViewWalkthrough:f._type==="dynamic"&&M,enableEdgeEditing:K,enableNotations:L,enableVscode:!!u,enableControls:x,enableElementTags:A},children:y.jsxs(XKe,{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(ttt,{id:J}),y.jsx(iBe,{rootSelector: ` # $ { J } ` ,children:y.jsx(JLe,{id:J,className:g,reduceGraphics:pe,children:y.jsx(Ix,{fitView:w,...ne.current,children:y.jsxs(jet,{view:f,zoomable:_,pannable:C,fitViewPadding:ee,nodesSelectable:j,where:Z??null,dynamicViewVariant:U,children:[y.jsx(tet,{nodesDraggable:O,nodesSelectable:j,background:T,reactFlowProps:B,renderNodes:W,children:Q}),y.jsx(ite,{})]})})})})]})})})})})}const Kte=e=>typeof e=="number"? ` $ { e } px ` :e;function rtt(e){return Jj(()=>XE(e)?gDe(e,Kte):Kte(e),[e],ut)}function ntt({children:e,likec4model:r}){return y.jsx(ny.Provider,{value:r,children:e})}const kA=({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})}),ott=({viewId:e})=>y.jsxs(kA,{children:["View ",y.jsx("code",{children:e})," not found"]}),att=e=>{throw new Error("LikeC4View is not available SSR")};var Zte={exports:{}},_A,Qte;function itt(){if(Qte)return _A;Qte=1;var e="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";return _A=e,_A}var EA,Jte;function ltt(){if(Jte)return EA;Jte=1;var e=itt();function r(){}function n(){}return n.resetWarningCache=r,EA=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
In order to be iterable , non - array objects must have a [ Symbol . iterator ] ( ) method . ` )},gtt=function(e,r){return ptt(e)||htt(e,r)||ftt(e,r)||mtt()},nre=tre((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})),ytt=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},ore=function(e,r){if(e==null)return{};var n,o,a=ytt(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},btt=S.createContext(null);function are(e){var r=e.children,n=r===void 0?"":r,o=ore(e,["children"]);return typeof n!="string"&&(n=att()),Qr.createElement("template",nre({},o,{dangerouslySetInnerHTML:{__html:n}}))}function ire(e){var r=e.root,n=e.children;return Fi.createPortal(n===void 0?null:n,r)}function vtt(e){var r=S.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=ore(n,["mode","delegatesFocus","styleSheets","ssr","children"]),w=(i=S.useRef((a=o)&&a.current),S.useEffect((function(){a&&(a.current=i.current)}),[a]),i),k=S.useState(null),C=gtt(k,2),_=C[0],T=C[1],A="node_".concat(s).concat(u);return S.useLayoutEffect((function(){if(w.current)try{if(typeof o=="function"&&o(w.current),g){var R=w.current.shadowRoot;return void T(R)}var D=w.current.attachShadow({mode:s,delegatesFocus:u});p.length>0&&(D.adoptedStyleSheets=p),T(D)}catch(N){(function( $ ){var O= $ .error,j= $ .styleSheets,L= $ .root;switch(O.name){case"NotSupportedError":j.length>0&&(L.adoptedStyleSheets=j);break;default:throw O}})({error:N,styleSheets:p,root:_})}}),[o,w,p]),Qr.createElement(Qr.Fragment,null,Qr.createElement(e.tag,nre({key:A,ref:w},x),(_||g)&&Qr.createElement(btt.Provider,{value:_},g?Qr.createElement(are,{shadowroot:s,shadowrootmode:s},e.render({root:_,ssr:g,children:b})):Qr.createElement(ire,{root:_},e.render({root:_,ssr:g,children:b})))))}));return r.propTypes={mode:xl.oneOf(["open","closed"]),delegatesFocus:xl.bool,styleSheets:xl.arrayOf(xl.instanceOf(globalThis.CSSStyleSheet)),ssr:xl.bool,children:xl.node},r}are.propTypes={children:xl.oneOfType([xl.string,xl.node])},ire.propTypes={root:xl.object.isRequired,children:xl.node};var SA=new Map;function xtt(){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=dtt(a,{separator:"-"}),l="".concat(r,"-").concat(i);return SA.has(l)||SA.set(l,vtt({tag:i,render:n})),SA.get(l)}})}var wtt=xtt();const ktt='@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 15:57:14 +01:00
` .trim()}function Att({children:e,theme:r=_tt,injectFontCss:n=!0,styleNonce:o,colorScheme:a,keepAspectRatio:i=!1,...l}){const s=Stt(a),c=sG(),u=Ttt(c,i),d=S.useRef(null),p=Ett(n,o),f=S.useCallback(()=>d.current??void 0,[d]),g=ot(()=>{if(Fx(o)){if(typeof o=="string")return o;if(typeof o=="function")return o()}return""});let b=Fx(o)?g():void 0;return y.jsxs(y.Fragment,{children:[y.jsx("style",{type:"text/css",nonce:b,dangerouslySetInnerHTML:{__html:u}}),y.jsx(Ctt,{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(k9,{...a&&{forceColorScheme:a},defaultColorScheme:s,getRootElement:f,...!!b&&{getStyleNonce:g},cssVariablesSelector:".likec4-shadow-root",theme:r,children:y.jsx(wA,{children:e})})})})]})}const Rtt=me({cursor:"pointer","--mantine-cursor-pointer":"pointer","& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)":{cursor:"pointer"}});function Ntt({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,enableNotations: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:A,renderNodes:R,children:D,...N}){const $ =tBe(),[O,j]=S.useState(null),L=ot(()=>{j(e)});if(! $ )return y.jsx(kA,{children:"LikeC4Model not found. Make sure you provided LikeC4ModelProvider."});const Y= $ .findView(e)?. $ view;if(!Y)return y.jsx(ott,{viewId:e});if(Y._stage!=="layouted")return y.jsxs(kA,{children:['LikeC4 View " $ ',e,'" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.']});const M=O? $ .findView(O)?. $ view:null,U=!!p&&(Y.notation?.nodes?.length??0)>0,z=(M?.notation?.nodes?.length??0)>0,H=u!==!1,q=dq(u)?{}:u,K=Wte(Y,N.dynamicViewVariant);return y.jsx(Att,{injectFontCss:l,theme:C,colorScheme:i,styleNonce:_,keepAspectRatio:a?K:!1,className:Je("likec4-view",r),style:T,children:y.jsxs(wA,{children:[y.jsx(Xte,{view:Y,readonly:!0,pannable:n,zoomable:o,background:c,fitView:!0,fitViewPadding:z2.default,enableNotations:U,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",H&&Rtt),enableSearch:!1,...H&&{onCanvasClick:L,onNodeClick:L},reactFlowProps:A,renderNodes:R,children:D,...N}),M&&y.jsxs(qy,{openDelay:0,onClose:()=>j(null),children:[y.jsx(Xte,{view:M,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,nodesDraggable:!1,fitView:!0,...N,fitViewPadding:z2.withControls,...q,enableNotations:z&&(q.enableNotations??!0),renderNodes:R}),y.jsx(Se,{pos:"absolute",top:"1rem",right:"1rem",children:y.jsx(ir,{variant:"default",color:"gray",onClick:V=>{V.stopPropagation(),j(null)},children:y.jsx(Xf,{})})})]})]})})}var Dtt=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"})]}),Ptt=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.3
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 15:57:14 +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"},technicalWriter:{style:{shape:"person",color:"green"},technology:"Hugo, Markdown, LikeC4",description:{txt:"Content creator and maintainer of the developer platform documentation"},title:"Technical Writer",kind:"person",id:"technicalWriter"},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 15:57:14 +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 15:57:14 +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 15:57:14 +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 15:57:14 +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:"technicalWriter",parent:null,level:0,children:[],inEdges:[],outEdges:["1f1875","hyebaq"],title:"Technical Writer",modelRef:"technicalWriter",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:["1f1875","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: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
addressing a growing number of use cases . It centrally stores your data so you can
2025-11-07 15:57:14 +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 15:57:14 +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:"technicalWriter",parent:null,level:0,children:[],inEdges:[],outEdges:["1f1875","hyebaq"],title:"Technical Writer",modelRef:"technicalWriter",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:["1f1875","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
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 15:57:14 +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 15:57:14 +01:00
* / v a r f r e ; f u n c t i o n u r t ( ) { r e t u r n f r e | | ( f r e = 1 , ( f u n c t i o n ( e ) { f u n c t i o n r ( z , H ) { v a r q = z . l e n g t h ; z . p u s h ( H ) ; e : f o r ( ; 0 < q ; ) { v a r K = q - 1 > > > 1 , V = z [ K ] ; i f ( 0 < a ( V , H ) ) z [ K ] = H , z [ q ] = V , q = K ; e l s e b r e a k e } } f u n c t i o n n ( z ) { r e t u r n z . l e n g t h = = = 0 ? n u l l : z [ 0 ] } f u n c t i o n o ( z ) { i f ( z . l e n g t h = = = 0 ) r e t u r n n u l l ; v a r H = z [ 0 ] , q = z . p o p ( ) ; i f ( q ! = = H ) { z [ 0 ] = q ; e : f o r ( v a r K = 0 , V = z . l e n g t h , X = V > > > 1 ; K < X ; ) { v a r Z = 2 * ( K + 1 ) - 1 , B = z [ Z ] , W = Z + 1 , Q = z [ W ] ; i f ( 0 > a ( B , q ) ) W < V & & 0 > a ( Q , B ) ? ( z [ K ] = Q , z [ W ] = q , K = W ) : ( z [ K ] = B , z [ Z ] = q , K = Z ) ; e l s e i f ( W < V & & 0 > a ( Q , q ) ) z [ K ] = Q , z [ W ] = q , K = W ; e l s e b r e a k e } } r e t u r n H } f u n c t i o n a ( z , H ) { v a r q = z . s o r t I n d e x - H . s o r t I n d e x ; r e t u r n q ! = = 0 ? q : z . i d - H . 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 ( z ) { f o r ( v a r H = n ( u ) ; H ! = = n u l l ; ) { i f ( H . c a l l b a c k = = = n u l l ) o ( u ) ; e l s e i f ( H . s t a r t T i m e < = z ) o ( u ) , H . s o r t I n d e x = H . e x p i r a t i o n T i m e , r ( c , H ) ; e l s e b r e a k ; H = n ( u ) } } f u n c t i o n A ( z ) { i f ( x = ! 1 , T ( z ) , ! b ) i f ( n ( c ) ! = = n u l l ) b = ! 0 , R | | ( R = ! 0 , L ( ) ) ; e l s e { v a r H = n ( u ) ; H ! = = n u l l & & U ( A , H . s t a r t T i m e - z ) } } v a r R = ! 1 , D = - 1 , N = 5 , $ = - 1 ; f u n c t i o n O ( ) { 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 , R ) { v a r z = e . u n s t a b l e _ n o w ( ) ; $ = z ; v a r H = ! 0 ; t r y { e : { b = ! 1 , x & & ( x = ! 1 , C ( D ) , D = - 1 ) , g = ! 0 ; v a r q = f ; t r y { t : { f o r ( T ( z ) , p = n ( c ) ; p ! = = n u l l & & ! ( p . e x p i r a t i o n T i m e > z & & O ( ) ) ; ) { v a r K = p . c a l l b a c k ; i f ( t y p e o f K = = " 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 V = K ( p . e x p i r a t i o n T i m e < = z ) ; i f ( z = e . u n s t a b l e _ n o w ( ) , t y p e o f V = = " f u n c t i o n " ) { p . c a l l b a c k = V , T ( z ) , H = ! 0 ; b r e a k t } p = = = n ( c ) & & o ( c ) , T ( z ) } e l s e o ( c ) ; p = n ( c ) } i f ( p ! = = n u l l ) H = ! 0 ; e l s e { v a r X = n ( u ) ; X ! = = n u l l & & U ( A , X . s t a r t T i m e - z ) , H = ! 1 } } b r e a k e } f i n a l l y { p = n u l l , f = q , g = ! 1 } H = v o i d 0 } } f i n a l l y { H ? L ( ) : R = ! 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 , M = 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 ( ) { M . 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 ( z , H ) { D = k ( f u n c t i o n ( ) { z ( e . u n s t a b l e _ n o w ( ) ) } , H ) } 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 ( z ) { z . 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 ( z ) { 0 > z | | 1 2 5 < z ? 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 < z ? M a t h . f l o o r ( 1 e 3 / z ) : 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 ( z ) { 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 H = 3 ; b r e a k ; d e f a u l t : H = f } v a r q = f ; f = H ; t r y { r e t u r n z ( ) } f i n a l l y { f = q } } , 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 ( z , H ) { s w i t c h ( z ) { 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 : z = 3 } v a r q = f ; f = z ; t r y { r e t u r n H ( ) } f i n a l l y { f = q } } , 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 ( z , H , q ) { v a r K = e . u n s t a b l e _ n o w ( ) ; s w i t c h ( t y p e o f q = = " o b j e c t " & & q ! = = n u l l ? ( q = q . d e l a y , q = t y p e o f q = = " n u m b e r " & & 0 < q ? K + q : K ) : q = K , z ) { c a s e 1 : v a r V = - 1 ; b r e a k ; c a s e 2 : V = 2 5 0 ; b r e a k ; c a s e 5 : V = 1 0 7 3 7 4 1 8 2 3 ; b r e a k ; c a s e 4 : V = 1 e 4 ; b r e a k ; d e f a u l t : V = 5 e 3 } r e t u r n V = q + V , z = { i d : d + + , c a l l b a c k : H , p r i o r i t y L e v e l : z , s t a r t T i m e : q , e x p i r a t i o n T i m e : V , s o r t I n d e x : - 1 } , q > K ? ( z . s o r t I n d e x = q , r ( u , z ) , n ( c ) = = = n u l l & & z = = = n ( u ) & & ( x ? ( C ( D ) , D = - 1 ) : x = ! 0 , U ( A , q - K ) ) ) : ( z . s o r t I n d e x = V , r ( c , z ) , b | | g | | ( b = ! 0 , R | | ( R = ! 0 , L ( ) ) ) ) , z } , e . u n s t a b l e _ s h o u l d Y i e l d = O , 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 ( z ) { v a r H = f ; r e t u r n f u n c t i o n ( ) { v a r q = f ; f = H ; t r y { r e t u r n z . 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 = q } } } } ) ( R A ) ) , R A } v a r m r e ; f u n c t i o n d r t ( ) { r e t u r n m r e | | ( m r e = 1 , A A . e x p o r t s = u r t ( ) ) , A A . 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 15:57:14 +01:00
* /var gre;function prt(){if(gre)return Zy;gre=1;var e=drt(),r=Z6(),n=OO();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(h.tag===31){var m=h.memoizedState;if(m===null&&(h=h.alternate,h!==null&&(m=h.memoizedState)),m!==null)return m.dehydrated}return null}function c(h){if(i(h)!==h)throw Error(o(188))}function u(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,E=m;;){var P=v.return;if(P===null)break;var I=P.alternate;if(I===null){if(E=P.return,E!==null){v=E;continue}break}if(P.child===I.child){for(I=P.child;I;){if(I===v)return c(P),h;if(I===E)return c(P),m;I=I.sibling}throw Error(o(188))}if(v.return!==E.return)v=P,E=I;else{for(var G=!1,re=P.child;re;){if(re===v){G=!0,v=P,E=I;break}if(re===E){G=!0,E=P,v=I;break}re=re.sibling}if(!G){for(re=I.child;re;){if(re===v){G=!0,v=I,E=P;break}if(re===E){G=!0,E=I,v=P;break}re=re.sibling}if(!G)throw Error(o(189))}}if(v.alternate!==E)throw Error(o(190))}if(v.tag!==3)throw Error(o(188));return v.stateNode.current===v?h:m}function d(h){var m=h.tag;if(m===5||m===26||m===27||m===6)return h;for(h=h.child;h!==null;){if(m=d(h),m!==null)return m;h=h.sibling}return null}var p=Object.assign,f=Symbol.for(" react . element "),g=Symbol.for(" react . transitional . element "),b=Symbol.for(" react . portal "),x=Symbol.for(" react . fragment "),w=Symbol.for(" react . strict _mode "),k=Symbol.for(" react . profiler "),C=Symbol.for(" react . consumer "),_=Symbol.for(" react . context "),T=Symbol.for(" react . forward _ref "),A=Symbol.for(" react . suspense "),R=Symbol.for(" react . suspense _list "),D=Symbol.for(" react . memo "),N=Symbol.for(" react . lazy "),$=Symbol.for(" react . activity "),O=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 M(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 x:return" Fragment ";case k:return" Profiler ";case w:return" StrictMode ";case A:return" Suspense ";case R:return" SuspenseList ";case $:return" Activity "}if(typeof h==" object ")switch(h.$$typeof){case b:return" Portal ";case _:return h.displayName||" Context ";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:M(h.type)||" Memo ";case N:m=h._payload,h=h._init;try{return M(h(m))}catch{}}return null}var U=Array.isArray,z=r.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,H=n.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,q={pending:!1,data:null,method:null,action:null},K=[],V=-1;function X(h){return{current:h}}function Z(h){0>V||(h.current=K[V],K[V]=null,V--)}function B(h,m){V++,K[V]=h.current,h.current=m}var W=X(null),Q=X(null),J=X(null),ne=X(null);function te(h,m){switch(B(J,m),B(Q,h),B(W,null),m.nodeType){case 9:case 11:h=(h=m.documentElement)&&(h=h.namespaceURI)?f1e(h):0;break;default:if(h=m.tagName,m=m.namespaceURI)m=f1e(m),h=m1e(m,h);else switch(h){case" svg ":h=1;break;case" math " : h = 2 ; break ; default : h = 0 } } Z ( W ) , B ( W , h ) } function ee ( ) { Z ( W ) , Z ( Q ) , Z ( J ) } function pe ( h ) { h . memoizedState !== null && B ( ne , h ) ; var m = W . current , v = m1e ( m , h . type ) ; m !== v && ( B ( Q , h ) , B ( W , v ) ) } function Te ( h ) { Q . cu
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 15:04:16 +01:00
` +ce+h+de}var De=!1;function Ge(h,m){if(!h||De)return"";De=!0;var v=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{var E={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 be=ke}Reflect.construct(h,[],Ne)}else{try{Ne.call()}catch(ke){be=ke}h.call(Ne.prototype)}}else{try{throw Error()}catch(ke){be=ke}(Ne=h())&&typeof Ne.catch=="function"&&Ne.catch(function(){})}}catch(ke){if(ke&&be&&typeof ke.stack=="string")return[ke.stack,be.stack]}return[null,null]}};E.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var P=Object.getOwnPropertyDescriptor(E.DetermineComponentFrameRoot,"name");P&&P.configurable&&Object.defineProperty(E.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var I=E.DetermineComponentFrameRoot(),G=I[0],re=I[1];if(G&&re){var se=G.split( `
` ),ye=re.split( `
` );for(P=E=0;E<se.length&&!se[E].includes("DetermineComponentFrameRoot");)E++;for(;P<ye.length&&!ye[P].includes("DetermineComponentFrameRoot");)P++;if(E===se.length||P===ye.length)for(E=se.length-1,P=ye.length-1;1<=E&&0<=P&&se[E]!==ye[P];)P--;for(;1<=E&&0<=P;E--,P--)if(se[E]!==ye[P]){if(E!==1||P!==1)do if(E--,P--,0>P||se[E]!==ye[P]){var Ce= `
` +se[E].replace(" at new "," at ");return h.displayName&&Ce.includes("<anonymous>")&&(Ce=Ce.replace("<anonymous>",h.displayName)),Ce}while(1<=E&&0<=P);break}}}finally{De=!1,Error.prepareStackTrace=v}return(v=h?h.displayName||h.name:"")?xe(v):""}function et(h,m){switch(h.tag){case 26:case 27:case 5:return xe(h.type);case 16:return xe("Lazy");case 13:return h.child!==m&&m!==null?xe("Suspense Fallback"):xe("Suspense");case 19:return xe("SuspenseList");case 0:case 15:return Ge(h.type,!1);case 11:return Ge(h.type.render,!1);case 1:return Ge(h.type,!0);case 31:return xe("Activity");default:return""}}function ft(h){try{var m="",v=null;do m+=et(h,v),v=h,h=h.return;while(h);return m}catch(E){return `
Error generating stack : ` +E.message+ `
2025-11-07 15:57:14 +01:00
` +E.stack}}var Ze=Object.prototype.hasOwnProperty,Et=e.unstable_scheduleCallback,Xe=e.unstable_cancelCallback,We=e.unstable_shouldYield,st=e.unstable_requestPaint,ct=e.unstable_now,zn=e.unstable_getCurrentPriorityLevel,we=e.unstable_ImmediatePriority,_e=e.unstable_UserBlockingPriority,at=e.unstable_NormalPriority,vt=e.unstable_LowPriority,Ct=e.unstable_IdlePriority,Zr=e.log,Pt=e.unstable_setDisableYieldValue,Sr=null,Pr=null;function fn(h){if(typeof Zr=="function"&&Pt(h),Pr&&typeof Pr.setStrictMode=="function")try{Pr.setStrictMode(Sr,h)}catch{}}var ar=Math.clz32?Math.clz32:qa,ha=Math.log,hr=Math.LN2;function qa(h){return h>>>=0,h===0?32:31-(ha(h)/hr|0)|0}var Ni=256,Qu=262144,Ju=4194304;function jl(h){var m=h&42;if(m!==0)return m;switch(h&-h){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:return 64;case 128:return 128;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:return h&261888;case 262144:case 524288:case 1048576:case 2097152:return h&3932160;case 4194304:case 8388608:case 16777216:case 33554432:return h&62914560;case 67108864:return 67108864;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 0;default:return h}}function ed(h,m,v){var E=h.pendingLanes;if(E===0)return 0;var P=0,I=h.suspendedLanes,G=h.pingedLanes;h=h.warmLanes;var re=E&134217727;return re!==0?(E=re&~I,E!==0?P=jl(E):(G&=re,G!==0?P=jl(G):v||(v=re&~h,v!==0&&(P=jl(v))))):(re=E&~I,re!==0?P=jl(re):G!==0?P=jl(G):v||(v=E&~h,v!==0&&(P=jl(v)))),P===0?0:m!==0&&m!==P&&(m&I)===0&&(I=P&-P,v=m&-m,I>=v||I===32&&(v&4194048)!==0)?m:P}function Fl(h,m){return(h.pendingLanes&~(h.suspendedLanes&~h.pingedLanes)&m)===0}function Jb(h,m){switch(h){case 1:case 2:case 4:case 8:case 64:return m+250;case 16:case 32:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return m+5e3;case 4194304:case 8388608:case 16777216:case 33554432:return-1;case 67108864:case 134217728:case 268435456:case 536870912:case 1073741824:return-1;default:return-1}}function Dg(){var h=Ju;return Ju<<=1,(Ju&62914560)===0&&(Ju=4194304),h}function ch(h){for(var m=[],v=0;31>v;v++)m.push(h);return m}function Nc(h,m){h.pendingLanes|=m,m!==268435456&&(h.suspendedLanes=0,h.pingedLanes=0,h.warmLanes=0)}function ev(h,m,v,E,P,I){var G=h.pendingLanes;h.pendingLanes=v,h.suspendedLanes=0,h.pingedLanes=0,h.warmLanes=0,h.expiredLanes&=v,h.entangledLanes&=v,h.errorRecoveryDisabledLanes&=v,h.shellSuspendCounter=0;var re=h.entanglements,se=h.expirationTimes,ye=h.hiddenUpdates;for(v=G&~v;0<v;){var Ce=31-ar(v),Ne=1<<Ce;re[Ce]=0,se[Ce]=-1;var be=ye[Ce];if(be!==null)for(ye[Ce]=null,Ce=0;Ce<be.length;Ce++){var ke=be[Ce];ke!==null&&(ke.lane&=-536870913)}v&=~Ne}E!==0&&Pg(h,E,0),I!==0&&P===0&&h.tag!==0&&(h.suspendedLanes|=I&~(G&~m))}function Pg(h,m,v){h.pendingLanes|=m,h.suspendedLanes&=~m;var E=31-ar(m);h.entangledLanes|=m,h.entanglements[E]=h.entanglements[E]|1073741824|v&261930}function $ g(h,m){var v=h.entangledLanes|=m;for(h=h.entanglements;v;){var E=31-ar(v),P=1<<E;P&m|h[E]&m&&(h[E]|=m),v&=~P}}function Mg(h,m){var v=m&-m;return v=(v&42)!==0?1:uh(v),(v&(h.suspendedLanes|m))!==0?0:v}function uh(h){switch(h){case 2:h=1;break;case 8:h=4;break;case 32:h=16;break;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:h=128;break;case 268435456:h=134217728;break;default:h=0}return h}function dh(h){return h&=-h,2<h?8<h?(h&134217727)!==0?32:268435456:8:2}function Og(){var h=H.p;return h!==0?h:(h=window.event,h===void 0?32:L1e(h.type))}function Ig(h,m){var v=H.p;try{return H.p=h,m()}finally{H.p=v}}var Di=Math.random().toString(36).slice(2),mn="__reactFiber $ "+Di,co="__reactProps $ "+Di,Pi="__reactContainer $ "+Di,Dc="__reactEvents $ "+Di,ph="__reactListeners $ "+Di,tv="__reactHandles $ "+Di,zg="__reactResources $ "
` ).replace(h6t,"")}function p1e(h,m){return m=d1e(m),d1e(h)===m}function wr(h,m,v,E,P,I){switch(v){case"children":typeof E=="string"?m==="body"||m==="textarea"&&E===""||Vg(h,E):(typeof E=="number"||typeof E=="bigint")&&m!=="body"&&Vg(h,""+E);break;case"className":nd(h,"class",E);break;case"tabIndex":nd(h,"tabindex",E);break;case"dir":case"role":case"viewBox":case"width":case"height":nd(h,v,E);break;case"style":pfe(h,E,I);break;case"data":if(m!=="object"){nd(h,"data",E);break}case"src":case"href":if(E===""&&(m!=="a"||v!=="href")){h.removeAttribute(v);break}if(E==null||typeof E=="function"||typeof E=="symbol"||typeof E=="boolean"){h.removeAttribute(v);break}E=Bk(""+E),h.setAttribute(v,E);break;case"action":case"formAction":if(typeof E=="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 I=="function"&&(v==="formAction"?(m!=="input"&&wr(h,m,"name",P.name,P,null),wr(h,m,"formEncType",P.formEncType,P,null),wr(h,m,"formMethod",P.formMethod,P,null),wr(h,m,"formTarget",P.formTarget,P,null)):(wr(h,m,"encType",P.encType,P,null),wr(h,m,"method",P.method,P,null),wr(h,m,"target",P.target,P,null)));if(E==null||typeof E=="symbol"||typeof E=="boolean"){h.removeAttribute(v);break}E=Bk(""+E),h.setAttribute(v,E);break;case"onClick":E!=null&&(h.onclick=Oc);break;case"onScroll":E!=null&&Gt("scroll",h);break;case"onScrollEnd":E!=null&&Gt("scrollend",h);break;case"dangerouslySetInnerHTML":if(E!=null){if(typeof E!="object"||!("__html"in E))throw Error(o(61));if(v=E.__html,v!=null){if(P.children!=null)throw Error(o(60));h.innerHTML=v}}break;case"multiple":h.multiple=E&&typeof E!="function"&&typeof E!="symbol";break;case"muted":h.muted=E&&typeof E!="function"&&typeof E!="symbol";break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"defaultValue":case"defaultChecked":case"innerHTML":case"ref":break;case"autoFocus":break;case"xlinkHref":if(E==null||typeof E=="function"||typeof E=="boolean"||typeof E=="symbol"){h.removeAttribute("xlink:href");break}v=Bk(""+E),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":E!=null&&typeof E!="function"&&typeof E!="symbol"?h.setAttribute(v,""+E):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":E&&typeof E!="function"&&typeof E!="symbol"?h.setAttribute(v,""):h.removeAttribute(v);break;case"capture":case"download":E===!0?h.setAttribute(v,""):E!==!1&&E!=null&&typeof E!="function"&&typeof E!="symbol"?h.setAttribute(v,E):h.removeAttribute(v);break;case"cols":case"rows":case"size":case"span":E!=null&&typeof E!="function"&&typeof E!="symbol"&&!isNaN(E)&&1<=E?h.setAttribute(v,E):h.removeAttribute(v);break;case"rowSpan":case"start":E==null||typeof E=="function"||typeof E=="symbol"||isNaN(E)?h.removeAttribute(v):h.setAttribute(v,E);break;case"popover":Gt("beforetoggle",h),Gt("toggle",h),rd(h,"popover",E);break;case"xlinkActuate":Va(h,"http://www.w3.org/1999/xlink","xlink:actuate",E);break;case"xlinkArcrole":Va(h,"http://www.w3.org/1999/xlink","xlink:arcrole",E);break;case"xlinkRole":Va(h,"http://www.w3.org/1999/xlink","xlink:role",E);break;case"xlinkShow":Va(h,"http://www.w3.org/1999/xlink","xlink:show",E);break;case"xlinkTitle":Va(h,"http://www.w3.org/1999/xlink","xlink:title",E);break;case"xlinkType":Va(h,"http://www.w3.org/1999/xlink","xlink:type",E);break;case"xmlBase":Va(h,"http://www.w3.org/XML/1998/namespace","x
2025-11-07 15:04:16 +01:00
. ` .concat(yrt, ` {
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, ` ;
}
2025-11-07 15:04:16 +01:00
body [ ` ).concat( $ m, ` ] {
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, ` ;
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(""), `
}
2025-11-07 15:04:16 +01:00
. ` ).concat(w4, ` {
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
right : ` ).concat(s,"px ").concat(o, ` ;
}
2025-11-07 15:04:16 +01:00
. ` ).concat(k4, ` {
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
margin - right : ` ).concat(s,"px ").concat(o, ` ;
}
2025-11-07 15:04:16 +01:00
. ` ).concat(w4," .").concat(w4, ` {
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
right : 0 ` ).concat(o, ` ;
}
2025-11-07 15:04:16 +01:00
. ` ).concat(k4," .").concat(k4, ` {
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
margin - right : 0 ` ).concat(o, ` ;
}
2025-11-07 15:04:16 +01:00
body [ ` ).concat( $ m, ` ] {
` ).concat(brt,": ").concat(s, ` px ;
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 15:57:14 +01:00
` )},_re=function(){var e=parseInt(document.body.getAttribute( $ m)||"0",10);return isFinite(e)?e:0},zrt=function(){S.useEffect(function(){return document.body.setAttribute( $ m,(_re()+1).toString()),function(){var e=_re()-1;e<=0?document.body.removeAttribute( $ m):document.body.setAttribute( $ m,e.toString())}},[])},Lrt=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;zrt();var i=S.useMemo(function(){return Mrt(a)},[a]);return S.createElement(Ort,{styles:Irt(i,!r,a,n?"":"!important")})},MA=!1;if(typeof window<"u")try{var E4=Object.defineProperty({},"passive",{get:function(){return MA=!0,!0}});window.addEventListener("test",E4,E4),window.removeEventListener("test",E4,E4)}catch{MA=!1}var Mm=MA?{passive:!1}:!1,Brt=function(e){return e.tagName==="TEXTAREA"},Ere=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!Brt(e)&&n[r]==="visible")},jrt=function(e){return Ere(e,"overflowY")},Frt=function(e){return Ere(e,"overflowX")},Sre=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=Cre(e,o);if(a){var i=Tre(e,o),l=i[1],s=i[2];if(l>s)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},Hrt=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},Urt=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},Cre=function(e,r){return e==="v"?jrt(r):Frt(r)},Tre=function(e,r){return e==="v"?Hrt(r):Urt(r)},qrt=function(e,r){return e==="h"&&r==="rtl"?-1:1},Vrt=function(e,r,n,o,a){var i=qrt(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=Tre(e,s),b=g[0],x=g[1],w=g[2],k=x-w-i*b;(b||k)&&Cre(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},S4=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},Are=function(e){return[e.deltaX,e.deltaY]},Rre=function(e){return e&&"current"in e?e.current:e},Yrt=function(e,r){return e[0]===r[0]&&e[1]===r[1]},Wrt=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 15:57:14 +01:00
` )},Grt=0,Om=[];function Xrt(e){var r=S.useRef([]),n=S.useRef([0,0]),o=S.useRef(),a=S.useState(Grt++)[0],i=S.useState(kre)[0],l=S.useRef(e);S.useEffect(function(){l.current=e},[e]),S.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(a));var x=grt([e.lockRef.current],(e.shards||[]).map(Rre)).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=S.useCallback(function(x,w){if("touches"in x&&x.touches.length===2||x.type==="wheel"&&x.ctrlKey)return!l.current.allowPinchZoom;var k=S4(x),C=n.current,_="deltaX"in x?x.deltaX:C[0]-k[0],T="deltaY"in x?x.deltaY:C[1]-k[1],A,R=x.target,D=Math.abs(_)>Math.abs(T)?"h":"v";if("touches"in x&&D==="h"&&R.type==="range")return!1;var N=Sre(D,R);if(!N)return!0;if(N?A=D:(A=D==="v"?"h":"v",N=Sre(D,R)),!N)return!1;if(!o.current&&"changedTouches"in x&&(_||T)&&(o.current=A),!A)return!0;var $ =o.current||A;return Vrt( $ ,w,x, $ ==="h"?_:T)},[]),c=S.useCallback(function(x){var w=x;if(!(!Om.length||Om[Om.length-1]!==i)){var k="deltaY"in w?Are(w):S4(w),C=r.current.filter(function(A){return A.name===w.type&&(A.target===w.target||w.target===A.shadowParent)&&Yrt(A.delta,k)})[0];if(C&&C.should){w.cancelable&&w.preventDefault();return}if(!C){var _=(l.current.shards||[]).map(Rre).filter(Boolean).filter(function(A){return A.contains(w.target)}),T=_.length>0?s(w,_[0]):!l.current.noIsolation;T&&w.cancelable&&w.preventDefault()}}},[]),u=S.useCallback(function(x,w,k,C){var _={name:x,delta:w,target:k,should:C,shadowParent:Krt(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function(T){return T!==_})},1)},[]),d=S.useCallback(function(x){n.current=S4(x),o.current=void 0},[]),p=S.useCallback(function(x){u(x.type,Are(x),x.target,s(x,e.lockRef.current))},[]),f=S.useCallback(function(x){u(x.type,S4(x),x.target,s(x,e.lockRef.current))},[]);S.useEffect(function(){return Om.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,Mm),document.addEventListener("touchmove",c,Mm),document.addEventListener("touchstart",d,Mm),function(){Om=Om.filter(function(x){return x!==i}),document.removeEventListener("wheel",c,Mm),document.removeEventListener("touchmove",c,Mm),document.removeEventListener("touchstart",d,Mm)}},[]);var g=e.removeScrollBar,b=e.inert;return S.createElement(S.Fragment,null,b?S.createElement(i,{styles:Wrt(a)}):null,g?S.createElement(Lrt,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function Krt(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const Zrt=Srt(wre,Xrt);var Nre=S.forwardRef(function(e,r){return S.createElement(_4,ds({},e,{ref:r,sideCar:Zrt}))});Nre.classNames=_4.classNames;function Oo(e){return Object.keys(e)}function Qrt(e){return e.replace(/[A-Z]/g,r=> ` - $ { r . toLowerCase ( ) } ` )}function Jrt(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc \( (.*?) \) $ /)?.[1].split("*")[0].trim()}function C4(e){const r=Jrt(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 Dre(e){return e==="0rem"?"0rem": ` calc ( $ { e } * var ( -- mantine - scale ) ) ` }function Pre(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?Dre(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?Dre(i):i}}return o}return n}const Fe=Pre("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 .
2025-11-07 15:57:14 +01:00
* / v a r N i e ; f u n c t i o n i u t ( ) { i f ( N i e ) r e t u r n S N ; N i e = 1 ; v a r e = Q 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 S 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 , S N } v a r D i e ; f u n c t i o n l u t ( ) { r e t u r n D i e | | ( D i e = 1 , R i e . e x p o r t s = i u t ( ) ) , R i e . 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 15:57:14 +01:00
* /var Pie;function sut(){if(Pie)return EN;Pie=1;var e=Qr,r=lut();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 EN . 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 ( R ) { if ( ! C ) { if ( C = ! 0 , _ = R , R = f ( R ) , g !== void 0 && x . hasValue ) { var D = x . value ; if ( g ( D , R ) ) return T = D } return T = R } if ( D = T , o ( _ , R ) ) return D ; var N = f ( R ) ; return g !== void 0 && g ( D , N ) ? ( _ = R , D ) : ( _ = R , T = N ) } var C = ! 1 , _ , T , A = p === void 0 ? null : p ; return [ function ( ) { return k ( d ( ) ) } , A === null ? void 0 : function ( ) { return k ( A ( ) ) } ] } , [ 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 } , EN } var $ie ; function cut ( ) { return $ie || ( $ie = 1 , Aie . exports = sut ( ) ) , Aie . exports } var Mie = cut ( ) ; const uut = _ae ( Mie ) ; function dut ( e , r = n => n ) { return Mie . useSyncExternalStoreWithSelector ( e . subscribe , ( ) => e . state , ( ) => e . state , r , put ) } function put ( 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 CN = S . createContext ( null ) ; function hut ( ) { return typeof document > "u" ? CN : window . _ _TSR _ROUTER _CONTEXT _ _ ? window . _ _TSR _ROUTER _CONTEXT _ _ : ( window . _ _TSR _ROUTER _CONTEXT _ _ = CN , CN ) } function Up ( e ) { const r = S . useContext ( hut ( ) ) ; return e ? . warn , r } function Dl ( e ) { const r = Up ( { warn : e ? . router === void 0 } ) , n = e ? . router || r , o = S . useRef ( void 0 ) ; return dut ( n . _ _store , a => { if ( e ? . select ) { if ( e . structuralSharing ? ? n . options . defaultStructuralSharing ) { const i = vie ( o . current , e . select ( a ) ) ; return o . current = i , i } return e . select ( a ) } return a } ) } const Oie = S . createContext ( void 0 ) ; S . createContext ( void 0 ) ; function fut ( e ) { const r = Dl ( { select : n => ` not-found- ${ n . location . pathname } - ${ n . status } ` } ) ; return y . jsx ( Tie , { getResetKey : ( ) => r , onCatch : ( n , o ) => { var a ; if ( C5 ( n ) ) ( a = e . onCatch ) == null || a . call ( e , n , o ) ; else throw n } , errorComponent : ( { error : n } ) => { var o ; if ( C5 ( n ) ) return ( o = e . fallback ) == null ? void 0 : o . call ( e , n ) ; throw n } , children : e . children } ) } function mut ( ) { return y . jsx ( "p" , { children : "Not Found" } ) } function TN ( e ) { return y . jsx ( y . Fragment , { children : e . children } ) } function Iie ( 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 ( mut , { } ) } var AN , zie ; function gut ( ) { if ( zie ) return AN ; zie = 1 ; const e = { } , r = e . hasOwnProperty , n = ( N , $ ) => { for ( const O in N ) r . call ( N , O ) && $ ( O , N [ O ] ) } , o = ( N , $ ) => ( $ && n ( $ , ( O , j ) => { N [ O ] = j } ) , N ) , a = ( N , $ ) => { const O = N . length ; let j = - 1 ; for ( ; ++ j < O ; ) $ ( N [ j ] ) } , i = N => "\\u" + ( "0000" + N ) . slice ( - 4 ) , l = ( N , $ ) => { let O = N . toString ( 16 ) ; return $ ? O : O . 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]/ , A = /([\uD800-\uDBFF][\uDC00-\uDFFF])|([\uD800-\uDFFF])|(['"`])|[^]/g , R = /([\uD800-\uDBFF][\uDC00-\uDFFF])|([\uD800-\uDFFF])|(['"`])|[^ !#-&\(-\[\]-_a-~]/g , D = ( N , $ ) => { const O = ( ) => { H = z , ++ $ . indentLevel , z = $ . 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 X,Z=!0;const B= $ .numbers=="binary",W= $ .numbers=="octal",Q= $ .numbers=="decimal",J= $ .numbers=="hexadecimal";if(L&&N&&b(N.toJSON)&&(N=N.toJSON()),!p(N)){if(x(N))return N.size==0?"new Map()":(M||( $ .__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 X=[], $ .wrap=!0,q&&( $ .__inline1__=!1, $ .__inline2__=!0),K||O(),a(N,te=>{Z=!1,K&&( $ .__inline2__=!1),X.push((M||K?"":z)+D(te, $ ))}),Z?"[]":K?"["+X.join(", ")+"]":"["+V+X.join(","+V)+V+(M?"":H)+"]";if(f(N)||g(N)){if(L)return JSON.stringify(Number(N));let te;if(Q)te=String(N);else if(J){let ee=N.toString(16);U||(ee=ee.toUpperCase()),te="0x"+ee}else B?te="0b"+N.toString(2):W&&(te="0o"+N.toString(8));return g(N)?te+"n":te}else return g(N)?L?JSON.stringify(Number(N)):N+"n":d(N)?(X=[], $ .wrap=!0,O(),n(N,(te,ee)=>{Z=!1,X.push((M?"":z)+D(te, $ )+":"+(M?"":" ")+D(ee, $ ))}),Z?"{}":"{"+V+X.join(","+V)+V+(M?"":H)+"}"):L?JSON.stringify(N)||"null":String(N)}const ne= $ .escapeEverything?A:R;return X=N.replace(ne,(te,ee,pe,Te,ce,de)=>{if(ee){if( $ .minimal)return ee;const De=ee.charCodeAt(0),Ge=ee.charCodeAt(1);if( $ .es6){const et=(De-55296)*1024+Ge-56320+65536;return" \\ u{"+l(et,U)+"}"}return i(l(De,U))+i(l(Ge,U))}if(pe)return i(l(pe.charCodeAt(0),U));if(te==" \0 "&&!L&&!_.test(de.charAt(ce+1)))return" \\ 0";if(Te)return Te==Y|| $ .escapeEverything?" \\ "+Te:Te;if(C.test(te))return k[te];if( $ .minimal&&!T.test(te))return te;const xe=l(te.charCodeAt(0),U);return L||xe.length>2?i(xe):" \\ x"+("00"+xe).slice(-2)}),Y==" ` "&&(X=X.replace(/\$\{/g," \ \ $ { ")),$.isScriptContext&&(X=X.replace(/<\/(script|style)/gi," < \ \ / $1 ").replace(/<!--/g,L?" \ \u003C ! -- ":" \ \ x3C ! -- ")),$.wrap&&(X=Y+X+Y),X};return D.version=" 3.0 . 2 ",AN=D,AN}gut();function yut({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 but(){const e=Up(),r=(e.options.getScrollRestorationKey||Sie)(e.latestLocation),n=r!==Sie(e.latestLocation)?r:null;return!e.isScrollRestoring||!e.isServer?null:y.jsx(yut,{children: ` ( $ { tut . toString ( ) } ) ( $ { JSON . stringify ( _ie ) } , $ { JSON . stringify ( n ) } , undefined , true ) ` ,log:!1})}const vut=S.memo(function({matchId:e}){var r,n;const o=Up(),a=Dl({select:w=>{var k;return(k=w.matches.find(C=>C.id===e))==null?void 0:k.routeId}});_5(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))?S.Suspense:TN,f=c?Tie:TN,g=d?fut:TN,b=Dl({select:w=>w.loadedAt}),x=Dl({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(Oie.Provider,{value:e,children:y.jsx(p,{fallback:s,children:y.jsx(f,{getResetKey:()=>b,errorComponent:c||_N,onCatch:(w,k)=>{if(C5(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 S.createElement(d,w)},children:y.jsx(wut,{matchId:e})})})})}),x===Cie&&o.options.scrollRestoration?y.jsxs(y.Fragment,{children:[y.jsx(xut,{}),y.jsx(but,{})]}):null]})});function xut(){var e;const r=Up(),n=S.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",...nut(r.state)}),n.current=r.state.resolvedLocation)}},(e=r.state.resolvedLocation)==null?void 0:e.state.key)}const wut=S.memo(function({matchId:e}){var r,n,o;const a=Up(),{match:i,key:l,routeId:s}=Dl({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:Qct(g,["id","status","error"])}},structuralSharing:!0}),c=a.routesById[s],u=S.useMemo(()=>{const p=c.options.component??a.options.defaultComponent;return p?y.jsx(p,{},l):y.jsx(kut,{})},[l,c.options.component,a.options.defaultComponent]),d=(c.options.errorComponent??a.options.defaultErrorComponent)||_N;if(i.status==="notFound")return _5(C5(i.error)),Iie(a,c,i.error);if(i.status==="redirected")throw _5(rut(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=Jct();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}),kut=S.memo(function(){const e=Up(),r=S.useContext(Oie),n=Dl({select:c=>{var u;return(u=c.matches.find(d=>d.id===r))==null?void 0:u.routeId}}),o=e.routesById[n],a=Dl({select:c=>{const u=c.matches.find(d=>d.id===r);return _5(u),u.globalNotFound}}),i=Dl({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 Iie(e,o,void 0);if(!i)return null;const l=y.jsx(vut,{matchId:i}),s=e.options.defaultPendingComponent?y.jsx(e.options.defaultPendingComponent,{}):null;return r===Cie?y.jsx(S.Suspense,{fallback:s,children:l}):l}),_ut=typeof window<"u"?S.useLayoutEffect:S.useEffect;function Eut(e,r,n={},o={}){const a=S.useRef(typeof IntersectionObserver=="function"),i=S.useRef(null);return S.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 15:57:14 +01:00
` )),u=c.reduce((d,p)=>d.concat(...p),[]);return[c,u]}return[[],[]]},[e]);return S.useEffect(()=>{const c=r?.target?? $ se,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)&&Gle(g))return!1;const b=Ose(g.code,s);if(i.current.add(g[b]),Mse(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=Ose(g.code,s);Mse(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 Mse(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function Ose(e,r){return r.includes(e)?"code":"key"}const Dmt=()=>{const e=Ur();return S.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=KN(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 Nb(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=J5(r,n);return{x:l.x+a,y:l.y+i}}}),[])};function Ise(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)Pmt(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 Pmt(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 $ mt(e,r){return Ise(e,r)}function Mmt(e,r){return Ise(e,r)}function Kp(e,r){return{id:e,type:"select",selected:r}}function ug(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(Kp(i.id,l)))}return o}function zse({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"})]})})}Ece.displayName="MiniMap",S.memo(Ece);const _1t=e=>r=>e? ` $ { Math . max ( 1 / r . transform [ 2 ] , 1 ) } ` :void 0,E1t={[cg.Line]:"right",[cg.Handle]:"bottom-right"};function S1t({nodeId:e,position:r,variant:n=cg.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=Yse(),_=typeof e=="string"?e:C,T=Ur(),A=S.useRef(null),R=n===cg.Handle,D=nr(S.useCallback(_1t(R&&g),[R,g]),Xr),N=S.useRef(null), $ =r??E1t[n];S.useEffect(()=>{if(!(!A.current||!_))return N.current||(N.current=imt({domNode:A.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:j,transform:L,snapGrid:Y,snapToGrid:M,nodeOrigin:U,domNode:z}=T.getState();return{nodeLookup:j,transform:L,snapGrid:Y,snapToGrid:M,nodeOrigin:U,paneDomNode:z}},onChange:(j,L)=>{const{triggerNodeChanges:Y,nodeLookup:M,parentLookup:U,nodeOrigin:z}=T.getState(),H=[],q={x:j.x,y:j.y},K=M.get(_);if(K&&K.expandParent&&K.parentId){const V=K.origin??z,X=j.width??K.measured.width??0,Z=j.height??K.measured.height??0,B={id:K.id,parentId:K.parentId,rect:{width:X,height:Z,...Vle({x:j.x??K.position.x,y:j.y??K.position.y},{width:X,height:Z},K.parentId,M,V)}},W=oD([B],M,U,z);H.push(...W),q.x=j.x?Math.max(V[0]*X,j.x):void 0,q.y=j.y?Math.max(V[1]*Z,j.y):void 0}if(q.x!==void 0&&q.y!==void 0){const V={id:_,type:"position",position:{...q}};H.push(V)}if(j.width!==void 0&&j.height!==void 0){const V={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:j.width,height:j.height}};H.push(V)}for(const V of L){const X={...V,type:"position"};H.push(X)}Y(H)},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 O= $ .split("-");return y.jsx("div",{className:Nn(["react-flow__resize-control","nodrag",...O,n,o]),ref:A,style:{...a,scale:D,...l&&{[R?"backgroundColor":"borderColor"]:l}},children:i})}S.memo(S1t);var C1t=Object.getOwnPropertyNames,T1t=Object.getOwnPropertySymbols,A1t=Object.prototype.hasOwnProperty;function Sce(e,r){return function(n,o,a){return e(n,o,a)&&r(n,o,a)}}function dk(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 R1t(e){return e?.[Symbol.toStringTag]}function Cce(e){return C1t(e).concat(T1t(e))}var N1t=Object.hasOwn||(function(e,r){return A1t.call(e,r)});function Zp(e,r){return e===r||!e&&!r&&e!==e&&r!==r}var D1t="__v",P1t="__o", $ 1t="_owner",Tce=Object.getOwnPropertyDescriptor,Ace=Object.keys;function M1t(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 O1t(e,r){return Zp(e.getTime(),r.getTime())}function I1t(e,r){return e.name===r.name&&e.message===r.message&&e.cause===r.cause&&e.stack===r.stack}function z1t(e,r){return e===r}function Rce(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 L1t=Zp;function B1t(e,r,n){var o=Ace(e),a=o.length;if(Ace(r).length!==a)return!1;for(;a-- >0;)if(!Dce(e,r,n,o[a]))return!1;return!0}function Ob(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],!Dce(e,r,n,i)||(l=Tce(e,i),s=Tce(r,i),(l||s)&&(!l||!s||l.conf
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 15:57:14 +01:00
* / c o n s t Q c e = . 0 2 7 , P y t = 5 e - 4 , $ y t = . 1 , J c e = 1 . 1 4 , g k = . 0 2 2 , e u e = 1 . 4 1 4 , M 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 = h g ( r , e , e . a l p h a ( ) , " r g b " ) ) ; c o n s t n = t u e ( . . . e . r g b ( ) ) , o = t u e ( . . . r . r g b ( ) ) , a = n > = g k ? n : n + M a t h . p o w ( g k - n , e u e ) , i = o > = g k ? o : o + M a t h . p o w ( g k - o , e u 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 ) < P y t ? 0 : a < i ? l * J c e : s * J c e ; r e t u r n ( M a t h . a b s ( c ) < $ y t ? 0 : c > 0 ? c - Q c e : c + Q c e ) * 1 0 0 } ; f u n c t i o n t u 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 : S c , p o w : D n , m i n : O y t , m a x : I y t , a t a n 2 : r u e , a b s : n u e , c o s : y k , s i n : o u e , e x p : z y t , P I : a u e } = M a t h ; f u n c t i o n L y t ( 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 * a u e ) } , l = f u n c t i o n ( Z ) { r e t u r n 2 * a u e * Z / 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 = S c ( D n ( c , 2 ) + D n ( u , 2 ) ) , x = S c ( D n ( p , 2 ) + D n ( f , 2 ) ) , w = ( b + x ) / 2 , k = . 5 * ( 1 - S c ( D n ( w , 7 ) / ( D n ( w , 7 ) + D n ( 2 5 , 7 ) ) ) ) , C = c * ( 1 + k ) , _ = p * ( 1 + k ) , T = S c ( D n ( C , 2 ) + D n ( u , 2 ) ) , A = S c ( D n ( _ , 2 ) + D n ( f , 2 ) ) , R = ( T + A ) / 2 , D = i ( r u e ( u , C ) ) , N = i ( r u e ( f , _ ) ) , $ = D > = 0 ? D : D + 3 6 0 , O = N > = 0 ? N : N + 3 6 0 , j = n u e ( $ - O ) > 1 8 0 ? ( $ + O + 3 6 0 ) / 2 : ( $ + O ) / 2 , L = 1 - . 1 7 * y k ( l ( j - 3 0 ) ) + . 2 4 * y k ( l ( 2 * j ) ) + . 3 2 * y k ( l ( 3 * j + 6 ) ) - . 2 * y k ( l ( 4 * j - 6 3 ) ) ; l e t Y = O - $ ; Y = n u e ( Y ) < = 1 8 0 ? Y : O < = $ ? Y + 3 6 0 : Y - 3 6 0 , Y = 2 * S c ( T * A ) * o u e ( l ( Y ) / 2 ) ; c o n s t M = d - s , U = A - T , z = 1 + . 0 1 5 * D n ( g - 5 0 , 2 ) / S c ( 2 0 + D n ( g - 5 0 , 2 ) ) , H = 1 + . 0 4 5 * R , q = 1 + . 0 1 5 * R * L , K = 3 0 * z y t ( - D n ( ( j - 2 7 5 ) / 2 5 , 2 ) ) , V = - ( 2 * S c ( D n ( R , 7 ) / ( D n ( R , 7 ) + D n ( 2 5 , 7 ) ) ) ) * o u e ( 2 * l ( K ) ) , X = S c ( D n ( M / ( n * z ) , 2 ) + D n ( U / ( o * H ) , 2 ) + D n ( Y / ( a * q ) , 2 ) + V * ( U / ( o * H ) ) * ( Y / ( a * q ) ) ) ; r e t u r n I y t ( 0 , O y t ( 1 0 0 , X ) ) } f u n c t i o n B 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 j 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 } } , F y t = { c o o l ( ) { r e t u r n m k ( [ Q t . h s l ( 1 8 0 , 1 , . 9 ) , Q t . h s l ( 2 5 0 , . 7 , . 4 ) ] ) } , h o t ( ) { r e t u r n m k ( [ " # 0 0 0 " , " # f 0 0 " , " # f f 0 " , " # f f f " ] ) . m o d e ( " r g b " ) } } , D 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 15:57:14 +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 { I 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 I D . e x p o r t s } r b t ( ) ; l e t z 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 ) } } ; z b . p r o t o t y p e . n o r m a l = { } , z b . p r o t o t y p e . p r o p e r t y = { } , z 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 E 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 z b ( n , o , r ) } f u n c t i o n L 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 n b t = 0 ; c o n s t z t = J p ( ) , $ n = J p ( ) , S u e = J p ( ) , q e = J p ( ) , N r = J p ( ) , x g = J p ( ) , j a = J p ( ) ; f u n c t i o n J p ( ) { r e t u r n 2 * * + + n b t } c o n s t z 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 : z t , b o o l e a n i s h : $ n , c o m m a O r S p a c e S e p a r a t e d : j a , c o m m a S e p a r a t e d : x g , n u m b e r : q 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 : N 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 " } ) ) , L D = O b j e c t . k e y s ( z D ) ; l e t B 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 < L D . l e n g t h ; ) { c o n s t i = L D [ a ] ; C u e ( t h i s , L D [ a ] , ( n & z D [ i ] ) = = = z D [ i ] ) } } } ; B 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 w 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 B 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 [ L b ( o ) ] = o , n [ L b ( i . a t t r i b u t e ) ] = o } r e t u r n n e w z b ( r , n , e . s p a c e ) } c o n s t T u e = w 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 : $ 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 : $ n , a r i a C h e c k e d : $ n , a r i a C o l C o u n t : q e , a r i a C o l I n d e x : q e , a r i a C o l S p a n : q e , a r i a C o n t r o l s : N 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 : N 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 : $ n , a r i a D r o p E f f e c t : N 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 : $ n , a r i a F l o w T o : N r , a r i a G r a b b e d : $ 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 : $ 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 : N r , a r i a L e v e l : q e , a r i a L i v e : n u l l , a r i a M o d a l : $ n , a r i a M u l t i L i n e : $ n , a r i a M u l t i S e l e c t a b l e : $ 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 : N 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 : q e , a r i a P r e s s e d : $ n , a r i a R e a d O n l y : $ 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 : $ n , a r i a R o l e D e s c r i p t i o n : N r , a r i a R o w C o u n t : q e , a r i a R o w I n d e x : q e , a r i a R o w S p a n : q e , a r i a S e l e c t e d : $ n , a r i a S e t S i z e : q 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 : q e , a r i a V a l u e M i n : q e , a r i a V a l u e N o w : q 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 A 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 R u e ( e , r ) { r e t u r n A u e ( e , r . t o L o w e r C a s e ( ) ) } c o n s t o b t = w 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 : x g , a c c e p t C h a r s e t : N r , a c c e s s K e y : N 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 : z t , a l l o w P a y m e n t R e q u e s t : z t , a l l o w U s e r M e d i a : z t , a l t : n u l l , a s : n u l l , a s y n c : z 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 : N r , a u t o F o c u s : z t , a u t o P l a y : z t , b l o c k i n g : N 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 : z t , c i t e : n u l l , c l a s s N a m e : N r , c o l s : q 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 : $ n , c o n t r o l s : z t , c o n t r o l s L i s t : N r , c o o r d s : q e | x 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 : z t , d e f e r : z 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 : z t , d o w n l o a d : S u e , d r a g g a b l e : $ 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 : z t , f o r m T a r g e t : n u l l , h e a d e r s : N r , h e i g h t : q e , h i d d e n : z t , h i g h : q 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 : N r , h t t p E q u i v : N 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 : z 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 15:57:14 +01:00
\ f \ r "&'<=>\``.split(" ")]],single:[[" & '".split(""),"\"&' ` ".split("")],[" \0 &'".split("")," \0 \" &' ` ".split(" ")]],double:[['" & '.split(""),"\"&' ` ".split("")],[' \0 "&'.split("")," \0 \" &' ` ".split(" ")]]};function jvt(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=Oue);const u=Fvt(o,e.properties),d=o.all(a.space===" html "&&e.tagName===" template "?e.content:e);return o.schema=a,d&&(l=!1),(u||!i||!Mvt(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||!QD(e,r,n))&&s.push(" < /"+e.tagName+">"),s.join("")}function Fvt(e,r){const n=[];let o=-1,a;if(r){for(a in r)if(r[a]!==null&&r[a]!==void 0){const i=Hvt(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 Hvt(e,r,n){const o=Mue(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=Sg(o.attribute,Object.assign({},e.settings.characterReferences,{subset:_k.name[a][i]}));return n===!0||(n=Array.isArray(n)?(o.commaSeparated?zue:jue)(n,{padLeft:!e.settings.tightCommaSeparatedLists}):String(n),e.settings.collapseEmptyAttributes&&!n)?c:(e.settings.preferUnquoted&&(s=Sg(n,Object.assign({},e.settings.characterReferences,{attribute:!0,subset:_k.unquoted[a][i]}))),s!==n&&(e.settings.quoteSmart&&hde(n,l)>hde(n,e.alternative)&&(l=e.alternative),s=l+Sg(n,Object.assign({},e.settings.characterReferences,{subset:(l==="'"?_k.single:_k.double)[a][i],attribute:!0}))+l),c+(s&&"="+s))}const Uvt=["<","&"];function xde(e,r,n,o){return n&&n.type==="element"&&(n.tagName==="script"||n.tagName==="style")?e.value:Sg(e.value,Object.assign({},o.settings.characterReferences,{subset:Uvt}))}function qvt(e,r,n,o){return o.settings.allowDangerousHtml?e.value:xde(e,r,n,o)}function Vvt(e,r,n,o){return o.all(e)}tde("type",{invalid:Yvt,unknown:Wvt,handlers:{comment:yvt,doctype:bvt,element:jvt,raw:qvt,root:Vvt,text:xde}});function Yvt(e){throw new Error("Expected node, not `"+e+"`")}function Wvt(e){const r=e;throw new Error("Cannot compile unknown node `"+r.type+"`")}const jb=Ek(/ [ A - Za - z ] / ) , eP = Ek ( /[\dA-Za-z]/ ) ; function Gvt ( e ) { return e !== null && ( e < 32 || e === 127 ) } function Cg ( e ) { return e !== null && ( e < 0 || e === 32 ) } const wde = Ek ( new RegExp ( "\\p{P}|\\p{S}" , "u" ) ) , Fb = Ek ( /\s/ ) ; function Ek ( e ) { return r ; function r ( n ) { return n !== null && n > - 1 && e . test ( String . fromCharCode ( n ) ) } } ude ( [ "break" , "delete" , "emphasis" , "footnote" , "footnoteReference" , "image" , "imageReference" , "inlineCode" , "inlineMath" , "link" , "linkReference" , "mdxJsxTextElement" , "mdxTextExpression" , "strong" , "text" , "textDirective" ] ) ; function Xvt ( 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 Kvt = { tokenize : t3t , partial : ! 0 } , kde = { tokenize : r3t , partial : ! 0 } , _de = { tokenize : n3t , partial : ! 0 } , Ede = { tokenize : o3t , partial : ! 0 } , Zvt = { tokenize : a3t , partial : ! 0 } , Sde = { name : "wwwAutolink" , tokenize : Jvt , previous : Tde } , Cde = { name : "protocolAutolink" , tokenize : e3t , previous : Ade } , Tc = { name : "emailAutolink" , tokenize : Qvt , previous : Rde } , Ac = { } ; let rh = 48 ; for ( ; rh < 123 ; ) Ac [ rh ] = Tc , rh ++ , rh === 58 ? rh = 65 : rh === 91 && ( rh = 97 ) ; Ac [ 43 ] = Tc , Ac [ 45 ] = Tc , Ac [ 46 ] = Tc , Ac [ 95 ] = Tc , Ac [ 72 ] = [ Tc , Cde ] , Ac [ 104 ] = [ Tc , Cde ] , Ac [ 87 ] = [ Tc , Sde ] , Ac [ 119 ] = [ Tc , Sde ] ; function Qvt ( e , r , n ) { const o = this ; let a , i ; return l ; function l ( p ) { return ! tP ( p ) || ! Rde . call ( o , o . previous ) || rP ( 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 15:57:14 +01:00
` ))}}const e2t={major:4,minor:0,patch:0},an= $ e(" $ ZodType",(e,r)=>{var n;e??(e={}),e._zod.def=r,e._zod.bag=e._zod.bag||{},e._zod.version=e2t;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=Kb(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 Wb;if(u||f instanceof Promise)u=(u??Promise.resolve()).then(async()=>{await f,i.issues.length!==p&&(c||(c=Kb(i,p)))});else{if(i.issues.length===p)continue;c||(c=Kb(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 Wb;return s.then(c=>a(c,o,l))}return a(s,o,l)}}e["~standard"]={validate:a=>{try{const i=gwt(e,a);return i.success?{value:i.data}:{issues:i.error?.issues}}catch{return ywt(e,a).then(i=>i.success?{value:i.data}:{issues:i.error?.issues})}},vendor:"zod",version:1}}), $ k= $ e(" $ ZodString",(e,r)=>{an.init(e,r),e._zod.pattern=[...e?._zod.bag?.patterns??[]].pop()??Bwt(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}}),Vr= $ e(" $ ZodStringFormat",(e,r)=>{Pk.init(e,r), $ k.init(e,r)}),t2t= $ e(" $ ZodGUID",(e,r)=>{r.pattern??(r.pattern=Swt),Vr.init(e,r)}),r2t= $ e(" $ 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=Dhe(n))}else r.pattern??(r.pattern=Dhe());Vr.init(e,r)}),n2t= $ e(" $ ZodEmail",(e,r)=>{r.pattern??(r.pattern=Cwt),Vr.init(e,r)}),o2t= $ e(" $ ZodURL",(e,r)=>{Vr.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:Mwt.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})}}}),a2t= $ e(" $ ZodEmoji",(e,r)=>{r.pattern??(r.pattern=Awt()),Vr.init(e,r)}),i2t= $ e(" $ ZodNanoID",(e,r)=>{r.pattern??(r.pattern=_wt),Vr.init(e,r)}),l2t= $ e(" $ ZodCUID",(e,r)=>{r.pattern??(r.pattern=bwt),Vr.init(e,r)}),s2t= $ e(" $ ZodCUID2",(e,r)=>{r.pattern??(r.pattern=vwt),Vr.init(e,r)}),c2t= $ e(" $ ZodULID",(e,r)=>{r.pattern??(r.pattern=xwt),Vr.init(e,r)}),u2t= $ e(" $ ZodXID",(e,r)=>{r.pattern??(r.pattern=wwt),Vr.init(e,r)}),d2t= $ e(" $ ZodKSUID",(e,r)=>{r.pattern??(r.pattern=kwt),Vr.init(e,r)}),p2t= $ e(" $ ZodISODateTime",(e,r)=>{r.pattern??(r.pattern=Lwt(r)),Vr.init(e,r)}),h2t= $ e(" $ ZodISODate",(e,r)=>{r.pattern??(r.pattern=Iwt),Vr.init(e,r)}),f2t= $ e(" $ ZodISOTime",(e,r)=>{r.pattern??(r.pattern=zwt(r)),Vr.init(e,r)}),m2t= $ e(" $ ZodISODuration",(e,r)=>{r.pattern??(r.pattern=Ewt),Vr.init(e,r)}),g2t= $ e(" $ ZodIPv4",(e,r)=>{r.pattern??(r.pattern=Rwt),Vr.init(e,r),e._zod.onattach.push(n=>{const o=n._zod.bag;o.format="ipv4"})}),y2t= $ e(" $ ZodIPv6",(e,r)=>{r.pattern??(r.pattern=Nwt),Vr.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})}}}),b2t=$e("$ZodCIDRv4",(e,r)=>{r.pattern??(r.pattern=Dwt),Vr.init(e,r)}),v2t=$e("$ZodCIDRv6",(e,r)=>{r.pattern??(r.pattern=Pwt),Vr.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 ,
2025-11-07 15:04:16 +01:00
path : iss . path ? [ $ { Gb ( k ) } , ... iss . path ] : [ $ { Gb ( k ) } ]
2025-11-07 15:57:14 +01:00
} ) ) ) ; ` ),p.write( ` newResult [ $ { Gb ( 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=y $ ,l=!khe.jitless,s=l&&owt.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[_],A=T._zod.run({value:f[_],issues:[]},p),R=T._zod.optin==="optional"&&T._zod.optout==="optional";A instanceof Promise?g.push(A.then(D=>R?Lhe(D,d,_,f):Mk(D,d,_))):R?Lhe(A,d,_,f):Mk(A,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=>Mk(T,d,C))):Mk(_,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 Bhe(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=>sh(i,o,ih())))}),r}const N2t= $ e(" $ ZodUnion",(e,r)=>{an.init(e,r),qr(e._zod,"optin",()=>r.options.some(n=>n._zod.optin==="optional")?"optional":void 0),qr(e._zod,"optout",()=>r.options.some(n=>n._zod.optout==="optional")?"optional":void 0),qr(e._zod,"values",()=>{if(r.options.every(n=>n._zod.values))return new Set(r.options.flatMap(n=>Array.from(n._zod.values)))}),qr(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 => m$ ( 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=>Bhe(l,n,e,o)):Bhe(i,n,e,o)}}),D2t= $ e(" $ ZodIntersection",(e,r)=>{an.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])=>jhe(n,s,c)):jhe(n,i,l)}});function w $ (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(b $ (e)&&b $ (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=w $ (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=w $ (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 jhe(e,r,n){if(r.issues.length&&e.issues.push(...r.issues),n.issues.length&&e.issues.push(...n.issues),Kb(e))return e;const o=w $ (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 P2t= $ e(" $ ZodEnum",(e,r)=>{an.init(e,r);const n=rwt(r.entries);e._zod.values=new Set(n),e._zod.pattern=new RegExp( ` ^ ( $ { n . filter ( o => awt . has ( typeof o ) ) . map ( o => typeof o == "string" ? Xb ( 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}}), $ 2t= $ e(" $ ZodLiteral",(e,r)=>{an.init(e,r),e._zod.values=new Set(r.values),e._zod.pattern=new RegExp( ` ^ ( $ { r . values . map ( n => typeof n == "string" ? Xb ( 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}}),Fhe= $ e(" $ ZodTransform",(e,r)=>{an.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 15:57:14 +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=B5t.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",Ahe(r.error)),{viewId:"index"})}render(){const r=this.getProps();this.updateHostCss(),this.root??=frt.createRoot(this.shadow),this.root.render(y.jsx(crt,{...r}))}attributeChangedCallback(r){this.root&&this.render()}}return customElements.define(mrt.View,sfe),G6.LikeC4View=sfe,Object.defineProperty(G6,Symbol.toStringTag,{value:"Module"}),G6})({});
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 */
