2025-12-19 10:05:34 +01:00
var LikeC4Views = ( function ( Y6 ) { "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-12-19 13:16:01 +01:00
function Lge ( 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 LN ( e ) { return e && e . _ _esModule && Object . prototype . hasOwnProperty . call ( e , "default" ) ? e . default : e } var X6 = { exports : { } } , Xg = { } ; var FN ; function Fge ( ) { if ( FN ) return Xg ; FN = 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 Xg . Fragment = r , Xg . jsx = n , Xg . jsxs = n , Xg } var VN ; function Vge ( ) { return VN || ( VN = 1 , X6 . exports = Fge ( ) ) , X6 . exports } var y = Vge ( ) , Z6 = { exports : { } } , $t = { } ; var qN ; function qge ( ) { if ( qN ) return $t ; qN = 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" ) , d = Symbol . for ( "react.memo" ) , u = Symbol . for ( "react.lazy" ) , p = Symbol . for ( "react.activity" ) , f = Symbol . iterator ; function g ( Y ) { return Y === null || typeof Y != "object" ? null : ( Y = f && Y [ f ] || Y [ "@@iterator" ] , typeof Y == "function" ? Y : null ) } var v = { isMounted : function ( ) { return ! 1 } , enqueueForceUpdate : function ( ) { } , enqueueReplaceState : function ( ) { } , enqueueSetState : function ( ) { } } , w = Object . assign , x = { } ; function k ( Y , Z , O ) { this . props = Y , this . context = Z , this . refs = x , this . updater = O || v } k . prototype . isReactComponent = { } , k . prototype . setState = function ( Y , Z ) { if ( typeof Y != "object" && typeof Y != "function" && Y != 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 , Y , Z , "setState" ) } , k . prototype . forceUpdate = function ( Y ) { this . updater . enqueueForceUpdate ( this , Y , "forceUpdate" ) } ; function C ( ) { } C . prototype = k . prototype ; function _ ( Y , Z , O ) { this . props = Y , this . context = Z , this . refs = x , this . updater = O || v } var $ = _ . prototype = new C ; $ . constructor = _ , w ( $ , k . prototype ) , $ . isPureReactComponent = ! 0 ; var R = Array . isArray ; function T ( ) { } var A = { H : null , A : null , T : null , S : null } , z = Object . prototype . hasOwnProperty ; function j ( Y , Z , O ) { var W = O . ref ; return { $$typeof : e , type : Y , key : Z , ref : W !== void 0 ? W : null , props : O } } function I ( Y , Z ) { return j ( Y . type , Z , Y . props ) } function P ( Y ) { return typeof Y == "object" && Y !== null && Y . $$typeof === e } function L ( Y ) { var Z = { "=" : "=0" , ":" : "=2" } ; return "$" + Y . replace ( /[=:]/g , function ( O ) { return Z [ O ] } ) } var H = /\/+/g ; function M ( Y , Z ) { return typeof Y == "object" && Y !== null && Y . key != null ? L ( "" + Y . key ) : Z . toString ( 36 ) } function V ( Y ) { switch ( Y . status ) { case "fulfilled" : return Y . value ; case "rejected" : throw Y . reason ; default : switch ( typeof Y . status == "string" ? Y . then ( T , T ) : ( Y . status = "pending" , Y . then ( function ( Z ) { Y . status === "pending" && ( Y . status = "fulfilled" , Y . value = Z ) } , function ( Z ) { Y . status === "pending" && ( Y . status = "rejected" , Y . reason = Z ) } ) ) , Y . status ) { case "fulfilled" : return Y . value ; case "rejected" : throw Y . reason } } throw Y } function B ( Y , Z , O , W , K ) { var Q = typeof Y ; ( Q === "undefined" || Q === "boolean" ) && ( Y = null ) ; var ae = ! 1 ; if ( Y === null ) ae = ! 0 ; else switch ( Q ) { case "bigint" : case "string" : case "number" : ae = ! 0 ; break ; case "object" : switch ( Y . $$typeof ) { case e : case r : ae = ! 0 ; break ; case u : return ae = Y . _init , B ( ae ( Y . _payload ) , Z , O , W , K ) } } if ( ae ) return K = K ( Y ) , ae = W === "" ? "." + M ( Y , 0 ) : W , R ( K ) ? ( O = "" , ae != null && ( O = ae . replace ( H , "$&/" ) + "/" ) , B ( K , Z , O , "" , function ( ue ) { return ue } ) ) : K != null && ( P ( K ) && ( K = I ( K , O + ( K . key == null || Y && Y . key === K . key ? "" : ( "" + K . key ) . replace ( H , "$&/" ) + "/" ) + ae ) ) , Z . push ( K ) ) , 1 ; ae = 0 ; var te = W === "" ? "." : W + ":" ; if ( R ( Y ) ) for ( var re = 0 ; re < Y . length ; re ++ ) W = Y [ re ] , Q = te + M ( W , re ) , ae += B ( W , Z , O , Q , K ) ; else if ( re = g ( Y ) , typeof re == "function" ) for ( Y = re . call ( Y ) , re = 0 ; ! ( W = Y . next ( ) ) . done ; ) W = W . value , Q = te + M ( W , re ++ ) , ae += B ( W , Z , O , Q , K ) ; else if ( Q === "object" ) { if ( typeof Y . then == "function" ) return B ( V ( Y ) , Z , O , W , K ) ; throw Z = String ( Y ) , Error ( " Objects are not valid as a React chi
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-12-19 13:16:01 +01:00
\ f \ r "&'<=>\``.split(" ")]],single:[[" & '".split(""),"\"&' ` ".split("")],[" \0 &'".split("")," \0 \" &' ` ".split(" ")]],double:[['" & '.split(""),"\"&' ` ".split("")],[' \0 "&'.split("")," \0 \" &' ` ".split(" ")]]};function Cve(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=AB);const d=$ve(o,e.properties),u=o.all(a.space===" html "&&e.tagName===" template "?e.content:e);return o.schema=a,u&&(l=!1),(d||!i||!xve(e,r,n))&&(s.push(" < ",e.tagName,d?" "+d:" "),l&&(a.space===" svg "||o.settings.closeSelfClosing)&&(c=d.charAt(d.length-1),(!o.settings.tightSelfClosing||c===" / "||c&&c!=='" '&&c!=="' ")&&s.push(" "),s.push(" / ")),s.push(" > ")),s.push(u),!l&&(!i||!V_(e,r,n))&&s.push(" < /"+e.tagName+">"),s.join("")}function $ve(e,r){const n=[];let o=-1,a;if(r){for(a in r)if(r[a]!==null&&r[a]!==void 0){const i=Rve(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 Rve(e,r,n){const o=j0e(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=Lh(o.attribute,Object.assign({},e.settings.characterReferences,{subset:Ib.name[a][i]}));return n===!0||(n=Array.isArray(n)?(o.commaSeparated?nve:ove)(n,{padLeft:!e.settings.tightCommaSeparatedLists}):String(n),e.settings.collapseEmptyAttributes&&!n)?c:(e.settings.preferUnquoted&&(s=Lh(n,Object.assign({},e.settings.characterReferences,{attribute:!0,subset:Ib.unquoted[a][i]}))),s!==n&&(e.settings.quoteSmart&&Bb(n,l)>Bb(n,e.alternative)&&(l=e.alternative),s=l+Lh(n,Object.assign({},e.settings.characterReferences,{subset:(l==="'"?Ib.single:Ib.double)[a][i],attribute:!0}))+l),c+(s&&"="+s))}const zve=["<","&"];function VB(e,r,n,o){return n&&n.type==="element"&&(n.tagName==="script"||n.tagName==="style")?e.value:Lh(e.value,Object.assign({},o.settings.characterReferences,{subset:zve}))}function Tve(e,r,n,o){return o.settings.allowDangerousHtml?e.value:VB(e,r,n,o)}function jve(e,r,n,o){return o.all(e)}const Ave=N0e("type",{invalid:Dve,unknown:Mve,handlers:{comment:tve,doctype:rve,element:Cve,raw:Tve,root:jve,text:VB}});function Dve(e){throw new Error("Expected node, not `"+e+"`")}function Mve(e){const r=e;throw new Error("Cannot compile unknown node `"+r.type+"`")}const Nve={},Pve={},Bve=[];function Ive(e,r){const n=r||Nve,o=n.quote||'"',a=o==='"'?"'":'"';if(o!=='"'&&o!=="'")throw new Error("Invalid quote `"+o+"`, expected `'` or `\"`");return{one:Ove,all:Lve,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||E0e,characterReferences:n.characterReferences||Pve,closeSelfClosing:n.closeSelfClosing||!1,closeEmptyElements:n.closeEmptyElements||!1},schema:n.space==="svg"?AB:M0e,quote:o,alternative:a}.one(Array.isArray(e)?{type:"root",children:e}:e,void 0,void 0)}function Ove(e,r,n){return Ave(e,r,n,this)}function Lve(e){const r=[],n=e&&e.children||Bve;let o=-1;for(;++o<n.length;)r[o]=this.one(n[o],o,e);return r.join("")}function Fve(e){const r=this,n={...r.data("settings"),...e};r.compiler=o;function o(a){return Ive(a,n)}}function Bwt(){}const Bo=td(/ [ A - Za - z ] / ) , xo = td ( /[\dA-Za-z]/ ) , Vve = td ( /[#-'*+\--9=?A-Z^-~]/ ) ; function Ob ( e ) { return e !== null && ( e < 32
` :" ")+i.indentLines(i.containerFlow(o,s.current()),r?GB: $ be))),d(),c}}function $ be(e,r,n){return r===0?e:GB(e,r,n)}function GB(e,r,n){return(n?"":" ")+e}const Rbe=["autolink","destinationLiteral","destinationRaw","reference","titleQuote","titleApostrophe"];YB.peek=Dbe;function zbe(){return{canContainEols:["delete"],enter:{strikethrough:jbe},exit:{strikethrough:Abe}}}function Tbe(){return{unsafe:[{character:"~",inConstruct:"phrasing",notInConstruct:Rbe}],handlers:{delete:YB}}}function jbe(e){this.enter({type:"delete",children:[]},e)}function Abe(e){this.exit(e)}function YB(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 Dbe(){return"~"}function Mbe(e){return e.length}function Nbe(e,r){const n=r||{},o=(n.align||[]).concat(),a=n.stringLength||Mbe,i=[],l=[],s=[],c=[];let d=0,u=-1;for(;++u<e.length;){const w=[],x=[];let k=-1;for(e[u].length>d&&(d=e[u].length);++k<e[u].length;){const C=Pbe(e[u][k]);if(n.alignDelimiters!==!1){const _=a(C);x[k]=_,(c[k]===void 0||_>c[k])&&(c[k]=_)}w.push(C)}l[u]=w,s[u]=x}let p=-1;if(typeof o=="object"&&"length"in o)for(;++p<d;)i[p]=XB(o[p]);else{const w=XB(o);for(;++p<d;)i[p]=w}p=-1;const f=[],g=[];for(;++p<d;){const w=i[p];let x="",k="";w===99?(x=":",k=":"):w===108?x=":":w===114&&(k=":");let C=n.alignDelimiters===!1?1:Math.max(1,c[p]-x.length-k.length);const _=x+"-".repeat(C)+k;n.alignDelimiters!==!1&&(C=x.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),u=-1;const v=[];for(;++u<l.length;){const w=l[u],x=s[u];p=-1;const k=[];for(;++p<d;){const C=w[p]||"";let _="", $ ="";if(n.alignDelimiters!==!1){const R=c[p]-(x[p]||0),T=i[p];T===114?_=" ".repeat(R):T===99?R%2?(_=" ".repeat(R/2+.5), $ =" ".repeat(R/2-.5)):(_=" ".repeat(R/2), $ =_): $ =" ".repeat(R)}n.delimiterStart!==!1&&!p&&k.push("|"),n.padding!==!1&&!(n.alignDelimiters===!1&&C==="")&&(n.delimiterStart!==!1||p)&&k.push(" "),n.alignDelimiters!==!1&&k.push(_),k.push(C),n.alignDelimiters!==!1&&k.push( $ ),n.padding!==!1&&k.push(" "),(n.delimiterEnd!==!1||p!==d-1)&&k.push("|")}v.push(n.delimiterEnd===!1?k.join("").replace(/ + $ /,""):k.join(""))}return v.join( `
2025-12-19 10:05:34 +01:00
` )}function Pbe(e){return e==null?"":String(e)}function XB(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 Bbe(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()),Ibe);return a(),l}function Ibe(e,r,n){return">"+(n?"":" ")+e}function Obe(e,r){return ZB(e,r.inConstruct,!0)&&!ZB(e,r.notInConstruct,!1)}function ZB(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 KB(e,r,n,o){let a=-1;for(;++a<n.unsafe.length;)if(n.unsafe[a].character=== `
` &&Obe(n.stack,n.unsafe[a]))return/[ \t ]/.test(o.before)?"":" ";return ` \ \
` }function Lbe(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 Fbe(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 Vbe(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 qbe(e,r,n,o){const a=Vbe(n),i=e.value||" ",l=a===" ` "?"GraveAccent":"Tilde";if(Fbe(e,n)){const p=n.enter("codeIndented"),f=n.indentLines(i,Hbe);return p(),f}const s=n.createTracker(o),c=a.repeat(Math.max(Lbe(i,a)+1,3)),d=n.enter("codeFenced");let u=s.move(c);if(e.lang){const p=n.enter( ` codeFencedLang$ { l } ` );u+=s.move(n.safe(e.lang,{before:u,after:" ",encode:[" ` "],...s.current()})),p()}if(e.lang&&e.meta){const p=n.enter(`codeFencedMeta${l}`);u+=s.move(" " ) , u += s . move ( n . safe ( e . meta , { before : u , after : `
2025-12-16 12:13:34 +01:00
` ,encode:[" ` " ] , ... s . current ( ) } ) ) , p ( ) } return u += s . move ( `
` ),i&&(u+=s.move(i+ `
2025-12-19 10:05:34 +01:00
` )),u+=s.move(c),d(),u}function Hbe(e,r,n){return(n?"":" ")+e}function X_(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 Ube ( e , r , n , o ) { const a = X _ ( n ) , i = a === '"' ? "Quote" : "Apostrophe" , l = n . enter ( "definition" ) ; let s = n . enter ( "label" ) ; const c = n . createTracker ( o ) ; let d = c . move ( "[" ) ; return d += c . move ( n . safe ( n . associationId ( e ) , { before : d , after : "]" , ... c . current ( ) } ) ) , d += c . move ( "]: " ) , s ( ) , ! e . url || /[\0- \u007F]/ . test ( e . url ) ? ( s = n . enter ( "destinationLiteral" ) , d += c . move ( "<" ) , d += c . move ( n . safe ( e . url , { before : d , after : ">" , ... c . current ( ) } ) ) , d += c . move ( ">" ) ) : ( s = n . enter ( "destinationRaw" ) , d += c . move ( n . safe ( e . url , { before : d , after : e . title ? " " : `
` ,...c.current()}))),s(),e.title&&(s=n.enter( ` title$ { i } ` ),d+=c.move(" "+a),d+=c.move(n.safe(e.title,{before:d,after:a,...c.current()})),d+=c.move(a),s()),l(),d}function Wbe(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 l1(e){return"&#x"+e.toString(16).toUpperCase()+";"}function Fh(e){if(e===null||Sr(e)||Pu(e))return 1;if(Lb(e))return 2}function qb(e,r,n){const o=Fh(e),a=Fh(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}}QB.peek=Gbe;function QB(e,r,n,o){const a=Wbe(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 d=c.charCodeAt(0),u=qb(o.before.charCodeAt(o.before.length-1),d,a);u.inside&&(c=l1(d)+c.slice(1));const p=c.charCodeAt(c.length-1),f=qb(o.after.charCodeAt(0),p,a);f.inside&&(c=c.slice(0,-1)+l1(p));const g=l.move(a);return i(),n.attentionEncodeSurroundingInfo={after:f.outside,before:u.outside},s+c+g}function Gbe(e,r,n){return n.options.emphasis||"*"}function Z_(e,r,n,o){let a,i,l;typeof r=="function"&&typeof n!="function"?(i=void 0,l=r,a=n):(i=r,l=n,a=o),HB(e,i,s,a);function s(c,d){const u=d[d.length-1],p=u?u.children.indexOf(c):void 0;return l(c,p,u)}}const Ybe={};function Hb(e,r){const n=r||Ybe,o=typeof n.includeImageAlt=="boolean"?n.includeImageAlt:!0,a=typeof n.includeHtml=="boolean"?n.includeHtml:!0;return JB(e,o,a)}function JB(e,r,n){if(Xbe(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 eI(e.children,r,n)}return Array.isArray(e)?eI(e,r,n):""}function eI(e,r,n){const o=[];let a=-1;for(;++a<e.length;)o[a]=JB(e[a],r,n);return o.join("")}function Xbe(e){return!!(e&&typeof e=="object")}function Zbe(e,r){let n=!1;return Z_(e,function(o){if("value"in o&&/ \r ? \n | \r /.test(o.value)||o.type==="break")return n=!0,U_}),!!((!e.depth||e.depth<3)&&Hb(e)&&(r.options.setext||n))}function Kbe(e,r,n,o){const a=Math.max(Math.min(6,e.depth||1),1),i=n.createTracker(o);if(Zbe(e,n)){const u=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: `
2025-12-16 12:13:34 +01:00
` });return p(),u(),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
` +(a===1?"=":"-").repeat(f.length-(Math.max(f.lastIndexOf(" \r "),f.lastIndexOf( `
2025-12-16 12:13:34 +01:00
` ))+1))}const l="#".repeat(a),s=n.enter("headingAtx"),c=n.enter("phrasing");i.move(l+" ");let d=n.containerPhrasing(e,{before:"# ",after: `
2025-12-19 10:05:34 +01:00
` ,...i.current()});return/^[ \t ]/.test(d)&&(d=l1(d.charCodeAt(0))+d.slice(1)),d=d?l+" "+d:l,n.options.closeAtx&&(d+=" "+l),c(),s(),d}tI.peek=Qbe;function tI(e){return e.value||""}function Qbe(){return"<"}rI.peek=Jbe;function rI(e,r,n,o){const a=X_(n),i=a==='"'?"Quote":"Apostrophe",l=n.enter("image");let s=n.enter("label");const c=n.createTracker(o);let d=c.move("![");return d+=c.move(n.safe(e.alt,{before:d,after:"]",...c.current()})),d+=c.move("]("),s(),!e.url&&e.title||/[ \0 - \u 007F]/.test(e.url)?(s=n.enter("destinationLiteral"),d+=c.move("<"),d+=c.move(n.safe(e.url,{before:d,after:">",...c.current()})),d+=c.move(">")):(s=n.enter("destinationRaw"),d+=c.move(n.safe(e.url,{before:d,after:e.title?" ":")",...c.current()}))),s(),e.title&&(s=n.enter( ` title$ { i } ` ),d+=c.move(" "+a),d+=c.move(n.safe(e.title,{before:d,after:a,...c.current()})),d+=c.move(a),s()),d+=c.move(")"),l(),d}function Jbe(){return"!"}nI.peek=exe;function nI(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 d=n.safe(e.alt,{before:c,after:"]",...s.current()});c+=s.move(d+"]["),l();const u=n.stack;n.stack=[],l=n.enter("reference");const p=n.safe(n.associationId(e),{before:c,after:"]",...s.current()});return l(),n.stack=u,i(),a==="full"||!d||d!==p?c+=s.move(p+"]"):a==="shortcut"?c=c.slice(0,-1):c+=s.move("]"),c}function exe(){return"!"}oI.peek=txe;function oI(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 d=c.index;o.charCodeAt(d)===10&&o.charCodeAt(d-1)===13&&d--,o=o.slice(0,d)+" "+o.slice(c.index+1)}}return a+o+a}function txe(){return" ` "}function aI(e,r){const n=Hb(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))}iI.peek=rxe;function iI(e,r,n,o){const a=X_(n),i=a==='" ' ? "Quote" : "Apostrophe" , l = n . createTracker ( o ) ; let s , c ; if ( aI ( e , n ) ) { const u = 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 = u , p } s = n . enter ( "link" ) , c = n . enter ( "label" ) ; let d = l . move ( "[" ) ; return d += l . move ( n . containerPhrasing ( e , { before : d , after : "](" , ... l . current ( ) } ) ) , d += l . move ( "](" ) , c ( ) , ! e . url && e . title || /[\0- \u007F]/ . test ( e . url ) ? ( c = n . enter ( "destinationLiteral" ) , d += l . move ( "<" ) , d += l . move ( n . safe ( e . url , { before : d , after : ">" , ... l . current ( ) } ) ) , d += l . move ( ">" ) ) : ( c = n . enter ( "destinationRaw" ) , d += l . move ( n . safe ( e . url , { before : d , after : e . title ? " " : ")" , ... l . current ( ) } ) ) ) , c ( ) , e . title && ( c = n . enter ( ` title ${ i } ` ) , d += l . move ( " " + a ) , d += l . move ( n . safe ( e . title , { before : d , after : a , ... l . current ( ) } ) ) , d += l . move ( a ) , c ( ) ) , d += l . move ( ")" ) , s ( ) , d } function rxe ( e , r , n ) { return aI ( e , n ) ? "<" : "[" } lI . peek = nxe ; function lI ( 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 d = n . containerPhrasing ( e , { before : c , after : "]" , ... s . current ( ) } ) ; c += s . move ( d + "][" ) , l ( ) ; const u = n . stack ; n . stack = [ ] , l = n . enter ( "reference" ) ; const p = n . safe ( n . associationId ( e ) , { before : c , after : "]" , ... s . current ( ) } ) ; return l ( ) , n . stack = u , i ( ) , a === "full" || ! d || d !== p ? c += s . move ( p + "]" ) : a === "shortcut" ? c = c . slice ( 0 , - 1 ) : c += s . move ( "]" ) , c } function nxe ( ) { return "[" } function K _ ( 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 oxe ( e ) { const r = K _ ( 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 axe ( e ) { const r = e . options . bulletOrdered || "." ; if ( r !== "."
` ,Nfr:"𝔑 ",NoBreak:" ",NonBreakingSpace:" ",Nopf:"ℕ ",Not:"⫬",NotCongruent:"≢",NotCupCap:"≭",NotDoubleVerticalBar:"∦",NotElement:"∉",NotEqual:"≠",NotEqualTilde:"≂̸",NotExists:"∄",NotGreater:"≯",NotGreaterEqual:"≱",NotGreaterFullEqual:"≧̸",NotGreaterGreater:"≫̸",NotGreaterLess:"≹",NotGreaterSlantEqual:"⩾̸",NotGreaterTilde:"≵",NotHumpDownHump:"≎̸",NotHumpEqual:"≏̸",NotLeftTriangle:"⋪",NotLeftTriangleBar:"⧏̸",NotLeftTriangleEqual:"⋬",NotLess:"≮",NotLessEqual:"≰",NotLessGreater:"≸",NotLessLess:"≪̸",NotLessSlantEqual:"⩽̸",NotLessTilde:"≴",NotNestedGreaterGreater:"⪢̸",NotNestedLessLess:"⪡̸",NotPrecedes:"⊀",NotPrecedesEqual:"⪯̸",NotPrecedesSlantEqual:"⋠",NotReverseElement:"∌",NotRightTriangle:"⋫",NotRightTriangleBar:"⧐̸",NotRightTriangleEqual:"⋭",NotSquareSubset:"⊏̸",NotSquareSubsetEqual:"⋢",NotSquareSuperset:"⊐̸",NotSquareSupersetEqual:"⋣",NotSubset:"⊂⃒",NotSubsetEqual:"⊈",NotSucceeds:"⊁",NotSucceedsEqual:"⪰̸",NotSucceedsSlantEqual:"⋡",NotSucceedsTilde:"≿̸",NotSuperset:"⊃⃒",NotSupersetEqual:"⊉",NotTilde:"≁",NotTildeEqual:"≄",NotTildeFullEqual:"≇",NotTildeTilde:"≉",NotVerticalBar:"∤",Nscr:"𝒩 ",Ntilde:"Ñ",Nu:"Ν ",OElig:"Œ",Oacute:"Ó",Ocirc:"Ô",Ocy:"О ",Odblac:"Ő",Ofr:"𝔒 ",Ograve:"Ò",Omacr:"Ō",Omega:"Ω",Omicron:"Ο ",Oopf:"𝕆 ",OpenCurlyDoubleQuote:"“",OpenCurlyQuote:"‘ ",Or:"⩔",Oscr:"𝒪 ",Oslash:"Ø",Otilde:"Õ",Otimes:"⨷",Ouml:"Ö",OverBar:"‾",OverBrace:"⏞",OverBracket:"⎴",OverParenthesis:"⏜",PartialD:"∂",Pcy:"П",Pfr:"𝔓 ",Phi:"Φ",Pi:"Π",PlusMinus:"±",Poincareplane:"ℌ ",Popf:"ℙ ",Pr:"⪻",Precedes:"≺",PrecedesEqual:"⪯",PrecedesSlantEqual:"≼",PrecedesTilde:"≾",Prime:"″",Product:"∏",Proportion:"∷",Proportional:"∝",Pscr:"𝒫 ",Psi:"Ψ",QUOT:'"',Qfr:"𝔔 ",Qopf:"ℚ ",Qscr:"𝒬 ",RBarr:"⤐",REG:"®",Racute:"Ŕ",Rang:"⟫",Rarr:"↠",Rarrtl:"⤖",Rcaron:"Ř",Rcedil:"Ŗ",Rcy:"Р ",Re:"ℜ ",ReverseElement:"∋",ReverseEquilibrium:"⇋",ReverseUpEquilibrium:"⥯",Rfr:"ℜ ",Rho:"Ρ ",RightAngleBracket:"⟩",RightArrow:"→",RightArrowBar:"⇥",RightArrowLeftArrow:"⇄",RightCeiling:"⌉",RightDoubleBracket:"⟧",RightDownTeeVector:"⥝",RightDownVector:"⇂",RightDownVectorBar:"⥕",RightFloor:"⌋",RightTee:"⊢",RightTeeArrow:"↦",RightTeeVector:"⥛",RightTriangle:"⊳",RightTriangleBar:"⧐",RightTriangleEqual:"⊵",RightUpDownVector:"⥏",RightUpTeeVector:"⥜",RightUpVector:"↾",RightUpVectorBar:"⥔",RightVector:"⇀",RightVectorBar:"⥓",Rightarrow:"⇒",Ropf:"ℝ ",RoundImplies:"⥰",Rrightarrow:"⇛",Rscr:"ℛ ",Rsh:"↱",RuleDelayed:"⧴",SHCHcy:"Щ",SHcy:"Ш",SOFTcy:"Ь ",Sacute:"Ś",Sc:"⪼",Scaron:"Š",Scedil:"Ş",Scirc:"Ŝ",Scy:"С ",Sfr:"𝔖 ",ShortDownArrow:"↓",ShortLeftArrow:"←",ShortRightArrow:"→",ShortUpArrow:"↑",Sigma:"Σ",SmallCircle:"∘",Sopf:"𝕊 ",Sqrt:"√",Square:"□",SquareIntersection:"⊓",SquareSubset:"⊏",SquareSubsetEqual:"⊑",SquareSuperset:"⊐",SquareSupersetEqual:"⊒",SquareUnion:"⊔",Sscr:"𝒮 ",Star:"⋆",Sub:"⋐",Subset:"⋐",SubsetEqual:"⊆",Succeeds:"≻",SucceedsEqual:"⪰",SucceedsSlantEqual:"≽",SucceedsTilde:"≿",SuchThat:"∋",Sum:"∑",Sup:"⋑",Superset:"⊃",SupersetEqual:"⊇",Supset:"⋑",THORN:"Þ",TRADE:"™",TSHcy:"Ћ",TScy:"Ц",Tab:" ",Tau:"Τ ",Tcaron:"Ť",Tcedil:"Ţ",Tcy:"Т ",Tfr:"𝔗 ",Therefore:"∴",Theta:"Θ",ThickSpace:" ",ThinSpace:" ",Tilde:"∼ ",TildeEqual:"≃",TildeFullEqual:"≅",TildeTilde:"≈",Topf:"𝕋 ",TripleDot:"⃛",Tscr:"𝒯 ",Tstrok:"Ŧ",Uacute:"Ú",Uarr:"↟",Uarrocir:"⥉",Ubrcy:"Ў",Ubreve:"Ŭ",Ucirc:"Û",Ucy:"У ",Udblac:"Ű",Ufr:"𝔘 ",Ugrave:"Ù",Umacr:"Ū",UnderBar:"_",UnderBrace:"⏟",UnderBracket:"⎵",UnderParenthesis:"⏝",Union:"⋃ ",UnionPlus:"⊎",Uogon:"Ų",Uopf:"𝕌 ",UpArrow:"↑",UpArrowBar:"⤒",UpArrowDownArrow:"⇅",UpDownArrow:"↕",UpEquilibrium:"⥮",UpTee:"⊥",UpTeeArrow:"↥",Uparrow:"⇑",Updownarrow:"⇕",UpperLeftArrow:"↖",UpperRightArrow:"↗",Upsi:"ϒ ",Upsilon:"Υ ",Uring:"Ů",Uscr:"𝒰 ",Utilde:"Ũ",Uuml:"Ü",VDash:"⊫",Vbar
2025-12-16 12:13:34 +01: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,v,w,x){return d(u(g,w,x),g.align)}function s(g,v,w,x){const k=p(g,w,x),C=d([k]);return C.slice(0,C.indexOf( `
2025-12-19 13:16:01 +01:00
` ))}function c(g,v,w,x){const k=w.enter("tableCell"),C=w.enter("phrasing"),_=w.containerPhrasing(g,{...x,before:i,after:i});return C(),k(),_}function d(g,v){return Nbe(g,{align:v,alignDelimiters:o,padding:n,stringLength:a})}function u(g,v,w){const x=g.children;let k=-1;const C=[],_=v.enter("table");for(;++k<x.length;)C[k]=p(x[k],v,w);return _(),C}function p(g,v,w){const x=g.children;let k=-1;const C=[],_=v.enter("tableRow");for(;++k<x.length;)C[k]=c(x[k],g,v,w);return _(),C}function f(g,v,w){let x=dI.inlineCode(g,v,w);return w.stack.includes("tableCell")&&(x=x.replace(/ \| /g," \\ $ &")),x}}function Rxe(){return{exit:{taskListCheckValueChecked:fI,taskListCheckValueUnchecked:fI,paragraph:Txe}}}function zxe(){return{unsafe:[{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{listItem:jxe}}}function fI(e){const r=this.stack[this.stack.length-2];r.type,r.checked=e.type==="taskListCheckValueChecked"}function Txe(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 jxe(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=dI.listItem(e,r,n,{...o,...s.current()});return i&&(c=c.replace(/^(?:[*+-]| \d + \. )([ \r \n ]| {1,3})/,d)),c;function d(u){return u+l}}function Axe(){return[obe(),Ebe(),zbe(),wxe(),Rxe()]}function Dxe(e){return{extensions:[abe(),Cbe(e),Tbe(), $ xe(e),zxe()]}}function xa(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 Qa(e,r){return e.length>0?(xa(e,e.length,0,r),e):r}const mI={}.hasOwnProperty;function gI(e){const r={};let n=-1;for(;++n<e.length;)Mxe(r,e[n]);return r}function Mxe(e,r){let n;for(n in r){const a=(mI.call(e,n)?e[n]:void 0)||(e[n]={}),i=r[n];let l;if(i)for(l in i){mI.call(a,l)||(a[l]=[]);const s=i[l];Nxe(a[l],Array.isArray(s)?s:s?[s]:[])}}}function Nxe(e,r){let n=-1;const o=[];for(;++n<r.length;)(r[n].add==="after"?e:o).push(r[n]);xa(e,0,0,o)}const Pxe={tokenize:Vxe,partial:!0},yI={tokenize:qxe,partial:!0},vI={tokenize:Hxe,partial:!0},bI={tokenize:Uxe,partial:!0},Bxe={tokenize:Wxe,partial:!0},xI={name:"wwwAutolink",tokenize:Lxe,previous:kI},wI={name:"protocolAutolink",tokenize:Fxe,previous:_I},Bs={name:"emailAutolink",tokenize:Oxe,previous:SI},Vl={};function Ixe(){return{text:Vl}}let Bu=48;for(;Bu<123;)Vl[Bu]=Bs,Bu++,Bu===58?Bu=65:Bu===91&&(Bu=97);Vl[43]=Bs,Vl[45]=Bs,Vl[46]=Bs,Vl[95]=Bs,Vl[72]=[Bs,wI],Vl[104]=[Bs,wI],Vl[87]=[Bs,xI],Vl[119]=[Bs,xI];function Oxe(e,r,n){const o=this;let a,i;return l;function l(p){return!e8(p)||!SI.call(o,o.previous)||t8(o.events)?n(p):(e.enter("literalAutolink"),e.enter("literalAutolinkEmail"),s(p))}function s(p){return e8(p)?(e.consume(p),s):p===64?(e.consume(p),c):n(p)}function c(p){return p===46?e.check(Bxe,u,d)(p):p===45||p===95||xo(p)?(i=!0,e.consume(p),c):u(p)}function d(p){return e.consume(p),a=!0,c}function u(p){return i&&a&&Bo(o.previous)?(e.exit("literalAutolinkEmail"),e.exit("literalAutolink"),r(p)):n(p)}}function Lxe(e,r,n){const o=this;return a;function a(l){return l!==87&&l!==119||!kI.call(o,o.previous)||t8(o.events)?n(l):(e.enter("literalAutolink"),e.enter("literalAutolinkWww"),e.check(Pxe,e.attempt(yI,e.attempt(vI,i),n),n)(l))}function i(l){return e.exit("literalAutolinkWww"),e.exit("literalAutolink"),r(l)}}function Fxe(e,r,n){const o=this;let a="",i=!1;return l;function l(p){return(p===72||p===104)&&_I.call(o,o.previous)&&!t8(o.events)?(e.enter("literalAutolink"),e.enter(
2025-12-16 12:13:34 +01:00
` )&&(u.children[0]={type:"text",value:f.replace(g,"").replace(/^ \n +/,"")}),!f.includes( `
2025-12-19 13:16:01 +01:00
` ))){const w=[];u.children.forEach((x,k)=>{k!=0&&(k==1&&x.type==="break"||w.push(x))}),u.children=[...w]}}return u});l&&(o.data={hName:r,hProperties:{className:["markdown-alert", ` markdown - alert - $ { l } ` ],dir:"auto"}},d.unshift({type:"paragraph",children:[M3e(l),{type:"text",value:s.replace(/^ \/ /,"")}],data:{hProperties:{className:"markdown-alert-title",dir:"auto"}}})),o.children=[...d]})};function M3e(e){let r=N3e[e]??"";return{type:"emphasis",data:{hName:"svg",hProperties:{className:["octicon"],viewBox:"0 0 16 16",width:"16",height:"16",ariaHidden:"true"}},children:[{type:"emphasis",data:{hName:"path",hProperties:{d:r}},children:[]}]}}const N3e={note:"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z",tip:"M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z",important:"M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",warning:"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",caution:"M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"},P3e={tokenize:B3e};function B3e(e){const r=e.attempt(this.parser.constructs.contentInitial,o,a);let n;return r;function o(s){if(s===null){e.consume(s);return}return e.enter("lineEnding"),e.consume(s),e.exit("lineEnding"),Kt(e,r,"linePrefix")}function a(s){return e.enter("paragraph"),i(s)}function i(s){const c=e.enter("chunkText",{contentType:"text",previous:n});return n&&(n.next=c),n=c,l(s)}function l(s){if(s===null){e.exit("chunkText"),e.exit("paragraph"),e.consume(s);return}return gt(s)?(e.consume(s),e.exit("chunkText"),i):(e.consume(s),l)}}const I3e={tokenize:O3e},II={tokenize:L3e};function O3e(e){const r=this,n=[];let o=0,a,i,l;return s;function s(_){if(o<n.length){const $ =n[o];return r.containerState= $ [1],e.attempt( $ [0].continuation,c,d)(_)}return d(_)}function c(_){if(o++,r.containerState._closeFlow){r.containerState._closeFlow=void 0,a&&C();const $ =r.events.length;let R= $ ,T;for(;R--;)if(r.events[R][0]==="exit"&&r.events[R][1].type==="chunkFlow"){T=r.events[R][1].end;break}k(o);let A= $ ;for(;A<r.events.length;)r.events[A][1].end={...T},A++;return xa(r.events,R+1,0,r.events.slice( $ )),r.events.length=A,d(_)}return s(_)}function d(_){if(o===n.length){if(!a)return f(_);if(a.currentConstruct&&a.currentConstruct.concrete)return v(_);r.interrupt=!!(a.currentConstruct&&!a._gfmTableDynamicInterruptHack)}return r.containerState={}
2025-12-16 12:13:34 +01:00
` ;break}case-3:{l= ` \ r
2025-12-19 13:16:01 +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 K3e(e){const o={constructs:gI([G3e,...(e||{}).extensions||[]]),content:a(P3e),defined:[],document:a(I3e),flow:a(F3e),lazy:{},string:a(H3e),text:a(U3e)};return o;function a(i){return l;function l(s){return Y3e(o,i,s)}}}function Q3e(e){for(;!jI(e););return e}const FI=/[ \0 \t \n \r ]/g;function J3e(){let e=1,r="",n=!0,o;return a;function a(i,l,s){const c=[];let d,u,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(FI.lastIndex=p,d=FI.exec(i),f=d&&d.index!==void 0?d.index:i.length,g=i.charCodeAt(f),!d){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(u=Math.ceil(e/4)*4,c.push(-2);e++<u;)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 u1(e){return!e||typeof e!="object"?"":"position"in e||"type"in e?VI(e.position):"start"in e||"end"in e?VI(e):"line"in e||"column"in e?i8(e):""}function i8(e){return qI(e&&e.line)+":"+qI(e&&e.column)}function VI(e){return i8(e&&e.start)+"-"+i8(e&&e.end)}function qI(e){return e&&typeof e=="number"?e:1}const HI={}.hasOwnProperty;function UI(e,r,n){return typeof r!="string"&&(n=r,r=void 0),e2e(n)(Q3e(K3e(n).document().write(J3e()(e,r,!0))))}function e2e(e){const r={transforms:[],canContainEols:["emphasis","fragment","heading","paragraph","strong"],enter:{autolink:i(Le),autolinkProtocol:j,autolinkEmail:j,atxHeading:i(je),blockQuote:i(ue),characterEscape:j,characterReference:j,codeFenced:i(_e),codeFencedFenceInfo:l,codeFencedFenceMeta:l,codeIndented:i(_e,l),codeText:i(ce,l),codeTextData:j,data:j,codeFlowValue:j,definition:i(pe),definitionDestinationString:l,definitionLabelString:l,definitionTitleString:l,emphasis:i(xe),hardBreakEscape:i(Be),hardBreakTrailing:i(Be),htmlFlow:i(Je,l),htmlFlowData:j,htmlText:i(Je,l),htmlTextData:j,image:i(st),label:l,link:i(Le),listItem:i(Ve),listItemValue:f,listOrdered:i(St,p),listUnordered:i(St),paragraph:i(qe),reference:O,referenceString:l,resourceDestinationString:l,resourceTitleString:l,setextHeading:i(je),strong:i(Xe),thematicBreak:i(Et)},exit:{atxHeading:c(),atxHeadingSequence:R,autolink:c(),autolinkEmail:re,autolinkProtocol:te,blockQuote:c(),characterEscapeValue:I,characterReferenceMarkerHexadecimal:K,characterReferenceMarkerNumeric:K,characterReferenceValue:Q,characterReference:ae,codeFenced:c(x),codeFencedFence:w,codeFencedFenceInfo:g,codeFencedFenceMeta:v,codeFlowValue:I,codeIndented:c(k),codeText:c(V),codeTextData:I,data:I,definition:c(),definitionDestinationString: $ ,definitionLabelString:C,definitionTitleString:_,emphasis:c(),hardBreakEscape:c(L),hardBreakTrailing:c(L),htmlFlow:c(H),htmlFlowData:I,htmlText:c(M),htmlTextData:I,image:c(F),label:G,labelText:q,lineEnding:P,link:c(B),listItem:c(),listOrdered:c(),listUnordered:c(),paragraph:c(),referenceString:W,resourceDestinationString:U,resourceTitleString:Y,resource:Z,setextHeading:c(z),setextHeadingLineSequence:A,setextHeadingText:T,strong:c(),thematicBreak:c()}};WI(r,(e||{}).mdastExtensions||[]);const n={};return o;function o(be){let ke={type:"root",children:[]};const Ye={stack:[ke],tokenStack:[],config:r,enter:s,exit:d,buffer:l,resume:u,data:n},yt=[];let xt=-1;for(;++xt<be.length;)if(be[xt][1].type==="listOrdered"||be[xt][1].type==="listUnordered")if(be[xt][0]==="enter")yt.push(xt);else{const Tr=yt.pop();xt=a(be,Tr,xt)}for(xt=-1;++xt<be.length;){const Tr=r[be[xt][0]];HI.call(Tr,be[xt][1].type)&&Tr[be[xt][1].type].call(Object.assign({sliceSerialize:be[xt][2].sliceSerialize},Ye),be[xt][1])}if(Ye.tokenStack.length>0){const Tr=Ye.tokenStack[Ye.tokenStack.length-1];(Tr[1]||GI).call(Ye,void 0,Tr[0])}for(ke.position={start:rd(be.length>0?be[0][1].start:{line:1,column:1,offset:0}),end:rd(be.length>0?be[be.length-2][1].end:{line:1,column:1,offset:0})},xt=-1;++
2025-12-19 10:05:34 +01:00
` }]}function a2e(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 i2e(e,r){const n={type:"element",tagName:"del",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function l2e(e,r){const n={type:"element",tagName:"em",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function s2e(e,r){const n=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",o=String(r.identifier).toUpperCase(),a=Vh(o.toLowerCase()),i=e.footnoteOrder.indexOf(o);let l,s=e.footnoteCounts.get(o);s===void 0?(s=0,e.footnoteOrder.push(o),l=e.footnoteOrder.length):l=i+1,s+=1,e.footnoteCounts.set(o,s);const c={type:"element",tagName:"a",properties:{href:"#"+n+"fn-"+a,id:n+"fnref-"+a+(s>1?"-"+s:""),dataFootnoteRef:!0,ariaDescribedBy:["footnote-label"]},children:[{type:"text",value:String(l)}]};e.patch(r,c);const d={type:"element",tagName:"sup",properties:{},children:[c]};return e.patch(r,d),e.applyData(r,d)}function c2e(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 d2e(e,r){if(e.options.allowDangerousHtml){const n={type:"raw",value:r.value};return e.patch(r,n),e.applyData(r,n)}}function YI(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 u2e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return YI(e,r);const a={src:Vh(o.url||""),alt:r.alt};o.title!==null&&o.title!==void 0&&(a.title=o.title);const i={type:"element",tagName:"img",properties:a,children:[]};return e.patch(r,i),e.applyData(r,i)}function p2e(e,r){const n={src:Vh(r.url)};r.alt!==null&&r.alt!==void 0&&(n.alt=r.alt),r.title!==null&&r.title!==void 0&&(n.title=r.title);const o={type:"element",tagName:"img",properties:n,children:[]};return e.patch(r,o),e.applyData(r,o)}function h2e(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 f2e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return YI(e,r);const a={href:Vh(o.url||"")};o.title!==null&&o.title!==void 0&&(a.title=o.title);const i={type:"element",tagName:"a",properties:a,children:e.all(r)};return e.patch(r,i),e.applyData(r,i)}function m2e(e,r){const n={href:Vh(r.url)};r.title!==null&&r.title!==void 0&&(n.title=r.title);const o={type:"element",tagName:"a",properties:n,children:e.all(r)};return e.patch(r,o),e.applyData(r,o)}function g2e(e,r,n){const o=e.all(r),a=n?y2e(n):XI(r),i={},l=[];if(typeof r.checked=="boolean"){const u=o[0];let p;u&&u.type==="element"&&u.tagName==="p"?p=u:(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 u=o[s];(a||s!==0||u.type!=="element"||u.tagName!=="p")&&l.push({type:"text",value: `
2025-12-16 12:13:34 +01:00
` }),u.type==="element"&&u.tagName==="p"&&!a?l.push(...u.children):l.push(u)}const c=o[o.length-1];c&&(a||c.type!=="element"||c.tagName!=="p")&&l.push({type:"text",value: `
2025-12-19 13:16:01 +01:00
` });const d={type:"element",tagName:"li",properties:i,children:l};return e.patch(r,d),e.applyData(r,d)}function y2e(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=XI(n[o])}return r}function XI(e){const r=e.spread;return r??e.children.length>1}function v2e(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 b2e(e,r){const n={type:"element",tagName:"p",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function x2e(e,r){const n={type:"root",children:e.wrap(e.all(r))};return e.patch(r,n),e.applyData(r,n)}function w2e(e,r){const n={type:"element",tagName:"strong",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function k2e(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=fB(r.children[1]),c=hB(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 _2e(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 d=[];for(;++c<s;){const p=r.children[c],f={},g=l?l[c]:void 0;g&&(f.align=g);let v={type:"element",tagName:i,properties:f,children:[]};p&&(v.children=e.all(p),e.patch(p,v),v=e.applyData(p,v)),d.push(v)}const u={type:"element",tagName:"tr",properties:{},children:e.wrap(d,!0)};return e.patch(r,u),e.applyData(r,u)}function S2e(e,r){const n={type:"element",tagName:"td",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}const ZI=9,KI=32;function E2e(e){const r=String(e),n=/ \r ? \n | \r /g;let o=n.exec(r),a=0;const i=[];for(;o;)i.push(QI(r.slice(a,o.index),a>0,!0),o[0]),a=o.index+o[0].length,o=n.exec(r);return i.push(QI(r.slice(a),a>0,!1)),i.join("")}function QI(e,r,n){let o=0,a=e.length;if(r){let i=e.codePointAt(o);for(;i===ZI||i===KI;)o++,i=e.codePointAt(o)}if(n){let i=e.codePointAt(a-1);for(;i===ZI||i===KI;)a--,i=e.codePointAt(a-1)}return a>o?e.slice(o,a):""}function C2e(e,r){const n={type:"text",value:E2e(String(r.value))};return e.patch(r,n),e.applyData(r,n)}function $ 2e(e,r){const n={type:"element",tagName:"hr",properties:{},children:[]};return e.patch(r,n),e.applyData(r,n)}const R2e={blockquote:n2e,break:o2e,code:a2e,delete:i2e,emphasis:l2e,footnoteReference:s2e,heading:c2e,html:d2e,imageReference:u2e,image:p2e,inlineCode:h2e,linkReference:f2e,link:m2e,listItem:g2e,list:v2e,paragraph:b2e,root:x2e,strong:w2e,table:k2e,tableCell:S2e,tableRow:_2e,text:C2e,thematicBreak: $ 2e,toml:Yb,yaml:Yb,definition:Yb,footnoteDefinition:Yb};function Yb(){}function z2e(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 T2e(e,r){return"Back to reference "+(e+1)+(r>1?"-"+r:"")}function j2e(e){const r=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",n=e.options.footnoteBackContent||z2e,o=e.options.footnoteBackLabel||T2e,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 d=e.footnoteById.get(e.footnoteOrder[c]);if(!d)continue;const u=e.all(d),p=String(d.identifier).toUpperCase(),f=Vh(p.toLowerCase());let g=0;const v=[],w=e.footnoteCounts.get(p);for(;w!==void 0&&++g<=w;){v.length>0&&v.push({type:"text",value:" "});let C=typeof n=="string"?n
2025-12-16 12:13:34 +01:00
` },{type:"element",tagName:"ol",properties:{},children:e.wrap(s,!0)},{type:"text",value: `
2025-12-19 13:16:01 +01:00
` }]}}const l8={}.hasOwnProperty,A2e={};function D2e(e,r){const n=r||A2e,o=new Map,a=new Map,i=new Map,l={...R2e,...n.handlers},s={all:d,applyData:N2e,definitionById:o,footnoteById:a,footnoteCounts:i,footnoteOrder:[],handlers:l,one:c,options:n,patch:M2e,wrap:B2e};return Z_(e,function(u){if(u.type==="definition"||u.type==="footnoteDefinition"){const p=u.type==="definition"?o:a,f=String(u.identifier).toUpperCase();p.has(f)||p.set(f,u)}}),s;function c(u,p){const f=u.type,g=s.handlers[f];if(l8.call(s.handlers,f)&&g)return g(s,u,p);if(s.options.passThrough&&s.options.passThrough.includes(f)){if("children"in u){const{children:w,...x}=u,k=o1(x);return k.children=s.all(u),k}return o1(u)}return(s.options.unknownHandler||P2e)(s,u,p)}function d(u){const p=[];if("children"in u){const f=u.children;let g=-1;for(;++g<f.length;){const v=s.one(f[g],u);if(v){if(g&&f[g-1].type==="break"&&(!Array.isArray(v)&&v.type==="text"&&(v.value=JI(v.value)),!Array.isArray(v)&&v.type==="element")){const w=v.children[0];w&&w.type==="text"&&(w.value=JI(w.value))}Array.isArray(v)?p.push(...v):p.push(v)}}}return p}}function M2e(e,r){e.position&&(r.position=gB(e))}function N2e(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,o1(i)),"children"in n&&n.children&&a!==null&&a!==void 0&&(n.children=a)}return n}function P2e(e,r){const n=r.data||{},o="value"in r&&!(l8.call(n,"hProperties")||l8.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 B2e(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-12-19 10:05:34 +01:00
` }),n}function JI(e){let r=0,n=e.charCodeAt(r);for(;n===9||n===32;)r++,n=e.charCodeAt(r);return e.slice(r)}function eO(e,r){const n=D2e(e,r),o=n.one(e,void 0),a=j2e(n),i=Array.isArray(o)?{type:"root",children:o}:o||{type:"root",children:[]};return a&&i.children.push({type:"text",value: `
2025-12-19 13:16:01 +01:00
` },a),i}function I2e(e,r){return e&&"run"in e?async function(n,o){const a=eO(n,{file:o,...r});await e.run(a,o)}:function(n,o){return eO(n,{file:o,...e||r})}}function tO(e){if(e)throw e}var s8,rO;function O2e(){if(rO)return s8;rO=1;var e=Object.prototype.hasOwnProperty,r=Object.prototype.toString,n=Object.defineProperty,o=Object.getOwnPropertyDescriptor,a=function(d){return typeof Array.isArray=="function"?Array.isArray(d):r.call(d)==="[object Array]"},i=function(d){if(!d||r.call(d)!=="[object Object]")return!1;var u=e.call(d,"constructor"),p=d.constructor&&d.constructor.prototype&&e.call(d.constructor.prototype,"isPrototypeOf");if(d.constructor&&!u&&!p)return!1;var f;for(f in d);return typeof f>"u"||e.call(d,f)},l=function(d,u){n&&u.name==="__proto__"?n(d,u.name,{enumerable:!0,configurable:!0,value:u.newValue,writable:!0}):d[u.name]=u.newValue},s=function(d,u){if(u==="__proto__")if(e.call(d,u)){if(o)return o(d,u).value}else return;return d[u]};return s8=function c(){var d,u,p,f,g,v,w=arguments[0],x=1,k=arguments.length,C=!1;for(typeof w=="boolean"&&(C=w,w=arguments[1]||{},x=2),(w==null||typeof w!="object"&&typeof w!="function")&&(w={});x<k;++x)if(d=arguments[x],d!=null)for(u in d)p=s(w,u),f=s(d,u),w!==f&&(C&&f&&(i(f)||(g=a(f)))?(g?(g=!1,v=p&&a(p)?p:[]):v=p&&i(p)?p:{},l(w,{name:u,newValue:c(C,v,f)})):typeof f<"u"&&l(w,{name:u,newValue:f}));return w},s8}var L2e=O2e();const c8=Qg(L2e);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 F2e(){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,...d){const u=e[++i];let p=-1;if(c){l(c);return}for(;++p<a.length;)(d[p]===null||d[p]===void 0)&&(d[p]=a[p]);a=d,u?V2e(u,s)(...d):l(null,...d)}}function o(a){if(typeof a!="function")throw new TypeError("Expected ` middelware ` to be a function, not "+a);return e.push(a),r}}function V2e(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(d){const u=d;if(s&&n)throw u;return a(u)}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)}}class ta 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=u1(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}}ta.prototype.file="",ta.prototype.name="",ta.prototype.reason="",ta.prototype.message="",ta.prototype.stack="",ta.prototype.column=void 0,ta.prototype.line=void 0,ta.prototype.ancestors=void 0,ta.prototype.cause=void 0,ta.prototype.fatal=void 0,ta.prototype.place=void 0,ta.prototype.ruleId=void 0,ta.prototype.source=void 0;const ql={basename:q2e,dirname:H2e,extname:U2e,join:W2e,sep:"/"};function q2e(e,r){if(r!==void 0&&typeof r!="string")throw new TypeError('"ext" argument must be a string');p1(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?"":e.s
2025-12-19 10:05:34 +01:00
` )}reversed(r=!1){if(!r)return new ei(this.target,this.source);const[n]=t7(this.target,this.source,"directed");return n??new ei(this.target,this.source,new Set)}}function qke(e){if(e==null||e==="")return!0;if(typeof e!="object")return!1;if("length"in e&&typeof e.length=="number")return e.length===0;if("size"in e&&typeof e.size=="number")return e.size===0;for(let r in e)return!1;return Object.getOwnPropertySymbols(e).length===0}function Hke(...e){return io(Uke,e)}const Uke=e=>e.at(-1);function oL(e,r,n){return typeof r=="number"||r===void 0?o=>o.split(e,r):e.split(r,n)}function fx(...e){return io(Object.values,e)}class mx{constructor(r,n){this. $ model=r,this. $ element=n,this.id=this. $ element.id,this._literalId=this. $ element.id;const[o,a]=yke(this.id);o?(this.imported={from:o,fqn:a},this.hierarchyLevel=Tb(a)):(this.imported=null,this.hierarchyLevel=Tb(this.id))}Aux;id;_literalId;hierarchyLevel;imported;get name(){return Jg(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 ir(this,Symbol.for("tags"),()=>Kb([...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&&!e7(this. $ element.summary,this. $ element.description)}get summary(){return ur.memoize(this,"summary",Fs(this. $ element))}get description(){return ur.memoize(this,"description",Xh(this. $ element))}get technology(){return this. $ element.technology??null}get links(){return this. $ element.links??[]}get defaultView(){return ir(this,Symbol.for("defaultView"),()=>m1(this.scopedViews())??null)}get isRoot(){return this.parent===null}get style(){return ir(this,"style",()=>_1({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 Yn(this,r)}isDescendantOf(r){return Yn(r,this)}ancestors(){return this. $ model.ancestors(this)}commonAncestor(r){const n=t1(this.id,r.id);return n?this. $ model.element(n):null}children(){return this. $ model.children(this)}descendants(r){return r?rB([...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.siblings();yield*this.siblings()}incoming(r="all"){return this. $ model.incoming(this,r)}*incomers(r="all"){const n=new Set;for(const o of this.incoming(r))n.has(o.source.id)||(n.add(o.source.id),yield o.source)}outgoing(r="all"){return this. $ model.outgoing(this,r)}*outgoers(r="all"){const n=new Set;for(const o of this.outgoing(r))n.has(o.target.id)||(n.add(o.target.id),yield o.target)}get allOutgoing(){return ir(this,Symbol.for("allOutgoing"),()=>new Set(this.outgoing()))}get allIncoming(){return ir(this,Symbol.for("allIncoming"),()=>new Set(this.incoming()))}views(){return ir(this,Symbol.for("views"),()=>{const r=new Set;for(const n of this. $ model.views())n.includesElement(this.id)&&r.add(n);return r})}scopedViews(){return ir(this,Symbol.for("scopedViews"),()=>{const r=new Set;for(const n of this. $ model.views())n.isScopedElementView()&&n.viewOf.id===this.id&&r.add(n);return r})}isDeployed(){return Ja(m1(this.deployments()))}deployments(){return this. $ model.deployment.instancesOf(this)}hasMetadata(){return!!this. $ element.metadata&&! $ 1(this. $ element.metadata)}getMetadata(r){return r?this. $ element.metadata?.[r]:this. $ element.metadata??{}}isTagged(r){return this.tags.includes(r)}}const yr=e=>typeof e=="string"?e:e.id,_a="/",r7=e=>{if(He(!e.includes( `
2025-12-19 13:16:01 +01:00
` ),"View title cannot contain newlines"),e.includes(_a)){const r=e.split(_a).map(n=>n.trim()).filter(n=>n.length>0);return Ll(r,1)?r:[""]}return[e.trim()]},gx=e=>r7(e).join(_a),Wke=e=>{const r=r7(e);return Ll(r,2)?r.slice(0,-1).join(_a):null},n7=e=>e.includes(_a)?r7(e).pop()??e:e.trim();class Gke{constructor(r){this. $ model=r;const n=this. $ deployments=r. $ data.deployments,o=fx(n.elements);for(const a of Jc(o)){const i=this.addElement(a);for(const l of i.tags)this.#c.get(l).add(i);i.isInstance()&&this.#r.get(i.element.id).add(i)}for(const a of fx(n.relations)){const i=this.addRelation(a);for(const l of i.tags)this.#c.get(l).add(i)}}#e=new Map;#i=new Map;#t=new Ln(()=>new Set);#r=new Ln(()=>new Set);#l=new Set;#n=new Map;#s=new Ln(()=>new Set);#a=new Ln(()=>new Set);#o=new Ln(()=>new Set);#c=new Ln(()=>new Set);#d=new Map; $ deployments;get $ styles(){return this. $ model. $ styles}element(r){if(r instanceof eL||r instanceof tL)return r;const n=yr(r);return mt(this.#e.get(n), ` Element $ { n } not found ` )}findElement(r){return this.#e.get(r)??null}node(r){const n=this.element(r);return He(n.isDeploymentNode(), ` Element $ { n . id } is not a deployment node ` ),n}findNode(r){const n=this.findElement(r);return n?(He(n.isDeploymentNode(), ` Element $ { n ? . id } is not a deployment node ` ),n):null}instance(r){const n=this.element(r);return He(n.isInstance(), ` Element $ { n . id } is not a deployed instance ` ),n}findInstance(r){const n=this.findElement(r);return n?(He(n.isInstance(), ` Element $ { n ? . id } is not a deployed instance ` ),n):null}roots(){return this.#l.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=yr(r),o=this.#r.get(n);o&&(yield*o)}deploymentRef(r){if(S1.isInsideInstanceRef(r)){const{deployment:n,element:o}=r;return $ ke(this.#d, ` $ { n } @ $ { o } ` ,()=>new Oke(this.instance(n),this. $ model.element(o)))}return this.element(r.deployment)}relationships(){return this.#n.values()}relationship(r){const n=yr(r);return mt(this.#n.get(n), ` DeploymentRelationModel $ { n } 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=yr(r);return this.#i.get(n)||null}children(r){const n=yr(r);return this.#t.get(n)}*siblings(r){const n=yr(r),o=this.parent(r)?.children()??this.roots();for(const a of o)a.id!==n&&(yield a)}*ancestors(r){let n=yr(r),o;for(;o=this.#i.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=yr(r);for(const a of this.#s.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=yr(r);for(const a of this.#a.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=v4e(r)?new eL(this,Object.freeze(r)):new tL(this,Object.freeze(r),this. $ model.element(r.element));this.#e.set(n.id,n);const o=zb(n.id);return o?(He(this.#e.has(o), ` Parent $ { o } of $ { n . id } not found ` ),this.#i.set(n.id,this.node(o)),this.#t.get(o).add(n)):(He(n.isDeploymentNode(), ` Root element $ { n . id } is not a deployment node ` ),this.#l.add(n)),n}addRelation(r){if(this.#n.has(r.id))throw new Error( ` Relation $ { r . id } already exists ` );const n=new Lke(this,Object.freeze(r));this.#n.set(n.id,n),this.#s.get(n.target.id).add(n),this.#a.get(n.source.id).add(n);const o=n.boundary?.id??null;if(o)for(const a of[o,...Du(o)])this.#o.get(a).add(n);for(const a of Du(n.source.id)){if(a===o)break;this.#a.get(a).add(n)}for(const a of Du(n.target.id)){if(a===o)break;this.#s.get(a).add(n)}return n}}class aL{constructor(r,n){this.model=r,this. $ relationship=n,this.source=r.element(
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-12-19 13:16:01 +01:00
` )),d=c.reduce((u,p)=>u.concat(...p),[]);return[c,d]}return[[],[]]},[e]);return S.useEffect(()=>{const c=r?.target??zV,d=r?.actInsideInputWithModifier??!0;if(e!==null){const u=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!d)&&PF(g))return!1;const v=jV(g.code,s);if(i.current.add(g[v]),TV(l,i.current,!1)){const w=g.composedPath?.()?.[0]||g.target,x=w?.nodeName==="BUTTON"||w?.nodeName==="A";r.preventDefault!==!1&&(a.current||!x)&&g.preventDefault(),o(!0)}},p=g=>{const v=jV(g.code,s);TV(l,i.current,!0)?(o(!1),i.current.clear()):i.current.delete(g[v]),g.key==="Meta"&&i.current.clear(),a.current=!1},f=()=>{i.current.clear(),o(!1)};return c?.addEventListener("keydown",u),c?.addEventListener("keyup",p),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",u),c?.removeEventListener("keyup",p),window.removeEventListener("blur",f),window.removeEventListener("contextmenu",f)}}},[e,o]),n}function TV(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function jV(e,r){return r.includes(e)?"code":"key"}const sSe=()=>{const e=vr();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=Ws(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(),d={x:r.x-s,y:r.y-c},u=n.snapGrid??a,p=n.snapToGrid??i;return G1(d,o,p,u)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:a,y:i}=o.getBoundingClientRect(),l=Yx(r,n);return{x:l.x+a,y:l.y+i}}}),[])};function AV(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)cSe(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 cSe(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={...e.dimensions},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 rw(e,r){return AV(e,r)}function nw(e,r){return AV(e,r)}function Qu(e,r){return{id:e,type:"select",selected:r}}function uf(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(Qu(i.id,l)))}return o}function DV({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,type:"replace"}),s===void 0&&n.push({item:i,type:"add",index:a})
M$ { z . x } , $ { z . y } h$ { z . width } v$ { z . height } h$ { - z . width } z ` ,fillRule:"evenodd",pointerEvents:"none"})]})})}wq.displayName="MiniMap",S.memo(wq);const JEe=e=>r=>e? ` $ { Math . max ( 1 / r . transform [ 2 ] , 1 ) } ` :void 0,eCe={[df.Line]:"right",[df.Handle]:"bottom-right"};function tCe({nodeId:e,position:r,variant:n=df.Handle,className:o,style:a=void 0,children:i,color:l,minWidth:s=10,minHeight:c=10,maxWidth:d=Number.MAX_VALUE,maxHeight:u=Number.MAX_VALUE,keepAspectRatio:p=!1,resizeDirection:f,autoScale:g=!0,shouldResize:v,onResizeStart:w,onResize:x,onResizeEnd:k}){const C=e9(),_=typeof e=="string"?e:C, $ =vr(),R=S.useRef(null),T=n===df.Handle,A=Dt(S.useCallback(JEe(T&&g),[T,g]),jr),z=S.useRef(null),j=r??eCe[n];S.useEffect(()=>{if(!(!R.current||!_))return z.current||(z.current=D9e({domNode:R.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:P,transform:L,snapGrid:H,snapToGrid:M,nodeOrigin:V,domNode:B}= $ .getState();return{nodeLookup:P,transform:L,snapGrid:H,snapToGrid:M,nodeOrigin:V,paneDomNode:B}},onChange:(P,L)=>{const{triggerNodeChanges:H,nodeLookup:M,parentLookup:V,nodeOrigin:B}= $ .getState(),F=[],q={x:P.x,y:P.y},G=M.get(_);if(G&&G.expandParent&&G.parentId){const U=G.origin??B,Y=P.width??G.measured.width??0,Z=P.height??G.measured.height??0,O={id:G.id,parentId:G.parentId,rect:{width:Y,height:Z,...DF({x:P.x??G.position.x,y:P.y??G.position.y},{width:Y,height:Z},G.parentId,M,U)}},W=q7([O],M,V,B);F.push(...W),q.x=P.x?Math.max(U[0]*Y,P.x):void 0,q.y=P.y?Math.max(U[1]*Z,P.y):void 0}if(q.x!==void 0&&q.y!==void 0){const U={id:_,type:"position",position:{...q}};F.push(U)}if(P.width!==void 0&&P.height!==void 0){const U={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:P.width,height:P.height}};F.push(U)}for(const U of L){const Y={...U,type:"position"};F.push(Y)}H(F)},onEnd:({width:P,height:L})=>{const H={id:_,type:"dimensions",resizing:!1,dimensions:{width:P,height:L}}; $ .getState().triggerNodeChanges([H])}})),z.current.update({controlPosition:j,boundaries:{minWidth:s,minHeight:c,maxWidth:d,maxHeight:u},keepAspectRatio:p,resizeDirection:f,onResizeStart:w,onResize:x,onResizeEnd:k,shouldResize:v}),()=>{z.current?.destroy()}},[j,s,c,d,u,p,w,x,k,v]);const I=j.split("-");return y.jsx("div",{className:dn(["react-flow__resize-control","nodrag",...I,n,o]),ref:R,style:{...a,scale:A,...l&&{[T?"backgroundColor":"borderColor"]:l}},children:i})}S.memo(tCe);const rCe=e=>e.domNode?.querySelector(".react-flow__renderer");function nCe({children:e}){const r=Dt(rCe);return r?Vi.createPortal(e,r):null}const oCe=(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,aCe=(e,r)=>{if(e.size!==r.size)return!1;for(const[n,o]of e)if(oCe(o,r.get(n)))return!1;return!0},iCe=e=>({x:e.transform[0],y:e.transform[1],zoom:e.transform[2],selectedNodesCount:e.nodes.filter(r=>r.selected).length});function r9({nodeId:e,children:r,className:n,style:o,isVisible:a,position:i=Ue.Top,offset:l=10,align:s="center",...c}){const d=e9(),u=S.useCallback( $ =>(Array.isArray(e)?e:[e||d||""]).reduce((R,T)=>{const A= $ .nodeLookup.get(T);return A&&R.set(A.id,A),R},new Map),[e,d]),p=Dt(u,aCe),{x:f,y:g,zoom:v,selectedNodesCount:w}=Dt(iCe,jr);if(!(typeof a=="boolean"?a:p.size===1&&p.values().next().value?.selected&&w===1)||!p.size)return null;const x=nf(p),k=Array.from(p.values()),C=Math.max(...k.map( $ => $ .internals.z+1)),_={position:"absolute",transform:r9e(x,{x:f,y:g,zoom:v},i,l,s),zIndex:C,...o};return y.jsx(nCe,{children:y.jsx("div",{style:_,className:dn(["react-flow__node-toolbar",n]),...c,"data-id":k.reduce(( $ ,R)=> ` $ { $ } $ { R . id } ` ,"").trim(),children:r})})}const{getOwnPropertyNames:lCe,getOwnPropertySymbols:sCe}=Object,{hasOwnProperty:cCe}=Object.prototype;function n9(e,r){return function(n,o,a){return e(n,o,a)&&r(n,o,a)}}function cw(e){return function(r,n,o){if(!r||!n||typeof r!="object"||typeof n!="object")return e(r,n,o);const
. ` .concat(eRe, ` {
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, ` ;
2025-12-16 12:13:34 +01:00
padding - right : ` ).concat(s,"px ").concat(o, ` ;
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-12-19 10:05:34 +01:00
body [ ` ).concat(ff, ` ] {
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 ;
2025-12-16 12:13:34 +01:00
padding - right : ` ).concat(l, ` 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
margin - left : 0 ;
margin - top : 0 ;
2025-12-16 12:13:34 +01:00
margin - right : ` ).concat(s,"px ").concat(o, ` ;
` ),n==="padding"&&"padding-right: ".concat(s,"px ").concat(o,";")].filter(Boolean).join(""), `
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-12-19 10:05:34 +01:00
. ` ).concat(bw, ` {
2025-12-16 12:13:34 +01:00
right : ` ).concat(s,"px ").concat(o, ` ;
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-12-19 10:05:34 +01:00
. ` ).concat(xw, ` {
2025-12-16 12:13:34 +01:00
margin - right : ` ).concat(s,"px ").concat(o, ` ;
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-12-19 10:05:34 +01:00
. ` ).concat(bw," .").concat(bw, ` {
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-12-19 10:05:34 +01:00
. ` ).concat(xw," .").concat(xw, ` {
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-12-19 10:05:34 +01:00
body [ ` ).concat(ff, ` ] {
2025-12-19 13:16:01 +01:00
` ).concat(tRe,": ").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-12-19 13:16:01 +01:00
` )},Qq=function(){var e=parseInt(document.body.getAttribute(ff)||"0",10);return isFinite(e)?e:0},xRe=function(){S.useEffect(function(){return document.body.setAttribute(ff,(Qq()+1).toString()),function(){var e=Qq()-1;e<=0?document.body.removeAttribute(ff):document.body.setAttribute(ff,e.toString())}},[])},wRe=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;xRe();var i=S.useMemo(function(){return yRe(a)},[a]);return S.createElement(vRe,{styles:bRe(i,!r,a,n?"":"!important")})},u9=!1;if(typeof window<"u")try{var kw=Object.defineProperty({},"passive",{get:function(){return u9=!0,!0}});window.addEventListener("test",kw,kw),window.removeEventListener("test",kw,kw)}catch{u9=!1}var mf=u9?{passive:!1}:!1,kRe=function(e){return e.tagName==="TEXTAREA"},Jq=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!kRe(e)&&n[r]==="visible")},_Re=function(e){return Jq(e,"overflowY")},SRe=function(e){return Jq(e,"overflowX")},eH=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=tH(e,o);if(a){var i=rH(e,o),l=i[1],s=i[2];if(l>s)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},ERe=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},CRe=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},tH=function(e,r){return e==="v"?_Re(r):SRe(r)},rH=function(e,r){return e==="v"?ERe(r):CRe(r)}, $ Re=function(e,r){return e==="h"&&r==="rtl"?-1:1},RRe=function(e,r,n,o,a){var i= $ Re(e,window.getComputedStyle(r).direction),l=i*o,s=n.target,c=r.contains(s),d=!1,u=l>0,p=0,f=0;do{if(!s)break;var g=rH(e,s),v=g[0],w=g[1],x=g[2],k=w-x-i*v;(v||k)&&tH(e,s)&&(p+=k,f+=v);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(u&&Math.abs(p)<1||!u&&Math.abs(f)<1)&&(d=!0),d},_w=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},nH=function(e){return[e.deltaX,e.deltaY]},oH=function(e){return e&&"current"in e?e.current:e},zRe=function(e,r){return e[0]===r[0]&&e[1]===r[1]},TRe=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-12-19 13:16:01 +01:00
` )},jRe=0,gf=[];function ARe(e){var r=S.useRef([]),n=S.useRef([0,0]),o=S.useRef(),a=S.useState(jRe++)[0],i=S.useState(Kq)[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 w=J $ e([e.lockRef.current],(e.shards||[]).map(oH)).filter(Boolean);return w.forEach(function(x){return x.classList.add("allow-interactivity-".concat(a))}),function(){document.body.classList.remove("block-interactivity-".concat(a)),w.forEach(function(x){return x.classList.remove("allow-interactivity-".concat(a))})}}},[e.inert,e.lockRef.current,e.shards]);var s=S.useCallback(function(w,x){if("touches"in w&&w.touches.length===2||w.type==="wheel"&&w.ctrlKey)return!l.current.allowPinchZoom;var k=_w(w),C=n.current,_="deltaX"in w?w.deltaX:C[0]-k[0], $ ="deltaY"in w?w.deltaY:C[1]-k[1],R,T=w.target,A=Math.abs(_)>Math.abs( $ )?"h":"v";if("touches"in w&&A==="h"&&T.type==="range")return!1;var z=eH(A,T);if(!z)return!0;if(z?R=A:(R=A==="v"?"h":"v",z=eH(A,T)),!z)return!1;if(!o.current&&"changedTouches"in w&&(_|| $ )&&(o.current=R),!R)return!0;var j=o.current||R;return RRe(j,x,w,j==="h"?_: $ )},[]),c=S.useCallback(function(w){var x=w;if(!(!gf.length||gf[gf.length-1]!==i)){var k="deltaY"in x?nH(x):_w(x),C=r.current.filter(function(R){return R.name===x.type&&(R.target===x.target||x.target===R.shadowParent)&&zRe(R.delta,k)})[0];if(C&&C.should){x.cancelable&&x.preventDefault();return}if(!C){var _=(l.current.shards||[]).map(oH).filter(Boolean).filter(function(R){return R.contains(x.target)}), $ =_.length>0?s(x,_[0]):!l.current.noIsolation; $ &&x.cancelable&&x.preventDefault()}}},[]),d=S.useCallback(function(w,x,k,C){var _={name:w,delta:x,target:k,should:C,shadowParent:DRe(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function( $ ){return $ !==_})},1)},[]),u=S.useCallback(function(w){n.current=_w(w),o.current=void 0},[]),p=S.useCallback(function(w){d(w.type,nH(w),w.target,s(w,e.lockRef.current))},[]),f=S.useCallback(function(w){d(w.type,_w(w),w.target,s(w,e.lockRef.current))},[]);S.useEffect(function(){return gf.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,mf),document.addEventListener("touchmove",c,mf),document.addEventListener("touchstart",u,mf),function(){gf=gf.filter(function(w){return w!==i}),document.removeEventListener("wheel",c,mf),document.removeEventListener("touchmove",c,mf),document.removeEventListener("touchstart",u,mf)}},[]);var g=e.removeScrollBar,v=e.inert;return S.createElement(S.Fragment,null,v?S.createElement(i,{styles:TRe(a)}):null,g?S.createElement(wRe,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function DRe(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const MRe=sRe(Zq,ARe);var ny=S.forwardRef(function(e,r){return S.createElement(ww,Yl({},e,{ref:r,sideCar:MRe}))});ny.classNames=ww.classNames;function So(e){return Object.keys(e)}function p9(e){return e&&typeof e=="object"&&!Array.isArray(e)}function h9(e,r){const n={...e},o=r;return p9(e)&&p9(r)&&Object.keys(r).forEach(a=>{p9(o[a])&&a in e?n[a]=h9(n[a],o[a]):n[a]=o[a]}),n}function NRe(e){return e.replace(/[A-Z]/g,r=> ` - $ { r . toLowerCase ( ) } ` )}function PRe(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc \( (.*?) \) $ /)?.[1].split("*")[0].trim()}function f9(e){const r=PRe(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 aH(e){return e==="0rem"?"0rem": ` calc ( $ { e } * var ( -- mantine - scale ) ) ` }function iH(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?aH(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
2025-12-19 10:05:34 +01:00
$ { c }
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-12-19 13:16:01 +01:00
$ { d } ` }function $ 9({color:e,theme:r,autoContrast:n}){return(typeof n=="boolean"?n:r.autoContrast)&&vd({color:e||r.primaryColor,theme:r}).isLight?"var(--mantine-color-black)":"var(--mantine-color-white)"}function IH(e,r){return $ 9({color:e.colors[e.primaryColor][ly(e,r)],theme:e,autoContrast:null})}function Nw({theme:e,color:r,colorScheme:n,name:o=r,withColorValues:a=!0}){if(!e.colors[r])return{};if(n==="light"){const s=ly(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 ` ]:_f(e.colors[r][s],.1),[ ` -- mantine - color - $ { o } - light - hover ` ]:_f(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 ` ]:_f(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=ly(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 ` ]:_f(e.colors[r][Math.max(0,i-2)],.15),[ ` -- mantine - color - $ { o } - light - hover ` ]:_f(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 ` ]:_f(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 Yze(e){return!!e&&typeof e=="object"&&"mantine-virtual-color"in e}function Sf(e,r,n){So(r).forEach(o=>Object.assign(e,{[ ` -- mantine - $ { n } - $ { o } ` ]:r[o]}))}const OH=e=>{const r=ly(e,"light"),n=e.defaultRadius in e.radius?e.radius[e.defaultRadius]: $ e(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":IH(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
-- colors - likec4 - tag - bg : $ { r } ;
2025-12-16 12:13:34 +01:00
-- colors - likec4 - tag - bg - hover : color - mix ( in oklab , $ { r } , var ( -- colors - likec4 - mix - color ) 20 % ) ;
2025-12-19 10:05:34 +01:00
` ;if(!vNe.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-12-19 10:05:34 +01:00
` };function xNe(e,r){return!e||tp(e)?"":Jr(uw(e),Mq(([n,o])=>[ ` : is ( $ { r } [ data - likec4 - tag = "${n}" ] ) { ` ,bNe(o),"}"]),Lq( `
2025-12-19 13:16:01 +01:00
` ))}function wNe({children:e,rootSelector:r}){const n=yNe().tags,o=xNe(n,r);return y.jsxs(AG.Provider,{value:n,children:[o!==""&&y.jsx(kNe,{stylesheet:o}),e]})}const kNe=S.memo(({stylesheet:e})=>{const r=np()?.();return y.jsx("style",{"data-likec4-tags":!0,type:"text/css",dangerouslySetInnerHTML:{__html:e},nonce:r})});function _Ne(e){return S.useContext(AG)[e]??{color:"tomato"}}function DG(){return oi().replace("mantine-","likec4-")}var SNe="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,WebkitTextFillColor,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,border
$ { i . message } ` )}else throw new Error( ` Invalid target : "${n}" is not a valid target from the root node . Did you mean ".${n}" ? ` )})}function dY(e){const r=oY(e.config.target);return r?{target:r.map(n=>typeof n=="string"?M3(e.parent,n):n)}:e.parent.initial}function yp(e){return e.type==="history"}function uY(e){const r=pY(e);for(const n of r)for(const o of Ry(n,e))r.add(o);return r}function pY(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 Hf(o))n(a)}}return n(e),r}function Uf(e,r){if(D3(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 M3(e,r){if(typeof r=="string"&&D3(r))try{return e.machine.getStateNodeById(r)}catch{}const n=tE(r).slice();let o=e;for(;n.length;){const a=n.shift();if(!a.length)break;o=Uf(o,a)}return o}function N3(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=>Uf(e,a)).filter(Boolean);return[e.machine.root,e].concat(o,n.reduce((a,i)=>{const l=Uf(e,i);if(!l)return a;const s=N3(l,r[i]);return a.concat(s)},[]))}function fPe(e,r,n,o){const a=Uf(e,r).next(n,o);return!a||!a.length?e.next(n,o):a}function mPe(e,r,n,o){const a=Object.keys(r),i=Uf(e,a[0]),l=sE(i,r[a[0]],n,o);return!l||!l.length?e.next(n,o):l}function gPe(e,r,n,o){const a=[];for(const i of Object.keys(r)){const l=r[i];if(!l)continue;const s=Uf(e,i),c=sE(s,l,n,o);c&&a.push(...c)}return a.length?a:e.next(n,o)}function sE(e,r,n,o){return typeof r=="string"?fPe(e,r,n,o):Object.keys(r).length===1?mPe(e,r,n,o):gPe(e,r,n,o)}function yPe(e){return Object.keys(e.states).map(r=>e.states[r]).filter(r=>r.type==="history")}function Cd(e,r){let n=e;for(;n.parent&&n.parent!==r;)n=n.parent;return n.parent===r}function vPe(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 hY(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(vPe(dE([a],r,n),dE([s],r,n)))if(Cd(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 bPe(e){const[r,...n]=e;for(const o of Ry(r,void 0))if(n.every(a=>Cd(a,o)))return o}function cE(e,r){if(!e.target)return[];const n=new Set;for(const o of e.target)if(yp(o))if(r[o.id])for(const a of r[o.id])n.add(a);else for(const a of cE(dY(o),r))n.add(a);else n.add(o);return[...n]}function fY(e,r){const n=cE(e,r);if(!n)return;if(!e.reenter&&n.every(a=>a===e.source||Cd(a,e.source)))return e.source;const o=bPe(n.concat(e.source));if(o)return o;if(!e.reenter)return e.source.machine.root}function dE(e,r,n){const o=new Set;for(const a of e)if(a.target?.length){const i=fY(a,n);a.reenter&&a.source===i&&o.add(i);for(const l of r)Cd(l,i)&&o.add(l)}return[...o]}function xPe(e,r){if(e.length!==r.size)return!1;for(const n of e)if(!r.has(n))return!1;return!0}function uE(e,r,n,o,a,i){if(!e.length)return r;const l=new Set(r._nodes);let s=r.historyValue;const c=hY(e,l,s);let d=r;a||([d,s]=SPe(d,o,n,c,l,s,i,n.actionExecutor)),d=Gf(d,o,n,c.flatMap(p=>p.actions),i,void 0),d=kPe(d,o,n,c,l,i,s,a);const u=[...l];d.status==="done"&&(d=Gf(d,o,n,u.sort((p,f)=>f.order-p.order).flatMap(p=>p.exit),i,void 0));try{return s===r.historyValue&&xPe(r._nodes,l)?d:vp(d,{_nodes:u,historyValue:s})}catch(p){throw p}}function wPe(e,r,n,o,a){if(o.output===void 0)return;const i=eE(a.id,a.output!==void 0&&a.parent?rE(a.output,e.context,r,n.self):void 0);return rE(o.output,e.context,i,n.self)}function kPe(e,r,n,o,a,i,l,s){let c=e;const d=new Set,u=new Set;_Pe(o,l,u,d),s&&u.add(e.machine.root);const p=new Set;for(const f of[...d].sort((g,v)=>g.order-v.order)){a.add(f);const g=[];g.push(...f.entry);for(const v of f.invoke)g.push(T3(v.src,{...v,syncSnapshot:!!v.onSnapshot}));if(u.has(f)){const v=f.initial.actions;g.
$ { p . message } ` )}if(u){a.push(...s.actions),i=s;break}}return i?[i]:void 0}get events(){return Yf(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 FPe="#";class fE{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 O3(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 fE(this.config,{actions:{...n,...r.actions},guards:{...o,...r.guards},actors:{...a,...r.actors},delays:{...i,...r.delays}})}resolveState(r){const n= $ Pe(this.root,r.value),o=A3(N3(this.root,n));return P3({_nodes:[...o],context:r.context||{},children:{},status:lE(o,this.root)?"done":r.status||"active",output:r.output,error:r.error,historyValue:r.historyValue},this)}transition(r,n,o){return hE(r,n,o,[]).snapshot}microstep(r,n,o){return hE(r,n,o,[]).microstates}getTransitionData(r,n){return sE(this.root,r.value,r,n)||[]}getPreInitialState(r,n,o){const{context:a}=this.config,i=P3({context:typeof a!="function"&&a?a:{},_nodes:[this.root],children:{},status:"active"},this);return typeof a=="function"?Gf(i,n,r,[Bt(({spawn:l,event:s,self:c})=>a({spawn:l,input:s.input,self:c}))],o,void 0):i}getInitialSnapshot(r,n){const o=QG(n),a=[],i=this.getPreInitialState(r,o,a),l=uE([{target:[...pY(this.root)],source:this.root,reenter:!0,actions:[],eventType:null,toJSON:null}],i,r,o,!0,a),{snapshot:s}=hE(l,o,r,a);return s}start(r){Object.values(r.children).forEach(n=>{n.getSnapshot().status==="active"&&n.start()})}getStateNodeById(r){const n=tE(r),o=n.slice(1),a=D3(n[0])?n[0].slice(FPe.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 M3(i,o)}get definition(){return this.root.definition}toJSON(){return this.definition}getPersistedSnapshot(r,n){return NPe(r,n)}restoreSnapshot(r,n){const o={},a=r.children;Object.keys(a).forEach(p=>{const f=a[p],g=f.snapshot,v=f.src,w=typeof v=="string"?nE(this,v):v;if(!w)return;const x=qf(w,{id:p,parent:n.self,syncSnapshot:f.syncSnapshot,snapshot:g,src:v,systemId:f.systemId});o[p]=x});function i(p,f){if(f instanceof O3)return f;try{return p.machine.getStateNodeById(f.id)}catch{}}function l(p,f){if(!f||typeof f!="object")return{};const g={};for(const v in f){const w=f[v];for(const x of w){const k=i(p,x);k&&(g[v]??=[],g[v].push(k))}}return g}const s=l(this.root,r.historyValue),c=P3({...r,children:o,_nodes:Array.from(A3(N3(this.root,r.value))),historyValue:s},this),d=new Set;function u(p,f){if(!d.has(p)){d.add(p);for(const g in p){const v=p[g];if(v&&typeof v=="object"){if("xstate $ $ type"in v&&v.xstate $ $ type===aE){p[g]=f[v.id];continue}u(v,f)}}}}return u(c.context,o),c}}function VPe(e,r,n,o,{event:a}){const i=typeof a=="function"?a(n,o):a;return[r,{event:i},void 0]}function qPe(e,{event:r}){e.defer(()=>e.emit(r))}function mE(e){function r(n,o){}return r.type="xstate.emit",r.event=e,r.resolve=VPe,r.execute=qPe,r}let gE=(function(e){return e.Parent="#_parent",e.Internal="#_internal",e})({});function HPe(e,r,n,o,{to:a,event:i,id:l,delay:s},c){const d=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 ;
2025-12-04 13:24:53 +01:00
width : $ { d } px ! important ;
height : $ { u } px ! important ;
2025-12-16 12:13:34 +01:00
$ { v } px ! important ;
top : $ { p } px ! important ;
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-12-19 13:16:01 +01:00
` ),()=>{x.contains(w)&&x.removeChild(w)}},[r]),y.jsx(QOe,{isPresent:r,childRef:i,sizeRef:l,children:S.cloneElement(e,{ref:c})})}const eLe=({children:e,initial:r,isPresent:n,onExitComplete:o,custom:a,presenceAffectsLayout:i,mode:l,anchorX:s,root:c})=>{const d=im(tLe),u=S.useId();let p=!0,f=S.useMemo(()=>(p=!1,{id:u,initial:r,isPresent:n,custom:a,onExitComplete:g=>{d.set(g,!0);for(const v of d.values())if(!v)return;o&&o()},register:g=>(d.set(g,!1),()=>d.delete(g))}),[n,d,o]);return i&&p&&(f={...f}),S.useMemo(()=>{d.forEach((g,v)=>d.set(v,!1))},[n]),S.useEffect(()=>{!n&&!d.size&&o&&o()},[n]),l==="popLayout"&&(e=y.jsx(JOe,{isPresent:n,anchorX:s,root:c,children:e})),y.jsx(K3.Provider,{value:f,children:e})};function tLe(){return new Map}function SZ(e=!0){const r=S.useContext(K3);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 Q3=e=>e.key||"";function EZ(e){const r=[];return S.Children.forEach(e,n=>{S.isValidElement(n)&&r.push(n)}),r}const Cn=({children:e,custom:r,initial:n=!0,onExitComplete:o,presenceAffectsLayout:a=!0,mode:i="sync",propagate:l=!1,anchorX:s="left",root:c})=>{const[d,u]=SZ(l),p=S.useMemo(()=>EZ(e),[e]),f=l&&!d?[]:p.map(Q3),g=S.useRef(!0),v=S.useRef(p),w=im(()=>new Map),[x,k]=S.useState(p),[C,_]=S.useState(p);EC(()=>{g.current=!1,v.current=p;for(let T=0;T<C.length;T++){const A=Q3(C[T]);f.includes(A)?w.delete(A):w.get(A)!==!0&&w.set(A,!1)}},[C,f.length,f.join("-")]);const $ =[];if(p!==x){let T=[...p];for(let A=0;A<C.length;A++){const z=C[A],j=Q3(z);f.includes(j)||(T.splice(A,0,z), $ .push(z))}return i==="wait"&& $ .length&&(T= $ ),_(EZ(T)),k(p),null}const{forceRender:R}=S.useContext(Hy);return y.jsx(y.Fragment,{children:C.map(T=>{const A=Q3(T),z=l&&!d?!1:p===C||f.includes(A),j=()=>{if(w.has(A))w.set(A,!0);else return;let I=!0;w.forEach(P=>{P||(I=!1)}),I&&(R?.(),_(v.current),l&&u?.(),o&&o())};return y.jsx(eLe,{isPresent:z,initial:!g.current||n?void 0:!1,custom:r,presenceAffectsLayout:a,mode:i,root:c,onExitComplete:z?void 0:j,anchorX:s,children:T},A)})})},rLe=S.createContext(null);function nLe(){const e=S.useRef(!1);return EC(()=>(e.current=!0,()=>{e.current=!1}),[]),e}function oLe(){const e=nLe(),[r,n]=S.useState(0),o=S.useCallback(()=>{e.current&&n(r+1)},[r]);return[S.useCallback(()=>Dr.postRender(o),[o]),r]}const aLe=e=>!e.isLayoutDirty&&e.willUpdate(!1);function iLe(){const e=new Set,r=new WeakMap,n=()=>e.forEach(aLe);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 CZ=e=>e===!0,lLe=e=>CZ(e===!0)||e==="id",lm=({children:e,id:r,inherit:n=!0})=>{const o=S.useContext(Hy),a=S.useContext(rLe),[i,l]=oLe(),s=S.useRef(null),c=o.id||a;s.current===null&&(lLe(n)&&c&&(r=r?c+"-"+r:c),s.current={id:r,group:CZ(n)&&o.group||iLe()});const d=S.useMemo(()=>({...s.current,forceRender:i}),[l]);return y.jsx(Hy.Provider,{value:d,children:e})},CC=S.createContext({strict:!1});function $ C(e){for(const r in e)om[r]={...om[r],...e[r]}}function sLe({children:e,features:r,strict:n=!1}){const[,o]=S.useState(!RC(r)),a=S.useRef(void 0);if(!RC(r)){const{renderer:i,...l}=r;a.current=i, $ C(l)}return S.useEffect(()=>{RC(r)&&r().then(({renderer:i,...l})=>{ $ C(l),a.current=i,o(!0)})},[]),y.jsx(CC.Provider,{value:{renderer:a.current,strict:n},children:e})}function RC(e){return typeof e=="function"}const cLe=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 J3(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
linear - gradient ( 180 deg ,
2025-12-19 10:05:34 +01:00
color - mix ( in oklab , var ( -- likec4 - palette - fill ) 60 % , transparent ) ,
color - mix ( in oklab , var ( -- likec4 - palette - fill ) 20 % , transparent ) 8 px ,
color - mix ( in oklab , var ( -- likec4 - palette - fill ) 14 % , transparent ) 20 px ,
transparent 80 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-12-19 10:05:34 +01:00
linear - gradient ( 180 deg , var ( -- likec4 - palette - fill ) , var ( -- likec4 - palette - fill ) 4 px , transparent 4 px ) ,
{ colors . likec4 . overlay . body }
] ` ,"& .react-flow__attribution":{display:"none"}}),XVe=fe({flex:0,cursor:"move"}),ZVe=fe({display:"block",fontFamily:"likec4.element",fontOpticalSizing:"auto",fontStyle:"normal",fontWeight:600,fontSize:"24px",lineHeight:"xs"}),a $ ="40px",KVe=fe({flex: ` 0 0 $ { a$ } ` ,height:a $ ,width:a $ ,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-12-19 10:05:34 +01:00
` },"& img":{objectFit:"contain"}}),f2="--view-title-color",m2="--icon-color",QVe=fe({width:"100%",background:"mantine.colors.body",borderRadius:"sm",padding:"[10px 8px]",transition:"fast",border:"1px dashed",borderColor:"mantine.colors.defaultBorder",[f2]:"{colors.mantine.colors.dark[1]}",_hover:{background:"mantine.colors.defaultHover",[m2]:"{colors.mantine.colors.dark[1]}",[f2]:"{colors.mantine.colors.defaultColor}"},_dark:{background:"mantine.colors.dark[6]"},_light:{[m2]:"{colors.mantine.colors.gray[6]}",[f2]:"{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)"}}),JVe=fe({transition:"fast",color: ` [ var ( $ { f2 } , { colors . mantine . colors . gray [ 7 ] } ) ] ` ,fontSize:"15px",fontWeight:500,lineHeight:"1.4"}),eqe=fe({flex:1,display:"flex",flexDirection:"column",justifyContent:"stretch",overflow:"hidden",gap:"sm"}),tqe=fe({background:"mantine.colors.gray[1]",borderRadius:"sm",flexWrap:"nowrap",gap:"1.5",padding:"1",_dark:{background:"mantine.colors.dark[7]"}}),rqe=fe({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]"}}}),nqe=fe({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"}}}),oqe=fe({flex:1,display:"grid",gridTemplateColumns:"min-content 1fr",gridAutoRows:"min-content max-content",gap:"[24px 20px]",alignItems:"baseline",justifyItems:"stretch"}),aqe=fe({justifySelf:"end",textAlign:"right",userSelect:"none"}),iqe=fe({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]"}}),lqe=[["path",{d:"M6 9l6 6l6 -6",key:"svg-0"}]],i $ =wt("outline","chevron-down","ChevronDown",lqe),sqe=[["path",{d:"M9 6l6 6l-6 6",key:"svg-0"}]],Dd=wt("outline","chevron-right","ChevronRight",sqe);function pQ({children:e}){return y.jsx(y.Fragment,{children:e})}function hQ({value:e,isExpanded:r}){const[n,o]=S.useState(!1),a=S.useRef(null);return S.useEffect(()=>{a.current&&o(a.current.scrollWidth>a.current.clientWidth)},[e]),y.jsx(_n,{label:n&&!r?e:null,multiline:!0,w:300,withinPortal:!0,children:y.jsx(at,{ref:a,component:"div",className:fe({fontSize:"sm",padding:"xs",userSelect:"all",color:"mantine.colors.text",lineHeight:1.4,whiteSpace:r?"pre-wrap":"nowrap",overflow:r?"visible":"hidden",textOverflow:r?"unset":"ellipsis",wordBreak:r?"break-word":"normal",minWidth:0,width:"100%"}),children:e})})}function cqe({values:e,isExpanded:r}){return r?y.jsx(Lo,{gap:"xs",children:e.map((n,o)=>y.jsxs(Js,{align:"center",gap:"xs",children:[y.jsx(at,{className:fe({fontSize:"xs",color:"mantine.colors.gray[5]",fontWeight:500,flexShrink:0,_dark:{color:"mantine.colors.dark[3]"}}),children:"•"}),y.jsx(Se,{className:fe({minHeight:"32px",display:"flex",alignItems:"center",flex:1}),children:y.jsx(hQ,{value:n,isExpanded:!0})})]},o))}):y.jsx(Se,{className:fe({minHeight:"32px",display:"flex",alignItems:"center",padding:"xs",gap:"xs",flexWrap:"wrap",minWidth:0,overflow:"hidden"}),children:e.map((n,o)=>y.jsxs(Js,{align:"center",gap:"xs",style:{minWidth:0},children:[y.jsx(at,{classN
2025-11-07 15:04:16 +01:00
` )?r.split( `
2025-12-19 13:16:01 +01:00
` ).map(l=>l.trim()).filter(Boolean):[r],o=n.length>1,[a,i]=S.useState(!1);return y.jsxs(y.Fragment,{children:[o?y.jsx(pr,{onClick:()=>{i(!a)},className:fe({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(Js,{align:"center",gap:"xs",children:[y.jsxs(at,{component:"span",size:"xs",fw:700,children:[e,":"]}),y.jsx(at,{component:"span",className:fe({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(i $ ,{size:12}):y.jsx(Dd,{size:12})]})}):y.jsxs(at,{component:"div",className:fe({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:fe({justifySelf:"stretch",alignSelf:"start"}),children:o?y.jsx(cqe,{values:n,isExpanded:a}):y.jsx(Se,{className:fe({minHeight:"32px",display:"flex",alignItems:"center"}),children:y.jsx(hQ,{value:n[0]||"",isExpanded:a})})})]})}const uqe=fe({"&[data-level='1']":{marginBottom:"sm"}}),pqe=fe({cursor:"default",marginTop:"0",marginBottom:"0"}),fQ=fe({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)"}}}),hqe=Ge(fQ),fqe=Ge(fQ,fe({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}})),mqe=[["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"}]],r0=wt("outline","info-circle","InfoCircle",mqe),gqe=[["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"}]],yqe=wt("outline","target","Target",gqe),vqe=[["path",{d:"M4 8v-2a2 2 0 0 1 2 -2h2",key:"svg-0"}],["path",{d:"M4 16v2a2 2 0 0 0 2 2h2",key:"svg-1"}],["path",{d:"M16 4h2a2 2 0 0 1 2 2v2",key:"svg-2"}],["path",{d:"M16 20h2a2 2 0 0 0 2 -2v-2",key:"svg-3"}],["path",{d:"M8 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0",key:"svg-4"}],["path",{d:"M16 16l-2.5 -2.5",key:"svg-5"}]],bi=wt("outline","zoom-scan","ZoomScan",vqe),bqe=({node:e})=>y.jsxs(en,{className:hqe,gap:6,align:"baseline",wrap:"nowrap",children:[y.jsxs(at,{component:"div",fz:11,c:"dimmed",children:[e.kind,":"]}),y.jsx(at,{component:"div",fz:"sm",fw:"500",children:e.title})]}),xqe=({instance:e})=>{const r=Nt(),n=r.currentView.id,o=[...e.views()];return y.jsxs(en,{className:fqe,gap:4,children:[y.jsx(Ta,{color:"gray",variant:"transparent",size:"xs",flex:0,children:y.jsx(yqe,{stroke:1.2})}),y.jsx(at,{component:"div",fz:"sm",fw:"500",flex:"1 1 100%",children:e.title}),y.jsxs(Se,{onClick:nn,pos:"relative","data-no-transform":!0,flex:0,children:[o.length===0&&y.jsx(Vn,{size:"compact-xs",variant:"transparent",color:"gray",disabled:!0,children:"no views"}),o.length>0&&y.jsxs(tn,{shadow:"md",withinPortal:!1,position:"bottom-start",offset:0,closeOnClickOutside:!0,clickOutsideEvents:["pointerdown","mousedown","click"],closeOnEscape:!0,trapFocus:!0,children:[y.jsx(tn.Target,{children:y.jsxs(Vn,{size:"compact-xs",variant:"subtle",color:"gray",children:[o.length," view",o.length>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
a $ { a } , $ { i } 0 , 0 , 0 $ { - e } 0
2025-12-16 12:13:34 +01:00
l 0 , $ { 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
a $ { a } , $ { i } 0 , 0 , 0 $ { e } 0
2025-12-16 12:13:34 +01:00
l 0 , $ { - 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
z
2025-12-19 10:05:34 +01:00
` .replace(/ \s +/g," ").trim(),ry:i,rx:a}}function MJ(e,r,n=.185){const o=r,a=Math.round(o/2),i=Md(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 }
2025-12-16 12:13:34 +01:00
l $ { l } , 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
a $ { i } , $ { a } 0 , 0 , 0 0 $ { - o }
2025-12-19 13:16:01 +01:00
z ` .replace(/ \s +/g," ").trim(),ry:a,rx:i}}const Rp={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 NJ({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-Rp.width-6,y:n-Rp.height,width:Rp.width,height:Rp.height,viewBox: ` 0 0 $ { Rp . width } $ { Rp . height } ` ,"data-likec4-fill":"mix-stroke",children:y.jsx("path",{strokeWidth:0,d:Rp.path})})]});case"queue":{const{path:o,rx:a,ry:i}=MJ(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}=DJ(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 Qo(e)}}function JHe({shape:e,w:r,h:n}){let o;switch(e){case"queue":o=y.jsx("path",{d:MJ(r,n).path});break;case"storage":case"cylinder":{o=y.jsx("path",{d:DJ(r,n).path});break}default:{o=y.jsx("rect",{x:-3,y:-3,width:r+6,height:n+6,rx:8});break}}return y.jsx("g",{className:"likec4-shape-outline",children:o})}function eUe({multiple:e,withOutLine:r}){return y.jsxs("div",{className:GK({shapetype:"html"}),children:[e&&y.jsx("div",{className:"likec4-shape-multiple"}),r&&y.jsx("div",{className:"likec4-shape-outline"})]})}function pm({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(eUe,{multiple:l,withOutLine:o});const s=GK({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(NJ,{shape:e.shape,w:a,h:i})}),y.jsxs("svg",{className:s,viewBox: ` 0 0 $ { a } $ { i } ` ,children:[o&&y.jsx(JHe,{shape:e.shape,w:a,h:i}),y.jsx(NJ,{shape:e.shape,w:a,h:i})]})]})}const zp=S.forwardRef(({value:e,textScale:r=1,uselikec4palette:n=!1,hideIfEmpty:o=!1,emptyText:a="no content",className:i,style:l,fontSize:s,...c},d)=>{if(e.isEmpty&&o)return null;const u=e.nonEmpty?e.isMarkdown?{dangerouslySetInnerHTML:{__html:e.html}}:{children:y.jsx("p",{children:e.text})}:{children:y.jsx(at,{component:"span",fz:"xs",c:"dimmed",style:{userSelect:"none"},children:a})};return y.jsx(hr,{ref:d,...c,className:Ge(bVe({uselikec4palette:n,value:e.isMarkdown?"markdown":"plaintext"}),i),style:{...l,...s&&{"--text-fz": ` var ( -- font - sizes - $ { s } , var ( -- font - sizes - md ) ) ` },...r!==1&&{"--mantine-scale":r}},...u})});zp.displayName="Markdown";const PJ=S.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,ref:n,className:Ge(e,yVe(),"likec4-element")})),BJ=({data:e,...r})=>y.jsx(bx,{element:e,...r}),IJ=S.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,className:Ge(e,"likec4-element-node-content"),ref:n})),OJ=S.forwardRef(({data:{title:e,style:r},className:n,...o},a)=>{const{size:i}= $ b(r),l=i==="sm"||i==="xs";return y.jsx(at,{component:"div",...o,className:
$ { ve . message } ` )}else throw new Error( ` Invalid target : "${oe}" is not a valid target from the root node . Did you mean ".${oe}" ? ` )})}function Yo(J){const ee=L(J.config.target);return ee?{target:ee.map(oe=>typeof oe=="string"?xs(J.parent,oe):oe)}:J.parent.initial}function jo(J){return J.type==="history"}function ua(J){const ee=Dl(J);for(const oe of ee)for(const ie of Ye(oe,J))ee.add(ie);return ee}function Dl(J){const ee=new Set;function oe(ie){if(!ee.has(ie)){if(ee.add(ie),ie.type==="compound")oe(ie.initial.target[0]);else if(ie.type==="parallel")for(const le of ke(ie))oe(le)}}return oe(J),ee}function Ao(J,ee){if(Ht(ee))return J.machine.getStateNodeById(ee);if(!J.states)throw new Error( ` Unable to retrieve child state '${ee}' from '${J.id}' ; no child states exist . ` );const oe=J.states[ee];if(!oe)throw new Error( ` Child state '${ee}' does not exist on '${J.id}' ` );return oe}function xs(J,ee){if(typeof ee=="string"&&Ht(ee))try{return J.machine.getStateNodeById(ee)}catch{}const oe=C(ee).slice();let ie=J;for(;oe.length;){const le=oe.shift();if(!le.length)break;ie=Ao(ie,le)}return ie}function ws(J,ee){if(typeof ee=="string"){const le=J.states[ee];if(!le)throw new Error( ` State '${ee}' does not exist on '${J.id}' ` );return[J,le]}const oe=Object.keys(ee),ie=oe.map(le=>Ao(J,le)).filter(Boolean);return[J.machine.root,J].concat(ie,oe.reduce((le,ve)=>{const De=Ao(J,ve);if(!De)return le;const Fe=ws(De,ee[ve]);return le.concat(Fe)},[]))}function zc(J,ee,oe,ie){const le=Ao(J,ee).next(oe,ie);return!le||!le.length?J.next(oe,ie):le}function Ml(J,ee,oe,ie){const le=Object.keys(ee),ve=Ao(J,le[0]),De=ks(ve,ee[le[0]],oe,ie);return!De||!De.length?J.next(oe,ie):De}function lh(J,ee,oe,ie){const le=[];for(const ve of Object.keys(ee)){const De=ee[ve];if(!De)continue;const Fe=Ao(J,ve),rt=ks(Fe,De,oe,ie);rt&&le.push(...rt)}return le.length?le:J.next(oe,ie)}function ks(J,ee,oe,ie){return typeof ee=="string"?zc(J,ee,oe,ie):Object.keys(ee).length===1?Ml(J,ee,oe,ie):lh(J,ee,oe,ie)}function tu(J){return Object.keys(J.states).map(ee=>J.states[ee]).filter(ee=>ee.type==="history")}function Xo(J,ee){let oe=J;for(;oe.parent&&oe.parent!==ee;)oe=oe.parent;return oe.parent===ee}function Tc(J,ee){const oe=new Set(J),ie=new Set(ee);for(const le of oe)if(ie.has(le))return!0;for(const le of ie)if(oe.has(le))return!0;return!1}function _s(J,ee,oe){const ie=new Set;for(const le of J){let ve=!1;const De=new Set;for(const Fe of ie)if(Tc(Nr([le],ee,oe),Nr([Fe],ee,oe)))if(Xo(le.source,Fe.source))De.add(Fe);else{ve=!0;break}if(!ve){for(const Fe of De)ie.delete(Fe);ie.add(le)}}return Array.from(ie)}function ru(J){const[ee,...oe]=J;for(const ie of Ye(ee,void 0))if(oe.every(le=>Xo(le,ie)))return ie}function Ss(J,ee){if(!J.target)return[];const oe=new Set;for(const ie of J.target)if(jo(ie))if(ee[ie.id])for(const le of ee[ie.id])oe.add(le);else for(const le of Ss(Yo(ie),ee))oe.add(le);else oe.add(ie);return[...oe]}function Zo(J,ee){const oe=Ss(J,ee);if(!oe)return;if(!J.reenter&&oe.every(le=>le===J.source||Xo(le,J.source)))return J.source;const ie=ru(oe.concat(J.source));if(ie)return ie;if(!J.reenter)return J.source.machine.root}function Nr(J,ee,oe){const ie=new Set;for(const le of J)if(le.target?.length){const ve=Zo(le,oe);le.reenter&&le.source===ve&&ie.add(ve);for(const De of ee)Xo(De,ve)&&ie.add(De)}return[...ie]}function Mn(J,ee){if(J.length!==ee.size)return!1;for(const oe of J)if(!ee.has(oe))return!1;return!0}function Do(J,ee,oe,ie,le,ve){if(!J.length)return ee;const De=new Set(ee._nodes);let Fe=ee.historyValue;const rt=_s(J,De,Fe);let lt=ee;le||([lt,Fe]=zi(lt,ie,oe,rt,De,Fe,ve,oe.actionExecutor)),lt=ho(lt,ie,oe,rt.flatMap(Ze=>Ze.actions),ve,void 0),lt=jc(lt,ie,oe,rt,De,ve,Fe,le);const Ot=[...De];lt.status==="done"&&(lt=ho(lt,ie,oe,Ot.sort((Ze,Ke)=>Ke.order-Ze.order).flatMap(Ze=>Ze.exit),ve,void 0));try{return Fe===ee.historyValue&&Mn(ee._nodes,De)?lt:Gr(lt,{_nodes:Ot,historyValue:Fe})}catch(Ze){throw Ze}}function Nl(J,ee,oe,ie,le){if(ie.output===void 0)return;const ve=p(le.id,le.output!==void 0&&le.parent?z(le.output,J.context,ee,oe.self):void 0);return z(ie.output,J.context,ve,oe
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-12-19 13:16:01 +01:00
` });const aZe=fe({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)"}),iZe=[["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"}]],lZe=wt("outline","help-circle","HelpCircle",iZe),sZe=[["path",{d:"M7 7l10 10",key:"svg-0"}],["path",{d:"M17 8l0 9l-9 0",key:"svg-1"}]],cZe=wt("outline","arrow-down-right","ArrowDownRight",sZe),dZe=({value:e})=>{const{title:r,color:n="primary",shape:o="rectangle"}=e,[a,i]=S.useState(null),l=Nt(),s=300,c=200;return y.jsx(b3,{shadow:"none",px:"xs",py:"sm",className:Ge(oZe),"data-likec4-color":n,onMouseEnter:()=>{i(null),l.highlightNotation(e)},onMouseLeave:()=>{i(null),l.unhighlightNotation()},children:y.jsxs(en,{gap:"sm",align:"stretch",wrap:"nowrap",children:[y.jsx(Se,{flex:"0 0 70px",style:{position:"relative",width:70,height:GCe(70*(c/s),0)},children:y.jsx(pm,{data:{shape:o,width:s,height:c}})}),y.jsxs(Lo,{gap:4,flex:1,children:[y.jsx(en,{gap:4,flex:"0 0 auto",children:e.kinds.map(d=>y.jsx(ec,{className:Ge(aZe),onMouseEnter:()=>{i(d),l.highlightNotation(e,d)},onMouseLeave:()=>{i(null),l.highlightNotation(e)},opacity:Bq(a)&&a!==d?.25:1,children:d},d))}),y.jsx(at,{component:"div",fz:"sm",fw:500,lh:"1.25",style:{textWrap:"pretty"},children:r})]})]})})},uZe=e=>({id:e.view.id,notations:e.view.notation?.nodes??[]}),pZe=S.memo(()=>{const e=QC(s=>s.height),{id:r,notations:n}=pi(uZe),[o,a]=sze({key:"notation-webview-collapsed",defaultValue:!0}),i=n.length>0,l=bm();return y.jsxs(Cn,{children:[!i&&y.jsx(mi.div,{initial:{opacity:.75,translateX:"50%"},animate:{opacity:1,translateX:0},exit:{translateX:"100%",opacity:.6},className:AR,children:y.jsx(_n,{label:"View has no notations",color:"orange",...l,children:y.jsx(Ta,{size:"lg",variant:"light",color:"orange",radius:"md",children:y.jsx(rte,{})})})},"empty"),i&&o&&y.jsx(mi.div,{initial:{opacity:.75,translateX:"50%"},animate:{opacity:1,translateX:0},exit:{translateX:"100%",opacity:.6},className:AR,children:y.jsx(_n,{label:"Show notation",color:"dark",fz:"xs",...l,children:y.jsx(lr,{size:"lg",variant:"default",color:"gray",className:tZe,onClick:()=>a(!1),children:y.jsx(lZe,{stroke:1.5})})})},"collapsed"),i&&!o&&y.jsx(mi.div,{initial:{opacity:.75,scale:.2},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.25},className:Ge("react-flow__panel",AR),style:{transformOrigin:"bottom right"},children:y.jsx(Af,{radius:"sm",withBorder:!0,shadow:"lg",className:rZe,children:y.jsxs(up,{defaultValue:"first",radius:"xs",children:[y.jsxs(ky,{children:[y.jsx(lr,{size:"md",variant:"subtle",color:"gray",ml:2,style:{alignSelf:"center"},onClick:()=>a(!0),children:y.jsx(cZe,{stroke:2})}),y.jsx(Lf,{value:"first",fz:"xs",children:"Elements"}),y.jsx(Lf,{value:"second",fz:"xs",disabled:!0,children:"Relationships"})]}),y.jsx(rc,{value:"first",className:nZe,hidden:o,children:y.jsx(oa,{viewportProps:{style:{maxHeight: ` min ( 40 vh , $ { Math . max ( e - 60 , 50 ) } px ) ` }},children:y.jsx(Lo,{gap:0,children:n.map((s,c)=>y.jsx(dZe,{value:s},c))})})})]})})},r)]})}),hZe=S.memo(()=>{const[{layout:e,isActive:r},{toggleCompare:n}]=TR(),o=e==="manual"?"var(--mantine-color-orange-6)":"var(--mantine-color-green-6)";return y.jsx(hr,{className:qn({position:"absolute",top:"0",left:"0",width:"full",height:"full",border:"default",borderWidth:4,pointerEvents:"none",alignItems:"flex-start",justifyContent:"center"}),style:{zIndex:"9999",display:r?void 0:"none",borderColor:o},children:y.jsx(fZe,{style:{backgroundColor:o},onClick:a=>{a.stopPropagation(),n()},children:"Close compare"})})}),fZe=pr.withProps({className:fe({fontSize:"xs",fontWeight:"medium",py:"1.5",lineHeight:"1",borderBottomLeftRadius:"sm",borderBottomRightRadius:"sm",transform:"translateY(-4px)",px:"4",color:"mantine.colors.gray[
2025-12-16 12:13:34 +01:00
$ { 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 : $ { i ( n . elements . fill ) } ;
-- likec4 - palette - stroke : $ { i ( n . elements . stroke ) } ;
}
2025-12-19 10:05:34 +01:00
$ { Nre } $ { 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-12-19 10:05:34 +01:00
` .trim()};function FQe(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-12-19 10:05:34 +01:00
-- likec4 - palette - relation - stroke - selected : $ { Are ( Dre ( 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-12-19 10:05:34 +01:00
$ { Nre } $ { i } {
-- likec4 - palette - relation - stroke - selected : $ { Are ( Dre ( 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-12-19 10:05:34 +01:00
` .trim(),...V $ e(1,OQe+1).map(l=>LQe(e,r,n,l))].join( `
` )}function VQe(e,r){return Jr(r.colors,uw(),un(([n,o])=>FQe(e,n,o)),Lq( `
2025-12-19 13:16:01 +01:00
` ))}const qQe=S.memo(({id:e})=>{const r= ` # $ { e } ` ,n=np()?.(),{theme:o}=Tte(),a=VQe(r,o);return y.jsx("style",{type:"text/css","data-likec4-colors":e,dangerouslySetInnerHTML:{__html:a},nonce:n})}),HQe='@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("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-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:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-400-normal.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@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/cyrillic-500-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-500-normal.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@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/cyrillic-600-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-600-normal.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@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/cyrillic-ext-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-400-normal.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@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/cyrillic-ext-500-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-500-normal.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@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/cyrillic-ext-600-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-600-normal.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@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@la
In order to be iterable , non - array objects must have a [ Symbol . iterator ] ( ) method . ` )},lJe=function(e,r){return nJe(e)||oJe(e,r)||aJe(e,r)||iJe()},Yre=Wre((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})),sJe=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},Xre=function(e,r){if(e==null)return{};var n,o,a=sJe(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},cJe=S.createContext(null);function Zre(e){var r=e.children,n=r===void 0?"":r,o=Xre(e,["children"]);return typeof n!="string"&&(n=ZQe()),Kr.createElement("template",Yre({},o,{dangerouslySetInnerHTML:{__html:n}}))}function Kre(e){var r=e.root,n=e.children;return Vi.createPortal(n===void 0?null:n,r)}function dJe(e){var r=S.forwardRef((function(n,o){var a,i,l=n.mode,s=l===void 0?"open":l,c=n.delegatesFocus,d=c!==void 0&&c,u=n.styleSheets,p=u===void 0?[]:u,f=n.ssr,g=f!==void 0&&f,v=n.children,w=Xre(n,["mode","delegatesFocus","styleSheets","ssr","children"]),x=(i=S.useRef((a=o)&&a.current),S.useEffect((function(){a&&(a.current=i.current)}),[a]),i),k=S.useState(null),C=lJe(k,2),_=C[0], $ =C[1],R="node_".concat(s).concat(d);return S.useLayoutEffect((function(){if(x.current)try{if(typeof o=="function"&&o(x.current),g){var T=x.current.shadowRoot;return void $ (T)}var A=x.current.attachShadow({mode:s,delegatesFocus:d});p.length>0&&(A.adoptedStyleSheets=p), $ (A)}catch(z){(function(j){var I=j.error,P=j.styleSheets,L=j.root;switch(I.name){case"NotSupportedError":P.length>0&&(L.adoptedStyleSheets=P);break;default:throw I}})({error:z,styleSheets:p,root:_})}}),[o,x,p]),Kr.createElement(Kr.Fragment,null,Kr.createElement(e.tag,Yre({key:R,ref:x},w),(_||g)&&Kr.createElement(cJe.Provider,{value:_},g?Kr.createElement(Zre,{shadowroot:s,shadowrootmode:s},e.render({root:_,ssr:g,children:v})):Kr.createElement(Kre,{root:_},e.render({root:_,ssr:g,children:v})))))}));return r.propTypes={mode:ml.oneOf(["open","closed"]),delegatesFocus:ml.bool,styleSheets:ml.arrayOf(ml.instanceOf(globalThis.CSSStyleSheet)),ssr:ml.bool,children:ml.node},r}Zre.propTypes={children:ml.oneOfType([ml.string,ml.node])},Kre.propTypes={root:ml.object.isRequired,children:ml.node};var Ez=new Map;function uJe(){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=rJe(a,{separator:"-"}),l="".concat(r,"-").concat(i);return Ez.has(l)||Ez.set(l,dJe({tag:i,render:n})),Ez.get(l)}})}var pJe=uJe();const hJe=pJe.div;function fJe(e,r=!1){if(r===!1)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
: 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-12-19 13:16:01 +01:00
` .trim()}const Qre=S.forwardRef(({children:e,theme:r=Bre,injectFontCss:n=!0,styleNonce:o,colorScheme:a,keepAspectRatio:i=!1,...l},s)=>{const c=WQe(a),d=DG(),u=fJe(d,i),p=S.useRef(null),f=UQe(n,o),g=S.useCallback(()=>p.current??void 0,[p]),v=it(()=>{if(ri(o)){if(typeof o=="string")return o;if(typeof o=="function")return o()}return""});let w=ri(o)?v():void 0;return y.jsxs(y.Fragment,{children:[y.jsx("style",{type:"text/css",nonce:w,dangerouslySetInnerHTML:{__html:u}}),y.jsx(hJe,{ssr:!1,...l,styleSheets:f,"data-likec4-instance":d,children:y.jsx("div",{ref: $ r(p,s),"data-mantine-color-scheme":c,className:"likec4-shadow-root",children:y.jsx(z9,{...a&&{forceColorScheme:a},defaultColorScheme:c,getRootElement:g,...!!w&&{getStyleNonce:v},cssVariablesSelector:".likec4-shadow-root",theme:r,children:y.jsx(wz,{children:e})})})})]})});Qre.displayName="ShadowRoot";const mJe=fe({cursor:"pointer","--mantine-cursor-pointer":"pointer","& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)":{cursor:"pointer"}});function gJe({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:d=!0,showNavigationButtons:u=!1,enableNotations:p,enableFocusMode:f=!1,enableDynamicViewWalkthrough:g=!1,enableElementDetails:v=!1,enableRelationshipDetails:w=!1,enableRelationshipBrowser:x=w,reduceGraphics:k="auto",mantineTheme:C,styleNonce:_,style: $ ,reactFlowProps:R,renderNodes:T,children:A,...z}){const j=S.useRef(null),I=gNe(),[P,L]=S.useState("manual"),[H,M]=S.useState(null),V=it(Q=>{Q&&Q!==H&&L("manual"),M(Q)}),B=it(()=>{V(e)});if(!I)return y.jsx(kz,{children:"LikeC4Model not found. Make sure you provided LikeC4ModelProvider."});const F=I.findView(e)?. $ layouted;if(!F)return y.jsx(XQe,{viewId:e});if(F._stage!=="layouted")return y.jsxs(kz,{children:['LikeC4 View " $ ',e,'" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.']});const q=H?I.findView(H):null,G=P==="manual"?q?. $ layouted:q?. $ view,U=!!p&&(F.notation?.nodes?.length??0)>0,Y=(G?.notation?.nodes?.length??0)>0,Z=d!==!1,O=Pq(d)?{}:d,W=kee(F,z.dynamicViewVariant),K=j.current?{root:j.current}:void 0;return y.jsx(Qre,{ref:j,injectFontCss:l,theme:C,colorScheme:i,styleNonce:_,keepAspectRatio:a?W:!1,className:Ge("likec4-view",r),style: $ ,children:y.jsxs(wz,{children:[y.jsx(Lre,{view:F,pannable:n,zoomable:o,background:c,fitView:!0,fitViewPadding:y2.default,enableNotations:U,enableDynamicViewWalkthrough:g,showNavigationButtons:u,enableCompareWithLatest:!1,enableFocusMode:f,enableRelationshipDetails:w,enableElementDetails:v,enableRelationshipBrowser:x,enableElementTags:!1,controls:s,reduceGraphics:k,className:Ge("likec4-static-view",Z&&mJe),enableSearch:!1,...Z&&{onCanvasClick:B,onNodeClick:B},reactFlowProps:R,renderNodes:T,children:A,...z}),y.jsx(Cn,{...K,children:G&&y.jsxs(p0,{openDelay:0,onClose:()=>V(null),children:[y.jsx(Lre,{view:G,pannable:!0,zoomable:!0,background:"dots",onNavigateTo:V,showNavigationButtons:!0,enableDynamicViewWalkthrough:!0,enableFocusMode:!0,enableRelationshipBrowser:!0,enableElementDetails:!0,enableRelationshipDetails:!0,enableSearch:!0,enableElementTags:!0,enableCompareWithLatest:!0,controls:!0,fitView:!0,...z,fitViewPadding:y2.withControls,...O,enableNotations:Y&&(O.enableNotations??!0),renderNodes:T,onLayoutTypeChange:L}),y.jsx(hr,{pos:"absolute",top:"4",right:"4",zIndex:"999",children:y.jsx(lr,{variant:"default",color:"gray",onClick:Q=>{Q.stopPropagation(),V(null)},children:y.jsx(fp,{})})})]})})]})})}var yJe=e=>y.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 512 131",...e,children:y.jsx("path",{fill:"#2396ED",d:"m140.598 25.715 3.892 2.818c6.77 5.46 10.662 11.625 11.508 18.67 7.277-1.409 16.584-.352 20.646 2.466l3.723 2.29-.677 1.41c-1.185 2.641-1.523 3.346-1.692 3.698-6.6 13.21-19.631 13.386-25.723 13.21-15.4 38.573-48.23 59.885-92.57 59.885-20.476 0-36.045-6.517-46.538-19.375C-.709 93.88-.709 71.862.475 64.817l.339-1.41h122.353c6.43 0 11.339-1.76 13.708-3.17-2.539-3.875-3.385-8.278-3.554-10.744-.508-7.045
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-12-19 13:16:01 +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"},documentation:{style:{icon:"tech:electron"},technology:"Static Site Generator",description:{txt:"Documentation system for EDP LikeC4 platform."},title:"Documentation",kind:"system",id:"documentation"},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"},"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"},"edgeConnect.api":{style:{opacity:20},description:{txt:"Single entry point for provisioning and lifecycle management"},title:"Edge Cloud API",kind:"container",id:"edgeConnect.api"},"edgeConnect.resources":{style:{opacity:20},description:{txt:"Managed resources such as App, AppInstance, etc."},title:"Edge Resources",kind:"container",id:"edgeConnect.resources"},"edgeConnect.controllers":{style:{opacity:20},description:{txt:"Reconciles desired state and drives deployments"},title:"Controllers / Scheduler",kind:"container",id:"edgeConnect.controllers"},"edgeConnect.runtime":{style:{opacity:20},description:{txt:"Runtime where applications actually run"},title:"Edge Clusters",kind:"container",id:"edgeConnect.runtime"},"edp.externalSecrets":{style:{opacity:20},tags:["internal"],description:{txt:"Provider to access externally stored Kubernetes secrets"},title:"exte
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-12-19 13:16:01 +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.garm":{style:{opacity:20,icon:"tech:docker"},title:"Garm Image",kind:"container",id:"edp.garm"},"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"},"edfbuilder_workflow.runEDP.createCrossplaneNS":{style:{},title:"Create Crossplane namespace",kind:"step",id:"edfbuilder_workflow.runEDP.createCrossplaneNS"},"edfbuilder_workflow.runEDP.installCrossplaneHelm":{style:{},title:"Install Crossplane Helm Chart",kind:"step",id:"edfbuilder_workflow.runEDP.installCrossplaneHelm"},"edfbuilder_workflow.runEDP.installCrossplaneFunctionsAndProviders":{style:{},title:"Install Crossplane Functions and Providers",kind:"step",id:"edfbuilder_workflow.runEDP.installCrossplaneFunctionsAndProviders"},"edfbuilder_workflow.runEDP.waitForCrossplaneFunctionsAndProviders":{style:{},title:"Wait for Crossplane Functions and Providers to become available",kind:"step",id:"edfbuilder_workflow.runEDP.waitForCrossplaneFunctionsAndProviders"},"edfbuilder_workflow.runEDP.setupCrossplaneServiceAccount":{style:{},title:"Apply cluster-admin role to crossplane shell p
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-12-19 10:05:34 +01:00
Optionally we will have a WebUI / API / CLI ` },tags:[],style:{opacity:15,size:"md"},depth:1,x:3577,y:79,width:870,height:995,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otcTenantProd",parent:null,level:0,children:["otcTenantProd.otcTenantEdpBuildthing","otcTenantProd.otcTenantObservability","otcTenantProd.otcTenantCustomerA"],inEdges:[],outEdges:["1ypat9q","1oiku86"],deploymentRef:"otcTenantProd",title:"Prod - builth.ing",kind:"environment",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:17522,y:79,width:870,height:648,labelBBox:{x:6,y:0,width:108,height:15}},{id:"local",parent:null,level:0,children:["local.ingressNginx","local.velero","local.crossplane","local.externalSecrets","local.monitoring","local.backstage","local.argocd","local.keycloak","local.openbao","local.fibonacci","local.mailhog","local.minio","local.gitea","local.spark.sparkoperator"],inEdges:["1m1lj8s"],outEdges:["se5brg"],deploymentRef:"local",title:"Local kind-cluster",kind:"environment",technology:"Kind",color:"primary",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"Local kind-cluster environment for EDP, typically run by edpbuilder"},tags:[],style:{opacity:15,size:"md"},depth:2,x:6508,y:8,width:10964,height:1449,labelBBox:{x:6,y:0,width:127,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",tags:[],style:{opacity:15,size:"md"},depth:1,x:10434,y:444,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:12058,y:444,width:384,height:265,labelBBox:{x:6,y:0,width:49,height:15}},{id:"edgeSdk",parent:null,level:0,children:[],inEdges:["1xqlhup"],outEdges:["14pfq5a","lw6otg"],deploymentRef:"edgeSdk",title:"Edge Cloud SDK",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",icon:"tech:go",description:{txt:"Wrapper around API"},tags:[],style:{opacity:15,size:"md"},x:731,y:497,width:320,height:180,labelBBox:{x:68,y:54,width:214,height:67}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:[],inEdges:["l1c2z3"],outEdges:["109g3jm","1lrp92n"],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"},technology:null,x:4055,y:150,width:342,height:180,labelBBox:{x:18,y:54,width:306,height:66}},{id:"otcTenantProd.otcTenantEdpBuildthing",parent:"otcTenantProd",level:1,children:[],inEdges:[],outEdges:["rj56uy","u7ohgi","1ypat9q","1oiku86"],deploymentRef:"otcTenantProd.otcTenantEdpBuildthing",title:"edp.builth.ing",kind:"cluster",color:"primary",shape:"rectangle",icon:"tech:git",description:{txt:"Primary Instance"},tags:[],style:{opacity:15,size:"md"},x:18022,y:150,width:320,height:180,labelBBox:{x:85,y:63,width:181,height:48}},{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:12982,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:[],k
2025-12-18 09:21:05 +01:00
2025-12-19 10:05:34 +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:2913,y:79,width:442,height:1704,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:8448,y:1177,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:10043,y:1177,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:10738,y:1177,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:7528,y:1177,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:["126mt75"],outEdges:["fkkf8y","1mbuxdd"],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"},technology:null,x:2963,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","p2umm7"],outEdges:["pit45i","b27cdb"],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:2977,y:1177,width:327,height:180,labelBBox:{x:46,y:53,width:266,height:68}},{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:2963,y:1553,width:320,height:180,labelBBox:{x:67,y:53,width:185,height:67}},{id:"otcKubernetes",parent:null,level:0,children:["otcKubernetes.edpCluster"],inEdges:["1ogkmfn","b27cdb","1mbuxdd","9r557q","rivecr","1lrp92n","se5brg"],outEdges:["i6v3n","p2umm7","126mt75","c2grk6","1ean8sr","l1c2z3","1m1lj8s"],deploymentRef:"otcKubernetes",title:"OTC Kubernetes",kind:"environment",technology:"Kubernetes",color:"primary",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine hosting EDP platform"},tags:[],style:{opacity:15,size:"md"},depth:1,x:4224,y:1500,width:384,height:265,labelBBox:{x:6,y:0,width:106,height:15}},{id:"otcKubernetes.edpCluster",parent:"otcKubernetes",level:1,children:[],inEdges:["1ogkmfn","b27cdb","1mbuxdd","9r557q","rivecr","1lrp92n","se5brg"],outEdges:["i6v3n","p2umm7
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-12-19 10:05:34 +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:12542,y:844,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"local.gitea.forgejoRunner",parent:"local.gitea",level:2,children:[],inEdges:["1m1lj8s"],outEdges:["se5brg"],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:"local.gitea.forgejoRunner",modelRef:"forgejoRunner",x:12542,y:150,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:102}},{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:17102,y:150,width:320,height:180,labelBBox:{x:76,y:65,width:198,height:45}}],edges:[{id:"1xqlhup",source:"edgeProvider",target:"edgeSdk",label:"built using",points:[[1035,330],[1021,352],[1007,374],[995,395],[977,425],[959,458],[943,489]],labelBBox:{x:996,y:395,width:67,height:18},parent:null,relations:["1wlvsb5"],color:"gray",line:"dashed",head:"normal"},{id:"u9omtf",source:"edgeProvider",target:"edgeProviderHost.edp",label:"hosted on",points:[[1264,255],[1378,274],[1522,320],[1596,426],[1673,536],[1652,606],[1596,727],[1576,770],[1543,808],[1507,838]],labelBBox:{x:1647,y:576,width:66,height:18},parent:null,relations:["12ssq9"],color:"gray",line:"dashed",head:"normal"},{id:"r4j4sg",source:"edgeProvider",target:"edgeProviderHost.terralist",label:"published to",points:[[1160,330],[1197,379],[1244,439],[1282,489]],labelBBox:{x:1225,y:395,width:80,height:18},parent:null,relations:["1mpjz5d"],color:"gray",line:"dashed",head:"normal"},{id:"14pfq5a",source:"edgeSdk",target:"edgeProviderHost.edp",label:"hosted on",points:[[1011,677],[1077,727],[1160,788],[1228,838]],labelBBox:{x:1125,y:742,width:66,height:18},parent:null,relations:["1sm6ifh"],color:"gray",line:"dashed",head:"normal"},{id:"lw6otg",source:"edgeSdk",target:"edgeCloud.edgeApi",label:"calls",points:[[884,677],[880,725],[875,785],[871,834]],labelBBox:{x:879,y:742,width:32,height:18},parent:null,relations:["vfhcba"],color:"gray",line:"dashed",head:"normal"},{id:"1ogkmfn",source:"edgeConnectEnv",target:"otcKubernetes.edpCluster",label:"[...]",points:[[5676,330],[5725,397],[5779,491],[5779,586],[5779,586],[5779,586],[5779,1268],[5779,1420],[5657,1426],[5518,1488],[5355,1561],[4853,1609],[4586,1630]],labelBBox:{x:5780,y:922,width:25,height:18},parent:null,relations:["18dtot7","1k6h7jf","1t1b56a"],color:"gray",line:"dashed",head:"normal"},{id:"i6v3n",source:"otcKubernetes.edpCluster",target:"edgeConnectEnv",label:"runs workflows",points:[[4576,1629],[4742,1611],[5004,1565],[5205,1457],[5317,1397],[5420,1395],[5420,1268],[5420,586],[5420,586],[5420,586],[5420,495],[5470,404],[5517,338]],labelBBox:{x:5421,y:923,width:97,height:18},parent:null,relations:["1pbc22f"],color:"gray",line:"dashed",head:"normal"},{id:"pit45i",source:"otc-edp-per-tenant.cce",target:"otc-edp-per-tenant.cloudServices",label:null,points:[[3134,1357],[3132,1391],[3130,1430],[3128,1465],[3127,1490],[3126,1518],[3125,1543]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1fzhjm9","15njmlz","hks76r","1w18ve8"],color:"gray",line:"dashed",head:"normal"},{id:"b27cdb",source:"otc-edp-per-tenant.cce",target:"otcKubernetes.edpCluster",label:"register",points:[[3155,1357],[3167,1404],[3190,1457],[3232,1488],[3246,1498],[3370,1498],[3387,1500],[3691,1532],[4043,1584],[4246,1615]],labelBBox:{x:3233,y:1465,width:51,height:18},parent:null,relations:["18dtot7"],color:"gray",line:"dashed",head:"normal"},{id:"fkkf8y",source:"otc-edp-per-tenant.forgejoRunnerInfrastructure",target:"otc-edp-per-tenant.cc
2025-12-16 12:13:34 +01:00
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
2025-12-16 12:13:34 +01:00
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",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",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",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,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,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,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,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 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 .
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
2025-12-16 12:13:34 +01:00
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"]
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-12-16 12:13:34 +01:00
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 .
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: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
2025-12-19 13:16:01 +01:00
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",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",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",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",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",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",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",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",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.cce.internalServices.forgejo",target:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",label:"invokes",points:[[4044,1309],[4022,1301],[4e3,1294],[3979,1287],[3850,1249],[3808,1275],[3684,1222],[3176,1006],[2655,594],[2433,408]],labelBBox:{x:2970,y:799,width:51,height:18},parent:"otc-edpFoundry",relations:["1f5y9gc"],color:"gray",line:"dashed",head:"normal"},{id:"1gtxobu",source:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",target:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",label:"runs",points:[[2323,401],[2323,445],[2323,499],[2323,544]],labelBBox:{x:2324,y:466,width:31,height:18},parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",relations:["h
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-12-19 13:16:01 +01:00
and security scanning ` },tags:[],technology:"Golang",kind:"container",isCustomized:!0,navigateTo:"forgejo",x:48,y:553,width:340,height:180,labelBBox:{x:46,y:17,width:279,height:139}},{id:"edp.garm",parent:"edp",level:1,children:["edp.garm.garm","edp.garm.providerEdgeConnect"],inEdges:["step-01","step-06","step-08","step-16"],outEdges:["step-03","step-04","step-07","step-09","step-18","step-19"],title:"Garm Image",modelRef:"edp.garm",shape:"rectangle",color:"primary",icon:"tech:docker",style:{opacity:20,size:"md"},tags:[],kind:"container",depth:1,x:709,y:142,width:1090,height:404,labelBBox:{x:6,y:0,width:77,height:15}},{id:"edp.garm.garm",parent:"edp.garm",level:2,children:[],inEdges:["step-01","step-06","step-08","step-16"],outEdges:["step-02","step-07","step-09","step-17"],title:"Garm",modelRef:"edp.garm.garm",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"Provisions runners for Forgejo"},tags:[],kind:"component",x:749,y:316,width:325,height:180,labelBBox:{x:47,y:63,width:262,height:47}},{id:"edp.garm.providerEdgeConnect",parent:"edp.garm",level:2,children:[],inEdges:["step-02","step-17"],outEdges:["step-03","step-04","step-18","step-19"],title:"Garm Provider for EdgeConnect",modelRef:"edp.garm.providerEdgeConnect",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"Acts as abstraction layer for EdgeConnect"},tags:[],kind:"component",x:1349,y:203,width:409,height:180,labelBBox:{x:47,y:54,width:347,height:65}},{id:"edgeConnect",parent:null,level:0,children:[],inEdges:["step-03","step-04","step-18","step-19"],outEdges:["step-05"],title:"EdgeConnect Cloud",modelRef:"edgeConnect",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},description:{txt:"Provides an API and control plane to run applications on the edge"},tags:[],kind:"system",x:2135,y:169,width:320,height:180,labelBBox:{x:24,y:54,width:273,height:65}},{id:"forgejoRunner",parent:null,level:0,children:[],inEdges:["step-05","step-09","step-12","step-15"],outEdges:["step-06","step-10","step-11","step-12","step-13","step-15"],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:2665,y:810,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}}],edges:[{id:"step-01",source:"edp.forgejo",target:"edp.garm.garm",label:"(Webhook) A new job is pending",points:[[389,687],[482,703],[596,707],[689,664],[761,631],[818,563],[857,504]],labelBBox:{x:458,y:632,width:228,height:19},parent:"edp",relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@0"},{id:"step-02",source:"edp.garm.garm",target:"edp.garm.providerEdgeConnect",label:"Create new runner",points:[[1074,428],[1142,433],[1220,433],[1289,417],[1321,410],[1352,399],[1383,387]],labelBBox:{x:1144,y:385,width:141,height:19},parent:"edp.garm",relations:["1olxwwi"],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@1"},{id:"step-03",source:"edp.garm.providerEdgeConnect",target:"edgeConnect",label:"Create App (Runner)",points:[[1639,203],[1692,152],[1767,92],[1847,65],[1943,32],[1980,29],[2075,65],[2128,85],[2176,124],[2214,162]],labelBBox:{x:1886,y:7,width:156,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@2"},{id:"step-04",source:"edp.garm.providerEdgeConnect",target:"edgeConnect",label:"Create AppInstance (Runner)",points:[[1759,234],[1788,228],[1818,222],[1847,219],[1948,206],[1974,210],[2075,219],[2091,220],[2108,222],[2125,225]],labelBBox:{x:1859,y:178,width:209,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@3"},{id:"step-05",source:"edgeConnect",target:"forgejoRunner",label:"Deploys",points:[[2448,349],[2502,386],[2560,432],[2605,484],[2687,579],[2750,711],[2787,800]],labelBBox:{x:2524,y:372,width:77,height:19},parent:null,relatio
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-12-16 12:13:34 +01:00
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",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",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",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",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",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",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",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:"3ab95ff726e92d4e64a6b566beb19c19bcc22d22",bounds:{x:0,y:0,width:5229,height:943},nodes:[{id:"forgejoRunner",parent:null,level:0,children:[],inEdges:["stl3mw"],outEdges:["1cy1y20"],title:"Forgejo Runner",modelRef:"forgejoRunner",shape:"rectangle",color:"primary",style:{opacity:25,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:0,y:392,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:102}},{id:"developer",parent:null,level:0,children:[],inEdges:[],outEdges:["1y3lcyj","1ttqc1r","170qzun","1bt83vj","1nv0w41","1agven9","3nxrq7","bfgapq"],title:"Developer",modelRef:"developer",shape:"person",color:"green",style:{opacity:25,size:"md"},description:{txt:"The regular user of the platfor
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-12-19 13:16:01 +01:00
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:2991,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:2561,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.garm",parent:"edp",leve
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-12-16 12:13:34 +01:00
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",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.providerShell",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEd
offering capabilities like
code version controling
collaboration and ticketing
2025-12-19 13:16:01 +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",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",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",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",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",points:[[1900,241],[1900,282],[1900,331],[1900,374]],labelBBox:{x:1901,y:301,width:34,height:18},parent:null,relations:["ofdedh"],color:"gray",line:"dashed",head:"normal"},{id:"68hu20",source:"edp.ingressNginx.ingressNginx",target:"edp.minio",label:"https",points:[[2019,241],[2076,284],[2145,335],[2203,378]],labelBBox:{x:2129,y:301,width:34,height:18},parent:null,relations:["fe65w2"],color:"gray",line:"dashed",head:"normal"},{id:"nx2xew",source:"edp.ingressNginx.ingressNginx",target:"edp.monitoring",label:"https",points:[[2060,207],[2191,253],[2381,321],[25
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-12-19 13:16:01 +01:00
discover the expected and uncover the unexpected . ` },tags:[],technology:"Elasticsearch",kind:"container",x:1811,y:280,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:0,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-12-19 13:16:01 +01:00
and correctness . ` },tags:[],technology:"PostgreSQL",kind:"container",x:692,y:0,width:354,height:180,labelBBox:{x:46,y:17,width:293,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:1237,y:0,width:359,height:180,labelBBox:{x:46,y:26,width:298,height:121}},{id:"platformdeveloper",parent:null,level:0,children:[],inEdges:[],outEdges:["mox1r9","vyep7i","1kjl8ep","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:2205,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:2431,y:2375,width:320,height:180,labelBBox:{x:56,y:63,width:208,height:48}},{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:2431,y:1872,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:709,y:2588,width:320,height:180,labelBBox:{x:74,y:53,width:203,height:67}},{id:"documentation",parent:null,level:0,children:[],inEdges:["1kjl8ep"],outEdges:["14bjpe1"],title:"Documentation",modelRef:"documentation",shape:"rectangle",color:"primary",icon:"tech:electron",style:{opacity:15,size:"md"},description:{txt:"Documentation system for EDP LikeC4 platform."},tags:[],technology:"Static Site Generator",kind:"system",navigateTo:"components-template-documentation",x:677,y:2085,width:384,height:180,labelBBox:{x:46,y:44,width:323,height:85}},{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:1256,y:2428,width:321,height:180,labelBBox:{x:46,y:35,width:260,height:103}},{id:"@gr1",parent:null,kind:"@group",title:"developer-scope",color:"green",shape:"rectangle",children:["developer","otherProductLifecycleRoles","@gr2","@gr3"],inEdges:["1lyfj4n","14bjpe1","109bf6k"],outEdges:["1yfrmvt","1yfr9mr","162qbqw","1tbee2v","5mpoyf","1ivh6bj","17brhnu","35ru8e"],level:0,depth:2,tags:[],style:{border:"none",opacity:20},x:1189,y:1431,width:1052,height:746,labelBBox:{x:6,y:0,width:114,height:15}},{id:"developer",parent:"@gr1",level:1,children:[],inEdges:[],outEdges:["1yfrmvt","1yfr9mr","162qbqw","zjg544","1okgiq5"],title:"Developer",modelRef:"developer",shape:"person",color:"green",style:{opacity:15,size:"md"},description:{txt:"The regular user of the platform"},tags:[],kind:"actor",x:1257,y:1545,width:320,height:180,labelBBox:{x:53,y:63,width:214,height:48}},{id:"otherProductLifecycleRoles",parent:"@gr1",level:1,children:[],inEdges:[],outEdges:["1wupl5x"],title:"Reviewer, Tester, Auditors, Operators",modelRef:"otherProductLifecycleRoles",shape:"person",color:"green",style:{opacity:15,size:"md"},description:{txt:"Coworking roles 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
addressing a growing number of use cases . It centrally stores your data so you can
2025-12-19 13:16:01 +01:00
discover the expected and uncover the unexpected . ` },tags:[],technology:"Elasticsearch",kind:"container",x:2294,y:390,width:520,height:290,labelBBox:{x:72,y:46,width:406,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:0,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-12-19 13:16:01 +01:00
and correctness . ` },tags:[],technology:"PostgreSQL",kind:"container",x:859,y:0,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:1557,y:0,width:520,height:290,labelBBox:{x:80,y:58,width:391,height:165}},{id:"platformdeveloper",parent:null,level:0,children:[],inEdges:[],outEdges:["mox1r9","vyep7i","1kjl8ep","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:2852,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:3076,y:3022,width:520,height:290,labelBBox:{x:115,y:109,width:290,height:63}},{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:3076,y:2409,width:520,height:290,labelBBox:{x:69,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:859,y:3275,width:520,height:290,labelBBox:{x:145,y:96,width:259,height:89}},{id:"documentation",parent:null,level:0,children:[],inEdges:["1kjl8ep"],outEdges:["14bjpe1"],title:"Documentation",modelRef:"documentation",shape:"rectangle",color:"primary",icon:"tech:electron",style:{opacity:15,size:"xl"},description:{txt:"Documentation system for EDP LikeC4 platform."},tags:[],technology:"Static Site Generator",kind:"system",navigateTo:"components-template-documentation",x:859,y:2662,width:520,height:290,labelBBox:{x:62,y:83,width:426,height:115}},{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:1557,y:3088,width:520,height:290,labelBBox:{x:106,y:71,width:339,height:139}},{id:"@gr1",parent:null,kind:"@group",title:"developer-scope",color:"green",shape:"rectangle",children:["developer","otherProductLifecycleRoles","@gr2","@gr3"],inEdges:["1lyfj4n","14bjpe1","109bf6k"],outEdges:["1yfrmvt","1yfr9mr","162qbqw","1tbee2v","5mpoyf","1ivh6bj","17brhnu","35ru8e"],level:0,depth:2,tags:[],style:{border:"none",opacity:20},x:1506,y:1871,width:1380,height:966,labelBBox:{x:6,y:0,width:114,height:15}},{id:"developer",parent:"@gr1",level:1,children:[],inEdges:[],outEdges:["1yfrmvt","1yfr9mr","162qbqw","zjg544","1okgiq5"],title:"Developer",modelRef:"developer",shape:"person",color:"green",style:{opacity:15,size:"xl"},description:{txt:"The regular user of the platform"},tags:[],kind:"actor",x:1557,y:1985,width:520,height:290,labelBBox:{x:111,y:109,width:298,height:63}},{id:"otherProductLifecycleRoles",parent:"@gr1",level:1,children:[],inEdges:[],outEdges:["1wupl5x"],title:"Reviewer, Tester, Auditors, Operators",modelRef:"otherProductLifecycleRoles",shape:"person",color:"green",style:{opacity:15,size:"xl"},description:{txt:"Coworkin
2025-12-16 12:13:34 +01:00
2025-12-04 13:24:53 +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-12-19 13:16:01 +01:00
Optionally we will have a WebUI / API / CLI ` },technology:"OTC",title:"OTC EDP Foundry Central Service clusters",id:"otc-edpFoundry"},edgeProvider:{style:{icon:"tech:terraform"},kind:"paas",description:{txt:"Unlocks the terraform ecosystem"},title:"Terraform Edge provider",id:"edgeProvider"},edgeProviderHost:{style:{},kind:"environment",title:"OTC",id:"edgeProviderHost"},edgeSdk:{style:{icon:"tech:go"},kind:"paas",description:{txt:"Wrapper around API"},technology:"Cloud Services",title:"Edge Cloud SDK",id:"edgeSdk"},edgeCloud:{style:{},kind:"environment",title:"Edge cloud",id:"edgeCloud"},otcTenantProd:{style:{},kind:"environment",title:"Prod - builth.ing",id:"otcTenantProd"},otcTenantNonProd:{style:{},kind:"environment",title:"Non-Prod - t09.de",id:"otcTenantNonProd"},otcKubernetes:{style:{icon:"tech:kubernetes"},kind:"environment",description:{txt:"OTC Container Cluster Engine hosting EDP platform"},technology:"Kubernetes",title:"OTC Kubernetes",id:"otcKubernetes"},edgeConnectEnv:{style:{icon:"tech:docker"},kind:"environment",description:{txt:"Edge infrastructure for ephemeral runner deployment"},technology:"Edge Connect Platform",title:"Edge Connect",id:"edgeConnectEnv"},"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 Workf
2025-12-16 12:13:34 +01:00
at ` )?" (<anonymous>)":-1<b.stack.indexOf("@")?"@unknown:0:0":""}return `
2025-12-19 13:16:01 +01:00
` +ce+h+pe}var je=!1;function Be(h,m){if(!h||je)return"";je=!0;var b=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{var E={DetermineComponentFrameRoot:function(){try{if(m){var Re=function(){throw Error()};if(Object.defineProperty(Re.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(Re,[])}catch(we){var ye=we}Reflect.construct(h,[],Re)}else{try{Re.call()}catch(we){ye=we}h.call(Re.prototype)}}else{try{throw Error()}catch(we){ye=we}(Re=h())&&typeof Re.catch=="function"&&Re.catch(function(){})}}catch(we){if(we&&ye&&typeof we.stack=="string")return[we.stack,ye.stack]}return[null,null]}};E.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var D=Object.getOwnPropertyDescriptor(E.DetermineComponentFrameRoot,"name");D&&D.configurable&&Object.defineProperty(E.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var N=E.DetermineComponentFrameRoot(),X=N[0],ne=N[1];if(X&&ne){var se=X.split( `
2025-12-16 12:13:34 +01:00
` ),ge=ne.split( `
` );for(D=E=0;E<se.length&&!se[E].includes("DetermineComponentFrameRoot");)E++;for(;D<ge.length&&!ge[D].includes("DetermineComponentFrameRoot");)D++;if(E===se.length||D===ge.length)for(E=se.length-1,D=ge.length-1;1<=E&&0<=D&&se[E]!==ge[D];)D--;for(;1<=E&&0<=D;E--,D--)if(se[E]!==ge[D]){if(E!==1||D!==1)do if(E--,D--,0>D||se[E]!==ge[D]){var Ee= `
2025-12-19 10:05:34 +01:00
` +se[E].replace(" at new "," at ");return h.displayName&&Ee.includes("<anonymous>")&&(Ee=Ee.replace("<anonymous>",h.displayName)),Ee}while(1<=E&&0<=D);break}}}finally{je=!1,Error.prepareStackTrace=b}return(b=h?h.displayName||h.name:"")?xe(b):""}function Je(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 Be(h.type,!1);case 11:return Be(h.type.render,!1);case 1:return Be(h.type,!0);case 31:return xe("Activity");default:return""}}function st(h){try{var m="",b=null;do m+=Je(h,b),b=h,h=h.return;while(h);return m}catch(E){return `
2025-12-16 12:13:34 +01:00
Error generating stack : ` +E.message+ `
2025-12-19 13:16:01 +01:00
` +E.stack}}var Le=Object.prototype.hasOwnProperty,St=e.unstable_scheduleCallback,Ve=e.unstable_cancelCallback,qe=e.unstable_shouldYield,Xe=e.unstable_requestPaint,It=e.unstable_now,Et=e.unstable_getCurrentPriorityLevel,be=e.unstable_ImmediatePriority,ke=e.unstable_UserBlockingPriority,Ye=e.unstable_NormalPriority,yt=e.unstable_LowPriority,xt=e.unstable_IdlePriority,Tr=e.log,er=e.unstable_setDisableYieldValue,qt=null,Ht=null;function Zr(h){if(typeof Tr=="function"&&er(h),Ht&&typeof Ht.setStrictMode=="function")try{Ht.setStrictMode(qt,h)}catch{}}var Gt=Math.clz32?Math.clz32:fn,ln=Math.log,Wn=Math.LN2;function fn(h){return h>>>=0,h===0?32:31-(ln(h)/Wn|0)|0}var oo=256,Yo=262144,jo=4194304;function ua(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 Dl(h,m,b){var E=h.pendingLanes;if(E===0)return 0;var D=0,N=h.suspendedLanes,X=h.pingedLanes;h=h.warmLanes;var ne=E&134217727;return ne!==0?(E=ne&~N,E!==0?D=ua(E):(X&=ne,X!==0?D=ua(X):b||(b=ne&~h,b!==0&&(D=ua(b))))):(ne=E&~N,ne!==0?D=ua(ne):X!==0?D=ua(X):b||(b=E&~h,b!==0&&(D=ua(b)))),D===0?0:m!==0&&m!==D&&(m&N)===0&&(N=D&-D,b=m&-m,N>=b||N===32&&(b&4194048)!==0)?m:D}function Ao(h,m){return(h.pendingLanes&~(h.suspendedLanes&~h.pingedLanes)&m)===0}function xs(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 ws(){var h=jo;return jo<<=1,(jo&62914560)===0&&(jo=4194304),h}function zc(h){for(var m=[],b=0;31>b;b++)m.push(h);return m}function Ml(h,m){h.pendingLanes|=m,m!==268435456&&(h.suspendedLanes=0,h.pingedLanes=0,h.warmLanes=0)}function lh(h,m,b,E,D,N){var X=h.pendingLanes;h.pendingLanes=b,h.suspendedLanes=0,h.pingedLanes=0,h.warmLanes=0,h.expiredLanes&=b,h.entangledLanes&=b,h.errorRecoveryDisabledLanes&=b,h.shellSuspendCounter=0;var ne=h.entanglements,se=h.expirationTimes,ge=h.hiddenUpdates;for(b=X&~b;0<b;){var Ee=31-Gt(b),Re=1<<Ee;ne[Ee]=0,se[Ee]=-1;var ye=ge[Ee];if(ye!==null)for(ge[Ee]=null,Ee=0;Ee<ye.length;Ee++){var we=ye[Ee];we!==null&&(we.lane&=-536870913)}b&=~Re}E!==0&&ks(h,E,0),N!==0&&D===0&&h.tag!==0&&(h.suspendedLanes|=N&~(X&~m))}function ks(h,m,b){h.pendingLanes|=m,h.suspendedLanes&=~m;var E=31-Gt(m);h.entangledLanes|=m,h.entanglements[E]=h.entanglements[E]|1073741824|b&261930}function tu(h,m){var b=h.entangledLanes|=m;for(h=h.entanglements;b;){var E=31-Gt(b),D=1<<E;D&m|h[E]&m&&(h[E]|=m),b&=~D}}function Xo(h,m){var b=m&-m;return b=(b&42)!==0?1:Tc(b),(b&(h.suspendedLanes|m))!==0?0:b}function Tc(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 _s(h){return h&=-h,2<h?8<h?(h&134217727)!==0?32:268435456:8:2}function ru(){var h=F.p;return h!==0?h:(h=window.event,h===void 0?32:Dge(h.type))}function Ss(h,m){var b=F.p;try{return F.p=h,m()}finally{F.p=b}}var Zo=Math.random().toString(36).slice(2),Nr="__reactFiber $ "+Zo,Mn="__reactProps $ "+Zo,Do="__reactContainer $ "+Zo,Nl="__reactEvents $ "+Zo,jc="__reactListeners $ "+Zo,sh="__reactHandles $ "+Zo,La="__reactResources $ "
` ).replace(Zxt,"")}function lge(h,m){return m=ige(m),ige(h)===m}function kr(h,m,b,E,D,N){switch(b){case"children":typeof E=="string"?m==="body"||m==="textarea"&&E===""||Fe(h,E):(typeof E=="number"||typeof E=="bigint")&&m!=="body"&&Fe(h,""+E);break;case"className": $ s(h,"class",E);break;case"tabIndex": $ s(h,"tabindex",E);break;case"dir":case"role":case"viewBox":case"width":case"height": $ s(h,b,E);break;case"style":Ot(h,E,N);break;case"data":if(m!=="object"){ $ s(h,"data",E);break}case"src":case"href":if(E===""&&(m!=="a"||b!=="href")){h.removeAttribute(b);break}if(E==null||typeof E=="function"||typeof E=="symbol"||typeof E=="boolean"){h.removeAttribute(b);break}E=vt(""+E),h.setAttribute(b,E);break;case"action":case"formAction":if(typeof E=="function"){h.setAttribute(b,"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 N=="function"&&(b==="formAction"?(m!=="input"&&kr(h,m,"name",D.name,D,null),kr(h,m,"formEncType",D.formEncType,D,null),kr(h,m,"formMethod",D.formMethod,D,null),kr(h,m,"formTarget",D.formTarget,D,null)):(kr(h,m,"encType",D.encType,D,null),kr(h,m,"method",D.method,D,null),kr(h,m,"target",D.target,D,null)));if(E==null||typeof E=="symbol"||typeof E=="boolean"){h.removeAttribute(b);break}E=vt(""+E),h.setAttribute(b,E);break;case"onClick":E!=null&&(h.onclick=Lt);break;case"onScroll":E!=null&&Wt("scroll",h);break;case"onScrollEnd":E!=null&&Wt("scrollend",h);break;case"dangerouslySetInnerHTML":if(E!=null){if(typeof E!="object"||!("__html"in E))throw Error(o(61));if(b=E.__html,b!=null){if(D.children!=null)throw Error(o(60));h.innerHTML=b}}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}b=vt(""+E),h.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",b);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(b,""+E):h.removeAttribute(b);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(b,""):h.removeAttribute(b);break;case"capture":case"download":E===!0?h.setAttribute(b,""):E!==!1&&E!=null&&typeof E!="function"&&typeof E!="symbol"?h.setAttribute(b,E):h.removeAttribute(b);break;case"cols":case"rows":case"size":case"span":E!=null&&typeof E!="function"&&typeof E!="symbol"&&!isNaN(E)&&1<=E?h.setAttribute(b,E):h.removeAttribute(b);break;case"rowSpan":case"start":E==null||typeof E=="function"||typeof E=="symbol"||isNaN(E)?h.removeAttribute(b):h.setAttribute(b,E);break;case"popover":Wt("beforetoggle",h),Wt("toggle",h),Cs(h,"popover",E);break;case"xlinkActuate":Mo(h,"http://www.w3.org/1999/xlink","xlink:actuate",E);break;case"xlinkArcrole":Mo(h,"http://www.w3.org/1999/xlink","xlink:arcrole",E);break;case"xlinkRole":Mo(h,"http://www.w3.org/1999/xlink","xlink:role",E);break;case"xlinkShow":Mo(h,"http://www.w3.org/1999/xlink","xlink:show",E);break;case"xlinkTitle":Mo(h,"http://www.w3.org/1999/xlink","xlink:title",E);break;case"xlinkType":Mo(h,"http://www.w3.org/1999/xlink","xlink:type",E);break;case"xmlBase":Mo(h,"http://www.w3.org/XML/1998/namespace","xm
2025-12-19 10:05:34 +01:00
. ` .concat(iet, ` {
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, ` ;
2025-12-16 12:13:34 +01:00
padding - right : ` ).concat(s,"px ").concat(o, ` ;
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-12-19 10:05:34 +01:00
body [ ` ).concat(Mm, ` ] {
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 ;
2025-12-16 12:13:34 +01:00
padding - right : ` ).concat(l, ` 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
margin - left : 0 ;
margin - top : 0 ;
2025-12-16 12:13:34 +01:00
margin - right : ` ).concat(s,"px ").concat(o, ` ;
` ),n==="padding"&&"padding-right: ".concat(s,"px ").concat(o,";")].filter(Boolean).join(""), `
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-12-19 10:05:34 +01:00
. ` ).concat(b4, ` {
2025-12-16 12:13:34 +01:00
right : ` ).concat(s,"px ").concat(o, ` ;
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-12-19 10:05:34 +01:00
. ` ).concat(x4, ` {
2025-12-16 12:13:34 +01:00
margin - right : ` ).concat(s,"px ").concat(o, ` ;
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-12-19 10:05:34 +01:00
. ` ).concat(b4," .").concat(b4, ` {
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-12-19 10:05:34 +01:00
. ` ).concat(x4," .").concat(x4, ` {
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-12-19 10:05:34 +01:00
body [ ` ).concat(Mm, ` ] {
` ).concat(set,": ").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-12-19 13:16:01 +01:00
` )},hne=function(){var e=parseInt(document.body.getAttribute(Mm)||"0",10);return isFinite(e)?e:0},Ret=function(){S.useEffect(function(){return document.body.setAttribute(Mm,(hne()+1).toString()),function(){var e=hne()-1;e<=0?document.body.removeAttribute(Mm):document.body.setAttribute(Mm,e.toString())}},[])},zet=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;Ret();var i=S.useMemo(function(){return Eet(a)},[a]);return S.createElement(Cet,{styles: $ et(i,!r,a,n?"":"!important")})},Mz=!1;if(typeof window<"u")try{var k4=Object.defineProperty({},"passive",{get:function(){return Mz=!0,!0}});window.addEventListener("test",k4,k4),window.removeEventListener("test",k4,k4)}catch{Mz=!1}var Nm=Mz?{passive:!1}:!1,Tet=function(e){return e.tagName==="TEXTAREA"},fne=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!Tet(e)&&n[r]==="visible")},jet=function(e){return fne(e,"overflowY")},Aet=function(e){return fne(e,"overflowX")},mne=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=gne(e,o);if(a){var i=yne(e,o),l=i[1],s=i[2];if(l>s)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},Det=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},Met=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},gne=function(e,r){return e==="v"?jet(r):Aet(r)},yne=function(e,r){return e==="v"?Det(r):Met(r)},Net=function(e,r){return e==="h"&&r==="rtl"?-1:1},Pet=function(e,r,n,o,a){var i=Net(e,window.getComputedStyle(r).direction),l=i*o,s=n.target,c=r.contains(s),d=!1,u=l>0,p=0,f=0;do{if(!s)break;var g=yne(e,s),v=g[0],w=g[1],x=g[2],k=w-x-i*v;(v||k)&&gne(e,s)&&(p+=k,f+=v);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(u&&Math.abs(p)<1||!u&&Math.abs(f)<1)&&(d=!0),d},_4=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},vne=function(e){return[e.deltaX,e.deltaY]},bne=function(e){return e&&"current"in e?e.current:e},Bet=function(e,r){return e[0]===r[0]&&e[1]===r[1]},Iet=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-12-19 13:16:01 +01:00
` )},Oet=0,Pm=[];function Let(e){var r=S.useRef([]),n=S.useRef([0,0]),o=S.useRef(),a=S.useState(Oet++)[0],i=S.useState(pne)[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 w=aet([e.lockRef.current],(e.shards||[]).map(bne)).filter(Boolean);return w.forEach(function(x){return x.classList.add("allow-interactivity-".concat(a))}),function(){document.body.classList.remove("block-interactivity-".concat(a)),w.forEach(function(x){return x.classList.remove("allow-interactivity-".concat(a))})}}},[e.inert,e.lockRef.current,e.shards]);var s=S.useCallback(function(w,x){if("touches"in w&&w.touches.length===2||w.type==="wheel"&&w.ctrlKey)return!l.current.allowPinchZoom;var k=_4(w),C=n.current,_="deltaX"in w?w.deltaX:C[0]-k[0], $ ="deltaY"in w?w.deltaY:C[1]-k[1],R,T=w.target,A=Math.abs(_)>Math.abs( $ )?"h":"v";if("touches"in w&&A==="h"&&T.type==="range")return!1;var z=mne(A,T);if(!z)return!0;if(z?R=A:(R=A==="v"?"h":"v",z=mne(A,T)),!z)return!1;if(!o.current&&"changedTouches"in w&&(_|| $ )&&(o.current=R),!R)return!0;var j=o.current||R;return Pet(j,x,w,j==="h"?_: $ )},[]),c=S.useCallback(function(w){var x=w;if(!(!Pm.length||Pm[Pm.length-1]!==i)){var k="deltaY"in x?vne(x):_4(x),C=r.current.filter(function(R){return R.name===x.type&&(R.target===x.target||x.target===R.shadowParent)&&Bet(R.delta,k)})[0];if(C&&C.should){x.cancelable&&x.preventDefault();return}if(!C){var _=(l.current.shards||[]).map(bne).filter(Boolean).filter(function(R){return R.contains(x.target)}), $ =_.length>0?s(x,_[0]):!l.current.noIsolation; $ &&x.cancelable&&x.preventDefault()}}},[]),d=S.useCallback(function(w,x,k,C){var _={name:w,delta:x,target:k,should:C,shadowParent:Fet(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function( $ ){return $ !==_})},1)},[]),u=S.useCallback(function(w){n.current=_4(w),o.current=void 0},[]),p=S.useCallback(function(w){d(w.type,vne(w),w.target,s(w,e.lockRef.current))},[]),f=S.useCallback(function(w){d(w.type,_4(w),w.target,s(w,e.lockRef.current))},[]);S.useEffect(function(){return Pm.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,Nm),document.addEventListener("touchmove",c,Nm),document.addEventListener("touchstart",u,Nm),function(){Pm=Pm.filter(function(w){return w!==i}),document.removeEventListener("wheel",c,Nm),document.removeEventListener("touchmove",c,Nm),document.removeEventListener("touchstart",u,Nm)}},[]);var g=e.removeScrollBar,v=e.inert;return S.createElement(S.Fragment,null,v?S.createElement(i,{styles:Iet(a)}):null,g?S.createElement(zet,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function Fet(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const Vet=met(une,Let);var xne=S.forwardRef(function(e,r){return S.createElement(w4,ls({},e,{ref:r,sideCar:Vet}))});xne.classNames=w4.classNames;function Ro(e){return Object.keys(e)}function qet(e){return e.replace(/[A-Z]/g,r=> ` - $ { r . toLowerCase ( ) } ` )}function Het(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc \( (.*?) \) $ /)?.[1].split("*")[0].trim()}function S4(e){const r=Het(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 wne(e){return e==="0rem"?"0rem": ` calc ( $ { e } * var ( -- mantine - scale ) ) ` }function kne(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?wne(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?wne(i):i}}return o}return n}const Pe=kne("rem",{shouldScale:!0});
` ;let Y,Z=!0;const O=j.numbers=="binary",W=j.numbers=="octal",K=j.numbers=="decimal",Q=j.numbers=="hexadecimal";if(L&&z&&v(z.toJSON)&&(z=z.toJSON()),!p(z)){if(w(z))return z.size==0?"new Map()":(M||(j.__inline1__=!0,j.__inline2__=!1),"new Map("+A(Array.from(z),j)+")");if(x(z))return z.size==0?"new Set()":"new Set("+A(Array.from(z),j)+")";if(d(z))return z.length==0?"Buffer.from([])":"Buffer.from("+A(Array.from(z),j)+")";if(c(z))return Y=[],j.wrap=!0,q&&(j.__inline1__=!1,j.__inline2__=!0),G||I(),a(z,te=>{Z=!1,G&&(j.__inline2__=!1),Y.push((M||G?"":B)+A(te,j))}),Z?"[]":G?"["+Y.join(", ")+"]":"["+U+Y.join(","+U)+U+(M?"":F)+"]";if(f(z)||g(z)){if(L)return JSON.stringify(Number(z));let te;if(K)te=String(z);else if(Q){let re=z.toString(16);V||(re=re.toUpperCase()),te="0x"+re}else O?te="0b"+z.toString(2):W&&(te="0o"+z.toString(8));return g(z)?te+"n":te}else return g(z)?L?JSON.stringify(Number(z)):z+"n":u(z)?(Y=[],j.wrap=!0,I(),n(z,(te,re)=>{Z=!1,Y.push((M?"":B)+A(te,j)+":"+(M?"":" ")+A(re,j))}),Z?"{}":"{"+U+Y.join(","+U)+U+(M?"":F)+"}"):L?JSON.stringify(z)||"null":String(z)}const ae=j.escapeEverything?R:T;return Y=z.replace(ae,(te,re,ue,_e,ce,pe)=>{if(re){if(j.minimal)return re;const je=re.charCodeAt(0),Be=re.charCodeAt(1);if(j.es6){const Je=(je-55296)*1024+Be-56320+65536;return" \\ u{"+l(Je,V)+"}"}return i(l(je,V))+i(l(Be,V))}if(ue)return i(l(ue.charCodeAt(0),V));if(te==" \0 "&&!L&&!_.test(pe.charAt(ce+1)))return" \\ 0";if(_e)return _e==H||j.escapeEverything?" \\ "+_e:_e;if(C.test(te))return k[te];if(j.minimal&&! $ .test(te))return te;const xe=l(te.charCodeAt(0),V);return L||xe.length>2?i(xe):" \\ x"+("00"+xe).slice(-2)}),H==" ` "&&(Y=Y.replace(/\$\{/g," \ \ $ { ")),j.isScriptContext&&(Y=Y.replace(/<\/(script|style)/gi," < \ \ / $1 ").replace(/<!--/g,L?" \ \u003C ! -- ":" \ \ x3C ! -- ")),j.wrap&&(Y=H+Y+H),Y};return A.version=" 3.0 . 2 ",$j=A,$j}lst();function sst({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 cst(){const e=Up(),r=(e.options.getScrollRestorationKey||fle)(e.latestLocation),n=r!==fle(e.latestLocation)?r:null;return!e.isScrollRestoring||!e.isServer?null:y.jsx(sst,{children: ` ( $ { Wlt . toString ( ) } ) ( $ { JSON . stringify ( ple ) } , $ { JSON . stringify ( n ) } , undefined , true ) ` ,log:!1})}const dst=S.memo(function({matchId:e}){var r,n;const o=Up(),a=El({select:x=>{var k;return(k=x.matches.find(C=>C.id===e))==null?void 0:k.routeId}});Sk(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,d=i.options.onCatch??o.options.defaultOnCatch,u=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:Cj,f=c?gle:Cj,g=u?ast:Cj,v=El({select:x=>x.loadedAt}),w=El({select:x=>{var k;const C=x.matches.findIndex(_=>_.id===e);return(k=x.matches[C-1])==null?void 0:k.routeId}});return y.jsxs(y.Fragment,{children:[y.jsx(Ele.Provider,{value:e,children:y.jsx(p,{fallback:s,children:y.jsx(f,{getResetKey:()=>v,errorComponent:c||kj,onCatch:(x,k)=>{if( $ k(x))throw x;d?.(x,k)},children:y.jsx(g,{fallback:x=>{if(!u||x.routeId&&x.routeId!==a||!x.routeId&&!i.isRoot)throw x;return S.createElement(u,x)},children:y.jsx(pst,{matchId:e})})})})}),w===mle&&o.options.scrollRestoration?y.jsxs(y.Fragment,{children:[y.jsx(ust,{}),y.jsx(cst,{})]}):null]})});function ust(){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",...Ylt(r.state)}),n.current=r.state.resolvedLocation)}},(e=r.state.resolvedLocation)==null?void 0:e.state.key)}const pst=S.memo(function({matchId:e}){var r,n,o;const a=Up(),{match:i,key:l,routeId:s}=El({select:p=>{const f=p.matches.findIndex(k=>k.id===e),g=p.matches[f],v=g.routeId,w=a.routesById[v].options.remountDeps??a.options.defaultRemountDeps,x=w?.({routeId:v,loaderDeps:g.loaderDeps,params:g._strictParams,search:g._strictSearch});return{key:x?JSON.stringify(x):void 0,routeId:v,match:qlt(g,["id","status","error"])}},structuralSharing:!0}),c=a.routesById[s],d=S.useMemo(()=>{const p=c.options.component??a.options.defaultComponent;return p?y.jsx(p,{},l):y.jsx(hst,{})},[l,c.options.component,a.options.defaultComponent]),u=(c.options.errorComponent??a.options.defaultErrorComponent)||kj;if(i.status==="notFound")return Sk( $ k(i.error)),Cle(a,c,i.error);if(i.status==="redirected")throw Sk(Glt(i.error)),(r=a.getMatch(i.id))==null?void 0:r.loadPromise;if(i.status==="error"){if(a.isServer)return y.jsx(u,{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=Hlt();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 d}),hst=S.memo(function(){const e=Up(),r=S.useContext(Ele),n=El({select:c=>{var d;return(d=c.matches.find(u=>u.id===r))==null?void 0:d.routeId}}),o=e.routesById[n],a=El({select:c=>{const d=c.matches.find(u=>u.id===r);return Sk(d),d.globalNotFound}}),i=El({select:c=>{var d;const u=c.matches,p=u.findIndex(f=>f.id===r);return(d=u[p+1])==null?void 0:d.id}});if(a)return Cle(e,o,void 0);if(!i)return null;const l=y.jsx(dst,{matchId:i}),s=e.options.defaultPendingComponent?y.jsx(e.options.defaultPendingComponent,{}):null;return r===mle?y.jsx(S.Suspense,{fallback:s,children:l}):l}),fst=typeof window<"u"?S.useLayoutEffect:S.useEffect;function mst(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-12-19 13:16:01 +01:00
` )),d=c.reduce((u,p)=>u.concat(...p),[]);return[c,d]}return[[],[]]},[e]);return S.useEffect(()=>{const c=r?.target??_ce,d=r?.actInsideInputWithModifier??!0;if(e!==null){const u=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!d)&&Ise(g))return!1;const v=Ece(g.code,s);if(i.current.add(g[v]),Sce(l,i.current,!1)){const w=g.composedPath?.()?.[0]||g.target,x=w?.nodeName==="BUTTON"||w?.nodeName==="A";r.preventDefault!==!1&&(a.current||!x)&&g.preventDefault(),o(!0)}},p=g=>{const v=Ece(g.code,s);Sce(l,i.current,!0)?(o(!1),i.current.clear()):i.current.delete(g[v]),g.key==="Meta"&&i.current.clear(),a.current=!1},f=()=>{i.current.clear(),o(!1)};return c?.addEventListener("keydown",u),c?.addEventListener("keyup",p),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",u),c?.removeEventListener("keyup",p),window.removeEventListener("blur",f),window.removeEventListener("contextmenu",f)}}},[e,o]),n}function Sce(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function Ece(e,r){return r.includes(e)?"code":"key"}const kht=()=>{const e=qr();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=Xj(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(),d={x:r.x-s,y:r.y-c},u=n.snapGrid??a,p=n.snapToGrid??i;return cv(d,o,p,u)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:a,y:i}=o.getBoundingClientRect(),l=e5(r,n);return{x:l.x+a,y:l.y+i}}}),[])};function Cce(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)_ht(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 _ht(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={...e.dimensions},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 Sht(e,r){return Cce(e,r)}function Eht(e,r){return Cce(e,r)}function Jp(e,r){return{id:e,type:"select",selected:r}}function pg(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(Jp(i.id,l)))}return o}function $ ce({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,type:"replace"}),s===void 0&&n.push({item:i,type:"
M$ { z . x } , $ { z . y } h$ { z . width } v$ { z . height } h$ { - z . width } z ` ,fillRule:"evenodd",pointerEvents:"none"})]})})}fde.displayName="MiniMap",S.memo(fde);const fmt=e=>r=>e? ` $ { Math . max ( 1 / r . transform [ 2 ] , 1 ) } ` :void 0,mmt={[ug.Line]:"right",[ug.Handle]:"bottom-right"};function gmt({nodeId:e,position:r,variant:n=ug.Handle,className:o,style:a=void 0,children:i,color:l,minWidth:s=10,minHeight:c=10,maxWidth:d=Number.MAX_VALUE,maxHeight:u=Number.MAX_VALUE,keepAspectRatio:p=!1,resizeDirection:f,autoScale:g=!0,shouldResize:v,onResizeStart:w,onResize:x,onResizeEnd:k}){const C=Pce(),_=typeof e=="string"?e:C, $ =qr(),R=S.useRef(null),T=n===ug.Handle,A=Jt(S.useCallback(fmt(T&&g),[T,g]),Vr),z=S.useRef(null),j=r??mmt[n];S.useEffect(()=>{if(!(!R.current||!_))return z.current||(z.current=Kpt({domNode:R.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:P,transform:L,snapGrid:H,snapToGrid:M,nodeOrigin:V,domNode:B}= $ .getState();return{nodeLookup:P,transform:L,snapGrid:H,snapToGrid:M,nodeOrigin:V,paneDomNode:B}},onChange:(P,L)=>{const{triggerNodeChanges:H,nodeLookup:M,parentLookup:V,nodeOrigin:B}= $ .getState(),F=[],q={x:P.x,y:P.y},G=M.get(_);if(G&&G.expandParent&&G.parentId){const U=G.origin??B,Y=P.width??G.measured.width??0,Z=P.height??G.measured.height??0,O={id:G.id,parentId:G.parentId,rect:{width:Y,height:Z,...Nse({x:P.x??G.position.x,y:P.y??G.position.y},{width:Y,height:Z},G.parentId,M,U)}},W=oA([O],M,V,B);F.push(...W),q.x=P.x?Math.max(U[0]*Y,P.x):void 0,q.y=P.y?Math.max(U[1]*Z,P.y):void 0}if(q.x!==void 0&&q.y!==void 0){const U={id:_,type:"position",position:{...q}};F.push(U)}if(P.width!==void 0&&P.height!==void 0){const U={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:P.width,height:P.height}};F.push(U)}for(const U of L){const Y={...U,type:"position"};F.push(Y)}H(F)},onEnd:({width:P,height:L})=>{const H={id:_,type:"dimensions",resizing:!1,dimensions:{width:P,height:L}}; $ .getState().triggerNodeChanges([H])}})),z.current.update({controlPosition:j,boundaries:{minWidth:s,minHeight:c,maxWidth:d,maxHeight:u},keepAspectRatio:p,resizeDirection:f,onResizeStart:w,onResize:x,onResizeEnd:k,shouldResize:v}),()=>{z.current?.destroy()}},[j,s,c,d,u,p,w,x,k,v]);const I=j.split("-");return y.jsx("div",{className:jn(["react-flow__resize-control","nodrag",...I,n,o]),ref:R,style:{...a,scale:A,...l&&{[T?"backgroundColor":"borderColor"]:l}},children:i})}S.memo(gmt);const{getOwnPropertyNames:ymt,getOwnPropertySymbols:vmt}=Object,{hasOwnProperty:bmt}=Object.prototype;function fA(e,r){return function(n,o,a){return e(n,o,a)&&r(n,o,a)}}function p5(e){return function(r,n,o){if(!r||!n||typeof r!="object"||typeof n!="object")return e(r,n,o);const{cache:a}=o,i=a.get(r),l=a.get(n);if(i&&l)return i===n&&l===r;a.set(r,n),a.set(n,r);const s=e(r,n,o);return a.delete(r),a.delete(n),s}}function xmt(e){return e?.[Symbol.toStringTag]}function mde(e){return ymt(e).concat(vmt(e))}const wmt=Object.hasOwn||((e,r)=>bmt.call(e,r));function eh(e,r){return e===r||!e&&!r&&e!==e&&r!==r}const kmt="__v",_mt="__o",Smt="_owner",{getOwnPropertyDescriptor:gde,keys:yde}=Object;function Emt(e,r){return e.byteLength===r.byteLength&&h5(new Uint8Array(e),new Uint8Array(r))}function Cmt(e,r,n){let 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 $ mt(e,r){return e.byteLength===r.byteLength&&h5(new Uint8Array(e.buffer,e.byteOffset,e.byteLength),new Uint8Array(r.buffer,r.byteOffset,r.byteLength))}function Rmt(e,r){return eh(e.getTime(),r.getTime())}function zmt(e,r){return e.name===r.name&&e.message===r.message&&e.cause===r.cause&&e.stack===r.stack}function Tmt(e,r){return e===r}function vde(e,r,n){const o=e.size;if(o!==r.size)return!1;if(!o)return!0;const a=new Array(o),i=e.entries();let l,s,c=0;for(;(l=i.next())&&!l.done;){const d=r.entries();let u=!1,p=0;for(;(s=d.next())&&!s.done;){if(a[p]){p++;continue}const 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)){u=a[p]=!0;break}p++}if(!u)return!1;c++}return!0}const jmt=eh;function Amt(e,r,n){const o=yde
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-12-19 10:05:34 +01:00
` ))}}const Lyt={major:4,minor:0,patch:0},an=Te(" $ ZodType",(e,r)=>{var n;e??(e={}),e._zod.def=r,e._zod.bag=e._zod.bag||{},e._zod.version=Lyt;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=Cv(i),d;for(const u of l){if(u._zod.def.when){if(!u._zod.def.when(i))continue}else if(c)continue;const p=i.issues.length,f=u._zod.check(i);if(f instanceof Promise&&s?.async===!1)throw new _v;if(d||f instanceof Promise)d=(d??Promise.resolve()).then(async()=>{await f,i.issues.length!==p&&(c||(c=Cv(i,p)))});else{if(i.issues.length===p)continue;c||(c=Cv(i,p))}}return d?d.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 _v;return s.then(c=>a(c,o,l))}return a(s,o,l)}}e["~standard"]={validate:a=>{try{const i=ryt(e,a);return i.success?{value:i.data}:{issues:i.error?.issues}}catch{return nyt(e,a).then(i=>i.success?{value:i.data}:{issues:i.error?.issues})}},vendor:"zod",version:1}}),M5=Te(" $ ZodString",(e,r)=>{an.init(e,r),e._zod.pattern=[...e?._zod.bag?.patterns??[]].pop()??Eyt(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}}),Ur=Te(" $ ZodStringFormat",(e,r)=>{D5.init(e,r),M5.init(e,r)}),Fyt=Te(" $ ZodGUID",(e,r)=>{r.pattern??(r.pattern=uyt),Ur.init(e,r)}),Vyt=Te(" $ 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=Tpe(n))}else r.pattern??(r.pattern=Tpe());Ur.init(e,r)}),qyt=Te(" $ ZodEmail",(e,r)=>{r.pattern??(r.pattern=pyt),Ur.init(e,r)}),Hyt=Te(" $ ZodURL",(e,r)=>{Ur.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:xyt.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})}}}),Uyt=Te(" $ ZodEmoji",(e,r)=>{r.pattern??(r.pattern=fyt()),Ur.init(e,r)}),Wyt=Te(" $ ZodNanoID",(e,r)=>{r.pattern??(r.pattern=cyt),Ur.init(e,r)}),Gyt=Te(" $ ZodCUID",(e,r)=>{r.pattern??(r.pattern=oyt),Ur.init(e,r)}),Yyt=Te(" $ ZodCUID2",(e,r)=>{r.pattern??(r.pattern=ayt),Ur.init(e,r)}),Xyt=Te(" $ ZodULID",(e,r)=>{r.pattern??(r.pattern=iyt),Ur.init(e,r)}),Zyt=Te(" $ ZodXID",(e,r)=>{r.pattern??(r.pattern=lyt),Ur.init(e,r)}),Kyt=Te(" $ ZodKSUID",(e,r)=>{r.pattern??(r.pattern=syt),Ur.init(e,r)}),Qyt=Te(" $ ZodISODateTime",(e,r)=>{r.pattern??(r.pattern=Syt(r)),Ur.init(e,r)}),Jyt=Te(" $ ZodISODate",(e,r)=>{r.pattern??(r.pattern=kyt),Ur.init(e,r)}),e0t=Te(" $ ZodISOTime",(e,r)=>{r.pattern??(r.pattern=_yt(r)),Ur.init(e,r)}),t0t=Te(" $ ZodISODuration",(e,r)=>{r.pattern??(r.pattern=dyt),Ur.init(e,r)}),r0t=Te(" $ ZodIPv4",(e,r)=>{r.pattern??(r.pattern=myt),Ur.init(e,r),e._zod.onattach.push(n=>{const o=n._zod.bag;o.format="ipv4"})}),n0t=Te(" $ ZodIPv6",(e,r)=>{r.pattern??(r.pattern=gyt),Ur.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})}}}),o0t=Te("$ZodCIDRv4",(e,r)=>{r.pattern??(r.pattern=yyt),Ur.init(e,r)}),a0t=Te("$ZodCIDRv6",(e,r)=>{r.pattern??(r.pattern=vyt),Ur.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 ;
}
2025-12-16 12:13:34 +01:00
` )}else{const C=v[k];p.write( ` const $ { C } = $ { g ( k ) } ; ` ),p.write( `
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 ) payload . issues = payload . issues . concat ( $ { C } . issues . map ( iss => ( {
... iss ,
2025-12-19 10:05:34 +01:00
path : iss . path ? [ $ { Sv ( k ) } , ... iss . path ] : [ $ { Sv ( k ) } ]
2025-12-19 13:16:01 +01:00
} ) ) ) ; ` ),p.write( ` newResult [ $ { Sv ( k ) } ] = $ { C } . value ` )}p.write("payload.value = newResult;"),p.write("return payload;");const x=p.compile();return(k,C)=>x(u,k,C)};let a;const i=AD,l=!wpe.jitless,s=l&&H1t.value,c=r.catchall;let d;e._zod.parse=(u,p)=>{d??(d=n.value);const f=u.value;if(!i(f))return u.issues.push({expected:"object",code:"invalid_type",input:f,inst:e}),u;const g=[];if(l&&s&&p?.async===!1&&p.jitless!==!0)a||(a=o(r.shape)),u=a(u,p);else{u.value={};const C=d.shape;for(const _ of d.keys){const $ =C[_],R= $ ._zod.run({value:f[_],issues:[]},p),T= $ ._zod.optin==="optional"&& $ ._zod.optout==="optional";R instanceof Promise?g.push(R.then(A=>T?Bpe(A,u,_,f):N5(A,u,_))):T?Bpe(R,u,_,f):N5(R,u,_)}}if(!c)return g.length?Promise.all(g).then(()=>u):u;const v=[],w=d.keySet,x=c._zod,k=x.def.type;for(const C of Object.keys(f)){if(w.has(C))continue;if(k==="never"){v.push(C);continue}const _=x.run({value:f[C],issues:[]},p);_ instanceof Promise?g.push(_.then( $ =>N5( $ ,u,C))):N5(_,u,C)}return v.length&&u.issues.push({code:"unrecognized_keys",keys:v,input:f,inst:e}),g.length?Promise.all(g).then(()=>u):u}});function Ipe(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=>ih(i,o,oh())))}),r}const g0t=Te(" $ ZodUnion",(e,r)=>{an.init(e,r),Hr(e._zod,"optin",()=>r.options.some(n=>n._zod.optin==="optional")?"optional":void 0),Hr(e._zod,"optout",()=>r.options.some(n=>n._zod.optout==="optional")?"optional":void 0),Hr(e._zod,"values",()=>{if(r.options.every(n=>n._zod.values))return new Set(r.options.flatMap(n=>Array.from(n._zod.values)))}),Hr(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 => TD ( 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=>Ipe(l,n,e,o)):Ipe(i,n,e,o)}}),y0t=Te(" $ 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])=>Ope(n,s,c)):Ope(n,i,l)}});function PD(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(DD(e)&&DD(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=PD(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=PD(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 Ope(e,r,n){if(r.issues.length&&e.issues.push(...r.issues),n.issues.length&&e.issues.push(...n.issues),Cv(e))return e;const o=PD(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 v0t=Te(" $ ZodEnum",(e,r)=>{an.init(e,r);const n=V1t(r.entries);e._zod.values=new Set(n),e._zod.pattern=new RegExp( ` ^ ( $ { n . filter ( o => U1t . has ( typeof o ) ) . map ( o => typeof o == "string" ? Ev ( 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}}),b0t=Te(" $ 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" ? Ev ( 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}}),Lpe=Te(" $ 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-12-19 10:05:34 +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=Ebt.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", $ pe(r.error)),{viewId:"index"})}render(){const r=this.getProps();this.updateHostCss(),this.root??=net.createRoot(this.shadow),this.root.render(y.jsx(QJe,{...r}))}attributeChangedCallback(r){this.root&&this.render()}}return customElements.define(oet.View,lhe),Y6.LikeC4View=lhe,Object.defineProperty(Y6,Symbol.toStringTag,{value:"Module"}),Y6})({});
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 */