2025-11-16 23:10:11 +01:00
var LikeC4Views = ( function ( u6 ) { "use strict" ; /* prettier-ignore-start */
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
/* eslint-disable */
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* This file was generated
* DO NOT EDIT MANUALLY !
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
2025-11-16 23:10:11 +01:00
function S1e ( 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 Vz ( e ) { return e && e . _ _esModule && Object . prototype . hasOwnProperty . call ( e , "default" ) ? e . default : e } var d6 = { exports : { } } , p1 = { } ; var qz ; function C1e ( ) { if ( qz ) return p1 ; qz = 1 ; var e = Symbol . for ( "react.transitional.element" ) , r = Symbol . for ( "react.fragment" ) ; function n ( o , a , i ) { var s = null ; if ( i !== void 0 && ( s = "" + i ) , a . key !== void 0 && ( s = "" + a . key ) , "key" in a ) { i = { } ; for ( var l in a ) l !== "key" && ( i [ l ] = a [ l ] ) } else i = a ; return a = i . ref , { $$typeof : e , type : o , key : s , ref : a !== void 0 ? a : null , props : i } } return p1 . Fragment = r , p1 . jsx = n , p1 . jsxs = n , p1 } var Uz ; function T1e ( ) { return Uz || ( Uz = 1 , d6 . exports = C1e ( ) ) , d6 . exports } var y = T1e ( ) , p6 = { exports : { } } , Ot = { } ; var Wz ; function A1e ( ) { if ( Wz ) return Ot ; Wz = 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" ) , s = Symbol . for ( "react.context" ) , l = Symbol . for ( "react.forward_ref" ) , c = Symbol . for ( "react.suspense" ) , u = Symbol . for ( "react.memo" ) , d = Symbol . for ( "react.lazy" ) , h = Symbol . for ( "react.activity" ) , f = Symbol . iterator ; function g ( G ) { return G === null || typeof G != "object" ? null : ( G = f && G [ f ] || G [ "@@iterator" ] , typeof G == "function" ? G : null ) } var b = { isMounted : function ( ) { return ! 1 } , enqueueForceUpdate : function ( ) { } , enqueueReplaceState : function ( ) { } , enqueueSetState : function ( ) { } } , x = Object . assign , w = { } ; function k ( G , K , j ) { this . props = G , this . context = K , this . refs = w , this . updater = j || b } k . prototype . isReactComponent = { } , k . prototype . setState = function ( G , K ) { if ( typeof G != "object" && typeof G != "function" && G != 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 , G , K , "setState" ) } , k . prototype . forceUpdate = function ( G ) { this . updater . enqueueForceUpdate ( this , G , "forceUpdate" ) } ; function C ( ) { } C . prototype = k . prototype ; function _ ( G , K , j ) { this . props = G , this . context = K , this . refs = w , this . updater = j || b } var T = _ . prototype = new C ; T . constructor = _ , x ( T , k . prototype ) , T . isPureReactComponent = ! 0 ; var A = Array . isArray ; function R ( ) { } var D = { H : null , A : null , T : null , S : null } , N = Object . prototype . hasOwnProperty ; function M ( G , K , j ) { var Y = j . ref ; return { $$typeof : e , type : G , key : K , ref : Y !== void 0 ? Y : null , props : j } } function O ( G , K ) { return M ( G . type , K , G . props ) } function F ( G ) { return typeof G == "object" && G !== null && G . $$typeof === e } function L ( G ) { var K = { "=" : "=0" , ":" : "=2" } ; return "$" + G . replace ( /[=:]/g , function ( j ) { return K [ j ] } ) } var U = /\/+/g ; function P ( G , K ) { return typeof G == "object" && G !== null && G . key != null ? L ( "" + G . key ) : K . toString ( 36 ) } function V ( G ) { switch ( G . status ) { case "fulfilled" : return G . value ; case "rejected" : throw G . reason ; default : switch ( typeof G . status == "string" ? G . then ( R , R ) : ( G . status = "pending" , G . then ( function ( K ) { G . status === "pending" && ( G . status = "fulfilled" , G . value = K ) } , function ( K ) { G . status === "pending" && ( G . status = "rejected" , G . reason = K ) } ) ) , G . status ) { case "fulfilled" : return G . value ; case "rejected" : throw G . reason } } throw G } function I ( G , K , j , Y , Q ) { var J = typeof G ; ( J === "undefined" || J === "boolean" ) && ( G = null ) ; var ie = ! 1 ; if ( G === null ) ie = ! 0 ; else switch ( J ) { case "bigint" : case "string" : case "number" : ie = ! 0 ; break ; case "object" : switch ( G . $$typeof ) { case e : case r : ie = ! 0 ; break ; case d : return ie = G . _init , I ( ie ( G . _payload ) , K , j , Y , Q ) } } if ( ie ) return Q = Q ( G ) , ie = Y === "" ? "." + P ( G , 0 ) : Y , A ( Q ) ? ( j = "" , ie != null && ( j = ie . replace ( U , "$&/" ) + "/" ) , I ( Q , K , j , "" , function ( ge ) { return ge } ) ) : Q != null && ( F ( Q ) && ( Q = O ( Q , j + ( Q . key == null || G && G . key === Q . key ? "" : ( "" + Q . key ) . replace ( U , "$&/" ) + "/" ) + ie ) ) , K . push ( Q ) ) , 1 ; ie = 0 ; var ne = Y === "" ? "." : Y + ":" ; if ( A ( G ) ) for ( var re = 0 ; re < G . length ; re ++ ) Y = G [ re ] , J = ne + P ( Y , re ) , ie += I ( Y , K , j , J , Q ) ; else if ( re = g ( G ) , typeof re == "function" ) for ( G = re . call ( G ) , re = 0 ; ! ( Y = G . next ( ) ) . done ; ) Y = Y . value , J = ne + P ( Y , re ++ ) , ie += I ( Y , K , j , J , Q ) ; else if ( J === "object" ) { if ( typeof G . then == "function" ) return I ( V ( G ) , K , j , Y , Q ) ; throw K = String ( G ) , Error ( " Objects are not valid as a React chi
` ,r);return o===-1?n:n===-1||n+1===o?o:n<o?n:o}const Fd={html:"http://www.w3.org/1999/xhtml",mathml:"http://www.w3.org/1998/Math/MathML",svg:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"}, $ O={}.hasOwnProperty,mbe=Object.prototype;function gbe(e,r){const n=r||{};return e8({file:n.file||void 0,location:!1,schema:n.space==="svg"?_1:lx,verbose:n.verbose||!1},e)}function e8(e,r){let n;switch(r.nodeName){case"#comment":{const o=r;return n={type:"comment",value:o.data},cx(e,o,n),n}case"#document":case"#document-fragment":{const o=r,a="mode"in o?o.mode==="quirks"||o.mode==="limited-quirks":!1;if(n={type:"root",children:MO(e,r.childNodes),data:{quirksMode:a}},e.file&&e.location){const i=String(e.file),s=fbe(i),l=s.toPoint(0),c=s.toPoint(i.length);n.position={start:l,end:c}}return n}case"#documentType":{const o=r;return n={type:"doctype"},cx(e,o,n),n}case"#text":{const o=r;return n={type:"text",value:o.value},cx(e,o,n),n}default:return n=ybe(e,r),n}}function MO(e,r){let n=-1;const o=[];for(;++n<r.length;){const a=e8(e,r[n]);o.push(a)}return o}function ybe(e,r){const n=e.schema;e.schema=r.namespaceURI===Fd.svg?_1:lx;let o=-1;const a={};for(;++o<r.attrs.length;){const l=r.attrs[o],c=(l.prefix?l.prefix+":":"")+l.name; $ O.call(mbe,c)||(a[c]=l.value)}const s=(e.schema.space==="svg"?hbe:pbe)(r.tagName,a,MO(e,r.childNodes));if(cx(e,r,s),s.tagName==="template"){const l=r,c=l.sourceCodeLocation,u=c&&c.startTag&&cf(c.startTag),d=c&&c.endTag&&cf(c.endTag),h=e8(e,l.content);u&&d&&e.file&&(h.position={start:u.end,end:d.start}),s.content=h}return e.schema=n,s}function cx(e,r,n){if("sourceCodeLocation"in r&&r.sourceCodeLocation&&e.file){const o=bbe(e,n,r.sourceCodeLocation);o&&(e.location=!0,n.position=o)}}function bbe(e,r,n){const o=cf(n);if(r.type==="element"){const a=r.children[r.children.length-1];if(o&&!n.endTag&&a&&a.position&&a.position.end&&(o.end=Object.assign({},a.position.end)),e.verbose){const i={};let s;if(n.attrs)for(s in n.attrs) $ O.call(n.attrs,s)&&(i[Q6(e.schema,s).property]=cf(n.attrs[s]));n.startTag;const l=cf(n.startTag),c=n.endTag?cf(n.endTag):void 0,u={opening:l};c&&(u.closing=c),u.properties=i,r.data={position:u}}}return o}function cf(e){const r=PO({line:e.startLine,column:e.startCol,offset:e.startOffset}),n=PO({line:e.endLine,column:e.endCol,offset:e.endOffset});return r||n?{start:r,end:n}:void 0}function PO(e){return e.line&&e.column?e:void 0}class E1{constructor(r,n,o){this.property=r,this.normal=n,o&&(this.space=o)}}E1.prototype.property={},E1.prototype.normal={},E1.prototype.space=null;function zO(e,r){const n={},o={};let a=-1;for(;++a<e.length;)Object.assign(n,e[a].property),Object.assign(o,e[a].normal);return new E1(n,o,r)}function t8(e){return e.toLowerCase()}class ci{constructor(r,n){this.property=r,this.attribute=n}}ci.prototype.space=null,ci.prototype.boolean=!1,ci.prototype.booleanish=!1,ci.prototype.overloadedBoolean=!1,ci.prototype.number=!1,ci.prototype.commaSeparated=!1,ci.prototype.spaceSeparated=!1,ci.prototype.commaOrSpaceSeparated=!1,ci.prototype.mustUseProperty=!1,ci.prototype.defined=!1;let vbe=0;const Vt=Hd(),Mn=Hd(),IO=Hd(),We=Hd(),Lr=Hd(),uf=Hd(),Na=Hd();function Hd(){return 2**++vbe}const r8={__proto__:null,boolean:Vt,booleanish:Mn,commaOrSpaceSeparated:Na,commaSeparated:uf,number:We,overloadedBoolean:IO,spaceSeparated:Lr},n8=Object.keys(r8);class o8 extends ci{constructor(r,n,o,a){let i=-1;if(super(r,n),OO(this,"space",a),typeof o=="number")for(;++i<n8.length;){const s=n8[i];OO(this,n8[i],(o&r8[s])===r8[s])}}}o8.prototype.defined=!0;function OO(e,r,n){n&&(e[r]=n)}const xbe={}.hasOwnProperty;function df(e){const r={},n={};let o;for(o in e.properties)if(xbe.call(e.properties,o)){const a=e.properties[o],i=new o8(o,e.transform(e.attributes||{},o),a,e.space);e.mustUseProperty&&e.mustUseProperty.includes(o)&&(i.mustUseProperty=!0),r[o]=i,n[t8(o)]=o,n[t8(i.attribute)]=o}return new E1(r,n,e.space)}const jO=df({space:"xlink",transform(e,r){return"xlink:"+r.slice(5).toLowerCase()},properties:{xLinkActuate:nu
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
\ f \ r & / = > ` . s p l i t ( " " ) , `
\ f \ r "&'/=>\``.split(" " ) ] , [ ` \0
\ f \ r "&'/<=>`.split(" " ) , ` \0
\ f \ r "&'/<=>\``.split(" " ) ] ] , unquoted : [ [ `
\ f \ r & > ` .split(""), ` \ 0
\ f \ r "&'<=>\``.split(" " ) ] , [ ` \0
\ f \ r "&'<=>\``.split(" " ) , ` \0
2025-11-16 23:10:11 +01:00
\ f \ r "&'<=>\``.split(" ")]],single:[[" & '".split(""),"\"&' ` ".split("")],[" \0 &'".split("")," \0 \" &' ` ".split(" ")]],double:[['" & '.split(""),"\"&' ` ".split("")],[' \0 "&'.split("")," \0 \" &' ` ".split(" ")]]};function M2e(e,r,n,o){const a=o.schema,i=a.space===" svg "?!1:o.settings.omitOptionalTags;let s=a.space===" svg "?o.settings.closeEmptyElements:o.settings.voids.includes(e.tagName.toLowerCase());const l=[];let c;a.space===" html "&&e.tagName===" svg "&&(o.schema=_1);const u=P2e(o,e.properties),d=o.all(a.space===" html "&&e.tagName===" template "?e.content:e);return o.schema=a,d&&(s=!1),(u||!i||!T2e(e,r,n))&&(l.push(" < ",e.tagName,u?" "+u:" "),s&&(a.space===" svg "||o.settings.closeSelfClosing)&&(c=u.charAt(u.length-1),(!o.settings.tightSelfClosing||c===" / "||c&&c!=='" '&&c!=="' ")&&l.push(" "),l.push(" / ")),l.push(" > ")),l.push(d),!s&&(!i||!_8(e,r,n))&&l.push(" < /"+e.tagName+">"),l.join("")}function P2e(e,r){const n=[];let o=-1,a;if(r){for(a in r)if(r[a]!==null&&r[a]!==void 0){const i=z2e(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 z2e(e,r,n){const o=Q6(e.schema,r),a=e.settings.allowParseErrors&&e.schema.space==="html"?0:1,i=e.settings.allowDangerousCharacters?0:1;let s=e.quote,l;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=gf(o.attribute,Object.assign({},e.settings.characterReferences,{subset:Ex.name[a][i]}));return n===!0||(n=Array.isArray(n)?(o.commaSeparated?SO:AO)(n,{padLeft:!e.settings.tightCommaSeparatedLists}):String(n),e.settings.collapseEmptyAttributes&&!n)?c:(e.settings.preferUnquoted&&(l=gf(n,Object.assign({},e.settings.characterReferences,{attribute:!0,subset:Ex.unquoted[a][i]}))),l!==n&&(e.settings.quoteSmart&&_x(n,s)>_x(n,e.alternative)&&(s=e.alternative),l=s+gf(n,Object.assign({},e.settings.characterReferences,{subset:(s==="'"?Ex.single:Ex.double)[a][i],attribute:!0}))+s),c+(l&&"="+l))}const I2e=["<","&"];function iL(e,r,n,o){return n&&n.type==="element"&&(n.tagName==="script"||n.tagName==="style")?e.value:gf(e.value,Object.assign({},o.settings.characterReferences,{subset:I2e}))}function O2e(e,r,n,o){return o.settings.allowDangerousHtml?e.value:iL(e,r,n,o)}function j2e(e,r,n,o){return o.all(e)}const L2e=a8("type",{invalid:B2e,unknown:F2e,handlers:{comment:u2e,doctype:d2e,element:M2e,raw:O2e,root:j2e,text:iL}});function B2e(e){throw new Error("Expected node, not `"+e+"`")}function F2e(e){const r=e;throw new Error("Cannot compile unknown node `"+r.type+"`")}const H2e={},V2e={},q2e=[];function U2e(e,r){const n=r||H2e,o=n.quote||'"',a=o==='"'?"'":'"';if(o!=='"'&&o!=="'")throw new Error("Invalid quote `"+o+"`, expected `'` or `\"`");return{one:W2e,all:Y2e,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||GO,characterReferences:n.characterReferences||V2e,closeSelfClosing:n.closeSelfClosing||!1,closeEmptyElements:n.closeEmptyElements||!1},schema:n.space==="svg"?_1:lx,quote:o,alternative:a}.one(Array.isArray(e)?{type:"root",children:e}:e,void 0,void 0)}function W2e(e,r,n){return L2e(e,r,n,this)}function Y2e(e){const r=[],n=e&&e.children||q2e;let o=-1;for(;++o<n.length;)r[o]=this.one(n[o],o,e);return r.join("")}function G2e(e){const r=this,n={...r.data("settings"),...e};r.compiler=o;function o(a){return U2e(a,n)}}const Go=mu(/ [ A - Za - z ] / ) , Po = mu ( /[\dA-Za-z]/ ) , X2e = mu ( /[#-'*+\--9=?A-Z^-~]/ ) ; function Sx ( e ) { return e !== null && ( e < 32 || e === 127 ) } const S8 = mu
` :" ")+i.indentLines(i.containerFlow(o,l.current()),r?cL:Cwe))),u(),c}}function Cwe(e,r,n){return r===0?e:cL(e,r,n)}function cL(e,r,n){return(n?"":" ")+e}const Twe=["autolink","destinationLiteral","destinationRaw","reference","titleQuote","titleApostrophe"];uL.peek= $ we;function Awe(){return{canContainEols:["delete"],enter:{strikethrough:Nwe},exit:{strikethrough:Dwe}}}function Rwe(){return{unsafe:[{character:"~",inConstruct:"phrasing",notInConstruct:Twe}],handlers:{delete:uL}}}function Nwe(e){this.enter({type:"delete",children:[]},e)}function Dwe(e){this.exit(e)}function uL(e,r,n,o){const a=n.createTracker(o),i=n.enter("strikethrough");let s=a.move("~~");return s+=n.containerPhrasing(e,{...a.current(),before:s,after:"~"}),s+=a.move("~~"),i(),s}function $ we(){return"~"}function Mwe(e){return e.length}function Pwe(e,r){const n=r||{},o=(n.align||[]).concat(),a=n.stringLength||Mwe,i=[],s=[],l=[],c=[];let u=0,d=-1;for(;++d<e.length;){const x=[],w=[];let k=-1;for(e[d].length>u&&(u=e[d].length);++k<e[d].length;){const C=zwe(e[d][k]);if(n.alignDelimiters!==!1){const _=a(C);w[k]=_,(c[k]===void 0||_>c[k])&&(c[k]=_)}x.push(C)}s[d]=x,l[d]=w}let h=-1;if(typeof o=="object"&&"length"in o)for(;++h<u;)i[h]=dL(o[h]);else{const x=dL(o);for(;++h<u;)i[h]=x}h=-1;const f=[],g=[];for(;++h<u;){const x=i[h];let w="",k="";x===99?(w=":",k=":"):x===108?w=":":x===114&&(k=":");let C=n.alignDelimiters===!1?1:Math.max(1,c[h]-w.length-k.length);const _=w+"-".repeat(C)+k;n.alignDelimiters!==!1&&(C=w.length+C+k.length,C>c[h]&&(c[h]=C),g[h]=C),f[h]=_}s.splice(1,0,f),l.splice(1,0,g),d=-1;const b=[];for(;++d<s.length;){const x=s[d],w=l[d];h=-1;const k=[];for(;++h<u;){const C=x[h]||"";let _="",T="";if(n.alignDelimiters!==!1){const A=c[h]-(w[h]||0),R=i[h];R===114?_=" ".repeat(A):R===99?A%2?(_=" ".repeat(A/2+.5),T=" ".repeat(A/2-.5)):(_=" ".repeat(A/2),T=_):T=" ".repeat(A)}n.delimiterStart!==!1&&!h&&k.push("|"),n.padding!==!1&&!(n.alignDelimiters===!1&&C==="")&&(n.delimiterStart!==!1||h)&&k.push(" "),n.alignDelimiters!==!1&&k.push(_),k.push(C),n.alignDelimiters!==!1&&k.push(T),n.padding!==!1&&k.push(" "),(n.delimiterEnd!==!1||h!==u-1)&&k.push("|")}b.push(n.delimiterEnd===!1?k.join("").replace(/ + $ /,""):k.join(""))}return b.join( `
` )}function zwe(e){return e==null?"":String(e)}function dL(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 Iwe(e,r,n,o){const a=n.enter("blockquote"),i=n.createTracker(o);i.move("> "),i.shift(2);const s=n.indentLines(n.containerFlow(e,i.current()),Owe);return a(),s}function Owe(e,r,n){return">"+(n?"":" ")+e}function jwe(e,r){return pL(e,r.inConstruct,!0)&&!pL(e,r.notInConstruct,!1)}function pL(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 hL(e,r,n,o){let a=-1;for(;++a<n.unsafe.length;)if(n.unsafe[a].character=== `
` &&jwe(n.stack,n.unsafe[a]))return/[ \t ]/.test(o.before)?"":" ";return ` \ \
` }function Lwe(e,r){const n=String(e);let o=n.indexOf(r),a=o,i=0,s=0;if(typeof r!="string")throw new TypeError("Expected substring");for(;o!==-1;)o===a?++i>s&&(s=i):i=1,a=o+r.length,o=n.indexOf(r,a);return s}function Bwe(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 Fwe(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 Hwe(e,r,n,o){const a=Fwe(n),i=e.value||" ",s=a===" ` "?"GraveAccent":"Tilde";if(Bwe(e,n)){const h=n.enter("codeIndented"),f=n.indentLines(i,Vwe);return h(),f}const l=n.createTracker(o),c=a.repeat(Math.max(Lwe(i,a)+1,3)),u=n.enter("codeFenced");let d=l.move(c);if(e.lang){const h=n.enter( ` codeFencedLang$ { s } ` );d+=l.move(n.safe(e.lang,{before:d,after:" ",encode:[" ` "],...l.current()})),h()}if(e.lang&&e.meta){const h=n.enter(`codeFencedMeta${s}`);d+=l.move(" " ) , d += l . move ( n . safe ( e . meta , { before : d , after : `
` ,encode:[" ` " ] , ... l . current ( ) } ) ) , h ( ) } return d += l . move ( `
` ),i&&(d+=l.move(i+ `
` )),d+=l.move(c),u(),d}function Vwe(e,r,n){return(n?"":" ")+e}function R8(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 qwe ( e , r , n , o ) { const a = R8 ( n ) , i = a === '"' ? "Quote" : "Apostrophe" , s = n . enter ( "definition" ) ; let l = n . enter ( "label" ) ; const c = n . createTracker ( o ) ; let u = c . move ( "[" ) ; return u += c . move ( n . safe ( n . associationId ( e ) , { before : u , after : "]" , ... c . current ( ) } ) ) , u += c . move ( "]: " ) , l ( ) , ! e . url || /[\0- \u007F]/ . test ( e . url ) ? ( l = n . enter ( "destinationLiteral" ) , u += c . move ( "<" ) , u += c . move ( n . safe ( e . url , { before : u , after : ">" , ... c . current ( ) } ) ) , u += c . move ( ">" ) ) : ( l = n . enter ( "destinationRaw" ) , u += c . move ( n . safe ( e . url , { before : u , after : e . title ? " " : `
` ,...c.current()}))),l(),e.title&&(l=n.enter( ` title$ { i } ` ),u+=c.move(" "+a),u+=c.move(n.safe(e.title,{before:u,after:a,...c.current()})),u+=c.move(a),l()),s(),u}function Uwe(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 O1(e){return"&#x"+e.toString(16).toUpperCase()+";"}function yf(e){if(e===null||Pr(e)||Wd(e))return 1;if(Cx(e))return 2}function Tx(e,r,n){const o=yf(e),a=yf(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}}fL.peek=Wwe;function fL(e,r,n,o){const a=Uwe(n),i=n.enter("emphasis"),s=n.createTracker(o),l=s.move(a);let c=s.move(n.containerPhrasing(e,{after:a,before:l,...s.current()}));const u=c.charCodeAt(0),d=Tx(o.before.charCodeAt(o.before.length-1),u,a);d.inside&&(c=O1(u)+c.slice(1));const h=c.charCodeAt(c.length-1),f=Tx(o.after.charCodeAt(0),h,a);f.inside&&(c=c.slice(0,-1)+O1(h));const g=s.move(a);return i(),n.attentionEncodeSurroundingInfo={after:f.outside,before:d.outside},l+c+g}function Wwe(e,r,n){return n.options.emphasis||"*"}const Ywe={};function Ax(e,r){const n=r||Ywe,o=typeof n.includeImageAlt=="boolean"?n.includeImageAlt:!0,a=typeof n.includeHtml=="boolean"?n.includeHtml:!0;return mL(e,o,a)}function mL(e,r,n){if(Gwe(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 gL(e.children,r,n)}return Array.isArray(e)?gL(e,r,n):""}function gL(e,r,n){const o=[];let a=-1;for(;++a<e.length;)o[a]=mL(e[a],r,n);return o.join("")}function Gwe(e){return!!(e&&typeof e=="object")}function Xwe(e,r){let n=!1;return v8(e,function(o){if("value"in o&&/ \r ? \n | \r /.test(o.value)||o.type==="break")return n=!0,b8}),!!((!e.depth||e.depth<3)&&Ax(e)&&(r.options.setext||n))}function Kwe(e,r,n,o){const a=Math.max(Math.min(6,e.depth||1),1),i=n.createTracker(o);if(Xwe(e,n)){const d=n.enter("headingSetext"),h=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-11-16 23:10:11 +01:00
` });return h(),d(),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-11-16 23:10:11 +01:00
` ))+1))}const s="#".repeat(a),l=n.enter("headingAtx"),c=n.enter("phrasing");i.move(s+" ");let u=n.containerPhrasing(e,{before:"# ",after: `
` ,...i.current()});return/^[ \t ]/.test(u)&&(u=O1(u.charCodeAt(0))+u.slice(1)),u=u?s+" "+u:s,n.options.closeAtx&&(u+=" "+s),c(),l(),u}yL.peek=Zwe;function yL(e){return e.value||""}function Zwe(){return"<"}bL.peek=Qwe;function bL(e,r,n,o){const a=R8(n),i=a==='"'?"Quote":"Apostrophe",s=n.enter("image");let l=n.enter("label");const c=n.createTracker(o);let u=c.move("![");return u+=c.move(n.safe(e.alt,{before:u,after:"]",...c.current()})),u+=c.move("]("),l(),!e.url&&e.title||/[ \0 - \u 007F]/.test(e.url)?(l=n.enter("destinationLiteral"),u+=c.move("<"),u+=c.move(n.safe(e.url,{before:u,after:">",...c.current()})),u+=c.move(">")):(l=n.enter("destinationRaw"),u+=c.move(n.safe(e.url,{before:u,after:e.title?" ":")",...c.current()}))),l(),e.title&&(l=n.enter( ` title$ { i } ` ),u+=c.move(" "+a),u+=c.move(n.safe(e.title,{before:u,after:a,...c.current()})),u+=c.move(a),l()),u+=c.move(")"),s(),u}function Qwe(){return"!"}vL.peek=Jwe;function vL(e,r,n,o){const a=e.referenceType,i=n.enter("imageReference");let s=n.enter("label");const l=n.createTracker(o);let c=l.move("![");const u=n.safe(e.alt,{before:c,after:"]",...l.current()});c+=l.move(u+"]["),s();const d=n.stack;n.stack=[],s=n.enter("reference");const h=n.safe(n.associationId(e),{before:c,after:"]",...l.current()});return s(),n.stack=d,i(),a==="full"||!u||u!==h?c+=l.move(h+"]"):a==="shortcut"?c=c.slice(0,-1):c+=l.move("]"),c}function Jwe(){return"!"}xL.peek=e4e;function xL(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 s=n.unsafe[i],l=n.compilePattern(s);let c;if(s.atBreak)for(;c=l.exec(o);){let u=c.index;o.charCodeAt(u)===10&&o.charCodeAt(u-1)===13&&u--,o=o.slice(0,u)+" "+o.slice(c.index+1)}}return a+o+a}function e4e(){return" ` "}function wL(e,r){const n=Ax(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))}kL.peek=t4e;function kL(e,r,n,o){const a=R8(n),i=a==='" ' ? "Quote" : "Apostrophe" , s = n . createTracker ( o ) ; let l , c ; if ( wL ( e , n ) ) { const d = n . stack ; n . stack = [ ] , l = n . enter ( "autolink" ) ; let h = s . move ( "<" ) ; return h += s . move ( n . containerPhrasing ( e , { before : h , after : ">" , ... s . current ( ) } ) ) , h += s . move ( ">" ) , l ( ) , n . stack = d , h } l = n . enter ( "link" ) , c = n . enter ( "label" ) ; let u = s . move ( "[" ) ; return u += s . move ( n . containerPhrasing ( e , { before : u , after : "](" , ... s . current ( ) } ) ) , u += s . move ( "](" ) , c ( ) , ! e . url && e . title || /[\0- \u007F]/ . test ( e . url ) ? ( c = n . enter ( "destinationLiteral" ) , u += s . move ( "<" ) , u += s . move ( n . safe ( e . url , { before : u , after : ">" , ... s . current ( ) } ) ) , u += s . move ( ">" ) ) : ( c = n . enter ( "destinationRaw" ) , u += s . move ( n . safe ( e . url , { before : u , after : e . title ? " " : ")" , ... s . current ( ) } ) ) ) , c ( ) , e . title && ( c = n . enter ( ` title ${ i } ` ) , u += s . move ( " " + a ) , u += s . move ( n . safe ( e . title , { before : u , after : a , ... s . current ( ) } ) ) , u += s . move ( a ) , c ( ) ) , u += s . move ( ")" ) , l ( ) , u } function t4e ( e , r , n ) { return wL ( e , n ) ? "<" : "[" } _L . peek = r4e ; function _L ( e , r , n , o ) { const a = e . referenceType , i = n . enter ( "linkReference" ) ; let s = n . enter ( "label" ) ; const l = n . createTracker ( o ) ; let c = l . move ( "[" ) ; const u = n . containerPhrasing ( e , { before : c , after : "]" , ... l . current ( ) } ) ; c += l . move ( u + "][" ) , s ( ) ; const d = n . stack ; n . stack = [ ] , s = n . enter ( "reference" ) ; const h = n . safe ( n . associationId ( e ) , { before : c , after : "]" , ... l . current ( ) } ) ; return s ( ) , n . stack = d , i ( ) , a === "full" || ! u || u !== h ? c += l . move ( h + "]" ) : a === "shortcut" ? c = c . slice ( 0 , - 1 ) : c += l . move ( "]" ) , c } function r4e ( ) { return "[" } function N8 ( 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 n4e ( e ) { const r = N8 ( 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 o4e ( 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
` ,inConstruct:"tableCell"},{atBreak:!0,character:"|",after:"[ :-]"},{character:"|",inConstruct:"tableCell"},{atBreak:!0,character:":",after:"-"},{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{inlineCode:f,table:s,tableCell:c,tableRow:l}};function s(g,b,x,w){return u(d(g,x,w),g.align)}function l(g,b,x,w){const k=h(g,x,w),C=u([k]);return C.slice(0,C.indexOf( `
` ))}function c(g,b,x,w){const k=x.enter("tableCell"),C=x.enter("phrasing"),_=x.containerPhrasing(g,{...w,before:i,after:i});return C(),k(),_}function u(g,b){return Pwe(g,{align:b,alignDelimiters:o,padding:n,stringLength:a})}function d(g,b,x){const w=g.children;let k=-1;const C=[],_=b.enter("table");for(;++k<w.length;)C[k]=h(w[k],b,x);return _(),C}function h(g,b,x){const w=g.children;let k=-1;const C=[],_=b.enter("tableRow");for(;++k<w.length;)C[k]=c(w[k],g,b,x);return _(),C}function f(g,b,x){let w=CL.inlineCode(g,b,x);return x.stack.includes("tableCell")&&(w=w.replace(/ \| /g," \\ $ &")),w}}function T4e(){return{exit:{taskListCheckValueChecked:NL,taskListCheckValueUnchecked:NL,paragraph:R4e}}}function A4e(){return{unsafe:[{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{listItem:N4e}}}function NL(e){const r=this.stack[this.stack.length-2];r.type,r.checked=e.type==="taskListCheckValueChecked"}function R4e(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,s;for(;++i<a.length;){const l=a[i];if(l.type==="paragraph"){s=l;break}}s===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 N4e(e,r,n,o){const a=e.children[0],i=typeof e.checked=="boolean"&&a&&a.type==="paragraph",s="["+(e.checked?"x":" ")+"] ",l=n.createTracker(o);i&&l.move(s);let c=CL.listItem(e,r,n,{...o,...l.current()});return i&&(c=c.replace(/^(?:[*+-]| \d + \. )([ \r \n ]| {1,3})/,u)),c;function u(d){return d+s}}function D4e(){return[nwe(),Ewe(),Awe(),x4e(),T4e()]}function $ 4e(e){return{extensions:[owe(),Swe(e),Rwe(),C4e(e),A4e()]}}function Da(e,r,n,o){const a=e.length;let i=0,s;if(r<0?r=-r>a?0:a+r:r=r>a?a:r,n=n>0?n:0,o.length<1e4)s=Array.from(o),s.unshift(r,n),e.splice(...s);else for(n&&e.splice(r,n);i<o.length;)s=o.slice(i,i+1e4),s.unshift(r,0),e.splice(...s),i+=1e4,r+=1e4}function di(e,r){return e.length>0?(Da(e,e.length,0,r),e):r}const DL={}.hasOwnProperty;function $ L(e){const r={};let n=-1;for(;++n<e.length;)M4e(r,e[n]);return r}function M4e(e,r){let n;for(n in r){const a=(DL.call(e,n)?e[n]:void 0)||(e[n]={}),i=r[n];let s;if(i)for(s in i){DL.call(a,s)||(a[s]=[]);const l=i[s];P4e(a[s],Array.isArray(l)?l:l?[l]:[])}}}function P4e(e,r){let n=-1;const o=[];for(;++n<r.length;)(r[n].add==="after"?e:o).push(r[n]);Da(e,0,0,o)}const z4e={tokenize:F4e,partial:!0},ML={tokenize:H4e,partial:!0},PL={tokenize:V4e,partial:!0},zL={tokenize:q4e,partial:!0},I4e={tokenize:U4e,partial:!0},IL={name:"wwwAutolink",tokenize:L4e,previous:jL},OL={name:"protocolAutolink",tokenize:B4e,previous:LL},nc={name:"emailAutolink",tokenize:j4e,previous:BL},ol={};function O4e(){return{text:ol}}let Yd=48;for(;Yd<123;)ol[Yd]=nc,Yd++,Yd===58?Yd=65:Yd===91&&(Yd=97);ol[43]=nc,ol[45]=nc,ol[46]=nc,ol[95]=nc,ol[72]=[nc,OL],ol[104]=[nc,OL],ol[87]=[nc,IL],ol[119]=[nc,IL];function j4e(e,r,n){const o=this;let a,i;return s;function s(h){return!M8(h)||!BL.call(o,o.previous)||P8(o.events)?n(h):(e.enter("literalAutolink"),e.enter("literalAutolinkEmail"),l(h))}function l(h){return M8(h)?(e.consume(h),l):h===64?(e.consume(h),c):n(h)}function c(h){return h===46?e.check(I4e,d,u)(h):h===45||h===95||Po(h)?(i=!0,e.consume(h),c):d(h)}function u(h){return e.consume(h),a=!0,c}function d(h){return i&&a&&Go(o.previous)?(e.exit("literalAutolinkEmail"),e.exit("literalAutolink"),r(h)):n(h)}}function L4e(e,r,n){const o=this;return a;function a(s){return s!==87&&s!==119||!jL.call(o,o.previous)||P8(o.events)?n(s):(e.enter("literalAutolink"),e.enter("literalAutolinkWww"),e.check(z4e,e.attempt(ML,e.attempt(PL,i),n),n)(s))}function i(s){return e.exit("literalAutolinkWww"),e.exit("literalAutolink"),r(s)}}function B4e(e,r,n){const o=this;let a="",i=!1;return s;function s(h){return(h===72||h===104)&&LL.call(o,o.previous)&&!P8(o.events)?(e.enter("literalAutolink"),e.enter(
` ;break}case-3:{s= ` \ r
` ;break}case-2:{s=r?" ":" ";break}case-1:{if(!r&&a)continue;s=" ";break}default:s=String.fromCharCode(i)}a=i===-2,o.push(s)}return o.join("")}function U5e(e){const o={constructs: $ L([F5e,...(e||{}).extensions||[]]),content:a(N5e),defined:[],document:a( $ 5e),flow:a(z5e),lazy:{},string:a(j5e),text:a(L5e)};return o;function a(i){return s;function s(l){return H5e(o,i,l)}}}function W5e(e){for(;!YL(e););return e}const nB=/[ \0 \t \n \r ]/g;function Y5e(){let e=1,r="",n=!0,o;return a;function a(i,s,l){const c=[];let u,d,h,f,g;for(i=r+(typeof i=="string"?i.toString():new TextDecoder(s||void 0).decode(i)),h=0,r="",n&&(i.charCodeAt(0)===65279&&h++,n=void 0);h<i.length;){if(nB.lastIndex=h,u=nB.exec(i),f=u&&u.index!==void 0?u.index:i.length,g=i.charCodeAt(f),!u){r=i.slice(h);break}if(g===10&&h===f&&o)c.push(-3),o=void 0;else switch(o&&(c.push(-5),o=void 0),h<f&&(c.push(i.slice(h,f)),e+=f-h),g){case 0:{c.push(65533),e++;break}case 9:{for(d=Math.ceil(e/4)*4,c.push(-2);e++<d;)c.push(-1);break}case 10:{c.push(-4),e=1;break}default:o=!0,e=1}h=f+1}return l&&(o&&c.push(-5),r&&c.push(r),c.push(null)),c}}function F1(e){return!e||typeof e!="object"?"":"position"in e||"type"in e?oB(e.position):"start"in e||"end"in e?oB(e):"line"in e||"column"in e?L8(e):""}function L8(e){return aB(e&&e.line)+":"+aB(e&&e.column)}function oB(e){return L8(e&&e.start)+"-"+L8(e&&e.end)}function aB(e){return e&&typeof e=="number"?e:1}const iB={}.hasOwnProperty;function sB(e,r,n){return typeof r!="string"&&(n=r,r=void 0),G5e(n)(W5e(U5e(n).document().write(Y5e()(e,r,!0))))}function G5e(e){const r={transforms:[],canContainEols:["emphasis","fragment","heading","paragraph","strong"],enter:{autolink:i(Qe),autolinkProtocol:M,autolinkEmail:M,atxHeading:i(Ie),blockQuote:i(ge),characterEscape:M,characterReference:M,codeFenced:i(De),codeFencedFenceInfo:s,codeFencedFenceMeta:s,codeIndented:i(De,s),codeText:i(he,s),codeTextData:M,data:M,codeFlowValue:M,definition:i(me),definitionDestinationString:s,definitionLabelString:s,definitionTitleString:s,emphasis:i(Te),hardBreakEscape:i(Ze),hardBreakTrailing:i(Ze),htmlFlow:i(rt,s),htmlFlowData:M,htmlText:i(rt,s),htmlTextData:M,image:i(Rt),label:s,link:i(Qe),listItem:i(Ke),listItemValue:f,listOrdered:i(Pt,h),listUnordered:i(Pt),paragraph:i(Ge),reference:j,referenceString:s,resourceDestinationString:s,resourceTitleString:s,setextHeading:i(Ie),strong:i(ct),thematicBreak:i(Ir)},exit:{atxHeading:c(),atxHeadingSequence:A,autolink:c(),autolinkEmail:re,autolinkProtocol:ne,blockQuote:c(),characterEscapeValue:O,characterReferenceMarkerHexadecimal:Q,characterReferenceMarkerNumeric:Q,characterReferenceValue:J,characterReference:ie,codeFenced:c(w),codeFencedFence:x,codeFencedFenceInfo:g,codeFencedFenceMeta:b,codeFlowValue:O,codeIndented:c(k),codeText:c(V),codeTextData:O,data:O,definition:c(),definitionDestinationString:T,definitionLabelString:C,definitionTitleString:_,emphasis:c(),hardBreakEscape:c(L),hardBreakTrailing:c(L),htmlFlow:c(U),htmlFlowData:O,htmlText:c(P),htmlTextData:O,image:c(H),label:Z,labelText:q,lineEnding:F,link:c(I),listItem:c(),listOrdered:c(),listUnordered:c(),paragraph:c(),referenceString:Y,resourceDestinationString:W,resourceTitleString:G,resource:K,setextHeading:c(N),setextHeadingLineSequence:D,setextHeadingText:R,strong:c(),thematicBreak:c()}};lB(r,(e||{}).mdastExtensions||[]);const n={};return o;function o(Ee){let Se={type:"root",children:[]};const it={stack:[Se],tokenStack:[],config:r,enter:l,exit:u,buffer:s,resume:d,data:n},xt=[];let zt=-1;for(;++zt<Ee.length;)if(Ee[zt][1].type==="listOrdered"||Ee[zt][1].type==="listUnordered")if(Ee[zt][0]==="enter")xt.push(zt);else{const Fr=xt.pop();zt=a(Ee,Fr,zt)}for(zt=-1;++zt<Ee.length;){const Fr=r[Ee[zt][0]];iB.call(Fr,Ee[zt][1].type)&&Fr[Ee[zt][1].type].call(Object.assign({sliceSerialize:Ee[zt][2].sliceSerialize},it),Ee[zt][1])}if(it.tokenStack.length>0){const Fr=it.tokenStack[it.tokenStack.length-1];(Fr[1]||cB).call(it,void 0,Fr[0])}for(Se.position={start:gu(Ee.length>0?Ee[0][1].start:{line:1,column:1,offset:0}),end:gu(Ee.length>0?Ee[Ee.length-2][1].end:{line:1,column:1,offset:0})},zt=-1;++
` }]}function J5e(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 e_e(e,r){const n={type:"element",tagName:"del",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function t_e(e,r){const n={type:"element",tagName:"em",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function r_e(e,r){const n=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",o=String(r.identifier).toUpperCase(),a=bf(o.toLowerCase()),i=e.footnoteOrder.indexOf(o);let s,l=e.footnoteCounts.get(o);l===void 0?(l=0,e.footnoteOrder.push(o),s=e.footnoteOrder.length):s=i+1,l+=1,e.footnoteCounts.set(o,l);const c={type:"element",tagName:"a",properties:{href:"#"+n+"fn-"+a,id:n+"fnref-"+a+(l>1?"-"+l:""),dataFootnoteRef:!0,ariaDescribedBy:["footnote-label"]},children:[{type:"text",value:String(s)}]};e.patch(r,c);const u={type:"element",tagName:"sup",properties:{},children:[c]};return e.patch(r,u),e.applyData(r,u)}function n_e(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 o_e(e,r){if(e.options.allowDangerousHtml){const n={type:"raw",value:r.value};return e.patch(r,n),e.applyData(r,n)}}function uB(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 s=a[a.length-1];return s&&s.type==="text"?s.value+=o:a.push({type:"text",value:o}),a}function a_e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return uB(e,r);const a={src:bf(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 i_e(e,r){const n={src:bf(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 s_e(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 l_e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return uB(e,r);const a={href:bf(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 c_e(e,r){const n={href:bf(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 u_e(e,r,n){const o=e.all(r),a=n?d_e(n):dB(r),i={},s=[];if(typeof r.checked=="boolean"){const d=o[0];let h;d&&d.type==="element"&&d.tagName==="p"?h=d:(h={type:"element",tagName:"p",properties:{},children:[]},o.unshift(h)),h.children.length>0&&h.children.unshift({type:"text",value:" "}),h.children.unshift({type:"element",tagName:"input",properties:{type:"checkbox",checked:r.checked,disabled:!0},children:[]}),i.className=["task-list-item"]}let l=-1;for(;++l<o.length;){const d=o[l];(a||l!==0||d.type!=="element"||d.tagName!=="p")&&s.push({type:"text",value: `
` }),d.type==="element"&&d.tagName==="p"&&!a?s.push(...d.children):s.push(d)}const c=o[o.length-1];c&&(a||c.type!=="element"||c.tagName!=="p")&&s.push({type:"text",value: `
` });const u={type:"element",tagName:"li",properties:i,children:s};return e.patch(r,u),e.applyData(r,u)}function d_e(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=dB(n[o])}return r}function dB(e){const r=e.spread;return r??e.children.length>1}function p_e(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 s=o[a];if(s.type==="element"&&s.tagName==="li"&&s.properties&&Array.isArray(s.properties.className)&&s.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 h_e(e,r){const n={type:"element",tagName:"p",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function f_e(e,r){const n={type:"root",children:e.wrap(e.all(r))};return e.patch(r,n),e.applyData(r,n)}function m_e(e,r){const n={type:"element",tagName:"strong",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function g_e(e,r){const n=e.all(r),o=n.shift(),a=[];if(o){const s={type:"element",tagName:"thead",properties:{},children:e.wrap([o],!0)};e.patch(r.children[0],s),a.push(s)}if(n.length>0){const s={type:"element",tagName:"tbody",properties:{},children:e.wrap(n,!0)},l=rc(r.children[1]),c=vx(r.children[r.children.length-1]);l&&c&&(s.position={start:l,end:c}),a.push(s)}const i={type:"element",tagName:"table",properties:{},children:e.wrap(a,!0)};return e.patch(r,i),e.applyData(r,i)}function y_e(e,r,n){const o=n?n.children:void 0,i=(o?o.indexOf(r):1)===0?"th":"td",s=n&&n.type==="table"?n.align:void 0,l=s?s.length:r.children.length;let c=-1;const u=[];for(;++c<l;){const h=r.children[c],f={},g=s?s[c]:void 0;g&&(f.align=g);let b={type:"element",tagName:i,properties:f,children:[]};h&&(b.children=e.all(h),e.patch(h,b),b=e.applyData(h,b)),u.push(b)}const d={type:"element",tagName:"tr",properties:{},children:e.wrap(u,!0)};return e.patch(r,d),e.applyData(r,d)}function b_e(e,r){const n={type:"element",tagName:"td",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}const pB=9,hB=32;function v_e(e){const r=String(e),n=/ \r ? \n | \r /g;let o=n.exec(r),a=0;const i=[];for(;o;)i.push(fB(r.slice(a,o.index),a>0,!0),o[0]),a=o.index+o[0].length,o=n.exec(r);return i.push(fB(r.slice(a),a>0,!1)),i.join("")}function fB(e,r,n){let o=0,a=e.length;if(r){let i=e.codePointAt(o);for(;i===pB||i===hB;)o++,i=e.codePointAt(o)}if(n){let i=e.codePointAt(a-1);for(;i===pB||i===hB;)a--,i=e.codePointAt(a-1)}return a>o?e.slice(o,a):""}function x_e(e,r){const n={type:"text",value:v_e(String(r.value))};return e.patch(r,n),e.applyData(r,n)}function w_e(e,r){const n={type:"element",tagName:"hr",properties:{},children:[]};return e.patch(r,n),e.applyData(r,n)}const k_e={blockquote:Z5e,break:Q5e,code:J5e,delete:e_e,emphasis:t_e,footnoteReference:r_e,heading:n_e,html:o_e,imageReference:a_e,image:i_e,inlineCode:s_e,linkReference:l_e,link:c_e,listItem:u_e,list:p_e,paragraph:h_e,root:f_e,strong:m_e,table:g_e,tableCell:b_e,tableRow:y_e,text:x_e,thematicBreak:w_e,toml: $ x,yaml: $ x,definition: $ x,footnoteDefinition: $ x};function $ x(){}function __e(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 E_e(e,r){return"Back to reference "+(e+1)+(r>1?"-"+r:"")}function S_e(e){const r=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",n=e.options.footnoteBackContent||__e,o=e.options.footnoteBackLabel||E_e,a=e.options.footnoteLabel||"Footnotes",i=e.options.footnoteLabelTagName||"h2",s=e.options.footnoteLabelProperties||{className:["sr-only"]},l=[];let c=-1;for(;++c<e.footnoteOrder.length;){const u=e.footnoteById.get(e.footnoteOrder[c]);if(!u)continue;const d=e.all(u),h=String(u.identifier).toUpperCase(),f=bf(h.toLowerCase());let g=0;const b=[],x=e.footnoteCounts.get(h);for(;x!==void 0&&++g<=x;){b.length>0&&b.push({type:"text",value:" "});let C=typeof n=="string"?n
` },{type:"element",tagName:"ol",properties:{},children:e.wrap(l,!0)},{type:"text",value: `
` }]}}const B8={}.hasOwnProperty,C_e={};function T_e(e,r){const n=r||C_e,o=new Map,a=new Map,i=new Map,s={...k_e,...n.handlers},l={all:u,applyData:R_e,definitionById:o,footnoteById:a,footnoteCounts:i,footnoteOrder:[],handlers:s,one:c,options:n,patch:A_e,wrap:D_e};return v8(e,function(d){if(d.type==="definition"||d.type==="footnoteDefinition"){const h=d.type==="definition"?o:a,f=String(d.identifier).toUpperCase();h.has(f)||h.set(f,d)}}),l;function c(d,h){const f=d.type,g=l.handlers[f];if(B8.call(l.handlers,f)&&g)return g(l,d,h);if(l.options.passThrough&&l.options.passThrough.includes(f)){if("children"in d){const{children:x,...w}=d,k=Ld(w);return k.children=l.all(d),k}return Ld(d)}return(l.options.unknownHandler||N_e)(l,d,h)}function u(d){const h=[];if("children"in d){const f=d.children;let g=-1;for(;++g<f.length;){const b=l.one(f[g],d);if(b){if(g&&f[g-1].type==="break"&&(!Array.isArray(b)&&b.type==="text"&&(b.value=mB(b.value)),!Array.isArray(b)&&b.type==="element")){const x=b.children[0];x&&x.type==="text"&&(x.value=mB(x.value))}Array.isArray(b)?h.push(...b):h.push(b)}}}return h}}function A_e(e,r){e.position&&(r.position=jj(e))}function R_e(e,r){let n=r;if(e&&e.data){const o=e.data.hName,a=e.data.hChildren,i=e.data.hProperties;if(typeof o=="string")if(n.type==="element")n.tagName=o;else{const s="children"in n?n.children:[n];n={type:"element",tagName:o,properties:{},children:s}}n.type==="element"&&i&&Object.assign(n.properties,Ld(i)),"children"in n&&n.children&&a!==null&&a!==void 0&&(n.children=a)}return n}function N_e(e,r){const n=r.data||{},o="value"in r&&!(B8.call(n,"hProperties")||B8.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 D_e(e,r){const n=[];let o=-1;for(r&&n.push({type:"text",value: `
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
` });++o<e.length;)o&&n.push({type:"text",value: `
` }),n.push(e[o]);return r&&e.length>0&&n.push({type:"text",value: `
2025-11-16 23:10:11 +01:00
` }),n}function mB(e){let r=0,n=e.charCodeAt(r);for(;n===9||n===32;)r++,n=e.charCodeAt(r);return e.slice(r)}function gB(e,r){const n=T_e(e,r),o=n.one(e,void 0),a=S_e(n),i=Array.isArray(o)?{type:"root",children:o}:o||{type:"root",children:[]};return a&&i.children.push({type:"text",value: `
` },a),i}function $ _e(e,r){return e&&"run"in e?async function(n,o){const a=gB(n,{file:o,...r});await e.run(a,o)}:function(n,o){return gB(n,{file:o,...e||r})}}function yB(e){if(e)throw e}var F8,bB;function M_e(){if(bB)return F8;bB=1;var e=Object.prototype.hasOwnProperty,r=Object.prototype.toString,n=Object.defineProperty,o=Object.getOwnPropertyDescriptor,a=function(u){return typeof Array.isArray=="function"?Array.isArray(u):r.call(u)==="[object Array]"},i=function(u){if(!u||r.call(u)!=="[object Object]")return!1;var d=e.call(u,"constructor"),h=u.constructor&&u.constructor.prototype&&e.call(u.constructor.prototype,"isPrototypeOf");if(u.constructor&&!d&&!h)return!1;var f;for(f in u);return typeof f>"u"||e.call(u,f)},s=function(u,d){n&&d.name==="__proto__"?n(u,d.name,{enumerable:!0,configurable:!0,value:d.newValue,writable:!0}):u[d.name]=d.newValue},l=function(u,d){if(d==="__proto__")if(e.call(u,d)){if(o)return o(u,d).value}else return;return u[d]};return F8=function c(){var u,d,h,f,g,b,x=arguments[0],w=1,k=arguments.length,C=!1;for(typeof x=="boolean"&&(C=x,x=arguments[1]||{},w=2),(x==null||typeof x!="object"&&typeof x!="function")&&(x={});w<k;++w)if(u=arguments[w],u!=null)for(d in u)h=l(x,d),f=l(u,d),x!==f&&(C&&f&&(i(f)||(g=a(f)))?(g?(g=!1,b=h&&a(h)?h:[]):b=h&&i(h)?h:{},s(x,{name:d,newValue:c(C,b,f)})):typeof f<"u"&&s(x,{name:d,newValue:f}));return x},F8}var P_e=M_e();const H8=m1(P_e);function V8(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 z_e(){const e=[],r={run:n,use:o};return r;function n(...a){let i=-1;const s=a.pop();if(typeof s!="function")throw new TypeError("Expected function as last argument, not "+s);l(null,...a);function l(c,...u){const d=e[++i];let h=-1;if(c){s(c);return}for(;++h<a.length;)(u[h]===null||u[h]===void 0)&&(u[h]=a[h]);a=u,d?I_e(d,l)(...u):s(null,...u)}}function o(a){if(typeof a!="function")throw new TypeError("Expected ` middelware ` to be a function, not "+a);return e.push(a),r}}function I_e(e,r){let n;return o;function o(...s){const l=e.length>s.length;let c;l&&s.push(a);try{c=e.apply(this,s)}catch(u){const d=u;if(l&&n)throw d;return a(d)}l||(c&&c.then&&typeof c.then=="function"?c.then(i,a):c instanceof Error?a(c):i(c))}function a(s,...l){n||(n=!0,r(s,...l))}function i(s){a(null,s)}}class sa extends Error{constructor(r,n,o){super(),typeof n=="string"&&(o=n,n=void 0);let a="",i={},s=!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&&(s=!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 l=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=l?l.column:void 0,this.fatal=void 0,this.file,this.message=a,this.line=l?l.line:void 0,this.name=F1(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=s&&i.cause&&typeof i.cause.stack=="string"?i.cause.stack:"",this.actual,this.expected,this.note,this.url}}sa.prototype.file="",sa.prototype.name="",sa.prototype.reason="",sa.prototype.message="",sa.prototype.stack="",sa.prototype.column=void 0,sa.prototype.line=void 0,sa.prototype.ancestors=void 0,sa.prototype.cause=void 0,sa.prototype.fatal=void 0,sa.prototype.place=void 0,sa.prototype.ruleId=void 0,sa.prototype.source=void 0;const al={basename:O_e,dirname:j_e,extname:L_e,join:B_e,sep:"/"};function O_e(e,r){if(r!==void 0&&typeof r!="string")throw new TypeError('"ext" argument must be a string');H1(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
` )}reversed(r=!1){if(!r)return new pi(this.target,this.source);const[n]=gE(this.target,this.source,"directed");return n??new pi(this.target,this.source,new Set)}}const JB={asc:(e,r)=>e>r,desc:(e,r)=>e<r};function n8e(e,r){let[n,...o]=r;if(!o8e(n)){let i=yE(...o);return e(n,i)}let a=yE(n,...o);return i=>e(i,a)}function yE(e,r,...n){let o=typeof e=="function"?e:e[0],a=typeof e=="function"?"asc":e[1],{[a]:i}=JB,s=r===void 0?void 0:yE(r,...n);return(l,c)=>{let u=o(l),d=o(c);return i(u,d)?1:i(d,u)?-1:s?.(l,c)??0}}function o8e(e){if(eF(e))return!0;if(typeof e!="object"||!Array.isArray(e))return!1;let[r,n,...o]=e;return eF(r)&&typeof n=="string"&&n in JB&&o.length===0}const eF=e=>typeof e=="function"&&e.length===1;function a8e(...e){return Do(i8e,e,s8e)}const i8e=(e,r)=>e.filter(r),s8e=e=>(r,n,o)=>e(r,n,o)?{done:!1,hasNext:!0,next:r}:sE;function tF(...e){return Do(l8e,e,c8e)}const l8e=(e,r)=>e.flatMap(r),c8e=e=>(r,n,o)=>{let a=e(r,n,o);return Array.isArray(a)?{done:!1,hasNext:!0,hasMany:!0,next:a}:{done:!1,hasNext:!0,next:a}};function bE(...e){return Do(u8e,e)}const u8e=(e,r)=>{let n=Object.create(null);for(let o=0;o<e.length;o++){let a=e[o],i=r(a,o,e);if(i!==void 0){let s=n[i];s===void 0?n[i]=[a]:s.push(a)}}return Object.setPrototypeOf(n,Object.prototype),n};function d8e(e){return typeof e=="number"&&!Number.isNaN(e)}function p8e(...e){return Do(h8e,e)}const h8e=e=>e.at(-1);function vE(...e){return Do(f8e,e)}function f8e(e,r){let n={};for(let[o,a]of Object.entries(e))n[o]=r(a,o,e);return n}function xE(...e){return r=>Kd(r,...e)}function rF(...e){return n8e(m8e,e)}const m8e=(e,r)=>[...e].sort(r);function nF(e,r,n){return typeof r=="number"||r===void 0?o=>o.split(e,r):e.split(r,n)}function Z1(...e){return Do(Object.values,e)}class jx{constructor(r,n){this. $ model=r,this. $ element=n,this.id=this. $ element.id,this._literalId=this. $ element.id;const[o,a]=u6e(this.id);o?(this.imported={from:o,fqn:a},this.hierarchyLevel=rx(a)):(this.imported=null,this.hierarchyLevel=rx(this.id))}Aux;id;_literalId;hierarchyLevel;imported;get name(){return g1(this.id)}get parent(){return this. $ model.parent(this)}get kind(){return this. $ element.kind}get shape(){return this.style.shape}get color(){return this.style.color}get icon(){return this.style.icon??null}get tags(){return yr(this,Symbol.for("tags"),()=>Ox([...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&&!mE(this. $ element.summary,this. $ element.description)}get summary(){return or.memoize(this,"summary",xf(this. $ element))}get description(){return or.memoize(this,"description",wf(this. $ element))}get technology(){return this. $ element.technology??null}get links(){return this. $ element.links??[]}get defaultView(){return yr(this,Symbol.for("defaultView"),()=>hE(this.scopedViews())??null)}get isRoot(){return this.parent===null}get style(){return yr(this,"style",()=>U1({shape:this. $ model. $ styles.defaults.shape,color:this. $ model. $ styles.defaults.color,border:this. $ model. $ styles.defaults.border,opacity:this. $ model. $ styles.defaults.opacity,size:this. $ model. $ styles.defaults.size,padding:this. $ model. $ styles.defaults.padding,textSize:this. $ model. $ styles.defaults.text,...this. $ element.style}))}isAncestorOf(r){return to(this,r)}isDescendantOf(r){return to(r,this)}ancestors(){return this. $ model.ancestors(this)}commonAncestor(r){const n=b1(this.id,r.id);return n?this. $ model.element(n):null}children(){return this. $ model.children(this)}descendants(r){return r?nO([...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.sour
` ),"View title cannot contain newlines"),e.includes( $ a)){const r=e.split( $ a).map(n=>n.trim()).filter(n=>n.length>0);return Kl(r,1)?r:[""]}return[e.trim()]},Lx=e=>wE(e).join( $ a),g8e=e=>{const r=wE(e);return Kl(r,2)?r.slice(0,-1).join( $ a):null},kE=e=>e.includes( $ a)?wE(e).pop()??e:e.trim();class y8e{constructor(r){this. $ model=r;const n=this. $ deployments=r. $ data.deployments,o=Z1(n.elements);for(const a of uu(o)){const i=this.addElement(a);for(const s of i.tags)this.#c.get(s).add(i);i.isInstance()&&this.#r.get(i.element.id).add(i)}for(const a of Z1(n.relations)){const i=this.addRelation(a);for(const s of i.tags)this.#c.get(s).add(i)}}#e=new Map;#i=new Map;#t=new Xn(()=>new Set);#r=new Xn(()=>new Set);#s=new Set;#n=new Map;#l=new Xn(()=>new Set);#a=new Xn(()=>new Set);#o=new Xn(()=>new Set);#c=new Xn(()=>new Set);#u=new Map; $ deployments;get $ styles(){return this. $ model. $ styles}element(r){if(r instanceof XB||r instanceof KB)return r;const n=Tr(r);return bt(this.#e.get(n), ` Element $ { n } not found ` )}findElement(r){return this.#e.get(r)??null}node(r){const n=this.element(r);return at(n.isDeploymentNode(), ` Element $ { n . id } is not a deployment node ` ),n}findNode(r){const n=this.findElement(r);return n?(at(n.isDeploymentNode(), ` Element $ { n ? . id } is not a deployment node ` ),n):null}instance(r){const n=this.element(r);return at(n.isInstance(), ` Element $ { n . id } is not a deployed instance ` ),n}findInstance(r){const n=this.findElement(r);return n?(at(n.isInstance(), ` Element $ { n ? . id } is not a deployed instance ` ),n):null}roots(){return this.#s.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=Tr(r),o=this.#r.get(n);o&&(yield*o)}deploymentRef(r){if(Y1.isInsideInstanceRef(r)){const{deployment:n,element:o}=r;return O6e(this.#u, ` $ { n } @ $ { o } ` ,()=>new J6e(this.instance(n),this. $ model.element(o)))}return this.element(r.deployment)}relationships(){return this.#n.values()}relationship(r){return bt(this.#n.get(Tr(r)), ` DeploymentRelationModel $ { r } not found ` )}findRelationship(r){return this.#n.get(r)??null}*views(){for(const r of this. $ model.views())r.isDeploymentView()&&(yield r)}parent(r){const n=Tr(r);return this.#i.get(n)||null}children(r){const n=Tr(r);return this.#t.get(n)}*siblings(r){const n=Tr(r),o=this.parent(r)?.children()??this.roots();for(const a of o)a.id!==n&&(yield a)}*ancestors(r){let n=Tr(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=Tr(r);for(const a of this.#l.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=Tr(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=k6e(r)?new XB(this,Object.freeze(r)):new KB(this,Object.freeze(r),this. $ model.element(r.element));this.#e.set(n.id,n);const o=tx(n.id);return o?(at(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)):(at(n.isDeploymentNode(), ` Root element $ { n . id } is not a deployment node ` ),this.#s.add(n)),n}addRelation(r){if(this.#n.has(r.id))throw new Error( ` Relation $ { r . id } already exists ` );const n=new e8e(this,Object.freeze(r));this.#n.set(n.id,n),this.#l.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,...jd(o)])this.#o.get(a).add(n);for(const a of jd(n.source.id)){if(a===o)break;this.#a.get(a).add(n)}for(const a of jd(n.target.id)){if(a===o)break;this.#l.get(a).add(n)}return n}}class oF{constructor(r,n){this.model=r,this. $ relationship=n,this.source=r.element(Y1.flatten
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
` ).replace( `
` , `
+ ` ).split( `
2025-11-16 23:10:11 +01:00
` )),u=c.reduce((d,h)=>d.concat(...h),[]);return[c,u]}return[[],[]]},[e]);return E.useEffect(()=>{const c=r?.target??VV,u=r?.actInsideInputWithModifier??!0;if(e!==null){const d=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!u)&&KH(g))return!1;const b=UV(g.code,l);if(i.current.add(g[b]),qV(s,i.current,!1)){const x=g.composedPath?.()?.[0]||g.target,w=x?.nodeName==="BUTTON"||x?.nodeName==="A";r.preventDefault!==!1&&(a.current||!w)&&g.preventDefault(),o(!0)}},h=g=>{const b=UV(g.code,l);qV(s,i.current,!0)?(o(!1),i.current.clear()):i.current.delete(g[b]),g.key==="Meta"&&i.current.clear(),a.current=!1},f=()=>{i.current.clear(),o(!1)};return c?.addEventListener("keydown",d),c?.addEventListener("keyup",h),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",d),c?.removeEventListener("keyup",h),window.removeEventListener("blur",f),window.removeEventListener("contextmenu",f)}}},[e,o]),n}function qV(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function UV(e,r){return r.includes(e)?"code":"key"}const GTe=()=>{const e=Ar();return E.useMemo(()=>({zoomIn:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomOut:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1/1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomTo:(r,n)=>{const{panZoom:o}=e.getState();return o?o.scaleTo(r,{duration:n?.duration}):Promise.resolve(!1)},getZoom:()=>e.getState().transform[2],setViewport:async(r,n)=>{const{transform:[o,a,i],panZoom:s}=e.getState();return s?(await s.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:s,panZoom:l}=e.getState(),c=vu(r,o,a,i,s,n?.padding??.1);return l?(await l.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:s}=e.getState();if(!s)return r;const{x:l,y:c}=s.getBoundingClientRect(),u={x:r.x-l,y:r.y-c},d=n.snapGrid??a,h=n.snapToGrid??i;return w0(u,o,h,d)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:a,y:i}=o.getBoundingClientRect(),s=E3(r,n);return{x:s.x+a,y:s.y+i}}}),[])};function WV(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 s=o.get(i.id);s?s.push(i):o.set(i.id,[i])}for(const i of r){const s=o.get(i.id);if(!s){n.push(i);continue}if(s[0].type==="remove")continue;if(s[0].type==="replace"){n.push({...s[0].item});continue}const l={...i};for(const c of s)XTe(c,l);n.push(l)}return a.length&&a.forEach(i=>{i.index!==void 0?n.splice(i.index,0,{...i.item}):n.push({...i.item})}),n}function XTe(e,r){switch(e.type){case"select":{r.selected=e.selected;break}case"position":{typeof e.position<"u"&&(r.position=e.position),typeof e.dragging<"u"&&(r.dragging=e.dragging);break}case"dimensions":{typeof e.dimensions<"u"&&(r.measured??={},r.measured.width=e.dimensions.width,r.measured.height=e.dimensions.height,e.setAttributes&&((e.setAttributes===!0||e.setAttributes==="width")&&(r.width=e.dimensions.width),(e.setAttributes===!0||e.setAttributes==="height")&&(r.height=e.dimensions.height))),typeof e.resizing=="boolean"&&(r.resizing=e.resizing);break}}}function $ 3(e,r){return WV(e,r)}function M3(e,r){return WV(e,r)}function pp(e,r){return{id:e,type:"select",selected:r}}function Lf(e,r=new Set,n=!1){const o=[];for(const[a,i]of e){const s=r.has(a);!(i.selected===void 0&&!s)&&i.selected!==s&&(n&&(i.selected=s),o.push(pp(i.id,s)))}return o}function YV({items:e=[],lookup:r}){const n=[],o=new Map(e.map(a=>[a.id,a]));for(const[a,i]of e.entries()){const s=r.get(i.id),l=s?.internals?.userNode??s;l!==void 0&&l!==i&&n.push({id:i.id,item:i,typ
M$ { N . x } , $ { N . y } h$ { N . width } v$ { N . height } h$ { - N . width } z ` ,fillRule:"evenodd",pointerEvents:"none"})]})})}zq.displayName="MiniMap",E.memo(zq);const LRe=e=>r=>e? ` $ { Math . max ( 1 / r . transform [ 2 ] , 1 ) } ` :void 0,BRe={[jf.Line]:"right",[jf.Handle]:"bottom-right"};function FRe({nodeId:e,position:r,variant:n=jf.Handle,className:o,style:a=void 0,children:i,color:s,minWidth:l=10,minHeight:c=10,maxWidth:u=Number.MAX_VALUE,maxHeight:d=Number.MAX_VALUE,keepAspectRatio:h=!1,resizeDirection:f,autoScale:g=!0,shouldResize:b,onResizeStart:x,onResize:w,onResizeEnd:k}){const C=R9(),_=typeof e=="string"?e:C,T=Ar(),A=E.useRef(null),R=n===jf.Handle,D=qt(E.useCallback(LRe(R&&g),[R,g]),Kr),N=E.useRef(null),M=r??BRe[n];E.useEffect(()=>{if(!(!A.current||!_))return N.current||(N.current=vTe({domNode:A.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:F,transform:L,snapGrid:U,snapToGrid:P,nodeOrigin:V,domNode:I}=T.getState();return{nodeLookup:F,transform:L,snapGrid:U,snapToGrid:P,nodeOrigin:V,paneDomNode:I}},onChange:(F,L)=>{const{triggerNodeChanges:U,nodeLookup:P,parentLookup:V,nodeOrigin:I}=T.getState(),H=[],q={x:F.x,y:F.y},Z=P.get(_);if(Z&&Z.expandParent&&Z.parentId){const W=Z.origin??I,G=F.width??Z.measured.width??0,K=F.height??Z.measured.height??0,j={id:Z.id,parentId:Z.parentId,rect:{width:G,height:K,...YH({x:F.x??Z.position.x,y:F.y??Z.position.y},{width:G,height:K},Z.parentId,P,W)}},Y=b9([j],P,V,I);H.push(...Y),q.x=F.x?Math.max(W[0]*G,F.x):void 0,q.y=F.y?Math.max(W[1]*K,F.y):void 0}if(q.x!==void 0&&q.y!==void 0){const W={id:_,type:"position",position:{...q}};H.push(W)}if(F.width!==void 0&&F.height!==void 0){const W={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:F.width,height:F.height}};H.push(W)}for(const W of L){const G={...W,type:"position"};H.push(G)}U(H)},onEnd:({width:F,height:L})=>{const U={id:_,type:"dimensions",resizing:!1,dimensions:{width:F,height:L}};T.getState().triggerNodeChanges([U])}})),N.current.update({controlPosition:M,boundaries:{minWidth:l,minHeight:c,maxWidth:u,maxHeight:d},keepAspectRatio:h,resizeDirection:f,onResizeStart:x,onResize:w,onResizeEnd:k,shouldResize:b}),()=>{N.current?.destroy()}},[M,l,c,u,d,h,x,w,k,b]);const O=M.split("-");return y.jsx("div",{className:_n(["react-flow__resize-control","nodrag",...O,n,o]),ref:A,style:{...a,scale:D,...s&&{[R?"backgroundColor":"borderColor"]:s}},children:i})}E.memo(FRe);const HRe=e=>e.domNode?.querySelector(".react-flow__renderer");function VRe({children:e}){const r=qt(HRe);return r?Ki.createPortal(e,r):null}const qRe=(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,URe=(e,r)=>{if(e.size!==r.size)return!1;for(const[n,o]of e)if(qRe(o,r.get(n)))return!1;return!0},WRe=e=>({x:e.transform[0],y:e.transform[1],zoom:e.transform[2],selectedNodesCount:e.nodes.filter(r=>r.selected).length});function D9({nodeId:e,children:r,className:n,style:o,isVisible:a,position:i=tt.Top,offset:s=10,align:l="center",...c}){const u=R9(),d=E.useCallback(T=>(Array.isArray(e)?e:[e||u||""]).reduce((A,R)=>{const D=T.nodeLookup.get(R);return D&&A.set(D.id,D),A},new Map),[e,u]),h=qt(d,URe),{x:f,y:g,zoom:b,selectedNodesCount:x}=qt(WRe,Kr);if(!(typeof a=="boolean"?a:h.size===1&&h.values().next().value?.selected&&x===1)||!h.size)return null;const w= $ f(h),k=Array.from(h.values()),C=Math.max(...k.map(T=>T.internals.z+1)),_={position:"absolute",transform:HCe(w,{x:f,y:g,zoom:b},i,s,l),zIndex:C,...o};return y.jsx(VRe,{children:y.jsx("div",{style:_,className:_n(["react-flow__node-toolbar",n]),...c,"data-id":k.reduce((T,A)=> ` $ { T } $ { A . id } ` ,"").trim(),children:r})})}function YRe(e,r,n){let o=a=>e(a,...r);return n===void 0?o:Object.assign(o,{lazy:n,lazyArgs:r})}function hr(e,r,n){let o=e.length-r.length;if(o===0)return e(...r);if(o===1)return YRe(e,r,n);throw Error("Wrong number of arguments")}const GRe=e=>(r,n)=>{if(n===0)return e(r);if(!N
. ` .concat(tDe, ` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the 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-11-16 23:10:11 +01:00
padding - right : ` ).concat(l,"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-11-16 23:10:11 +01:00
body [ ` ).concat(Hf, ` ] {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the 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-11-16 23:10:11 +01:00
padding - right : ` ).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
margin - left : 0 ;
margin - top : 0 ;
2025-11-16 23:10:11 +01:00
margin - right : ` ).concat(l,"px ").concat(o, ` ;
` ),n==="padding"&&"padding-right: ".concat(l,"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-11-16 23:10:11 +01:00
. ` ).concat(G3, ` {
right : ` ).concat(l,"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-11-16 23:10:11 +01:00
. ` ).concat(X3, ` {
margin - right : ` ).concat(l,"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-11-16 23:10:11 +01:00
. ` ).concat(G3," .").concat(G3, ` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
right : 0 ` ).concat(o, ` ;
}
2025-11-16 23:10:11 +01:00
. ` ).concat(X3," .").concat(X3, ` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
margin - right : 0 ` ).concat(o, ` ;
}
2025-11-16 23:10:11 +01:00
body [ ` ).concat(Hf, ` ] {
` ).concat(rDe,": ").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
}
2025-11-16 23:10:11 +01:00
` )},rU=function(){var e=parseInt(document.body.getAttribute(Hf)||"0",10);return isFinite(e)?e:0},wDe=function(){E.useEffect(function(){return document.body.setAttribute(Hf,(rU()+1).toString()),function(){var e=rU()-1;e<=0?document.body.removeAttribute(Hf):document.body.setAttribute(Hf,e.toString())}},[])},kDe=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;wDe();var i=E.useMemo(function(){return bDe(a)},[a]);return E.createElement(vDe,{styles:xDe(i,!r,a,n?"":"!important")})},F9=!1;if(typeof window<"u")try{var Z3=Object.defineProperty({},"passive",{get:function(){return F9=!0,!0}});window.addEventListener("test",Z3,Z3),window.removeEventListener("test",Z3,Z3)}catch{F9=!1}var Vf=F9?{passive:!1}:!1,_De=function(e){return e.tagName==="TEXTAREA"},nU=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!_De(e)&&n[r]==="visible")},EDe=function(e){return nU(e,"overflowY")},SDe=function(e){return nU(e,"overflowX")},oU=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=aU(e,o);if(a){var i=iU(e,o),s=i[1],l=i[2];if(s>l)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},CDe=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},TDe=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},aU=function(e,r){return e==="v"?EDe(r):SDe(r)},iU=function(e,r){return e==="v"?CDe(r):TDe(r)},ADe=function(e,r){return e==="h"&&r==="rtl"?-1:1},RDe=function(e,r,n,o,a){var i=ADe(e,window.getComputedStyle(r).direction),s=i*o,l=n.target,c=r.contains(l),u=!1,d=s>0,h=0,f=0;do{if(!l)break;var g=iU(e,l),b=g[0],x=g[1],w=g[2],k=x-w-i*b;(b||k)&&aU(e,l)&&(h+=k,f+=b);var C=l.parentNode;l=C&&C.nodeType===Node.DOCUMENT_FRAGMENT_NODE?C.host:C}while(!c&&l!==document.body||c&&(r.contains(l)||r===l));return(d&&Math.abs(h)<1||!d&&Math.abs(f)<1)&&(u=!0),u},Q3=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},sU=function(e){return[e.deltaX,e.deltaY]},lU=function(e){return e&&"current"in e?e.current:e},NDe=function(e,r){return e[0]===r[0]&&e[1]===r[1]},DDe=function(e){return `
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
. block - interactivity - ` .concat(e, ` { pointer - events : none ; }
. allow - interactivity - ` ).concat(e, ` { pointer - events : all ; }
2025-11-16 23:10:11 +01:00
` )}, $ De=0,qf=[];function MDe(e){var r=E.useRef([]),n=E.useRef([0,0]),o=E.useRef(),a=E.useState( $ De++)[0],i=E.useState(tU)[0],s=E.useRef(e);E.useEffect(function(){s.current=e},[e]),E.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(a));var x=eDe([e.lockRef.current],(e.shards||[]).map(lU)).filter(Boolean);return x.forEach(function(w){return w.classList.add("allow-interactivity-".concat(a))}),function(){document.body.classList.remove("block-interactivity-".concat(a)),x.forEach(function(w){return w.classList.remove("allow-interactivity-".concat(a))})}}},[e.inert,e.lockRef.current,e.shards]);var l=E.useCallback(function(x,w){if("touches"in x&&x.touches.length===2||x.type==="wheel"&&x.ctrlKey)return!s.current.allowPinchZoom;var k=Q3(x),C=n.current,_="deltaX"in x?x.deltaX:C[0]-k[0],T="deltaY"in x?x.deltaY:C[1]-k[1],A,R=x.target,D=Math.abs(_)>Math.abs(T)?"h":"v";if("touches"in x&&D==="h"&&R.type==="range")return!1;var N=oU(D,R);if(!N)return!0;if(N?A=D:(A=D==="v"?"h":"v",N=oU(D,R)),!N)return!1;if(!o.current&&"changedTouches"in x&&(_||T)&&(o.current=A),!A)return!0;var M=o.current||A;return RDe(M,w,x,M==="h"?_:T)},[]),c=E.useCallback(function(x){var w=x;if(!(!qf.length||qf[qf.length-1]!==i)){var k="deltaY"in w?sU(w):Q3(w),C=r.current.filter(function(A){return A.name===w.type&&(A.target===w.target||w.target===A.shadowParent)&&NDe(A.delta,k)})[0];if(C&&C.should){w.cancelable&&w.preventDefault();return}if(!C){var _=(s.current.shards||[]).map(lU).filter(Boolean).filter(function(A){return A.contains(w.target)}),T=_.length>0?l(w,_[0]):!s.current.noIsolation;T&&w.cancelable&&w.preventDefault()}}},[]),u=E.useCallback(function(x,w,k,C){var _={name:x,delta:w,target:k,should:C,shadowParent:PDe(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function(T){return T!==_})},1)},[]),d=E.useCallback(function(x){n.current=Q3(x),o.current=void 0},[]),h=E.useCallback(function(x){u(x.type,sU(x),x.target,l(x,e.lockRef.current))},[]),f=E.useCallback(function(x){u(x.type,Q3(x),x.target,l(x,e.lockRef.current))},[]);E.useEffect(function(){return qf.push(i),e.setCallbacks({onScrollCapture:h,onWheelCapture:h,onTouchMoveCapture:f}),document.addEventListener("wheel",c,Vf),document.addEventListener("touchmove",c,Vf),document.addEventListener("touchstart",d,Vf),function(){qf=qf.filter(function(x){return x!==i}),document.removeEventListener("wheel",c,Vf),document.removeEventListener("touchmove",c,Vf),document.removeEventListener("touchstart",d,Vf)}},[]);var g=e.removeScrollBar,b=e.inert;return E.createElement(E.Fragment,null,b?E.createElement(i,{styles:DDe(a)}):null,g?E.createElement(kDe,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function PDe(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const zDe=cDe(eU,MDe);var A0=E.forwardRef(function(e,r){return E.createElement(K3,pl({},e,{ref:r,sideCar:zDe}))});A0.classNames=K3.classNames;function zo(e){return Object.keys(e)}function H9(e){return e&&typeof e=="object"&&!Array.isArray(e)}function V9(e,r){const n={...e},o=r;return H9(e)&&H9(r)&&Object.keys(r).forEach(a=>{H9(o[a])&&a in e?n[a]=V9(n[a],o[a]):n[a]=o[a]}),n}function IDe(e){return e.replace(/[A-Z]/g,r=> ` - $ { r . toLowerCase ( ) } ` )}function ODe(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc \( (.*?) \) $ /)?.[1].split("*")[0].trim()}function q9(e){const r=ODe(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 cU(e){return e==="0rem"?"0rem": ` calc ( $ { e } * var ( -- mantine - scale ) ) ` }function uU(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?cU(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-11-16 23:10:11 +01:00
$ { s }
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
2025-11-16 23:10:11 +01:00
$ { l } ` }function o7({color:e,theme:r,autoContrast:n}){return(typeof n=="boolean"?n:r.autoContrast)&&Au({color:e||r.primaryColor,theme:r}).isLight?"var(--mantine-color-black)":"var(--mantine-color-white)"}function FU(e,r){return o7({color:e.colors[e.primaryColor][M0(e,r)],theme:e,autoContrast:null})}function l2({theme:e,color:r,colorScheme:n,name:o=r,withColorValues:a=!0}){if(!e.colors[r])return{};if(n==="light"){const l=M0(e,"light"),c={[ ` -- mantine - color - $ { o } - text ` ]: ` var ( -- mantine - color - $ { o } - filled ) ` ,[ ` -- mantine - color - $ { o } - filled ` ]: ` var ( -- mantine - color - $ { o } - $ { l } ) ` ,[ ` -- mantine - color - $ { o } - filled - hover ` ]: ` var ( -- mantine - color - $ { o } - $ { l === 9 ? 8 : l + 1 } ) ` ,[ ` -- mantine - color - $ { o } - light ` ]:Xf(e.colors[r][l],.1),[ ` -- mantine - color - $ { o } - light - hover ` ]:Xf(e.colors[r][l],.12),[ ` -- mantine - color - $ { o } - light - color ` ]: ` var ( -- mantine - color - $ { o } - $ { l } ) ` ,[ ` -- mantine - color - $ { o } - outline ` ]: ` var ( -- mantine - color - $ { o } - $ { l } ) ` ,[ ` -- mantine - color - $ { o } - outline - hover ` ]:Xf(e.colors[r][l],.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=M0(e,"dark"),s={[ ` -- 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 ` ]:Xf(e.colors[r][Math.max(0,i-2)],.15),[ ` -- mantine - color - $ { o } - light - hover ` ]:Xf(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 ` ]:Xf(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],...s}:s}function K $ e(e){return!!e&&typeof e=="object"&&"mantine-virtual-color"in e}function Kf(e,r,n){zo(r).forEach(o=>Object.assign(e,{[ ` -- mantine - $ { n } - $ { o } ` ]:r[o]}))}const HU=e=>{const r=M0(e,"light"),n=e.defaultRadius in e.radius?e.radius[e.defaultRadius]:Me(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":FU(e,"light"),"--mantine-color-bright":"var(--mantine-color-black)","--mantine-color-text
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
$ { e } [ data - mantine - color - scheme = "dark" ] { -- mantine - color - scheme : dark ; }
$ { e } [ data - mantine - color - scheme = "light" ] { -- mantine - color - scheme : light ; }
2025-11-16 23:10:11 +01:00
` }function VU({cssVariablesSelector:e,deduplicateCssVariables:r}){const n=vo(),o=yp(),a=N $ e(),i=Z $ e({theme:n,generator:a}),s=e===":root"&&r,l=s?Q $ e(i):i,c=X $ e(l,e);return c?y.jsx("style",{"data-mantine-styles":!0,nonce:o?.(),dangerouslySetInnerHTML:{__html: ` $ { c } $ { s ? "" : J$e ( e ) } ` }}):null}VU.displayName="@mantine/CssVariables";function Zf(e,r){const n=typeof window<"u"&&"matchMedia"in window&&window.matchMedia("(prefers-color-scheme: dark)")?.matches,o=e!=="auto"?e:n?"dark":"light";r()?.setAttribute("data-mantine-color-scheme",o)}function eMe({manager:e,defaultColorScheme:r,getRootElement:n,forceColorScheme:o}){const a=E.useRef(null),[i,s]=E.useState(()=>e.get(r)),l=o||i,c=E.useCallback(d=>{o||(Zf(d,n),s(d),e.set(d))},[e.set,l,o]),u=E.useCallback(()=>{s(r),Zf(r,n),e.clear()},[e.clear,r]);return E.useEffect(()=>(e.subscribe(c),e.unsubscribe),[e.subscribe,e.unsubscribe]), $ 0(()=>{Zf(e.get(r),n)},[]),E.useEffect(()=>{if(o)return Zf(o,n),()=>{};o===void 0&&Zf(i,n),typeof window<"u"&&"matchMedia"in window&&(a.current=window.matchMedia("(prefers-color-scheme: dark)"));const d=h=>{i==="auto"&&Zf(h.matches?"dark":"light",n)};return a.current?.addEventListener("change",d),()=>a.current?.removeEventListener("change",d)},[i,o]),{colorScheme:l,setColorScheme:c,clearColorScheme:u}}function tMe({respectReducedMotion:e,getRootElement:r}){ $ 0(()=>{e&&r()?.setAttribute("data-respect-reduced-motion","true")},[e])}function i7({theme:e,children:r,getStyleNonce:n,withStaticClasses:o=!0,withGlobalClasses:a=!0,deduplicateCssVariables:i=!0,withCssVariables:s=!0,cssVariablesSelector:l=":root",classNamesPrefix:c="mantine",colorSchemeManager:u=q $ e(),defaultColorScheme:d="light",getRootElement:h=()=>document.documentElement,cssVariablesResolver:f,forceColorScheme:g,stylesTransform:b,env:x}){const{colorScheme:w,setColorScheme:k,clearColorScheme:C}=eMe({defaultColorScheme:d,forceColorScheme:g,manager:u,getRootElement:h});return tMe({respectReducedMotion:e?.respectReducedMotion||!1,getRootElement:h}),y.jsx(a2.Provider,{value:{colorScheme:w,setColorScheme:k,clearColorScheme:C,getRootElement:h,classNamesPrefix:c,getStyleNonce:n,cssVariablesResolver:f,cssVariablesSelector:l,withStaticClasses:o,stylesTransform:b,env:x},children:y.jsxs(BU,{theme:e,children:[s&&y.jsx(VU,{cssVariablesSelector:l,deduplicateCssVariables:i}),a&&y.jsx(G $ e,{}),r]})})}i7.displayName="@mantine/core/MantineProvider";function s7({classNames:e,styles:r,props:n,stylesCtx:o}){const a=vo();return{resolvedClassNames:n2({theme:a,classNames:e,props:n,stylesCtx:o||void 0}),resolvedStyles:o2({theme:a,styles:r,props:n,stylesCtx:o||void 0})}}const rMe={always:"mantine-focus-always",auto:"mantine-focus-auto",never:"mantine-focus-never"};function nMe({theme:e,options:r,unstyled:n}){return hs(r?.focusable&&!n&&(e.focusClassName||rMe[e.focusRing]),r?.active&&!n&&e.activeClassName)}function oMe({selector:e,stylesCtx:r,options:n,props:o,theme:a}){return n2({theme:a,classNames:n?.classNames,props:n?.props||o,stylesCtx:r})[e]}function qU({selector:e,stylesCtx:r,theme:n,classNames:o,props:a}){return n2({theme:n,classNames:o,props:a,stylesCtx:r})[e]}function aMe({rootSelector:e,selector:r,className:n}){return e===r?n:void 0}function iMe({selector:e,classes:r,unstyled:n}){return n?void 0:r[e]}function sMe({themeName:e,classNamesPrefix:r,selector:n,withStaticClass:o}){return o===!1?[]:e.map(a=> ` $ { r } - $ { a } - $ { n } ` )}function lMe({themeName:e,theme:r,selector:n,props:o,stylesCtx:a}){return e.map(i=>n2({theme:r,classNames:r.components[i]?.classNames,props:o,stylesCtx:a})?.[n])}function cMe({options:e,classes:r,selector:n,unstyled:o}){return e?.variant&&!o?r[ ` $ { n } -- $ { e . variant } ` ]:void 0}function uMe({theme:e,options:r,themeName:n,selector:o,classNamesPrefix:a,classNames:i,classes:s,unstyled:l,className:c,rootSelector:u,props:d,stylesCtx:h,withStaticClasses:f,headless:g,transformedStyles:b}){return hs(nMe({theme:e,options:r,unstyled:l||g}),lMe({theme:e,themeName:n,selector:o,props:d,stylesCtx:h}),cMe({options:r,classes:s,selector:o,unstyled:l}),qU({selector:o,stylesCtx:h,theme:e,classNames:i,props:d}),qU({selector:o,sty
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
-- colors - likec4 - tag - bg : $ { r } ;
-- colors - likec4 - tag - bg - hover : color - mix ( in srgb , $ { r } , var ( -- colors - likec4 - mix - color ) 20 % ) ;
2025-11-16 23:10:11 +01:00
` ;if(!tLe.includes(r))return"";let n="12";return["mint","grass","lime","yellow","amber"].includes(r)&&(n="dark-2"), `
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
-- colors - likec4 - tag - border : var ( -- colors - $ { r } - 8 ) ;
-- colors - likec4 - tag - bg : var ( -- colors - $ { r } - 9 ) ;
-- colors - likec4 - tag - bg - hover : var ( -- colors - $ { r } - 10 ) ;
-- colors - likec4 - tag - text : var ( -- colors - $ { r } - $ { n } ) ;
2025-11-16 23:10:11 +01:00
` };function nLe(e,r){return!e||fp(e)?"":En(M9(e),pNe(([n,o])=>[ ` : is ( $ { r } [ data - likec4 - tag = "${n}" ] ) { ` ,rLe(o),"}"]),qq( `
` ))}function oLe({children:e,rootSelector:r}){const n=eLe().tags,o=nLe(n,r);return y.jsxs(qG.Provider,{value:n,children:[o!==""&&y.jsx(aLe,{stylesheet:o}),e]})}const aLe=E.memo(({stylesheet:e})=>{const r=yp()?.();return y.jsx("style",{"data-likec4-tags":!0,type:"text/css",dangerouslySetInnerHTML:{__html:e},nonce:r})});function iLe(e){return E.useContext(qG)[e]??{color:"tomato"}}function UG(){return fi().replace("mantine-","likec4-")}var sLe="css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borde
$ { i . message } ` )}else throw new Error( ` Invalid target : "${n}" is not a valid target from the root node . Did you mean ".${n}" ? ` )})}function wX(e){const r=mX(e.config.target);return r?{target:r.map(n=>typeof n=="string"?cw(e.parent,n):n)}:e.parent.initial}function $ p(e){return e.type==="history"}function kX(e){const r=_X(e);for(const n of r)for(const o of ey(n,e))r.add(o);return r}function _X(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 gm(o))n(a)}}return n(e),r}function ym(e,r){if(lw(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 cw(e,r){if(typeof r=="string"&&lw(r))try{return e.machine.getStateNodeById(r)}catch{}const n=MS(r).slice();let o=e;for(;n.length;){const a=n.shift();if(!a.length)break;o=ym(o,a)}return o}function uw(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=>ym(e,a)).filter(Boolean);return[e.machine.root,e].concat(o,n.reduce((a,i)=>{const s=ym(e,i);if(!s)return a;const l=uw(s,r[i]);return a.concat(l)},[]))}function ZLe(e,r,n,o){const a=ym(e,r).next(n,o);return!a||!a.length?e.next(n,o):a}function QLe(e,r,n,o){const a=Object.keys(r),i=ym(e,a[0]),s=BS(i,r[a[0]],n,o);return!s||!s.length?e.next(n,o):s}function JLe(e,r,n,o){const a=[];for(const i of Object.keys(r)){const s=r[i];if(!s)continue;const l=ym(e,i),c=BS(l,s,n,o);c&&a.push(...c)}return a.length?a:e.next(n,o)}function BS(e,r,n,o){return typeof r=="string"?ZLe(e,r,n,o):Object.keys(r).length===1?QLe(e,r,n,o):JLe(e,r,n,o)}function eBe(e){return Object.keys(e.states).map(r=>e.states[r]).filter(r=>r.type==="history")}function Ou(e,r){let n=e;for(;n.parent&&n.parent!==r;)n=n.parent;return n.parent===r}function tBe(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 EX(e,r,n){const o=new Set;for(const a of e){let i=!1;const s=new Set;for(const l of o)if(tBe(HS([a],r,n),HS([l],r,n)))if(Ou(a.source,l.source))s.add(l);else{i=!0;break}if(!i){for(const l of s)o.delete(l);o.add(a)}}return Array.from(o)}function rBe(e){const[r,...n]=e;for(const o of ey(r,void 0))if(n.every(a=>Ou(a,o)))return o}function FS(e,r){if(!e.target)return[];const n=new Set;for(const o of e.target)if( $ p(o))if(r[o.id])for(const a of r[o.id])n.add(a);else for(const a of FS(wX(o),r))n.add(a);else n.add(o);return[...n]}function SX(e,r){const n=FS(e,r);if(!n)return;if(!e.reenter&&n.every(a=>a===e.source||Ou(a,e.source)))return e.source;const o=rBe(n.concat(e.source));if(o)return o;if(!e.reenter)return e.source.machine.root}function HS(e,r,n){const o=new Set;for(const a of e)if(a.target?.length){const i=SX(a,n);a.reenter&&a.source===i&&o.add(i);for(const s of r)Ou(s,i)&&o.add(s)}return[...o]}function nBe(e,r){if(e.length!==r.size)return!1;for(const n of e)if(!r.has(n))return!1;return!0}function VS(e,r,n,o,a,i){if(!e.length)return r;const s=new Set(r._nodes);let l=r.historyValue;const c=EX(e,s,l);let u=r;a||([u,l]=sBe(u,o,n,c,s,l,i,n.actionExecutor)),u=vm(u,o,n,c.flatMap(h=>h.actions),i,void 0),u=aBe(u,o,n,c,s,i,l,a);const d=[...s];u.status==="done"&&(u=vm(u,o,n,d.sort((h,f)=>f.order-h.order).flatMap(h=>h.exit),i,void 0));try{return l===r.historyValue&&nBe(r._nodes,s)?u:Mp(u,{_nodes:d,historyValue:l})}catch(h){throw h}}function oBe(e,r,n,o,a){if(o.output===void 0)return;const i= $ S(a.id,a.output!==void 0&&a.parent?PS(a.output,e.context,r,n.self):void 0);return PS(o.output,e.context,i,n.self)}function aBe(e,r,n,o,a,i,s,l){let c=e;const u=new Set,d=new Set;iBe(o,s,d,u),l&&d.add(e.machine.root);const h=new Set;for(const f of[...u].sort((g,b)=>g.order-b.order)){a.add(f);const g=[];g.push(...f.entry);for(const b of f.invoke)g.push(aw(b.src,{...b,syncSnapshot:!!b.onSnapshot}));if(d.has(f)){const b=f.initial.actions;g.
$ { h . message } ` )}if(d){a.push(...l.actions),i=l;break}}return i?[i]:void 0}get events(){return xm(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 SBe="#";class YS{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 hw(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 YS(this.config,{actions:{...n,...r.actions},guards:{...o,...r.guards},actors:{...a,...r.actors},delays:{...i,...r.delays}})}resolveState(r){const n=uBe(this.root,r.value),o=sw(uw(this.root,n));return dw({_nodes:[...o],context:r.context||{},children:{},status:LS(o,this.root)?"done":r.status||"active",output:r.output,error:r.error,historyValue:r.historyValue},this)}transition(r,n,o){return US(r,n,o,[]).snapshot}microstep(r,n,o){return US(r,n,o,[]).microstates}getTransitionData(r,n){return BS(this.root,r.value,r,n)||[]}getPreInitialState(r,n,o){const{context:a}=this.config,i=dw({context:typeof a!="function"&&a?a:{},_nodes:[this.root],children:{},status:"active"},this);return typeof a=="function"?vm(i,n,r,[Zt(({spawn:s,event:l,self:c})=>a({spawn:s,input:l.input,self:c}))],o,void 0):i}getInitialSnapshot(r,n){const o=cX(n),a=[],i=this.getPreInitialState(r,o,a),s=VS([{target:[..._X(this.root)],source:this.root,reenter:!0,actions:[],eventType:null,toJSON:null}],i,r,o,!0,a),{snapshot:l}=US(s,o,r,a);return l}start(r){Object.values(r.children).forEach(n=>{n.getSnapshot().status==="active"&&n.start()})}getStateNodeById(r){const n=MS(r),o=n.slice(1),a=lw(n[0])?n[0].slice(SBe.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 cw(i,o)}get definition(){return this.root.definition}toJSON(){return this.definition}getPersistedSnapshot(r,n){return bBe(r,n)}restoreSnapshot(r,n){const o={},a=r.children;Object.keys(a).forEach(h=>{const f=a[h],g=f.snapshot,b=f.src,x=typeof b=="string"?zS(this,b):b;if(!x)return;const w=mm(x,{id:h,parent:n.self,syncSnapshot:f.syncSnapshot,snapshot:g,src:b,systemId:f.systemId});o[h]=w});function i(h,f){if(f instanceof hw)return f;try{return h.machine.getStateNodeById(f.id)}catch{}}function s(h,f){if(!f||typeof f!="object")return{};const g={};for(const b in f){const x=f[b];for(const w of x){const k=i(h,w);k&&(g[b]??=[],g[b].push(k))}}return g}const l=s(this.root,r.historyValue),c=dw({...r,children:o,_nodes:Array.from(sw(uw(this.root,r.value))),historyValue:l},this),u=new Set;function d(h,f){if(!u.has(h)){u.add(h);for(const g in h){const b=h[g];if(b&&typeof b=="object"){if("xstate $ $ type"in b&&b.xstate $ $ type===OS){h[g]=f[b.id];continue}d(b,f)}}}}return d(c.context,o),c}}function CBe(e,r,n,o,{event:a}){const i=typeof a=="function"?a(n,o):a;return[r,{event:i},void 0]}function TBe(e,{event:r}){e.defer(()=>e.emit(r))}function GS(e){function r(n,o){}return r.type="xstate.emit",r.event=e,r.resolve=CBe,r.execute=TBe,r}let XS=(function(e){return e.Parent="#_parent",e.Internal="#_internal",e})({});function ABe(e,r,n,o,{to:a,event:i,id:s,delay:l},c){const u=r.machine.implementations.delays;if(typeof i=="string")throw
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
[ data - motion - pop - id = "${a}" ] {
position : absolute ! important ;
width : $ { u } px ! important ;
height : $ { d } px ! important ;
$ { b } px ! important ;
2025-11-16 23:10:11 +01:00
top : $ { h } 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-11-16 23:10:11 +01:00
` ),()=>{w.contains(x)&&w.removeChild(x)}},[r]),y.jsx(zVe,{isPresent:r,childRef:i,sizeRef:s,children:E.cloneElement(e,{ref:c})})}const OVe=({children:e,initial:r,isPresent:n,onExitComplete:o,custom:a,presenceAffectsLayout:i,mode:s,anchorX:l,root:c})=>{const u=Dm(jVe),d=E.useId();let h=!0,f=E.useMemo(()=>(h=!1,{id:d,initial:r,isPresent:n,custom:a,onExitComplete:g=>{u.set(g,!0);for(const b of u.values())if(!b)return;o&&o()},register:g=>(u.set(g,!1),()=>u.delete(g))}),[n,u,o]);return i&&h&&(f={...f}),E.useMemo(()=>{u.forEach((g,b)=>u.set(b,!1))},[n]),E.useEffect(()=>{!n&&!u.size&&o&&o()},[n]),s==="popLayout"&&(e=y.jsx(IVe,{isPresent:n,anchorX:l,root:c,children:e})),y.jsx(Tw.Provider,{value:f,children:e})};function jVe(){return new Map}function PZ(e=!0){const r=E.useContext(Tw);if(r===null)return[!0,null];const{isPresent:n,onExitComplete:o,register:a}=r,i=E.useId();E.useEffect(()=>{if(e)return a(i)},[e]);const s=E.useCallback(()=>e&&o&&o(i),[i,o,e]);return!n&&o?[!1,s]:[!0]}const Aw=e=>e.key||"";function zZ(e){const r=[];return E.Children.forEach(e,n=>{E.isValidElement(n)&&r.push(n)}),r}const Qn=({children:e,custom:r,initial:n=!0,onExitComplete:o,presenceAffectsLayout:a=!0,mode:i="sync",propagate:s=!1,anchorX:l="left",root:c})=>{const[u,d]=PZ(s),h=E.useMemo(()=>zZ(e),[e]),f=s&&!u?[]:h.map(Aw),g=E.useRef(!0),b=E.useRef(h),x=Dm(()=>new Map),[w,k]=E.useState(h),[C,_]=E.useState(h);tT(()=>{g.current=!1,b.current=h;for(let R=0;R<C.length;R++){const D=Aw(C[R]);f.includes(D)?x.delete(D):x.get(D)!==!0&&x.set(D,!1)}},[C,f.length,f.join("-")]);const T=[];if(h!==w){let R=[...h];for(let D=0;D<C.length;D++){const N=C[D],M=Aw(N);f.includes(M)||(R.splice(D,0,N),T.push(N))}return i==="wait"&&T.length&&(R=T),_(zZ(R)),k(h),null}const{forceRender:A}=E.useContext(fy);return y.jsx(y.Fragment,{children:C.map(R=>{const D=Aw(R),N=s&&!u?!1:h===C||f.includes(D),M=()=>{if(x.has(D))x.set(D,!0);else return;let O=!0;x.forEach(F=>{F||(O=!1)}),O&&(A?.(),_(b.current),s&&d?.(),o&&o())};return y.jsx(OVe,{isPresent:N,initial:!g.current||n?void 0:!1,custom:r,presenceAffectsLayout:a,mode:i,root:c,onExitComplete:N?void 0:M,anchorX:l,children:R},D)})})},LVe=E.createContext(null);function BVe(){const e=E.useRef(!1);return tT(()=>(e.current=!0,()=>{e.current=!1}),[]),e}function FVe(){const e=BVe(),[r,n]=E.useState(0),o=E.useCallback(()=>{e.current&&n(r+1)},[r]);return[E.useCallback(()=>qr.postRender(o),[o]),r]}const HVe=e=>!e.isLayoutDirty&&e.willUpdate(!1);function VVe(){const e=new Set,r=new WeakMap,n=()=>e.forEach(HVe);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 IZ=e=>e===!0,qVe=e=>IZ(e===!0)||e==="id", $ m=({children:e,id:r,inherit:n=!0})=>{const o=E.useContext(fy),a=E.useContext(LVe),[i,s]=FVe(),l=E.useRef(null),c=o.id||a;l.current===null&&(qVe(n)&&c&&(r=r?c+"-"+r:c),l.current={id:r,group:IZ(n)&&o.group||VVe()});const u=E.useMemo(()=>({...l.current,forceRender:i}),[s]);return y.jsx(fy.Provider,{value:u,children:e})},rT=E.createContext({strict:!1});function nT(e){for(const r in e)Rm[r]={...Rm[r],...e[r]}}function UVe({children:e,features:r,strict:n=!1}){const[,o]=E.useState(!oT(r)),a=E.useRef(void 0);if(!oT(r)){const{renderer:i,...s}=r;a.current=i,nT(s)}return E.useEffect(()=>{oT(r)&&r().then(({renderer:i,...s})=>{nT(s),a.current=i,o(!0)})},[]),y.jsx(rT.Provider,{value:{renderer:a.current,strict:n},children:e})}function oT(e){return typeof e=="function"}const WVe=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 Rw(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 ,
color - mix ( in srgb , var ( -- likec4 - palette - fill ) 60 % , transparent ) ,
color - mix ( in srgb , var ( -- likec4 - palette - fill ) 20 % , transparent ) 8 px ,
color - mix ( in srgb , var ( -- likec4 - palette - fill ) 14 % , transparent ) 20 px ,
transparent 80 px
) ,
linear - gradient ( 180 deg , var ( -- likec4 - palette - fill ) , var ( -- likec4 - palette - fill ) 4 px , transparent 4 px )
2025-11-16 23:10:11 +01:00
` ,"& .react-flow__attribution":{display:"none"}}), $ We=be({flex:0,cursor:"move"}),MWe=be({display:"block",fontFamily:"likec4.element",fontOpticalSizing:"auto",fontStyle:"normal",fontWeight:600,fontSize:"24px",lineHeight:"xs"}), $ T="40px",PWe=be({flex: ` 0 0 $ { $T } ` ,height: $ T,width: $ T,display:"flex",alignItems:"center",justifyContent:"center",alignSelf:"flex-start",cursor:"move",_dark:{mixBlendMode:"hard-light"},"& :where(svg, img)":{width:"100%",height:"auto",maxHeight:"100%",pointerEvents:"none",filter: `
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
drop - shadow ( 0 0 3 px rgb ( 0 0 0 / 10 % ) )
drop - shadow ( 0 1 px 8 px rgb ( 0 0 0 / 5 % ) )
drop - shadow ( 1 px 1 px 16 px rgb ( 0 0 0 / 2 % ) )
2025-11-16 23:10:11 +01:00
` },"& img":{objectFit:"contain"}}),Hw="--view-title-color",Vw="--icon-color",zWe=be({width:"100%",background:"mantine.colors.body",borderRadius:"sm",padding:"[10px 8px]",transition:"fast",border:"1px dashed",borderColor:"mantine.colors.defaultBorder",[Hw]:"{colors.mantine.colors.dark[1]}",_hover:{background:"mantine.colors.defaultHover",[Vw]:"{colors.mantine.colors.dark[1]}",[Hw]:"{colors.mantine.colors.defaultColor}"},_dark:{background:"mantine.colors.dark[6]"},_light:{[Vw]:"{colors.mantine.colors.gray[6]}",[Hw]:"{colors.mantine.colors.gray[7]}",_hover:{[Vw]:"{colors.mantine.colors.gray[7]}"}},"& .mantine-ThemeIcon-root":{transition:"fast",color: ` [ var ( $ { Vw } , { 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)"}}),IWe=be({transition:"fast",color: ` [ var ( $ { Hw } , { colors . mantine . colors . gray [ 7 ] } ) ] ` ,fontSize:"15px",fontWeight:500,lineHeight:"1.4"}),OWe=be({flex:1,display:"flex",flexDirection:"column",justifyContent:"stretch",overflow:"hidden",gap:"sm"}),jWe=be({background:"mantine.colors.gray[1]",borderRadius:"sm",flexWrap:"nowrap",gap:"1.5",padding:"1",_dark:{background:"mantine.colors.dark[7]"}}),LWe=be({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]"}}}),BWe=be({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"}}}),FWe=be({flex:1,display:"grid",gridTemplateColumns:"min-content 1fr",gridAutoRows:"min-content max-content",gap:"[24px 20px]",alignItems:"baseline",justifyItems:"stretch"}),HWe=be({justifySelf:"end",textAlign:"right",userSelect:"none"}),VWe=be({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]"}}),qWe=[["path",{d:"M6 9l6 6l6 -6",key:"svg-0"}]],MT=Nt("outline","chevron-down","ChevronDown",qWe),UWe=[["path",{d:"M9 6l6 6l-6 6",key:"svg-0"}]],qu=Nt("outline","chevron-right","ChevronRight",UWe);function EJ({children:e}){return y.jsx(y.Fragment,{children:e})}function SJ({value:e,isExpanded:r}){const[n,o]=E.useState(!1),a=E.useRef(null);return E.useEffect(()=>{a.current&&o(a.current.scrollWidth>a.current.clientWidth)},[e]),y.jsx(co,{label:n&&!r?e:null,multiline:!0,w:300,withinPortal:!0,children:y.jsx(ft,{ref:a,component:"div",className:be({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 WWe({values:e,isExpanded:r,onToggle:n}){return r?y.jsx(Xo,{gap:"xs",children:e.map((o,a)=>y.jsxs(mc,{align:"center",gap:"xs",children:[y.jsx(ft,{className:be({fontSize:"xs",color:"mantine.colors.gray[5]",fontWeight:500,flexShrink:0,_dark:{color:"mantine.colors.dark[3]"}}),children:"•"}),y.jsx(Re,{className:be({minHeight:"32px",display:"flex",alignItems:"center",flex:1}),children:y.jsx(SJ,{value:o,isExpanded:!0})})]},a))}):y.jsx(Re,{className:be({minHeight:"32px",display:"flex",alignItems:"center",padding:"xs",gap:"xs",flexWrap:"wrap",minWidth:0,overflow:"hidden"}),children:e.map((o,a)=>y.jsxs(mc,{align:"center",gap:"xs",style:{minWidth:0},children:[y.jsx
2025-11-07 15:04:16 +01:00
` )?r.split( `
2025-11-16 23:10:11 +01:00
` ).map(l=>l.trim()).filter(Boolean):[r],o=n.length>1,[a,i]=E.useState(!1),s=()=>{i(!a)};return y.jsxs(y.Fragment,{children:[o?y.jsx(Er,{onClick:s,className:be({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(mc,{align:"center",gap:"xs",children:[y.jsxs(ft,{component:"span",size:"xs",fw:700,children:[e,":"]}),y.jsx(ft,{component:"span",className:be({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(MT,{size:12}):y.jsx(qu,{size:12})]})}):y.jsxs(ft,{component:"div",className:be({fontSize:"xs",color:"mantine.colors.dimmed",justifySelf:"end",textAlign:"right",userSelect:"none",whiteSpace:"nowrap",padding:"[4px 8px]",fontWeight:700}),children:[e,":"]}),y.jsx(Re,{className:be({justifySelf:"stretch",alignSelf:"start"}),children:o?y.jsx(WWe,{values:n,isExpanded:a,onToggle:s}):y.jsx(Re,{className:be({minHeight:"32px",display:"flex",alignItems:"center"}),children:y.jsx(SJ,{value:n[0]||"",isExpanded:a})})})]})}const GWe=be({"&[data-level='1']":{marginBottom:"sm"}}),XWe=be({cursor:"default",marginTop:"0",marginBottom:"0"}),CJ=be({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)"}}}),KWe=et(CJ),ZWe=et(CJ,be({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}})),QWe=[["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"}]],PT=Nt("outline","info-circle","InfoCircle",QWe),JWe=[["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"}]],eYe=Nt("outline","target","Target",JWe),tYe=[["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"}]],Ri=Nt("outline","zoom-scan","ZoomScan",tYe),rYe=({node:e})=>y.jsxs(pn,{className:KWe,gap:6,align:"baseline",wrap:"nowrap",children:[y.jsxs(ft,{component:"div",fz:11,c:"dimmed",children:[e.kind,":"]}),y.jsx(ft,{component:"div",fz:"sm",fw:"500",children:e.title})]}),nYe=({instance:e})=>{const r=Qt(),n=r.currentView.id,o=[...e.views()];return y.jsxs(pn,{className:ZWe,gap:4,children:[y.jsx(Ba,{color:"gray",variant:"transparent",size:"xs",flex:0,children:y.jsx(eYe,{stroke:1.2})}),y.jsx(ft,{component:"div",fz:"sm",fw:"500",flex:"1 1 100%",children:e.title}),y.jsxs(Re,{onClick:Cn,pos:"relative","data-no-transform":!0,flex:0,children:[o.length===0&&y.jsx(Kn,{size:"compact-xs",variant:"transparent",color:"gray",disabled:!0,children:"no views"}),o.length>0&&y.jsxs(hn,{shadow:"md",withinPortal:!1,position:"bottom-start",offset:0,closeOnClickOutside:!0,clickOutsideEvents:["pointerdown","mousedown","click"],closeOnEscape:!0,trapFocus:!0,children:[y.jsx(hn.Target,{children:y.jsxs(Kn,{size:"compact-xs",variant:"subtle",color:"gray",children:[o.length," vi
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the 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-11-16 23:10:11 +01:00
l 0 , $ { s }
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
a $ { a } , $ { i } 0 , 0 , 0 $ { e } 0
2025-11-16 23:10:11 +01:00
l 0 , $ { - s }
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
z
2025-11-16 23:10:11 +01:00
` .replace(/ \s +/g," ").trim(),ry:i,rx:a}}function Wee(e,r,n=.185){const o=r,a=Math.round(o/2),i=Uu(o/2*n),s=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-11-16 23:10:11 +01:00
l $ { s } , 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-11-16 23:10:11 +01:00
z ` .replace(/ \s +/g," ").trim(),ry:a,rx:i}}const Up={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 Yee({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-Up.width-6,y:n-Up.height,width:Up.width,height:Up.height,viewBox: ` 0 0 $ { Up . width } $ { Up . height } ` ,"data-likec4-fill":"mix-stroke",children:y.jsx("path",{strokeWidth:0,d:Up.path})})]});case"queue":{const{path:o,rx:a,ry:i}=Wee(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}=Uee(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 Zi(e)}}function FGe({shape:e,w:r,h:n}){let o;switch(e){case"queue":o=y.jsx("path",{d:Wee(r,n).path});break;case"storage":case"cylinder":{o=y.jsx("path",{d:Uee(r,n).path});break}default:{o=y.jsx("rect",{x:-1,y:-1,width:r+2,height:n+2,rx:6});break}}return y.jsx("g",{className:"likec4-shape-outline",children:o})}function HGe({multiple:e,withOutLine:r}){return y.jsxs("div",{className:eJ({shapetype:"html"}),children:[e&&y.jsx("div",{className:"likec4-shape-multiple"}),r&&y.jsx("div",{className:"likec4-shape-outline"})]})}function Om({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 s=e.style?.multiple??!1;if(e.shape==="rectangle")return y.jsx(HGe,{multiple:s,withOutLine:o});const l=eJ({shapetype:"svg"});return y.jsxs(y.Fragment,{children:[s&&y.jsx("svg",{className:l,"data-likec4-shape-multiple":"true",viewBox: ` 0 0 $ { a } $ { i } ` ,children:y.jsx(Yee,{shape:e.shape,w:a,h:i})}),y.jsxs("svg",{className:l,viewBox: ` 0 0 $ { a } $ { i } ` ,children:[o&&y.jsx(FGe,{shape:e.shape,w:a,h:i}),y.jsx(Yee,{shape:e.shape,w:a,h:i})]})]})}const Wp=E.forwardRef(({value:e,textScale:r=1,uselikec4palette:n=!1,hideIfEmpty:o=!1,emptyText:a="no content",className:i,style:s,fontSize:l,...c},u)=>{if(e.isEmpty&&o)return null;const d=e.nonEmpty?e.isMarkdown?{dangerouslySetInnerHTML:{__html:e.html}}:{children:y.jsx("p",{children:e.text})}:{children:y.jsx(ft,{component:"span",fz:"xs",c:"dimmed",style:{userSelect:"none"},children:a})};return y.jsx(zr,{ref:u,...c,className:et(ZUe({uselikec4palette:n,value:e.isMarkdown?"markdown":"plaintext"}),i),style:{...s,...l&&{"--text-fz": ` var ( -- font - sizes - $ { l } , var ( -- font - sizes - md ) ) ` },"--mantine-scale":r},...d})});Wp.displayName="Markdown";const Gee=E.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,ref:n,className:et(e,XUe(),"likec4-element")})),Xee=({data:e,...r})=>y.jsx(Xx,{element:e,...r}),Kee=E.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,className:et(e,"likec4-element-node-content"),ref:n})),Zee=E.forwardRef(({data:{title:e,style:r},className:n,...o},a)=>{const{size:i}=Jv(r),s=i==="sm"||i==="xs";return y.jsx(ft,{component:"div",...o,className:e
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
drop - shadow ( 0 2 px 3 px rgb ( 0 0 0 / 22 % ) )
drop - shadow ( 0 1 px 8 px rgb ( 0 0 0 / 10 % ) )
2025-11-16 23:10:11 +01:00
` });const tJe=be({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)"}),rJe=[["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"}]],nJe=Nt("outline","help-circle","HelpCircle",rJe),oJe=[["path",{d:"M7 7l10 10",key:"svg-0"}],["path",{d:"M17 8l0 9l-9 0",key:"svg-1"}]],aJe=Nt("outline","arrow-down-right","ArrowDownRight",oJe),iJe=({value:e})=>{const{title:r,color:n="primary",shape:o="rectangle"}=e,[a,i]=E.useState(null),s=Qt(),l=300,c=200;return y.jsx(W2,{shadow:"none",px:"xs",py:"sm",className:et(eJe),"data-likec4-color":n,onMouseEnter:()=>{i(null),s.highlightNotation(e)},onMouseLeave:()=>{i(null),s.unhighlightNotation()},children:y.jsxs(pn,{gap:"sm",align:"stretch",wrap:"nowrap",children:[y.jsx(Re,{flex:"0 0 70px",style:{position:"relative",width:70,height:XRe(70*(c/l),0)},children:y.jsx(Om,{data:{shape:o,width:l,height:c}})}),y.jsxs(Xo,{gap:4,flex:1,children:[y.jsx(pn,{gap:4,flex:"0 0 auto",children:e.kinds.map(u=>y.jsx(vl,{className:et(tJe),onMouseEnter:()=>{i(u),s.highlightNotation(e,u)},onMouseLeave:()=>{i(null),s.highlightNotation(e)},opacity:Vq(a)&&a!==u?.25:1,children:u},u))}),y.jsx(ft,{component:"div",fz:"sm",fw:500,lh:"1.25",style:{textWrap:"pretty"},children:r})]})]})})},sJe=e=>({id:e.view.id,notations:e.view.notation?.nodes??[]}),lJe=E.memo(()=>{const e=Iw(l=>l.height),{id:r,notations:n}=vs(sJe),[o,a]=c $ e({key:"notation-webview-collapsed",defaultValue:!0}),i=n.length>0,s=qm();return y.jsxs(Qn,{children:[!i&&y.jsx(Ei.div,{initial:{opacity:.75,translateX:"50%"},animate:{opacity:1,translateX:0},exit:{translateX:"100%",opacity:.6},className:QA,children:y.jsx(co,{label:"View has no notations",color:"orange",...s,children:y.jsx(Ba,{size:"lg",variant:"light",color:"orange",radius:"md",children:y.jsx(zte,{})})})},"empty"),i&&o&&y.jsx(Ei.div,{initial:{opacity:.75,translateX:"50%"},animate:{opacity:1,translateX:0},exit:{translateX:"100%",opacity:.6},className:QA,children:y.jsx(co,{label:"Show notation",color:"dark",fz:"xs",...s,children:y.jsx(br,{size:"lg",variant:"default",color:"gray",className:ZQe,onClick:()=>a(!1),children:y.jsx(nJe,{stroke:1.5})})})},"collapsed"),i&&!o&&y.jsx(Ei.div,{initial:{opacity:.75,scale:.2},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.25},className:et("react-flow__panel",QA),style:{transformOrigin:"bottom right"},children:y.jsx(om,{radius:"sm",withBorder:!0,shadow:"lg",className:QQe,children:y.jsxs(Sp,{defaultValue:"first",radius:"xs",children:[y.jsxs(Y0,{children:[y.jsx(br,{size:"md",variant:"subtle",color:"gray",ml:2,style:{alignSelf:"center"},onClick:()=>a(!0),children:y.jsx(aJe,{stroke:2})}),y.jsx(pm,{value:"first",fz:"xs",children:"Elements"}),y.jsx(pm,{value:"second",fz:"xs",disabled:!0,children:"Relationships"})]}),y.jsx(yc,{value:"first",className:JQe,hidden:o,children:y.jsx(pa,{viewportProps:{style:{maxHeight: ` min ( 40 vh , $ { Math . max ( e - 60 , 50 ) } px ) ` }},children:y.jsx(Xo,{gap:0,children:n.map((l,c)=>y.jsx(iJe,{value:l},c))})})})]})})},r)]})}),cJe=E.memo(()=>{const[{layout:e,isActive:r},{toggleCompare:n}]=KA(),o=e==="manual"?"var(--mantine-color-orange-6)":"var(--mantine-color-green-6)";return y.jsx(zr,{className:Zn({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(uJe,{style:{backgroundColor:o},onClick:a=>{a.stopPropagation(),n()},children:"Close compare"})})}),uJe=Er.withProps({className:be({fontSize:"xs",fontWeight:"medium",py:"1.5",lineHeight:"1",borderBottomLeftRadius:"sm",borderBottomRightRadius:"sm",transform:"translateY(-4px)",px:"4",color:"mantine.colors.gray[
$ { _e . message } ` )}else throw new Error( ` Invalid target : "${ae}" is not a valid target from the root node . Did you mean ".${ae}" ? ` )})}function Gs(ee){const te=L(ee.config.target);return te?{target:te.map(ae=>typeof ae=="string"?Ol(ee.parent,ae):ae)}:ee.parent.initial}function Vo(ee){return ee.type==="history"}function wa(ee){const te=Xs(ee);for(const ae of te)for(const le of it(ae,ee))te.add(le);return te}function Xs(ee){const te=new Set;function ae(le){if(!te.has(le)){if(te.add(le),le.type==="compound")ae(le.initial.target[0]);else if(le.type==="parallel")for(const ue of Se(le))ae(ue)}}return ae(ee),te}function fo(ee,te){if(fr(te))return ee.machine.getStateNodeById(te);if(!ee.states)throw new Error( ` Unable to retrieve child state '${te}' from '${ee.id}' ; no child states exist . ` );const ae=ee.states[te];if(!ae)throw new Error( ` Child state '${te}' does not exist on '${ee.id}' ` );return ae}function Ol(ee,te){if(typeof te=="string"&&fr(te))try{return ee.machine.getStateNodeById(te)}catch{}const ae=C(te).slice();let le=ee;for(;ae.length;){const ue=ae.shift();if(!ue.length)break;le=fo(le,ue)}return le}function jl(ee,te){if(typeof te=="string"){const ue=ee.states[te];if(!ue)throw new Error( ` State '${te}' does not exist on '${ee.id}' ` );return[ee,ue]}const ae=Object.keys(te),le=ae.map(ue=>fo(ee,ue)).filter(Boolean);return[ee.machine.root,ee].concat(le,ae.reduce((ue,_e)=>{const Be=fo(ee,_e);if(!Be)return ue;const Xe=jl(Be,te[_e]);return ue.concat(Xe)},[]))}function Bc(ee,te,ae,le){const ue=fo(ee,te).next(ae,le);return!ue||!ue.length?ee.next(ae,le):ue}function Ks(ee,te,ae,le){const ue=Object.keys(te),_e=fo(ee,ue[0]),Be=Ll(_e,te[ue[0]],ae,le);return!Be||!Be.length?ee.next(ae,le):Be}function Rh(ee,te,ae,le){const ue=[];for(const _e of Object.keys(te)){const Be=te[_e];if(!Be)continue;const Xe=fo(ee,_e),dt=Ll(Xe,Be,ae,le);dt&&ue.push(...dt)}return ue.length?ue:ee.next(ae,le)}function Ll(ee,te,ae,le){return typeof te=="string"?Bc(ee,te,ae,le):Object.keys(te).length===1?Ks(ee,te,ae,le):Rh(ee,te,ae,le)}function id(ee){return Object.keys(ee.states).map(te=>ee.states[te]).filter(te=>te.type==="history")}function ta(ee,te){let ae=ee;for(;ae.parent&&ae.parent!==te;)ae=ae.parent;return ae.parent===te}function Fc(ee,te){const ae=new Set(ee),le=new Set(te);for(const ue of ae)if(le.has(ue))return!0;for(const ue of le)if(ae.has(ue))return!0;return!1}function Bl(ee,te,ae){const le=new Set;for(const ue of ee){let _e=!1;const Be=new Set;for(const Xe of le)if(Fc(Wr([ue],te,ae),Wr([Xe],te,ae)))if(ta(ue.source,Xe.source))Be.add(Xe);else{_e=!0;break}if(!_e){for(const Xe of Be)le.delete(Xe);le.add(ue)}}return Array.from(le)}function sd(ee){const[te,...ae]=ee;for(const le of it(te,void 0))if(ae.every(ue=>ta(ue,le)))return le}function Fl(ee,te){if(!ee.target)return[];const ae=new Set;for(const le of ee.target)if(Vo(le))if(te[le.id])for(const ue of te[le.id])ae.add(ue);else for(const ue of Fl(Gs(le),te))ae.add(ue);else ae.add(le);return[...ae]}function ra(ee,te){const ae=Fl(ee,te);if(!ae)return;if(!ee.reenter&&ae.every(ue=>ue===ee.source||ta(ue,ee.source)))return ee.source;const le=sd(ae.concat(ee.source));if(le)return le;if(!ee.reenter)return ee.source.machine.root}function Wr(ee,te,ae){const le=new Set;for(const ue of ee)if(ue.target?.length){const _e=ra(ue,ae);ue.reenter&&ue.source===_e&&le.add(_e);for(const Be of te)ta(Be,_e)&&le.add(Be)}return[...le]}function Vn(ee,te){if(ee.length!==te.size)return!1;for(const ae of ee)if(!te.has(ae))return!1;return!0}function qo(ee,te,ae,le,ue,_e){if(!ee.length)return te;const Be=new Set(te._nodes);let Xe=te.historyValue;const dt=Bl(ee,Be,Xe);let gt=te;ue||([gt,Xe]=ji(gt,le,ae,dt,Be,Xe,_e,ae.actionExecutor)),gt=So(gt,le,ae,dt.flatMap(nt=>nt.actions),_e,void 0),gt=Hc(gt,le,ae,dt,Be,_e,Xe,ue);const Yt=[...Be];gt.status==="done"&&(gt=So(gt,le,ae,Yt.sort((nt,ot)=>ot.order-nt.order).flatMap(nt=>nt.exit),_e,void 0));try{return Xe===te.historyValue&&Vn(te._nodes,Be)?gt:nn(gt,{_nodes:Yt,historyValue:Xe})}catch(nt){throw nt}}function Zs(ee,te,ae,le,ue){if(le.output===void 0)return;const _e=h(ue.id,ue.output!==void 0&&ue.parent?N(u
$ { s } {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
-- likec4 - palette - fill : $ { i ( n . elements . fill ) } ;
-- likec4 - palette - stroke : $ { i ( n . elements . stroke ) } ;
}
2025-11-16 23:10:11 +01:00
$ { _ne } $ { s } {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
-- likec4 - palette - fill : $ { a ( n . elements . fill ) } ;
-- likec4 - palette - stroke : $ { a ( n . elements . stroke ) } ;
}
2025-11-16 23:10:11 +01:00
` .trim()};function prt(e,r,n){const{elements:o,relationships:a}=n,i= ` : where ( $ { e } [ data - likec4 - color = $ { r } ] ) ` ;return[ `
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
$ { i } {
-- likec4 - palette - fill : $ { o . fill } ;
-- likec4 - palette - stroke : $ { o . stroke } ;
-- likec4 - palette - hiContrast : $ { o . hiContrast } ;
-- likec4 - palette - loContrast : $ { o . loContrast } ;
-- likec4 - palette - relation - stroke : $ { a . line } ;
-- likec4 - palette - relation - label : $ { a . label } ;
-- likec4 - palette - relation - label - bg : $ { a . labelBg } ;
}
2025-11-16 23:10:11 +01:00
$ { crt } $ { i } {
-- likec4 - palette - relation - stroke - selected : $ { vne ( xne ( a . line , "black" , 85 ) ) } ;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
2025-11-16 23:10:11 +01:00
$ { _ne } $ { i } {
-- likec4 - palette - relation - stroke - selected : $ { vne ( xne ( a . line , "white" , 70 ) ) } ;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
2025-11-16 23:10:11 +01:00
` .trim(),...VNe(1,urt+1).map(s=>drt(e,r,n,s))].join( `
` )}function hrt(e,r){return En(r.colors,M9(),Sn(([n,o])=>prt(e,n,o)),qq( `
` ))}const frt=E.memo(({id:e})=>{const r= ` # $ { e } ` ,n=yp()?.(),{theme:o}=cre(),a=hrt(r,o);return y.jsx("style",{type:"text/css","data-likec4-colors":e,dangerouslySetInnerHTML:{__html:a},nonce:n})});function Ene({children:e}){const r=E.useContext(a2);return E.useEffect(()=>{r||console.warn("LikeC4Diagram must be a child of MantineProvider")},[]),r?y.jsx(y.Fragment,{children:e}):y.jsx(i7,{defaultColorScheme:"auto",children:e})}Ene.displayName="EnsureMantine";const NR=({reducedMotion:e="user",children:r})=>{const n=yp()?.();return y.jsx(UVe,{features:FUe,strict:!0,children:y.jsx(GVe,{reducedMotion:e,...n&&{nonce:n},children:r})})};function Sne({onCanvasClick:e,onCanvasContextMenu:r,onCanvasDblClick:n,onEdgeClick:o,onChange:a,onEdgeContextMenu:i,onNavigateTo:s,onNodeClick:l,onNodeContextMenu:c,onOpenSource:u,onBurgerMenuClick:d,onLayoutTypeChange:h,onInitialized:f,view:g,className:b,readonly:x=!0,controls:w=!x,fitView:k=!0,fitViewPadding:C=w?Uw.withControls:Uw.default,pannable:_=!0,zoomable:T=!0,background:A="dots",enableElementTags:R=!1,enableFocusMode:D=!1,enableElementDetails:N=!1,enableRelationshipDetails:M=!1,enableRelationshipBrowser:O=!1,enableCompareWithLatest:F=!!h,nodesDraggable:L=!x,nodesSelectable:U=!x||D||!!s||!!l,enableNotations:P=!1,showNavigationButtons:V=!!s,enableDynamicViewWalkthrough:I=!1,dynamicViewVariant:H,enableSearch:q=!1,initialWidth:Z,initialHeight:W,reduceGraphics:G="auto",renderIcon:K,where:j,reactFlowProps:Y,renderNodes:Q,children:J}){const ie=UG(),ne=E.useRef(null),re=Ire(g,H),ge=mrt(C);ne.current==null&&(ne.current={defaultEdges:[],defaultNodes:[],initialWidth:Z??re.width,initialHeight:W??re.height,initialFitViewOptions:{maxZoom:zT,minZoom:_s,padding:ge},initialMaxZoom:zT,initialMinZoom:_s});const De=G==="auto"?_&&(re.width??1)*(re.height??1)>6e6&&g.nodes.some(he=>he.children?.length>0):G;return y.jsx(Ene,{children:y.jsx(NR,{...De&&{reducedMotion:"always"},children:y.jsx( $ Ee,{value:K??null,children:y.jsx(Np,{features:{enableFitView:k,enableReadOnly:x,enableFocusMode:D,enableNavigateTo:!!s,enableElementDetails:N,enableRelationshipDetails:M,enableRelationshipBrowser:O,enableSearch:q,enableNavigationButtons:V&&!!s,enableDynamicViewWalkthrough:g._type==="dynamic"&&I,enableNotations:P,enableVscode:!!u,enableControls:w,enableElementTags:R,enableCompareWithLatest:F&&!!h},children:y.jsxs(HKe,{handlers:{onCanvasClick:e,onCanvasContextMenu:r,onCanvasDblClick:n,onEdgeClick:o,onChange:a,onEdgeContextMenu:i,onNavigateTo:s,onNodeClick:l,onNodeContextMenu:c,onOpenSource:u,onBurgerMenuClick:d,onInitialized:f,onLayoutTypeChange:h},children:[y.jsx(frt,{id:ie}),y.jsx(oLe,{rootSelector: ` # $ { ie } ` ,children:y.jsx(yje,{id:ie,className:b,reduceGraphics:De,children:y.jsx(O3,{fitView:k,...ne.current,children:y.jsxs(Ktt,{view:g,zoomable:T,pannable:_,fitViewPadding:ge,nodesDraggable:L,nodesSelectable:U,where:j??null,dynamicViewVariant:H,children:[y.jsx(met,{background:A,reactFlowProps:Y,renderNodes:Q,children:J}),y.jsx(Kte,{})]})})})})]})})})})})}const Cne=e=>typeof e=="number"? ` $ { e } px ` :e;function mrt(e){return jF(()=>T0(e)?zNe(e,Cne):Cne(e),[e],grt)}const grt=([e],[r])=>e===r||T0(e)&&T0(r)&&e.bottom==r.bottom&&e.left==r.left&&e.right==r.right&&e.top==r.top;function yrt({children:e,likec4model:r}){return y.jsx(K0.Provider,{value:r,children:e})}const DR=({children:e})=>y.jsx("div",{style:{margin:"1rem 0"},children:y.jsx("div",{style:{margin:"0 auto",display:"inline-block",padding:"2rem",background:"rgba(250,82,82,.15)",color:"#ffa8a8"},children:e})}),brt=({viewId:e})=>y.jsxs(DR,{children:["View ",y.jsx("code",{children:e})," not found"]}),vrt=e=>{throw new Error("LikeC4View is not available SSR")};var Tne={exports:{}}, $ R,Ane;function xrt(){if(Ane)return $ R;Ane=1;var e="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";return $ R=e, $ R}var MR,Rne;function wrt(){if(Rne)return MR;Rne=1;var e=xrt();function r(){}function n(){}return n.resetWarningCache=r,MR=function(){function o(s,l,c,u,d,h){if(h!==e){var f=new Error("Calling PropTypes validators directly is not supported by the ` prop - types ` package. Use PropTypes.checkPropTypes() to ca
In order to be iterable , non - array objects must have a [ Symbol . iterator ] ( ) method . ` )},Nrt=function(e,r){return Crt(e)||Trt(e,r)||Art(e,r)||Rrt()},Mne=Dne((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})),Drt=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},Pne=function(e,r){if(e==null)return{};var n,o,a=Drt(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}, $ rt=E.createContext(null);function zne(e){var r=e.children,n=r===void 0?"":r,o=Pne(e,["children"]);return typeof n!="string"&&(n=vrt()),dn.createElement("template",Mne({},o,{dangerouslySetInnerHTML:{__html:n}}))}function Ine(e){var r=e.root,n=e.children;return Ki.createPortal(n===void 0?null:n,r)}function Mrt(e){var r=E.forwardRef((function(n,o){var a,i,s=n.mode,l=s===void 0?"open":s,c=n.delegatesFocus,u=c!==void 0&&c,d=n.styleSheets,h=d===void 0?[]:d,f=n.ssr,g=f!==void 0&&f,b=n.children,x=Pne(n,["mode","delegatesFocus","styleSheets","ssr","children"]),w=(i=E.useRef((a=o)&&a.current),E.useEffect((function(){a&&(a.current=i.current)}),[a]),i),k=E.useState(null),C=Nrt(k,2),_=C[0],T=C[1],A="node_".concat(l).concat(u);return E.useLayoutEffect((function(){if(w.current)try{if(typeof o=="function"&&o(w.current),g){var R=w.current.shadowRoot;return void T(R)}var D=w.current.attachShadow({mode:l,delegatesFocus:u});h.length>0&&(D.adoptedStyleSheets=h),T(D)}catch(N){(function(M){var O=M.error,F=M.styleSheets,L=M.root;switch(O.name){case"NotSupportedError":F.length>0&&(L.adoptedStyleSheets=F);break;default:throw O}})({error:N,styleSheets:h,root:_})}}),[o,w,h]),dn.createElement(dn.Fragment,null,dn.createElement(e.tag,Mne({key:A,ref:w},x),(_||g)&&dn.createElement( $ rt.Provider,{value:_},g?dn.createElement(zne,{shadowroot:l,shadowrootmode:l},e.render({root:_,ssr:g,children:b})):dn.createElement(Ine,{root:_},e.render({root:_,ssr:g,children:b})))))}));return r.propTypes={mode:Rs.oneOf(["open","closed"]),delegatesFocus:Rs.bool,styleSheets:Rs.arrayOf(Rs.instanceOf(globalThis.CSSStyleSheet)),ssr:Rs.bool,children:Rs.node},r}zne.propTypes={children:Rs.oneOfType([Rs.string,Rs.node])},Ine.propTypes={root:Rs.object.isRequired,children:Rs.node};var PR=new Map;function Prt(){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=Srt(a,{separator:"-"}),s="".concat(r,"-").concat(i);return PR.has(s)||PR.set(s,Mrt({tag:i,render:n})),PR.get(s)}})}var zrt=Prt();const Irt='@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff2) format
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
: where ( [ data - likec4 - instance = "${e}" ] ) {
display : block ;
box - sizing : border - box ;
border : 0 solid transparent ;
background : transparent ;
padding : 0 ;
margin : 0 ;
overflow : hidden ;
width : 100 % ;
height : 100 % ;
min - width : 80 px ;
min - height : 80 px ;
}
` .trim();const{width:n,height:o}=r,a=n>o;return `
: where ( [ data - likec4 - instance = "${e}" ] ) {
display : block ;
box - sizing : border - box ;
border : 0 solid transparent ;
background : transparent ;
padding : 0 ;
overflow : hidden ;
aspect - ratio : $ { Math . ceil ( n ) } / $ { Math . ceil ( o ) } ;
$ { a ? "" : `
max - width : min ( 100 % , var ( -- likec4 - view - max - width , $ { Math . ceil ( n ) } px ) ) ;
margin - left : auto ;
margin - right : auto ; ` }
width : $ { a ? "100%" : "auto" } ;
height : $ { a ? "auto" : "100%" } ;
$ { a ? "min-width: 80px;" : "min-height: 80px;" }
max - height : min ( 100 % , var ( -- likec4 - view - max - height , $ { Math . ceil ( o ) } px ) ) ;
}
2025-11-16 23:10:11 +01:00
` .trim()}function Hrt({children:e,theme:r=Ort,injectFontCss:n=!0,styleNonce:o,colorScheme:a,keepAspectRatio:i=!1,...s}){const l=Lrt(a),c=UG(),u=Frt(c,i),d=E.useRef(null),h=jrt(n,o),f=E.useCallback(()=>d.current??void 0,[d]),g=kt(()=>{if(F3(o)){if(typeof o=="string")return o;if(typeof o=="function")return o()}return""});let b=F3(o)?g():void 0;return y.jsxs(y.Fragment,{children:[y.jsx("style",{type:"text/css",nonce:b,dangerouslySetInnerHTML:{__html:u}}),y.jsx(Brt,{ssr:!1,...s,styleSheets:h,"data-likec4-instance":c,children:y.jsx("div",{ref:d,"data-mantine-color-scheme":l,className:"likec4-shadow-root",children:y.jsx(i7,{...a&&{forceColorScheme:a},defaultColorScheme:l,getRootElement:f,...!!b&&{getStyleNonce:g},cssVariablesSelector:".likec4-shadow-root",theme:r,children:y.jsx(NR,{children:e})})})})]})}const Vrt=be({cursor:"pointer","--mantine-cursor-pointer":"pointer","& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)":{cursor:"pointer"}});function qrt({viewId:e,className:r,pannable:n=!1,zoomable:o=!1,keepAspectRatio:a=!0,colorScheme:i,injectFontCss:s=!0,controls:l=!1,background:c="transparent",browser:u=!0,showNavigationButtons:d=!1,enableNotations:h,enableFocusMode:f=!1,enableDynamicViewWalkthrough:g=!1,enableElementDetails:b=!1,enableRelationshipDetails:x=!1,enableRelationshipBrowser:w=x,reduceGraphics:k="auto",mantineTheme:C,styleNonce:_,style:T,reactFlowProps:A,renderNodes:R,children:D,...N}){const M=Jje(),[O,F]=E.useState("manual"),[L,U]=E.useState(null),P=kt(Y=>{Y&&Y!==L&&F("manual"),U(Y)}),V=kt(()=>{P(e)});if(!M)return y.jsx(DR,{children:"LikeC4Model not found. Make sure you provided LikeC4ModelProvider."});const I=M.findView(e)?. $ layouted;if(!I)return y.jsx(brt,{viewId:e});if(I._stage!=="layouted")return y.jsxs(DR,{children:['LikeC4 View " $ ',e,'" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.']});const H=L?M.findView(L):null,q=O==="manual"?H?. $ layouted:H?. $ view,Z=!!h&&(I.notation?.nodes?.length??0)>0,W=(q?.notation?.nodes?.length??0)>0,G=u!==!1,K=Hq(u)?{}:u,j=Ire(I,N.dynamicViewVariant);return y.jsx(Hrt,{injectFontCss:s,theme:C,colorScheme:i,styleNonce:_,keepAspectRatio:a?j:!1,className:et("likec4-view",r),style:T,children:y.jsxs(NR,{children:[y.jsx(Sne,{view:I,readonly:!0,pannable:n,zoomable:o,background:c,fitView:!0,fitViewPadding:Uw.default,enableNotations:Z,enableDynamicViewWalkthrough:g,showNavigationButtons:d,enableCompareWithLatest:!1,enableFocusMode:f,enableRelationshipDetails:x,enableElementDetails:b,enableRelationshipBrowser:w,enableElementTags:!1,controls:l,nodesDraggable:!1,reduceGraphics:k,className:et("likec4-static-view",G&&Vrt),enableSearch:!1,...G&&{onCanvasClick:V,onNodeClick:V},reactFlowProps:A,renderNodes:R,children:D,...N}),q&&y.jsxs(Ly,{openDelay:0,onClose:()=>P(null),children:[y.jsx(Sne,{view:q,pannable:!0,zoomable:!0,background:"dots",onNavigateTo:P,showNavigationButtons:!0,enableDynamicViewWalkthrough:!0,enableFocusMode:!0,enableRelationshipBrowser:!0,enableElementDetails:!0,enableRelationshipDetails:!0,enableSearch:!0,enableElementTags:!0,enableCompareWithLatest:!0,controls:!0,readonly:!0,nodesDraggable:!1,fitView:!0,...N,fitViewPadding:Uw.withControls,...K,enableNotations:W&&(K.enableNotations??!0),renderNodes:R,onLayoutTypeChange:F}),y.jsx(zr,{pos:"absolute",top:"4",right:"4",zIndex:"999",children:y.jsx(br,{variant:"default",color:"gray",onClick:Y=>{Y.stopPropagation(),P(null)},children:y.jsx(Rp,{})})})]})]})})}var Urt=e=>y.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",...e,children:[y.jsx("path",{fill:"#343741",d:"M4 64c0 5.535.777 10.879 2.098 16H84c8.836 0 16-7.164 16-16s-7.164-16-16-16H6.098A63.7 63.7 0 0 0 4 64"}),y.jsx("path",{fill:"#fec514",d:"M111.695 30.648A61.5 61.5 0 0 0 117.922 24C106.188 9.379 88.199 0 68 0 42.715 0 20.957 14.71 10.574 36H98.04a20.12 20.12 0 0 0 13.652-5.352"}),y.jsx("path",{fill:"#00bfb3",d:"M98.04 92H10.577C20.961 113.29 42.715 128 68 128c20.2 0 38.188-9.383 49.922-24a61 61 0 0 0-6.227-6.648A20.13 20.13 0 0 0 98.04 92"})]}),Wrt=e=>y.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewB
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
addressing a growing number of use cases . It centrally stores your data so you can
discover the expected and uncover the unexpected . ` },title:"Elasticsearch",kind:"container",id:"elasticsearch"},objectstorage:{style:{opacity:20},technology:"S3 Object Storage",description:{txt:"s3 Object Storage"},title:"s3 Object Storage",kind:"container",id:"objectstorage"},postgres:{style:{opacity:20,icon:"tech:postgresql"},technology:"PostgreSQL",description:{txt: ` PostgreSQL is a powerful , open source object - relational database system .
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability , data integrity ,
2025-11-16 23:10:11 +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"},"edp.externalSecrets":{style:{opacity:20},tags:["internal"],description:{txt:"Provider to access externally stored Kubernetes secrets"},title:"external-secrets",kind:"container",id:"edp.externalSecrets"},"edp.forgejo":{style:{opacity:20,icon:"tech:go"},technology:"Golang",description:{txt: ` Fully managed DevOps Platform
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
offering capabilities like
code version controling
collaboration and ticketing
2025-11-16 23:10:11 +01:00
and security scanning ` },title:"Forgejo",kind:"container",id:"edp.forgejo"},"edp.forgejoActions":{style:{icon:"tech:go"},technology:"Golang",description:{txt:"Continuous Integration like Github Actions"},title:"Forgejo Actions",kind:"component",id:"edp.forgejoActions"},"edp.imageregistry":{style:{icon:"tech:go"},technology:"Golang",description:{txt:"Container Image Registry"},title:"Forgejo OCI Image Registry",kind:"component",id:"edp.imageregistry"},"edp.forgejogit":{style:{icon:"tech:git"},title:"ForgejoGit",kind:"component",id:"edp.forgejogit"},"edp.grafana":{style:{opacity:20,icon:"tech:grafana"},description:{txt:"Data visualization and monitoring"},title:"Grafana",kind:"container",id:"edp.grafana"},"edp.ingressNginx":{style:{opacity:20},tags:["internal"],description:{txt:"Ingress Controller for incoming http(s) traffic"},title:"Ingress",kind:"container",id:"edp.ingressNginx"},"edp.keycloak":{style:{opacity:20},description:{txt:"Single Sign On for all EDP products"},title:"Keycloak",kind:"container",id:"edp.keycloak"},"edp.kyverno":{style:{opacity:20},tags:["internal"],description:{txt:"Policy-as-Code"},title:"Kyverno",kind:"container",id:"edp.kyverno"},"edp.loki":{style:{opacity:20},description:{txt:"Log aggregation system"},title:"Loki",kind:"container",id:"edp.loki"},"edp.mailhog":{style:{opacity:20},description:{txt:"Web and API based SMTP testing"},title:"Mailhog",kind:"container",id:"edp.mailhog"},"edp.minio":{style:{opacity:20},description:{txt:"S3 compatible blob storage"},title:"Minio",kind:"container",id:"edp.minio"},"edp.monitoring":{style:{opacity:20},description:{txt:"Observability system to monitor deployed components"},title:"Monitoring",kind:"container",id:"edp.monitoring"},"edp.openbao":{style:{opacity:20},description:{txt:"Secure secret storage"},title:"OpenBao",kind:"container",id:"edp.openbao"},"edp.prometheus":{style:{opacity:20,icon:"tech:prometheus"},description:{txt:"Monitoring and alerting toolkit"},title:"Prometheus",kind:"container",id:"edp.prometheus"},"edp.spark":{style:{opacity:20},tags:["internal"],description:{txt:"Allows running Spark applications on K8s"},title:"Spark",kind:"container",id:"edp.spark"},"edp.velero":{style:{opacity:20},tags:["internal"],description:{txt:"Backup Kubernetes resources"},title:"Velero",kind:"container",id:"edp.velero"},"cloud.application":{style:{color:"primary"},technology:"DSL",description:{txt:"An application description"},title:"application",kind:"schema",id:"cloud.application"},"edp.application":{style:{color:"primary"},technology:"DSL",description:{txt:"An application description"},title:"application",kind:"schema",id:"edp.application"},"edp.testApp":{style:{opacity:20},description:{txt:"Testapp to validate deployments"},title:"Fibonacci",kind:"container",id:"edp.testApp"},"localbox.application":{style:{color:"primary"},technology:"DSL",description:{txt:"An application description"},title:"application",kind:"schema",id:"localbox.application"},"localbox.git":{style:{icon:"tech:git"},technology:"Git",description:{txt:"local git"},title:"git",kind:"component",id:"localbox.git"},"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 provider service account",kind:"step",id:"edfbuilder_workflow.runEDP.setupCrossplaneServiceAccount"},"
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
A tenant is a folder in Foundry - Config - Forgejo . On merge triggers reconciliation to EDP .
2025-11-07 11:50:17 +01:00
Optionally we will have a WebUI / API / CLI ` },tags:[],style:{opacity:15,size:"md"},depth:1,x:855,y:79,width:870,height:981,labelBBox:{x:6,y:0,width:280,height:15}},{id:"local.ingressNginx",parent:"local",level:1,children:["local.ingressNginx.ingressNginx"],inEdges:[],outEdges:["15juth8","p2br4p","o229dq","2vnvvg","4ix58c","1hr2s5j","1nksp5g","m2japo","4drflo","ihlgsc"],deploymentRef:"local.ingressNginx",title:"ingress-nginx",kind:"namespace",color:"primary",shape:"rectangle",modelRef:"edp.ingressNginx.ingressNginx",icon:"tech:nginx",tags:[],style:{opacity:15,size:"md"},depth:1,x:4970,y:97,width:384,height:265,labelBBox:{x:6,y:0,width:92,height:15}},{id:"local.velero",parent:"local",level:1,children:["local.velero.velero"],inEdges:[],outEdges:["3znaik"],deploymentRef:"local.velero",title:"Velero",kind:"namespace",color:"primary",shape:"rectangle",modelRef:"edp.velero.velero",tags:[],style:{opacity:15,size:"md"},depth:1,x:8255,y:97,width:384,height:265,labelBBox:{x:6,y:0,width:49,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:[],inEdges:[],outEdges:["109g3jm"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},x:920,y:150,width:342,height:180,labelBBox:{x:18,y:54,width:306,height:66}},{id:"local.crossplane",parent:"local",level:1,children:["local.crossplane.crossplane","local.crossplane.crossplaneFunction","local.crossplane.crossplaneRbacManager","local.crossplane.providerArgoCD","local.crossplane.providerKind","local.crossplane.providerShell"],inEdges:[],outEdges:[],deploymentRef:"local.crossplane",title:"crossplane-system",kind:"namespace",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:8689,y:79,width:2670,height:301,labelBBox:{x:6,y:0,width:129,height:15}},{id:"local.crossplane.crossplane",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Crossplane",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.crossplane",modelRef:"edp.crossplane.crossplane",x:8739,y:150,width:320,height:180,labelBBox:{x:107,y:74,width:105,height:24}},{id:"local.crossplane.crossplaneFunction",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Function Patch and Transform",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.crossplaneFunction",modelRef:"edp.crossplane.crossplaneFunction",x:9189,y:150,width:320,height:180,labelBBox:{x:24,y:74,width:273,height:24}},{id:"local.crossplane.crossplaneRbacManager",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"RBAC Manager",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.crossplaneRbacManager",modelRef:"edp.crossplane.crossplaneRbacManager",x:9639,y:150,width:320,height:180,labelBBox:{x:88,y:74,width:144,height:24}},{id:"local.crossplane.providerArgoCD",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"ArgoCD Provider",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.providerArgoCD",modelRef:"edp.crossplane.providerArgoCD",x:10089,y:150,width:320,height:180,labelBBox:{x:82,y:74,width:155,height:24}},{id:"local.crossplane.providerKind",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Kind Provider",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.providerKind",modelRef:"edp.crossplane.providerKind",x:10539,y:150,width:320,height:180,labelBBox:{x:98,y:74,width:124,height:24}},{id:"local.crossplane.providerShell",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Shel
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
offering capabilities like
code version controling
collaboration and ticketing
2025-11-07 11:50:17 +01:00
and security scanning ` },technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"local.gitea.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:7363,y:497,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"local.keycloak.keycloak",parent:"local.keycloak",level:2,children:[],inEdges:["2vnvvg"],outEdges:["4zwy1m"],kind:"instance",title:"Keycloak",technology:"Java",tags:[],icon:"tech:java",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.keycloak.keycloak",modelRef:"edp.keycloak.keycloak",x:2367,y:497,width:320,height:180,labelBBox:{x:104,y:65,width:143,height:45}},{id:"local.monitoring.alloy",parent:"local.monitoring",level:2,children:[],inEdges:["1hr2s5j"],outEdges:["sb2j38"],kind:"instance",title:"Alloy",description:{txt:"Open Telemetry Collector"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:15,size:"md",multiple:!0},deploymentRef:"local.monitoring.alloy",modelRef:"edp.monitoring.alloy",x:3737,y:497,width:320,height:180,labelBBox:{x:59,y:63,width:233,height:48}},{id:"local.monitoring.queryFrontend",parent:"local.monitoring",level:2,children:[],inEdges:["1nksp5g"],outEdges:[],kind:"instance",title:"Query Frontend",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.monitoring.queryFrontend",modelRef:"edp.monitoring.loki.queryFrontend",x:3287,y:497,width:320,height:180,labelBBox:{x:88,y:74,width:144,height:24}},{id:"local.openbao.openbao",parent:"local.openbao",level:2,children:[],inEdges:["m2japo"],outEdges:[],kind:"instance",title:"Openbao",technology:"Openbao",tags:[],color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.openbao.openbao",modelRef:"edp.openbao.openbao",x:7835,y:497,width:320,height:180,labelBBox:{x:117,y:65,width:86,height:45}},{id:"local.openbao.agentInjector",parent:"local.openbao",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Agent Injector",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.openbao.agentInjector",modelRef:"edp.openbao.agentInjector",x:7835,y:150,width:320,height:180,labelBBox:{x:96,y:74,width:127,height:24}},{id:"local.fibonacci.fibonacci",parent:"local.fibonacci",level:2,children:[],inEdges:["4drflo"],outEdges:[],kind:"instance",title:"Fibonacci",technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.fibonacci.fibonacci",modelRef:"edp.testApp.fibonacci",x:4189,y:497,width:320,height:180,labelBBox:{x:101,y:65,width:148,height:45}},{id:"local.mailhog.mailhog",parent:"local.mailhog",level:2,children:[],inEdges:["ihlgsc"],outEdges:[],kind:"instance",title:"Mailhog",technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.mailhog.mailhog",modelRef:"edp.mailhog.mailhog",x:4639,y:497,width:320,height:180,labelBBox:{x:109,y:65,width:132,height:45}},{id:"local.minio.minio",parent:"local.minio",level:2,children:[],inEdges:["3znaik","4ix58c"],outEdges:[],kind:"instance",title:"S3 Blob Storage",technology:"Minio",tags:[],color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.minio.minio",modelRef:"edp.minio.minio",x:8287,y:497,width:320,height:180,labelBBox:{x:85,y:65,width:150,height:45}},{id:"otc-edp-per-tenant",parent:null,level:0,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure","otc-edp-per-tenant.cce","otc-edp-per-tenant.cloudServices"],inEdges:["r3wxut","1sng0q0","e3benz"],outEdges:[],deploymentRef:"otc-edp-per-tenant",title:"OTC EDP per tenant cluster",kind:"cloud",technology:"OTC",color:"primary",shape:"rectangle",description:{txt: ` OTC environment for EDP . EDP is the environment a customer gets from us .
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
2025-11-07 11:50:17 +01:00
This is kubernetes clusters and other infrastructure like nodes and vms , and platform services . All is set up by IaC - pipelines in the Foundry . ` },tags:[],style:{opacity:15,size:"md"},depth:1,x:1775,y:79,width:442,height:1668,labelBBox:{x:6,y:0,width:181,height:15}},{id:"local.backstage.database",parent:"local.backstage",level:2,children:[],inEdges:["19kg5y"],outEdges:[],kind:"instance",title:"Database",technology:"Postgresql",tags:[],icon:"tech:postgresql",color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.backstage.database",modelRef:"edp.ui.database",x:5091,y:830,width:320,height:180,labelBBox:{x:101,y:64,width:148,height:46}},{id:"local.argocd.argocdRedis",parent:"local.argocd",level:2,children:[],inEdges:["1gfgfhk","qfu5xm","g7xnzs","fon3rk"],outEdges:[],kind:"instance",title:"Redis",technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.argocd.argocdRedis",modelRef:"edp.argoCD.argocdRedis",x:6686,y:830,width:320,height:180,labelBBox:{x:119,y:64,width:113,height:46}},{id:"local.keycloak.keycloakDB",parent:"local.keycloak",level:2,children:[],inEdges:["4zwy1m"],outEdges:[],kind:"instance",title:"Database",technology:"Postgresql",tags:[],icon:"tech:postgresql",color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.keycloak.keycloakDB",modelRef:"edp.keycloak.keycloakDB",x:2367,y:830,width:320,height:180,labelBBox:{x:101,y:64,width:148,height:46}},{id:"local.monitoring.distributor",parent:"local.monitoring",level:2,children:[],inEdges:["sb2j38"],outEdges:[],kind:"instance",title:"Distributor",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.monitoring.distributor",modelRef:"edp.monitoring.loki.distributor",x:3737,y:830,width:320,height:180,labelBBox:{x:112,y:74,width:95,height:24}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:[],outEdges:["fkkf8y"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},x:1825,y:150,width:342,height:180,labelBBox:{x:18,y:54,width:306,height:66}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:["fkkf8y","r3wxut","1sng0q0"],outEdges:["pit45i"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"primary",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},x:1828,y:1206,width:327,height:180,labelBBox:{x:46,y:53,width:266,height:67}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:["pit45i","e3benz"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},x:1832,y:1517,width:320,height:180,labelBBox:{x:67,y:53,width:185,height:67}},{id:"local.spark.sparkoperator",parent:"local",level:1,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Spark Operator",technology:"Spark",tags:[],icon:"tech:spark",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.spark.sparkoperator",modelRef:"edp.spark.sparkoperator",x:12809,y:150,width:320,height:180,labelBBox:{x:76,y:65,width:198,height:45}}],edges:[{id:"pit45i",source:"otc-edp-per-tenant.cce",target:"otc-edp-per-tenant.cloudServices",label:null,dotpos:"e,1992,1517.1 1992,1386 1992,1423.8 1992,1468 1992,1506.9",points:[[1992,1386],[1992,1424],[1992,1468],[1992,1507]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1fzhjm9","15njmlz","hks76r","1w18ve8"],color:"gray",line:"dashed",head:"normal"},{id:"fkkf8y",source:"otc-edp-per-tenant.forgejoRun
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
This is kubernetes clusters and other infrastructure like nodes and vms , and platform services . All is set up by IaC - pipelines in the Foundry . ` },tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:8,width:1994,height:1159,labelBBox:{x:6,y:0,width:181,height:15}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["1dcszi5"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:321,y:150,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cce.edp"],inEdges:["1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:755,y:79,width:954,height:719,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edp-per-tenant.cce.edp",parent:"otc-edp-per-tenant.cce",level:2,children:["otc-edp-per-tenant.cce.edp.externalSecrets","otc-edp-per-tenant.cce.edp.ingressNginx","otc-edp-per-tenant.cce.edp.argoCD","otc-edp-per-tenant.cce.edp.forgejo"],inEdges:["1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce.edp",title:"EDP",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:787,y:132,width:890,height:634,labelBBox:{x:6,y:0,width:27,height:15}},{id:"otc-edp-per-tenant.cce.edp.externalSecrets",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:837,y:204,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:65}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edp-per-tenant.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["1dcszi5"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:353,y:204,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edp-per-tenant.cce.edp.ingressNginx",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:["1ir70dd","1kr1wg1"],kind:"instance",title:"Ingress",description:{txt:"Ingress Controller for incoming http(s) traffic"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.ingressNginx",modelRef:"edp.ingressNginx",navigateTo:"ingressNginx",x:1287,y:204,width:320,height:180,labelBBox:{x:33,y:54,width:255,height:65}},{id:"otc-edp-per-tenant.cce.edp.argoCD",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:["1ir70dd"],outEdges:[],kind:"instance",title:"ArgoCD",description:{txt:"GitOps Service"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.argoCD",modelRef:"edp.argoCD",navigateTo:"argoCD",x:1307,y:536,width:320,height:180,labelBBox:{x:108,y:63,width:105,height:48}},{id:"otc-edp-per-tenant.cce.edp.forgejo",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:["1kr1wg1","1dcszi5"],outE
offering capabilities like
code version controling
collaboration and ticketing
and security scanning ` },technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:837,y:536,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cloudServices.postgres","otc-edp-per-tenant.cloudServices.redis","otc-edp-per-tenant.cloudServices.objectstorage","otc-edp-per-tenant.cloudServices.elasticsearch"],inEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},depth:1,x:58,y:815,width:1894,height:302,labelBBox:{x:6,y:0,width:127,height:15}},{id:"otc-edp-per-tenant.cloudServices.postgres",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["8msu1q"],outEdges:[],kind:"instance",title:"PostgreSQL",description:{txt: ` PostgreSQL is a powerful , open source object - relational database system .
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability , data integrity ,
and correctness . ` },technology:"PostgreSQL",tags:[],icon:"tech:postgresql",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.postgres",modelRef:"postgres",x:108,y:887,width:354,height:180,labelBBox:{x:46,y:17,width:292,height:139}},{id:"otc-edp-per-tenant.cloudServices.redis",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["120qe5o"],outEdges:[],kind:"instance",title:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.redis",modelRef:"redis",x:592,y:887,width:359,height:180,labelBBox:{x:47,y:26,width:297,height:121}},{id:"otc-edp-per-tenant.cloudServices.objectstorage",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["ealiax"],outEdges:[],kind:"instance",title:"s3 Object Storage",description:{txt:"s3 Object Storage"},technology:"S3 Object Storage",tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.objectstorage",modelRef:"objectstorage",x:1082,y:887,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"otc-edp-per-tenant.cloudServices.elasticsearch",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["1trj5u6"],outEdges:[],kind:"instance",title:"Elasticsearch",description:{txt: ` Elasticsearch is a distributed , RESTful search and analytics engine capable of
addressing a growing number of use cases . It centrally stores your data so you can
discover the expected and uncover the unexpected . ` },technology:"Elasticsearch",tags:[],icon:"tech:elasticsearch",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.elasticsearch",modelRef:"elasticsearch",x:1532,y:887,width:370,height:180,labelBBox:{x:46,y:17,width:308,height:139}}],edges:[{id:"1ir70dd",source:"otc-edp-per-tenant.cce.edp.ingressNginx",target:"otc-edp-per-tenant.cce.edp.argoCD",label:"https",dotpos:"e,1461.6,536.51 1452.4,383.25 1455,427.28 1458.2,480.64 1461,526.05",points:[[1452,383],[1455,427],[1458,481],[1461,526]],labelBBox:{x:1459,y:448,width:34,height:18},parent:"otc-edp-per-tenant.cce.edp",relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"1kr1wg1",source:"otc-edp-per-tenant.cce.edp.ingressNginx",target:"otc-edp-per-tenant.cce.edp.forgejo",label:"https",dotpos:"e,1125.1,536.62 1328.8,383.47 1268.4,428.89 1194.8,484.19 1133.3,530.44",points:[[1329,383],[1268,429],[1195,484],[1133,530]],labelBBox:{x:1241,y:448,width:34,height:18},parent:"otc-edp-per-tenant.cce.edp",relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"1dcszi5",source:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",target:"otc-edp-per-tenant.cce.edp.forgejo",label:"registers",dotpos:"e,874.42,536.62 645.71,383.47 713.81,429.07 796.79,484.64 866.04,531.01",points:[[646,383],[714,429],[797,485],[866,531]],labelBBox:{x:776,y:448,width:58,height:18},parent:"otc-edp-per-tenant",relations:["g9oj4f"],color:"gray",line:"dashed",head:"normal"},{id:"8msu1q",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.postgres",label:null,dotpos:"e,408.47,886.62 836.84,684.1 743.28,717.71 626.38,763.79 527,815.4 490.05,834.59 451.75,858.08 416.81,881.1",points:[[837,684],[743,718],[626,764],[527,815],[490,835],[452,858],[417,881]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["hks76r"],color:"gray",line:"dashed",head:"normal"},{id:"120qe5o",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.redis",label:null,dotpos:"e,832,886.69 947.09,716.17 913.73,765.59 872.15,827.21 837.87,877.99",points:[[947,716],[914,766],[872,827],[838,878]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1w18ve8"],color:"gray",line:"dashed",head:"normal"},{id:"ealiax",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.objectstorage",label:null,dotpos:"e,1182,886.69 1066.9,716.17 1100.3,765.59 1141.9,827.21 1176.1,877.99",points:[[1067,716],[1100,766],[1142,827],[1176,878]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["15njmlz"],color:"gray",line:"dashed",head:"normal"},{id:"1trj5u6",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.elasticsearch",label:null,dotpos:"e,1604.5,886.79 1103.6,716.4 1143.6,747.92 1192.2,780.08 1242,798.4 1336.1,833 1371.9,783.6 1467,815.4 1512.1,830.47 1557.1,855.46 1596.3,881.27",points:[[1104,716],[1144,748],[1192,780],[1242,798],[1336,833],[1372,784],[1467,815],[1512,830],[1557,855],[1596,881]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1fzhjm9"],color:"gray",line:"dashed",head:"normal"}]},"edp-foundry-central-service":{_type:"deployment",tags:null,links:null,_stage:"layouted",sourcePath:"views/deployment/otc/foundry.c4",description:null,title:"EDP Foundry Central Service",id:"edp-foundry-central-service",autoLayout:{direction:"TB"},hash:"8f8eb235b0e8ff555a22ed61d124ba68e67e5ee2",bounds:{x:0,y:0,width:3894,height:1218},nodes:[{id:"otc-edpFoundry",parent:null,level:0,children:["otc-edpFoundry.cce","otc-edpFoundry.forgejoRunnerInfrastructure","otc-edpFoundry.workflowSetupEDPInfrastructure","otc-edpFoundry.workflowSetupArgoCDInfrastructure"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry",title:"OTC EDP Foundry Central Service clusters",kind:"cloud",technology:"OTC",color:"slate",shape:"rectangle",description:{txt: ` OTC environments for the central EDP Foundry services . This is kubernetes clusters and other infrastructure like nodes and vms , and optionally platform servi
A tenant is a folder in Foundry - Config - Forgejo . On merge triggers reconciliation to EDP .
Optionally we will have a WebUI / API / CLI ` },tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:8,width:3878,height:1202,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otc-edpFoundry.cce",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.cce.internalServices","otc-edpFoundry.cce.centralObservability"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:58,y:79,width:2360,height:755,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edpFoundry.cce.internalServices",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.internalServices.externalSecrets","otc-edpFoundry.cce.internalServices.ingressNginx","otc-edpFoundry.cce.internalServices.argoCD","otc-edpFoundry.cce.internalServices.forgejo","otc-edpFoundry.cce.internalServices.openbao"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce.internalServices",title:"EDP Foundry Internal Services",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:1028,y:150,width:1340,height:634,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.cce.internalServices.externalSecrets",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:1308,y:222,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:65}},{id:"otc-edpFoundry.cce.centralObservability",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.centralObservability.grafana","otc-edpFoundry.cce.centralObservability.prometheus","otc-edpFoundry.cce.centralObservability.loki"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry.cce.centralObservability",title:"EDP Foundry Central Observability",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:108,y:150,width:870,height:634,labelBBox:{x:6,y:0,width:232,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["628xl1"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"green",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2468,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edpFoundry.cce.centralObservability.grafana",parent:"otc-edpFoundry.cce.centralObservability",level:3,children:[],inEdges:[],outEdges:["qykxlm","yv49z5"],kind:"instance",title:"Grafana",description:{txt:"Data visualization and monitoring"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.centralObservability.grafana",modelRef:"edp.grafana",x:289,y:222,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:47}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edpFoundry.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["628xl1"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2500,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.cce.cent
offering capabilities like
code version controling
collaboration and ticketing
and security scanning ` },technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:1978,y:554,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edpFoundry.cce.internalServices.openbao",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:["u5oqat"],outEdges:[],kind:"instance",title:"OpenBao",description:{txt:"Secure secret storage"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.openbao",modelRef:"edp.openbao",x:1528,y:554,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow"],inEdges:["84397w"],outEdges:[],deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure",title:"EDP infrastructure Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP infrastructure Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2902,y:150,width:442,height:1010,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupArgoCDInfrastructure.edpworkflow"],inEdges:["1oz2va9"],outEdges:[],deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",title:"EDP ArgoCD Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP Setup ArgoCD Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:3394,y:150,width:442,height:1010,labelBBox:{x:6,y:0,width:149,height:15}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["84397w"],outEdges:["1hnil62"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2961,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1oz2va9"],outEdges:["1gtxobu"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:3466,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["1hnil62"],outEdges:["ekzztw"],kind:"instance",title:"Forgejo Runner Worker",description:{txt:"A worker is a service that runs a job invoked by a runner. A worker typically is a container."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",modelRef:"forgejoRunnerWorker",x:2954,y:554,width:333,height:180,labelBBox:{x:18,y:45,width:297,height:84}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1gtxobu"]
A tenant is a folder in Foundry - Config - Forgejo . On merge triggers reconciliation to EDP .
Optionally we will have a WebUI / API / CLI ` },tags:[],style:{opacity:15,size:"md"},depth:3,x:2052,y:8,width:3408,height:1609,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otc-edpFoundry.cce",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.cce.internalServices","otc-edpFoundry.cce.centralObservability"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:2594,y:79,width:1890,height:1488,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edpFoundry.cce.internalServices",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.internalServices.externalSecrets","otc-edpFoundry.cce.internalServices.ingressNginx","otc-edpFoundry.cce.internalServices.argoCD","otc-edpFoundry.cce.internalServices.forgejo","otc-edpFoundry.cce.internalServices.openbao"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce.internalServices",title:"EDP Foundry Internal Services",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:2644,y:883,width:1790,height:634,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.cce.internalServices.externalSecrets",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:2694,y:1287,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:66}},{id:"otc-edpFoundry.cce.centralObservability",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.centralObservability.grafana","otc-edpFoundry.cce.centralObservability.prometheus","otc-edpFoundry.cce.centralObservability.loki"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry.cce.centralObservability",title:"EDP Foundry Central Observability",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:3349,y:150,width:870,height:634,labelBBox:{x:6,y:0,width:232,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["628xl1"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"green",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:5026,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edp-per-tenant",parent:null,level:0,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure","otc-edp-per-tenant.cce","otc-edp-per-tenant.cloudServices"],inEdges:["1asm38z","1or831y","ejqwjt"],outEdges:[],deploymentRef:"otc-edp-per-tenant",title:"OTC EDP per tenant cluster",kind:"cloud",technology:"OTC",color:"slate",shape:"rectangle",description:{txt: ` OTC environment for EDP . EDP is the environment a customer gets from us .
This is kubernetes clusters and other infrastructure like nodes and vms , and platform services . All is set up by IaC - pipelines in the Foundry . ` },tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:97,width:1994,height:1889,labelBBox:{x:6,y:0,width:181,height:15}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["1dcszi5"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:608,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edpFoundry.cce.centralObservability.grafana",parent:"otc-edpFoundry.cce.centralObservability",level:3,children:[],inEdges:[],outEdges:["qykxlm","yv49z5"],kind:"instance",title:"Grafana",description:{txt:"Data visualization and monitoring"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.centralObservability.grafana",modelRef:"edp.grafana",x:3530,y:222,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:47}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edpFoundry.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["628xl1"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:5058,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cce.edp"],inEdges:["1or831y","ejqwjt","1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:548,y:830,width:1404,height:719,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edp-per-tenant.cce.edp",parent:"otc-edp-per-tenant.cce",level:2,children:["otc-edp-per-tenant.cce.edp.externalSecrets","otc-edp-per-tenant.cce.edp.ingressNginx","otc-edp-per-tenant.cce.edp.argoCD","otc-edp-per-tenant.cce.edp.forgejo"],inEdges:["1or831y","ejqwjt","1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce.edp",title:"EDP",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:580,y:883,width:1340,height:634,labelBBox:{x:6,y:0,width:27,height:15}},{id:"otc-edp-per-tenant.cce.edp.externalSecrets",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:1550,y:1287,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:66}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edp-per-tenant.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["1dcszi5"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunn
offering capabilities like
code version controling
collaboration and ticketing
and security scanning ` },technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:4044,y:1287,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edpFoundry.cce.internalServices.openbao",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:["u5oqat"],outEdges:[],kind:"instance",title:"OpenBao",description:{txt:"Secure secret storage"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.openbao",modelRef:"edp.openbao",x:3594,y:1287,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow"],inEdges:["84397w"],outEdges:["1asm38z","1or831y"],deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure",title:"EDP infrastructure Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP infrastructure Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:4534,y:150,width:442,height:1035,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupArgoCDInfrastructure.edpworkflow"],inEdges:["1oz2va9"],outEdges:["ejqwjt"],deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",title:"EDP ArgoCD Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP Setup ArgoCD Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2102,y:150,width:442,height:1035,labelBBox:{x:6,y:0,width:149,height:15}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["84397w"],outEdges:["1hnil62"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:4595,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1oz2va9"],outEdges:["1gtxobu"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2163,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["1hnil62"],outEdges:["ekzztw"],kind:"instance",title:"Forgejo Runner Worker",description:{txt:"A worker is a service that runs a job invoked by a runner. A worker typically is a container."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",modelRef:"forgejoRunnerWorker",x:4588,y:554,width:333,height:180,labelBBox:{x:18,y:45,width:297,height:84}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,ch
offering capabilities like
code version controling
collaboration and ticketing
and security scanning ` },technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:630,y:1287,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cloudServices.postgres","otc-edp-per-tenant.cloudServices.redis","otc-edp-per-tenant.cloudServices.objectstorage","otc-edp-per-tenant.cloudServices.elasticsearch"],inEdges:["1asm38z","8msu1q","120qe5o","ealiax","1trj5u6"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},depth:1,x:58,y:1634,width:1894,height:302,labelBBox:{x:6,y:0,width:127,height:15}},{id:"otc-edp-per-tenant.cloudServices.postgres",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["8msu1q"],outEdges:[],kind:"instance",title:"PostgreSQL",description:{txt: ` PostgreSQL is a powerful , open source object - relational database system .
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability , data integrity ,
and correctness . ` },technology:"PostgreSQL",tags:[],icon:"tech:postgresql",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.postgres",modelRef:"postgres",x:1548,y:1706,width:354,height:180,labelBBox:{x:46,y:17,width:292,height:139}},{id:"otc-edp-per-tenant.cloudServices.redis",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["120qe5o"],outEdges:[],kind:"instance",title:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.redis",modelRef:"redis",x:608,y:1706,width:359,height:180,labelBBox:{x:47,y:26,width:297,height:121}},{id:"otc-edp-per-tenant.cloudServices.objectstorage",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["ealiax"],outEdges:[],kind:"instance",title:"s3 Object Storage",description:{txt:"s3 Object Storage"},technology:"S3 Object Storage",tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.objectstorage",modelRef:"objectstorage",x:1098,y:1706,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"otc-edp-per-tenant.cloudServices.elasticsearch",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["1trj5u6"],outEdges:[],kind:"instance",title:"Elasticsearch",description:{txt: ` Elasticsearch is a distributed , RESTful search and analytics engine capable of
addressing a growing number of use cases . It centrally stores your data so you can
2025-11-16 23:10:11 +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",dotpos:"e,3463.8,1312.3 4054.2,1100.1 3915,1148.1 3708,1220.4 3529,1287.4 3511,1294.1 3492.2,1301.3 3473.6,1308.5",points:[[4054,1100],[3915,1148],[3708,1220],[3529,1287],[3511,1294],[3492,1301],[3474,1309]],labelBBox:{x:3755,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"170pc3l",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.forgejo",label:"https",dotpos:"e,4214,1287.5 4214,1134.2 4214,1178.3 4214,1231.6 4214,1277",points:[[4214,1134],[4214,1178],[4214,1232],[4214,1277]],labelBBox:{x:4215,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"u5oqat",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.openbao",label:"https",dotpos:"e,3877.5,1287.6 4090.4,1134.5 4027.1,1180 3950.1,1235.4 3885.6,1281.7",points:[[4090,1134],[4027,1180],[3950,1235],[3886,1282]],labelBBox:{x:3999,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["1p30hav"],color:"gray",line:"dashed",head:"normal"},{id:"qykxlm",source:"otc-edpFoundry.cce.centralObservability.grafana",target:"otc-edpFoundry.cce.centralObservability.prometheus",label:"get metrics and alerts",dotpos:"e,3597.7,554.51 3664.4,401.25 3645.1,445.56 3621.7,499.31 3601.9,544.91",points:[[3664,401],[3645,446],[3622,499],[3602,545]],labelBBox:{x:3636,y:466,width:138,height:18},parent:"otc-edpFoundry.cce.centralObservability",relations:["13uvtiq"],color:"gray",line:"dashed",head:"normal"},{id:"yv49z5",source:"otc-edpFoundry.cce.centralObservability.grafana",target:"otc-edpFoundry.cce.centralObservability.loki",label:"get logs",dotpos:"e,3926.8,554.51 3785,401.25 3826.6,446.21 3877.2,500.89 3919.7,546.91",points:[[3785,401],[3827,446],[3877,501],[3920,547]],labelBBox:{x:3866,y:466,width:53,height:18},parent:"otc-edpFoundry.cce.centralObservability",relations:["1n1utzc"],color:"gray",line:"dashed",head:"normal"},{id:"84397w",source:"otc-edpFoundry.cce.internalServices.forgejo",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",label:"invokes",dotpos:"e,4871.9,401.35 4384,1358.7 4589.5,1333.3 4917.1,1279 4991,1184.6 5006.1,1165.4 5006.3,601.48 4987,554.4 4964.1,498.68 4921.8,448.48 4879.5,408.45",points:[[4384,1359],[4590,1333],[4917,1279],[4991,1185],[5006,1165],[5006,601],[4987,554],[4964,499],[4922,448],[4880,408]],labelBBox:{x:5002,y:799,width:51,height:18},parent:"otc-edpFoundry",relations:["dola40"],color:"gray",line:"dashed",head:"normal"},{id:"1hnil62",source:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",label:"runs",dotpos:"e,4755,554.51 4755,401.25 4755,445.28 4755,498.64 4755,544.05",points:[[4755,401],[4755,445],[4755,499],[4755,544]],labelBBox:{x:4756,y:466,width:31,height:18},parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",relations:["7kqly3"],color:"gray",line:"dashed",head:"normal"},{id:"ekzztw",source:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow",label:"executes",dotpos:"e,4755,954.66 4755,734.27 4755,796.6 4755,879.99 4755,944.48",points:[[4755,734],[4755,797],[4755,880],[4755,944]],labelBBox:{x:4756,y:799,width:60,height:18},parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",relations:["12hf1w4"],color:"gray",line:"dashed",head:"normal"},{id:"1oz2va9",source:"otc-edpFoundry.c
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the 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
and security scanning ` },tags:[],technology:"Golang",kind:"container",isCustomized:!0,navigateTo:"forgejo",x:585,y:69,width:340,height:180,labelBBox:{x:45,y:17,width:279,height:139}}],edges:[{id:"step-01",source:"localbox.git",target:"edp.forgejogit",label:"git push",dotpos:"e,594.97,449 359.74,449 430.11,449 512.98,449 584.5,449",points:[[360,449],[430,449],[513,449],[585,449]],labelBBox:{x:429,y:417,width:75,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@0"},{id:"step-02",source:"edp.forgejogit",target:"forgejoRunner",label:"on push",dotpos:"e,1243.2,909.08 895.71,538.9 1008.4,612.21 1151.2,707.77 1171.7,734 1218.9,794.54 1183.7,836.08 1231.7,896 1233.2,897.83 1234.7,899.63 1236.2,901.41",points:[[896,539],[1008,612],[1151,708],[1172,734],[1219,795],[1184,836],[1232,896],[1233,898],[1235,900],[1236,901]],labelBBox:{x:1051,y:582,width:76,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@1"},{id:"step-03",source:"forgejoRunner",target:"edp.imageregistry",label:"pushes new image",dotpos:"e,823.44,828.86 1231.8,1011.9 1158.8,1011.9 1072.7,1003.2 1001.2,971.8 934.18,942.34 874.24,886.42 830.35,836.77",points:[[1232,1012],[1159,1012],[1073,1003],[1001,972],[934,942],[874,886],[830,837]],labelBBox:{x:1018,y:940,width:143,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@2"},{id:"step-04",source:"forgejoRunner",target:"edp.forgejogit",label:"pushes new appspec",dotpos:"s,892.11,538.97 899.79,546.08 915.25,560.79 929.55,576.84 941.18,594 994.62,672.87 940.47,726.37 1001.2,799.8 1033.6,839.02 1138.8,891.76 1231.7,933.12",points:[[900,546],[915,561],[930,577],[941,594],[995,673],[940,726],[1001,800],[1034,839],[1139,892],[1232,933]],labelBBox:{x:1010,y:768,width:158,height:19},dir:"back",parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@3"},{id:"step-05",source:"edp.forgejogit",target:"edp.argoCD",label:"triggers deployment",dotpos:"e,1231.9,550.99 914.25,482.97 1007.9,503.03 1126.5,528.41 1221.9,548.84",points:[[914,483],[1008,503],[1126,528],[1222,549]],labelBBox:{x:1015,y:473,width:148,height:19},parent:"edp",relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@4"},{id:"step-06",source:"edp.argoCD",target:"cloud",label:"deploys application",dotpos:"e,1894.7,1063.3 1486.9,674.69 1596,778.69 1775.3,949.49 1887.4,1056.4",points:[[1487,675],[1596,779],[1775,949],[1887,1056]],labelBBox:{x:1621,y:769,width:145,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@5"},{id:"step-07",source:"cloud",target:"edp.imageregistry",label:"pulls image",dotpos:"s,812.1,828.53 817.94,836.93 897.44,950.49 1047,1129 1231.7,1182.8 1431.9,1241.1 1674.4,1215.8 1830.1,1188.1",points:[[818,837],[897,950],[1047,1129],[1232,1183],[1432,1241],[1674,1216],[1830,1188]],labelBBox:{x:1346,y:1151,width:97,height:19},dir:"back",parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@6"}]},edpbuilderworkflow:{_type:"element",tags:null,links:null,viewOf:"edfbuilder",_stage:"layouted",sourcePath:"views/edp/edfbuilder.c4",description:{txt:"Describes the process how to create an EDP instance"},title:"edfbuilder",id:"edpbuilderworkflow",autoLayout:{direction:"LR",nodeSep:110,rankSep:120},hash:"40921acf4f52bd8d6d2ac3a0d1810b3b7bc13b2a",bounds:{x:0,y:0,width:320,height:180},nodes:[{id:"edfbuilder",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"edfbuilder",modelRef:"edfbuilder",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"EDP Foundry Builder"},tags:[],technology:"Golang",kind:"component",x:0,y:0,width:320,height:180,labelBBox:{x:74,y:53,width:203,height:67}}],edges:[]},edp:{_type:"element",tags:null,links:null,viewOf:"edp",_stage:"layouted",sourcePath:"views/edp/edp.c4",description:null,title:"Context view",id:"edp",autoLayout:{direction:"TB"},hash:"28d4204eb300a4296f82769be0ee6d6ba8d0882b",bounds:{x:0,y:0,wi
offering capabilities like
code version controling
collaboration and ticketing
and security scanning ` },tags:[],technology:"Golang",kind:"container",navigateTo:"forgejo",x:1830,y:392,width:340,height:180,labelBBox:{x:46,y:17,width:278,height:139}},{id:"edp.imageregistry",parent:"edp",level:1,children:[],inEdges:["1nv0w41"],outEdges:[],title:"Forgejo OCI Image Registry",modelRef:"edp.imageregistry",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:25,size:"md"},description:{txt:"Container Image Registry"},tags:[],technology:"Golang",kind:"component",x:2280,y:392,width:373,height:180,labelBBox:{x:47,y:53,width:311,height:67}},{id:"edp.grafana",parent:"edp",level:1,children:[],inEdges:["3nxrq7"],outEdges:["1tfxhhz","1adt45o"],title:"Grafana",modelRef:"edp.grafana",shape:"rectangle",color:"primary",icon:"tech:grafana",style:{opacity:25,size:"md"},description:{txt:"Data visualization and monitoring"},tags:[],kind:"container",x:2763,y:392,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:48}},{id:"edp.keycloak",parent:"edp",level:1,children:[],inEdges:["bfgapq"],outEdges:[],title:"Keycloak",modelRef:"edp.keycloak",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Single Sign On for all EDP products"},tags:[],kind:"container",navigateTo:"keycloak",x:3219,y:392,width:320,height:180,labelBBox:{x:39,y:63,width:242,height:48}},{id:"edp.forgejogit",parent:"edp",level:1,children:[],inEdges:["1agven9","f6xyb4"],outEdges:[],title:"ForgejoGit",modelRef:"edp.forgejogit",shape:"rectangle",color:"primary",icon:"tech:git",style:{opacity:25,size:"md"},tags:[],kind:"component",x:4079,y:715,width:320,height:180,labelBBox:{x:97,y:74,width:156,height:24}},{id:"edp.loki",parent:"edp",level:1,children:[],inEdges:["1tfxhhz"],outEdges:[],title:"Loki",modelRef:"edp.loki",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Log aggregation system"},tags:[],kind:"container",x:2561,y:715,width:320,height:180,labelBBox:{x:78,y:63,width:164,height:47}},{id:"edp.prometheus",parent:"edp",level:1,children:[],inEdges:["1adt45o"],outEdges:[],title:"Prometheus",modelRef:"edp.prometheus",shape:"rectangle",color:"primary",icon:"tech:prometheus",style:{opacity:25,size:"md"},description:{txt:"Monitoring and alerting toolkit"},tags:[],kind:"container",x:2991,y:715,width:320,height:180,labelBBox:{x:46,y:63,width:258,height:47}},{id:"edp.mailhog",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"Mailhog",modelRef:"edp.mailhog",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Web and API based SMTP testing"},tags:[],kind:"container",navigateTo:"mailhog",x:890,y:69,width:320,height:180,labelBBox:{x:44,y:63,width:232,height:48}},{id:"edp.minio",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"Minio",modelRef:"edp.minio",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"S3 compatible blob storage"},tags:[],kind:"container",navigateTo:"minio",x:1320,y:69,width:320,height:180,labelBBox:{x:67,y:63,width:186,height:48}},{id:"edp.monitoring",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"Monitoring",modelRef:"edp.monitoring",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Observability system to monitor deployed components"},tags:[],kind:"container",navigateTo:"monitoring",x:1860,y:69,width:320,height:180,labelBBox:{x:21,y:54,width:278,height:66}},{id:"edp.openbao",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"OpenBao",modelRef:"edp.openbao",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Secure secret storage"},tags:[],kind:"container",x:430,y:392,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"edp.testApp",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"Fibonacci",modelRef:"edp.testApp",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Testapp to validate deployments"},tags:[],kind:"container",navigateTo:"testapp",x:860,y:392,width:320,height:180,labelBBox:{x:50,y:63,width:220,height:48}},{id:"edp.application",parent:"ed
offering capabilities like
code version controling
collaboration and ticketing
and security scanning ` },tags:[],technology:"Golang",kind:"container",depth:1,x:8,y:239,width:830,height:281,labelBBox:{x:6,y:0,width:58,height:15}},{id:"edp.forgejo.forgejocollaboration",parent:"edp.forgejo",level:1,children:[],inEdges:[],outEdges:[],title:"Collaboration",modelRef:"edp.forgejo.forgejocollaboration",shape:"rectangle",color:"primary",icon:"tech:github",style:{opacity:15,size:"md"},tags:[],kind:"component",x:48,y:300,width:320,height:180,labelBBox:{x:85,y:74,width:180,height:24}},{id:"edp.forgejo.forgejoproject",parent:"edp.forgejo",level:1,children:[],inEdges:[],outEdges:[],title:"Project Mgmt",modelRef:"edp.forgejo.forgejoproject",shape:"rectangle",color:"primary",icon:"tech:github",style:{opacity:15,size:"md"},tags:[],kind:"component",x:478,y:300,width:320,height:180,labelBBox:{x:85,y:74,width:180,height:24}},{id:"edp.ingressNginx",parent:null,level:0,children:[],inEdges:[],outEdges:["1dgzzfb"],title:"Ingress",modelRef:"edp.ingressNginx",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Ingress Controller for incoming http(s) traffic"},tags:["internal"],kind:"container",navigateTo:"ingressNginx",x:48,y:0,width:320,height:180,labelBBox:{x:33,y:54,width:255,height:66}}],edges:[{id:"1dgzzfb",source:"edp.ingressNginx",target:"edp.forgejo",label:"https",dotpos:"e,208,238.8 208,179.6 208,195.09 208,211.63 208,228.36",points:[[208,180],[208,195],[208,212],[208,228]],labelBBox:{x:173,y:186,width:34,height:18},parent:null,relations:["123efwn"],color:"gray",line:"dashed",head:"normal"}]},crossplane:{_type:"element",tags:null,links:null,viewOf:"edp.crossplane",_stage:"layouted",sourcePath:"views/edp/edp.c4",description:null,title:"Crossplane",id:"crossplane",autoLayout:{direction:"TB"},hash:"21cafdc6d03bbe02437c3a01524d368cfd652a88",bounds:{x:0,y:0,width:1276,height:597},nodes:[{id:"edp.crossplane",parent:null,level:0,children:["edp.crossplane.crossplane","edp.crossplane.crossplaneFunction","edp.crossplane.crossplaneRbacManager","edp.crossplane.providerArgoCD","edp.crossplane.providerKind","edp.crossplane.providerShell"],inEdges:[],outEdges:[],title:"Crossplane",modelRef:"edp.crossplane",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Declarative management of ressources"},tags:["internal"],kind:"container",depth:1,x:8,y:8,width:1260,height:581,labelBBox:{x:6,y:0,width:80,height:15}},{id:"edp.crossplane.crossplane",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"Crossplane",modelRef:"edp.crossplane.crossplane",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:48,y:69,width:320,height:180,labelBBox:{x:107,y:74,width:105,height:24}},{id:"edp.crossplane.crossplaneFunction",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"Function Patch and Transform",modelRef:"edp.crossplane.crossplaneFunction",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:478,y:69,width:320,height:180,labelBBox:{x:23,y:74,width:273,height:24}},{id:"edp.crossplane.crossplaneRbacManager",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"RBAC Manager",modelRef:"edp.crossplane.crossplaneRbacManager",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:908,y:69,width:320,height:180,labelBBox:{x:88,y:74,width:144,height:24}},{id:"edp.crossplane.providerArgoCD",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"ArgoCD Provider",modelRef:"edp.crossplane.providerArgoCD",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:48,y:369,width:320,height:180,labelBBox:{x:82,y:74,width:155,height:24}},{id:"edp.crossplane.providerKind",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"Kind Provider",modelRef:"edp.crossplane.providerKind",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:478,y:369,width:320,height:180,labelBBox:{x:98,y:74,width:124,height:24}},{id:"edp.crossplane.providerShe
offering capabilities like
code version controling
collaboration and ticketing
2025-11-16 23:10:11 +01:00
and security scanning ` },tags:[],technology:"Golang",kind:"container",navigateTo:"forgejo",x:860,y:384,width:340,height:180,labelBBox:{x:46,y:17,width:278,height:139}},{id:"edp.keycloak",parent:null,level:0,children:[],inEdges:["dh7ut5"],outEdges:[],title:"Keycloak",modelRef:"edp.keycloak",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Single Sign On for all EDP products"},tags:[],kind:"container",navigateTo:"keycloak",x:1310,y:384,width:320,height:180,labelBBox:{x:39,y:63,width:242,height:48}},{id:"edp.mailhog",parent:null,level:0,children:[],inEdges:["1bv0wod"],outEdges:[],title:"Mailhog",modelRef:"edp.mailhog",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Web and API based SMTP testing"},tags:[],kind:"container",navigateTo:"mailhog",x:1740,y:384,width:320,height:180,labelBBox:{x:44,y:63,width:232,height:48}},{id:"edp.minio",parent:null,level:0,children:[],inEdges:["68hu20"],outEdges:[],title:"Minio",modelRef:"edp.minio",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"S3 compatible blob storage"},tags:[],kind:"container",navigateTo:"minio",x:2170,y:384,width:320,height:180,labelBBox:{x:67,y:63,width:186,height:48}},{id:"edp.monitoring",parent:null,level:0,children:[],inEdges:["nx2xew"],outEdges:[],title:"Monitoring",modelRef:"edp.monitoring",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Observability system to monitor deployed components"},tags:[],kind:"container",navigateTo:"monitoring",x:2600,y:384,width:320,height:180,labelBBox:{x:21,y:54,width:278,height:66}},{id:"edp.openbao",parent:null,level:0,children:[],inEdges:["momp7g"],outEdges:[],title:"OpenBao",modelRef:"edp.openbao",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Secure secret storage"},tags:[],kind:"container",x:3030,y:384,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"edp.testApp",parent:null,level:0,children:[],inEdges:["8cmkj7"],outEdges:[],title:"Fibonacci",modelRef:"edp.testApp",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Testapp to validate deployments"},tags:[],kind:"container",navigateTo:"testapp",x:3460,y:384,width:320,height:180,labelBBox:{x:50,y:63,width:220,height:48}}],edges:[{id:"1poylyw",source:"edp.ingressNginx.ingressNginx",target:"edp.argoCD",label:"https",dotpos:"e,319.96,401.87 1740.1,163.73 1459.5,186.77 861.79,248.41 375.02,384 360.03,388.17 344.69,393.11 329.44,398.47",points:[[1740,164],[1459,187],[862,248],[375,384],[360,388],[345,393],[329,398]],labelBBox:{x:704,y:301,width:34,height:18},parent:null,relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"llqgvs",source:"edp.ingressNginx.ingressNginx",target:"edp.ui",label:"https",dotpos:"e,749.97,403.03 1740.4,176.52 1525.1,211.47 1131,282.97 805.02,384 790.08,388.63 774.74,393.9 759.47,399.5",points:[[1740,177],[1525,211],[1131,283],[805,384],[790,389],[775,394],[759,400]],labelBBox:{x:1102,y:301,width:34,height:18},parent:null,relations:["v8c8aq"],color:"gray",line:"dashed",head:"normal"},{id:"75xltk",source:"edp.ingressNginx.ingressNginx",target:"edp.forgejo",label:"https",dotpos:"e,1200.3,405 1740.1,208.08 1609.3,254.18 1419.6,321.88 1255,384 1240.3,389.56 1225.1,395.4 1209.8,401.31",points:[[1740,208],[1609,254],[1420,322],[1255,384],[1240,390],[1225,395],[1210,401]],labelBBox:{x:1468,y:301,width:34,height:18},parent:null,relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"dh7ut5",source:"edp.ingressNginx.ingressNginx",target:"edp.keycloak",label:"https",dotpos:"e,1589.1,384.17 1780.8,241.13 1723.7,283.73 1655.3,334.77 1597.2,378.11",points:[[1781,241],[1724,284],[1655,335],[1597,378]],labelBBox:{x:1699,y:301,width:34,height:18},parent:null,relations:["h3rut2"],color:"gray",line:"dashed",head:"normal"},{id:"1bv0wod",source:"edp.ingressNginx.ingressNginx",target:"edp.mailhog",label:"https",dotpos:"e,1900,384.17 1900,241.13 1900,282.33 1900,331.44 1900,373.83",points:[[1900,241],[1900,282],[1900,331],[1900,374]],labelBBo
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
addressing a growing number of use cases . It centrally stores your data so you can
2025-11-16 23:10:11 +01:00
discover the expected and uncover the unexpected . ` },tags:[],technology:"Elasticsearch",kind:"container",x:1888,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-11-16 23:10:11 +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","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:1286,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:2508,y:405,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:2508,y:1188,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:1073,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:1576,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:1286,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:["1tbee2v","5mpoyf","17brhnu","35ru8e"],level:0,depth:2,tags:[],style:{border:"none",opacity:20},x:1189,y:500,width:1129,height:746,labelBBox:{x:6,y:0,width:114,height:15}},{id:"developer",parent:"@gr1",level:1,children:[],inEdges:[],outEdges:["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:664,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 in the outer loop"},tags:[],kind:"actor",x:1229,y:994,width:375,height:180,labelBBo
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
addressing a growing number of use cases . It centrally stores your data so you can
2025-11-16 23:10:11 +01:00
discover the expected and uncover the unexpected . ` },tags:[],technology:"Elasticsearch",kind:"container",x:2371,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-11-16 23:10:11 +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","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:1726,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:3153,y:460,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:3153,y:1463,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:1458,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:2071,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:1726,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:["1tbee2v","5mpoyf","17brhnu","35ru8e"],level:0,depth:2,tags:[],style:{border:"none",opacity:20},x:1506,y:720,width:1457,height:966,labelBBox:{x:6,y:0,width:114,height:15}},{id:"developer",parent:"@gr1",level:1,children:[],inEdges:[],outEdges:["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:884,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:"Coworking roles in the outer loop"},tags:[],kind:"actor",x:1546,y:1324,width:542,height:29
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
2025-11-07 11:50:17 +01:00
This is kubernetes clusters and other infrastructure like nodes and vms , and platform services . All is set up by IaC - pipelines in the Foundry . ` },technology:"OTC",title:"OTC EDP per tenant cluster",id:"otc-edp-per-tenant"},"otc-faas":{style:{},kind:"cloud",description:{txt:"OTC environments for Prototype faaS."},technology:"OTC",title:"OTC prototype FaaS",id:"otc-faas"},edge:{style:{},kind:"cloud",description:{txt:"Edge environments for distributed workloads."},technology:"Edge",title:"Edge Cloud",id:"edge"},"otc-edpFoundry":{style:{},kind:"cloud",description:{txt: ` OTC environments for the central EDP Foundry services . This is kubernetes clusters and other infrastructure like nodes and vms , and optionally platform services . All is set up by IaC terraform and edpbuilder .
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
A tenant is a folder in Foundry - Config - Forgejo . On merge triggers reconciliation to EDP .
2025-11-16 23:10:11 +01:00
Optionally we will have a WebUI / API / CLI ` },technology:"OTC",title:"OTC EDP Foundry Central Service clusters",id:"otc-edpFoundry"},"local.backstage":{style:{},kind:"namespace",title:"backstage",id:"local.backstage"},"local.argocd":{style:{},kind:"namespace",title:"argocd",id:"local.argocd"},"local.gitea":{style:{},kind:"namespace",title:"gitea",id:"local.gitea"},"local.keycloak":{style:{},kind:"namespace",title:"keycloak",id:"local.keycloak"},"local.crossplane":{style:{},kind:"namespace",title:"crossplane-system",id:"local.crossplane"},"local.externalSecrets":{style:{},kind:"namespace",title:"external-secrets",id:"local.externalSecrets"},"local.velero":{style:{},kind:"namespace",title:"velero",id:"local.velero"},"local.minio":{style:{},kind:"namespace",title:"minio-backup",id:"local.minio"},"local.monitoring":{style:{},kind:"namespace",title:"monitoring",id:"local.monitoring"},"local.ingressNginx":{style:{},kind:"namespace",title:"ingress-nginx",id:"local.ingressNginx"},"local.openbao":{style:{},kind:"namespace",title:"openbao",id:"local.openbao"},"local.fibonacci":{style:{},kind:"namespace",title:"fibonacci-app",id:"local.fibonacci"},"local.mailhog":{style:{},kind:"namespace",title:"mailhog",id:"local.mailhog"},"local.spark":{style:{},kind:"namespace",title:"spark",id:"local.spark"},"otc-edp-per-tenant.cce":{style:{icon:"tech:kubernetes"},kind:"kubernetes",description:{txt:"OTC Container Cluster Engine"},technology:"Kubernetes",title:"OTC CCE",id:"otc-edp-per-tenant.cce"},"otc-edp-per-tenant.cloudServices":{style:{},kind:"paas",description:{txt:"EDP Cloud Services"},technology:"Cloud Services",title:"EDP Cloud Services",id:"otc-edp-per-tenant.cloudServices"},"otc-edp-per-tenant.forgejoRunnerInfrastructure":{style:{},kind:"computeressource",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},title:"EDP ForgejoRunner infrastructure",id:"otc-edp-per-tenant.forgejoRunnerInfrastructure"},"otc-faas.dev":{style:{},kind:"environment",description:{txt:"*.t09.de"},technology:"OTC",title:"tenant Dev",id:"otc-faas.dev"},"otc-faas.prod":{style:{},kind:"environment",description:{txt:"*.buildth.ing"},technology:"OTC",title:"Tenant Prod",id:"otc-faas.prod"},"edge.edge-dev":{style:{},kind:"environment",description:{txt:"Edge development environment"},technology:"Edge",title:"Edge Dev",id:"edge.edge-dev"},"edge.edge-prod":{style:{},kind:"environment",description:{txt:"Edge production environment"},technology:"Edge",title:"Edge Prod",id:"edge.edge-prod"},"otc-edpFoundry.cce":{style:{icon:"tech:kubernetes"},kind:"kubernetes",description:{txt:"OTC Container Cluster Engine"},technology:"Kubernetes",title:"OTC CCE",id:"otc-edpFoundry.cce"},"otc-edpFoundry.workflowSetupEDPInfrastructure":{style:{},kind:"computeressource",description:{txt:"EDP infrastructure Workflow"},title:"EDP infrastructure Workflow",id:"otc-edpFoundry.workflowSetupEDPInfrastructure"},"otc-edpFoundry.workflowSetupArgoCDInfrastructure":{style:{},kind:"computeressource",description:{txt:"EDP Setup ArgoCD Workflow"},title:"EDP ArgoCD Workflow",id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure"},"otc-edpFoundry.forgejoRunnerInfrastructure":{style:{},kind:"computeressource",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},title:"EDP ForgejoRunner infrastructure",id:"otc-edpFoundry.forgejoRunnerInfrastructure"},"local.backstage.backstage":{id:"local.backstage.backstage",element:"edp.ui.backstage",style:{}},"local.backstage.database":{id:"local.backstage.database",element:"edp.ui.database",style:{}},"local.argocd.argocdAppController":{id:"local.argocd.argocdAppController",element:"edp.argoCD.argocdAppController",style:{}},"local.argocd.argocdAppSetController":{id:"local.argocd.argocdAppSetController",element:"edp.argoCD.argocdAppSetController",style:{}},"local.argocd.argocdRedis":{id:"local.argocd.argocdRedis",element:"edp.argoCD.argocdRedis",style:{}},"local.argocd.argocdRepoServer":{id:"local.argocd.argocdRepoServer",element:"edp.argoCD.argocdRepoServer",style:{}},"local.argocd.argocdServer":{id:"local.argocd.argocdS
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
at ` )?" (<anonymous>)":-1<v.stack.indexOf("@")?"@unknown:0:0":""}return `
2025-11-16 23:10:11 +01:00
` +he+p+me}var Ie=!1;function Ze(p,m){if(!p||Ie)return"";Ie=!0;var v=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{var S={DetermineComponentFrameRoot:function(){try{if(m){var Pe=function(){throw Error()};if(Object.defineProperty(Pe.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(Pe,[])}catch(Ce){var ke=Ce}Reflect.construct(p,[],Pe)}else{try{Pe.call()}catch(Ce){ke=Ce}p.call(Pe.prototype)}}else{try{throw Error()}catch(Ce){ke=Ce}(Pe=p())&&typeof Pe.catch=="function"&&Pe.catch(function(){})}}catch(Ce){if(Ce&&ke&&typeof Ce.stack=="string")return[Ce.stack,ke.stack]}return[null,null]}};S.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var $ =Object.getOwnPropertyDescriptor(S.DetermineComponentFrameRoot,"name"); $ && $ .configurable&&Object.defineProperty(S.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var z=S.DetermineComponentFrameRoot(),X=z[0],oe=z[1];if(X&&oe){var pe=X.split( `
` ),we=oe.split( `
` );for( $ =S=0;S<pe.length&&!pe[S].includes("DetermineComponentFrameRoot");)S++;for(; $ <we.length&&!we[ $ ].includes("DetermineComponentFrameRoot");) $ ++;if(S===pe.length|| $ ===we.length)for(S=pe.length-1, $ =we.length-1;1<=S&&0<= $ &&pe[S]!==we[ $ ];) $ --;for(;1<=S&&0<= $ ;S--, $ --)if(pe[S]!==we[ $ ]){if(S!==1|| $ !==1)do if(S--, $ --,0> $ ||pe[S]!==we[ $ ]){var Ne= `
` +pe[S].replace(" at new "," at ");return p.displayName&&Ne.includes("<anonymous>")&&(Ne=Ne.replace("<anonymous>",p.displayName)),Ne}while(1<=S&&0<= $ );break}}}finally{Ie=!1,Error.prepareStackTrace=v}return(v=p?p.displayName||p.name:"")?Te(v):""}function rt(p,m){switch(p.tag){case 26:case 27:case 5:return Te(p.type);case 16:return Te("Lazy");case 13:return p.child!==m&&m!==null?Te("Suspense Fallback"):Te("Suspense");case 19:return Te("SuspenseList");case 0:case 15:return Ze(p.type,!1);case 11:return Ze(p.type.render,!1);case 1:return Ze(p.type,!0);case 31:return Te("Activity");default:return""}}function Rt(p){try{var m="",v=null;do m+=rt(p,v),v=p,p=p.return;while(p);return m}catch(S){return `
Error generating stack : ` +S.message+ `
` +S.stack}}var Qe=Object.prototype.hasOwnProperty,Pt=e.unstable_scheduleCallback,Ke=e.unstable_cancelCallback,Ge=e.unstable_shouldYield,ct=e.unstable_requestPaint,ut=e.unstable_now,Ir=e.unstable_getCurrentPriorityLevel,Ee=e.unstable_ImmediatePriority,Se=e.unstable_UserBlockingPriority,it=e.unstable_NormalPriority,xt=e.unstable_LowPriority,zt=e.unstable_IdlePriority,Fr=e.log,It=e.unstable_setDisableYieldValue,vr=null,fr=null;function un(p){if(typeof Fr=="function"&&It(p),fr&&typeof fr.setStrictMode=="function")try{fr.setStrictMode(vr,p)}catch{}}var ir=Math.clz32?Math.clz32:ea,vn=Math.log,xr=Math.LN2;function ea(p){return p>>>=0,p===0?32:31-(vn(p)/xr|0)|0}var xa=256,Gs=262144,Vo=4194304;function wa(p){var m=p&42;if(m!==0)return m;switch(p&-p){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 p&261888;case 262144:case 524288:case 1048576:case 2097152:return p&3932160;case 4194304:case 8388608:case 16777216:case 33554432:return p&62914560;case 67108864:return 67108864;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 0;default:return p}}function Xs(p,m,v){var S=p.pendingLanes;if(S===0)return 0;var $ =0,z=p.suspendedLanes,X=p.pingedLanes;p=p.warmLanes;var oe=S&134217727;return oe!==0?(S=oe&~z,S!==0? $ =wa(S):(X&=oe,X!==0? $ =wa(X):v||(v=oe&~p,v!==0&&( $ =wa(v))))):(oe=S&~z,oe!==0? $ =wa(oe):X!==0? $ =wa(X):v||(v=S&~p,v!==0&&( $ =wa(v)))), $ ===0?0:m!==0&&m!== $ &&(m&z)===0&&(z= $ &- $ ,v=m&-m,z>=v||z===32&&(v&4194048)!==0)?m: $ }function fo(p,m){return(p.pendingLanes&~(p.suspendedLanes&~p.pingedLanes)&m)===0}function Ol(p,m){switch(p){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 jl(){var p=Vo;return Vo<<=1,(Vo&62914560)===0&&(Vo=4194304),p}function Bc(p){for(var m=[],v=0;31>v;v++)m.push(p);return m}function Ks(p,m){p.pendingLanes|=m,m!==268435456&&(p.suspendedLanes=0,p.pingedLanes=0,p.warmLanes=0)}function Rh(p,m,v,S, $ ,z){var X=p.pendingLanes;p.pendingLanes=v,p.suspendedLanes=0,p.pingedLanes=0,p.warmLanes=0,p.expiredLanes&=v,p.entangledLanes&=v,p.errorRecoveryDisabledLanes&=v,p.shellSuspendCounter=0;var oe=p.entanglements,pe=p.expirationTimes,we=p.hiddenUpdates;for(v=X&~v;0<v;){var Ne=31-ir(v),Pe=1<<Ne;oe[Ne]=0,pe[Ne]=-1;var ke=we[Ne];if(ke!==null)for(we[Ne]=null,Ne=0;Ne<ke.length;Ne++){var Ce=ke[Ne];Ce!==null&&(Ce.lane&=-536870913)}v&=~Pe}S!==0&&Ll(p,S,0),z!==0&& $ ===0&&p.tag!==0&&(p.suspendedLanes|=z&~(X&~m))}function Ll(p,m,v){p.pendingLanes|=m,p.suspendedLanes&=~m;var S=31-ir(m);p.entangledLanes|=m,p.entanglements[S]=p.entanglements[S]|1073741824|v&261930}function id(p,m){var v=p.entangledLanes|=m;for(p=p.entanglements;v;){var S=31-ir(v), $ =1<<S; $ &m|p[S]&m&&(p[S]|=m),v&=~ $ }}function ta(p,m){var v=m&-m;return v=(v&42)!==0?1:Fc(v),(v&(p.suspendedLanes|m))!==0?0:v}function Fc(p){switch(p){case 2:p=1;break;case 8:p=4;break;case 32:p=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:p=128;break;case 268435456:p=134217728;break;default:p=0}return p}function Bl(p){return p&=-p,2<p?8<p?(p&134217727)!==0?32:268435456:8:2}function sd(){var p=H.p;return p!==0?p:(p=window.event,p===void 0?32:b1e(p.type))}function Fl(p,m){var v=H.p;try{return H.p=p,m()}finally{H.p=v}}var ra=Math.random().toString(36).slice(2),Wr="__reactFiber $ "+ra,Vn="__reactProps $ "+ra,qo="__reactContainer $ "+ra,Zs="__reactEvents $ "+ra,Hc="__reactListeners $ "+ra,Nh="__reactHandles $ "+ra,Za="__reactResources $ "
` ).replace(h4t,"")}function Wge(p,m){return m=Uge(m),Uge(p)===m}function $ r(p,m,v,S, $ ,z){switch(v){case"children":typeof S=="string"?m==="body"||m==="textarea"&&S===""||Xe(p,S):(typeof S=="number"||typeof S=="bigint")&&m!=="body"&&Xe(p,""+S);break;case"className":ql(p,"class",S);break;case"tabIndex":ql(p,"tabindex",S);break;case"dir":case"role":case"viewBox":case"width":case"height":ql(p,v,S);break;case"style":Yt(p,S,z);break;case"data":if(m!=="object"){ql(p,"data",S);break}case"src":case"href":if(S===""&&(m!=="a"||v!=="href")){p.removeAttribute(v);break}if(S==null||typeof S=="function"||typeof S=="symbol"||typeof S=="boolean"){p.removeAttribute(v);break}S=Ct(""+S),p.setAttribute(v,S);break;case"action":case"formAction":if(typeof S=="function"){p.setAttribute(v,"javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you \\ 're trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')");break}else typeof z=="function"&&(v==="formAction"?(m!=="input"&& $ r(p,m,"name", $ .name, $ ,null), $ r(p,m,"formEncType", $ .formEncType, $ ,null), $ r(p,m,"formMethod", $ .formMethod, $ ,null), $ r(p,m,"formTarget", $ .formTarget, $ ,null)):( $ r(p,m,"encType", $ .encType, $ ,null), $ r(p,m,"method", $ .method, $ ,null), $ r(p,m,"target", $ .target, $ ,null)));if(S==null||typeof S=="symbol"||typeof S=="boolean"){p.removeAttribute(v);break}S=Ct(""+S),p.setAttribute(v,S);break;case"onClick":S!=null&&(p.onclick=Gt);break;case"onScroll":S!=null&&tr("scroll",p);break;case"onScrollEnd":S!=null&&tr("scrollend",p);break;case"dangerouslySetInnerHTML":if(S!=null){if(typeof S!="object"||!("__html"in S))throw Error(o(61));if(v=S.__html,v!=null){if( $ .children!=null)throw Error(o(60));p.innerHTML=v}}break;case"multiple":p.multiple=S&&typeof S!="function"&&typeof S!="symbol";break;case"muted":p.muted=S&&typeof S!="function"&&typeof S!="symbol";break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"defaultValue":case"defaultChecked":case"innerHTML":case"ref":break;case"autoFocus":break;case"xlinkHref":if(S==null||typeof S=="function"||typeof S=="boolean"||typeof S=="symbol"){p.removeAttribute("xlink:href");break}v=Ct(""+S),p.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",v);break;case"contentEditable":case"spellCheck":case"draggable":case"value":case"autoReverse":case"externalResourcesRequired":case"focusable":case"preserveAlpha":S!=null&&typeof S!="function"&&typeof S!="symbol"?p.setAttribute(v,""+S):p.removeAttribute(v);break;case"inert":case"allowFullScreen":case"async":case"autoPlay":case"controls":case"default":case"defer":case"disabled":case"disablePictureInPicture":case"disableRemotePlayback":case"formNoValidate":case"hidden":case"loop":case"noModule":case"noValidate":case"open":case"playsInline":case"readOnly":case"required":case"reversed":case"scoped":case"seamless":case"itemScope":S&&typeof S!="function"&&typeof S!="symbol"?p.setAttribute(v,""):p.removeAttribute(v);break;case"capture":case"download":S===!0?p.setAttribute(v,""):S!==!1&&S!=null&&typeof S!="function"&&typeof S!="symbol"?p.setAttribute(v,S):p.removeAttribute(v);break;case"cols":case"rows":case"size":case"span":S!=null&&typeof S!="function"&&typeof S!="symbol"&&!isNaN(S)&&1<=S?p.setAttribute(v,S):p.removeAttribute(v);break;case"rowSpan":case"start":S==null||typeof S=="function"||typeof S=="symbol"||isNaN(S)?p.removeAttribute(v):p.setAttribute(v,S);break;case"popover":tr("beforetoggle",p),tr("toggle",p),Vl(p,"popover",S);break;case"xlinkActuate":Uo(p,"http://www.w3.org/1999/xlink","xlink:actuate",S);break;case"xlinkArcrole":Uo(p,"http://www.w3.org/1999/xlink","xlink:arcrole",S);break;case"xlinkRole":Uo(p,"http://www.w3.org/1999/xlink","xlink:role",S);break;case"xlinkShow":Uo(p,"http://www.w3.org/1999/xlink","xlink:show",S);break;case"xlinkTitle":Uo(p,"http://www.w3.org/1999/xlink","xlink:title",S);break;case"xlinkType":Uo(p,"http://www.w3.org/1999/xlink","xlink:type",S);break;case"xmlBase":Uo(p,"http://www.w3.org/XML/1998/namespace","xm
. ` .concat( $ nt, ` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the 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-11-16 23:10:11 +01:00
padding - right : ` ).concat(l,"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-11-16 23:10:11 +01:00
body [ ` ).concat(eg, ` ] {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the 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-11-16 23:10:11 +01:00
padding - right : ` ).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
margin - left : 0 ;
margin - top : 0 ;
2025-11-16 23:10:11 +01:00
margin - right : ` ).concat(l,"px ").concat(o, ` ;
` ),n==="padding"&&"padding-right: ".concat(l,"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-11-16 23:10:11 +01:00
. ` ).concat(U4, ` {
right : ` ).concat(l,"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-11-16 23:10:11 +01:00
. ` ).concat(W4, ` {
margin - right : ` ).concat(l,"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-11-16 23:10:11 +01:00
. ` ).concat(U4," .").concat(U4, ` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
right : 0 ` ).concat(o, ` ;
}
2025-11-16 23:10:11 +01:00
. ` ).concat(W4," .").concat(W4, ` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
margin - right : 0 ` ).concat(o, ` ;
}
2025-11-16 23:10:11 +01:00
body [ ` ).concat(eg, ` ] {
` ).concat(Mnt,": ").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
}
2025-11-16 23:10:11 +01:00
` )},Jne=function(){var e=parseInt(document.body.getAttribute(eg)||"0",10);return isFinite(e)?e:0},Qnt=function(){E.useEffect(function(){return document.body.setAttribute(eg,(Jne()+1).toString()),function(){var e=Jne()-1;e<=0?document.body.removeAttribute(eg):document.body.setAttribute(eg,e.toString())}},[])},Jnt=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;Qnt();var i=E.useMemo(function(){return Xnt(a)},[a]);return E.createElement(Knt,{styles:Znt(i,!r,a,n?"":"!important")})},VR=!1;if(typeof window<"u")try{var G4=Object.defineProperty({},"passive",{get:function(){return VR=!0,!0}});window.addEventListener("test",G4,G4),window.removeEventListener("test",G4,G4)}catch{VR=!1}var tg=VR?{passive:!1}:!1,eot=function(e){return e.tagName==="TEXTAREA"},eoe=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!eot(e)&&n[r]==="visible")},tot=function(e){return eoe(e,"overflowY")},rot=function(e){return eoe(e,"overflowX")},toe=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=roe(e,o);if(a){var i=noe(e,o),s=i[1],l=i[2];if(s>l)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},not=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},oot=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},roe=function(e,r){return e==="v"?tot(r):rot(r)},noe=function(e,r){return e==="v"?not(r):oot(r)},aot=function(e,r){return e==="h"&&r==="rtl"?-1:1},iot=function(e,r,n,o,a){var i=aot(e,window.getComputedStyle(r).direction),s=i*o,l=n.target,c=r.contains(l),u=!1,d=s>0,h=0,f=0;do{if(!l)break;var g=noe(e,l),b=g[0],x=g[1],w=g[2],k=x-w-i*b;(b||k)&&roe(e,l)&&(h+=k,f+=b);var C=l.parentNode;l=C&&C.nodeType===Node.DOCUMENT_FRAGMENT_NODE?C.host:C}while(!c&&l!==document.body||c&&(r.contains(l)||r===l));return(d&&Math.abs(h)<1||!d&&Math.abs(f)<1)&&(u=!0),u},X4=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},ooe=function(e){return[e.deltaX,e.deltaY]},aoe=function(e){return e&&"current"in e?e.current:e},sot=function(e,r){return e[0]===r[0]&&e[1]===r[1]},lot=function(e){return `
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
. block - interactivity - ` .concat(e, ` { pointer - events : none ; }
. allow - interactivity - ` ).concat(e, ` { pointer - events : all ; }
2025-11-16 23:10:11 +01:00
` )},cot=0,rg=[];function uot(e){var r=E.useRef([]),n=E.useRef([0,0]),o=E.useRef(),a=E.useState(cot++)[0],i=E.useState(Qne)[0],s=E.useRef(e);E.useEffect(function(){s.current=e},[e]),E.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(a));var x=Dnt([e.lockRef.current],(e.shards||[]).map(aoe)).filter(Boolean);return x.forEach(function(w){return w.classList.add("allow-interactivity-".concat(a))}),function(){document.body.classList.remove("block-interactivity-".concat(a)),x.forEach(function(w){return w.classList.remove("allow-interactivity-".concat(a))})}}},[e.inert,e.lockRef.current,e.shards]);var l=E.useCallback(function(x,w){if("touches"in x&&x.touches.length===2||x.type==="wheel"&&x.ctrlKey)return!s.current.allowPinchZoom;var k=X4(x),C=n.current,_="deltaX"in x?x.deltaX:C[0]-k[0],T="deltaY"in x?x.deltaY:C[1]-k[1],A,R=x.target,D=Math.abs(_)>Math.abs(T)?"h":"v";if("touches"in x&&D==="h"&&R.type==="range")return!1;var N=toe(D,R);if(!N)return!0;if(N?A=D:(A=D==="v"?"h":"v",N=toe(D,R)),!N)return!1;if(!o.current&&"changedTouches"in x&&(_||T)&&(o.current=A),!A)return!0;var M=o.current||A;return iot(M,w,x,M==="h"?_:T)},[]),c=E.useCallback(function(x){var w=x;if(!(!rg.length||rg[rg.length-1]!==i)){var k="deltaY"in w?ooe(w):X4(w),C=r.current.filter(function(A){return A.name===w.type&&(A.target===w.target||w.target===A.shadowParent)&&sot(A.delta,k)})[0];if(C&&C.should){w.cancelable&&w.preventDefault();return}if(!C){var _=(s.current.shards||[]).map(aoe).filter(Boolean).filter(function(A){return A.contains(w.target)}),T=_.length>0?l(w,_[0]):!s.current.noIsolation;T&&w.cancelable&&w.preventDefault()}}},[]),u=E.useCallback(function(x,w,k,C){var _={name:x,delta:w,target:k,should:C,shadowParent:dot(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function(T){return T!==_})},1)},[]),d=E.useCallback(function(x){n.current=X4(x),o.current=void 0},[]),h=E.useCallback(function(x){u(x.type,ooe(x),x.target,l(x,e.lockRef.current))},[]),f=E.useCallback(function(x){u(x.type,X4(x),x.target,l(x,e.lockRef.current))},[]);E.useEffect(function(){return rg.push(i),e.setCallbacks({onScrollCapture:h,onWheelCapture:h,onTouchMoveCapture:f}),document.addEventListener("wheel",c,tg),document.addEventListener("touchmove",c,tg),document.addEventListener("touchstart",d,tg),function(){rg=rg.filter(function(x){return x!==i}),document.removeEventListener("wheel",c,tg),document.removeEventListener("touchmove",c,tg),document.removeEventListener("touchstart",d,tg)}},[]);var g=e.removeScrollBar,b=e.inert;return E.createElement(E.Fragment,null,b?E.createElement(i,{styles:lot(a)}):null,g?E.createElement(Jnt,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function dot(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const pot=Bnt(Zne,uot);var ioe=E.forwardRef(function(e,r){return E.createElement(Y4,El({},e,{ref:r,sideCar:pot}))});ioe.classNames=Y4.classNames;function Bo(e){return Object.keys(e)}function hot(e){return e.replace(/[A-Z]/g,r=> ` - $ { r . toLowerCase ( ) } ` )}function fot(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc \( (.*?) \) $ /)?.[1].split("*")[0].trim()}function K4(e){const r=fot(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 soe(e){return e==="0rem"?"0rem": ` calc ( $ { e } * var ( -- mantine - scale ) ) ` }function loe(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?soe(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?soe(i):i}}return o}return n}const qe=loe("rem",{shouldScale:!0});
` ;let G,K=!0;const j=M.numbers=="binary",Y=M.numbers=="octal",Q=M.numbers=="decimal",J=M.numbers=="hexadecimal";if(L&&N&&b(N.toJSON)&&(N=N.toJSON()),!h(N)){if(x(N))return N.size==0?"new Map()":(P||(M.__inline1__=!0,M.__inline2__=!1),"new Map("+D(Array.from(N),M)+")");if(w(N))return N.size==0?"new Set()":"new Set("+D(Array.from(N),M)+")";if(u(N))return N.length==0?"Buffer.from([])":"Buffer.from("+D(Array.from(N),M)+")";if(c(N))return G=[],M.wrap=!0,q&&(M.__inline1__=!1,M.__inline2__=!0),Z||O(),a(N,ne=>{K=!1,Z&&(M.__inline2__=!1),G.push((P||Z?"":I)+D(ne,M))}),K?"[]":Z?"["+G.join(", ")+"]":"["+W+G.join(","+W)+W+(P?"":H)+"]";if(f(N)||g(N)){if(L)return JSON.stringify(Number(N));let ne;if(Q)ne=String(N);else if(J){let re=N.toString(16);V||(re=re.toUpperCase()),ne="0x"+re}else j?ne="0b"+N.toString(2):Y&&(ne="0o"+N.toString(8));return g(N)?ne+"n":ne}else return g(N)?L?JSON.stringify(Number(N)):N+"n":d(N)?(G=[],M.wrap=!0,O(),n(N,(ne,re)=>{K=!1,G.push((P?"":I)+D(ne,M)+":"+(P?"":" ")+D(re,M))}),K?"{}":"{"+W+G.join(","+W)+W+(P?"":H)+"}"):L?JSON.stringify(N)||"null":String(N)}const ie=M.escapeEverything?A:R;return G=N.replace(ie,(ne,re,ge,De,he,me)=>{if(re){if(M.minimal)return re;const Ie=re.charCodeAt(0),Ze=re.charCodeAt(1);if(M.es6){const rt=(Ie-55296)*1024+Ze-56320+65536;return" \\ u{"+s(rt,V)+"}"}return i(s(Ie,V))+i(s(Ze,V))}if(ge)return i(s(ge.charCodeAt(0),V));if(ne==" \0 "&&!L&&!_.test(me.charAt(he+1)))return" \\ 0";if(De)return De==U||M.escapeEverything?" \\ "+De:De;if(C.test(ne))return k[ne];if(M.minimal&&!T.test(ne))return ne;const Te=s(ne.charCodeAt(0),V);return L||Te.length>2?i(Te):" \\ x"+("00"+Te).slice(-2)}),U==" ` "&&(G=G.replace(/\$\{/g," \ \ $ { ")),M.isScriptContext&&(G=G.replace(/<\/(script|style)/gi," < \ \ / $1 ").replace(/<!--/g,L?" \ \u003C ! -- ":" \ \ x3C ! -- ")),M.wrap&&(G=U+G+U),G};return D.version=" 3.0 . 2 ",OD=D,OD}Ddt();function $dt({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 Mdt(){const e=dh(),r=(e.options.getScrollRestorationKey||ele)(e.latestLocation),n=r!==ele(e.latestLocation)?r:null;return!e.isScrollRestoring||!e.isServer?null:y.jsx( $ dt,{children: ` ( $ { gdt . toString ( ) } ) ( $ { JSON . stringify ( Qse ) } , $ { JSON . stringify ( n ) } , undefined , true ) ` ,log:!1})}const Pdt=E.memo(function({matchId:e}){var r,n;const o=dh(),a=Bs({select:w=>{var k;return(k=w.matches.find(C=>C.id===e))==null?void 0:k.routeId}});Yk(a);const i=o.routesById[a],s=i.options.pendingComponent??o.options.defaultPendingComponent,l=s?y.jsx(s,{}):null,c=i.options.errorComponent??o.options.defaultErrorComponent,u=i.options.onCatch??o.options.defaultOnCatch,d=i.isRoot?i.options.notFoundComponent??((r=o.options.notFoundRoute)==null?void 0:r.options.component):i.options.notFoundComponent,h=(!i.isRoot||i.options.wrapInSuspense)&&(i.options.wrapInSuspense??s??((n=i.options.errorComponent)==null?void 0:n.preload))?E.Suspense:ID,f=c?rle:ID,g=d?Rdt:ID,b=Bs({select:w=>w.loadedAt}),x=Bs({select:w=>{var k;const C=w.matches.findIndex(_=>_.id===e);return(k=w.matches[C-1])==null?void 0:k.routeId}});return y.jsxs(y.Fragment,{children:[y.jsx(dle.Provider,{value:e,children:y.jsx(h,{fallback:l,children:y.jsx(f,{getResetKey:()=>b,errorComponent:c|| $ D,onCatch:(w,k)=>{if(Kk(w))throw w;u?.(w,k)},children:y.jsx(g,{fallback:w=>{if(!d||w.routeId&&w.routeId!==a||!w.routeId&&!i.isRoot)throw w;return E.createElement(d,w)},children:y.jsx(Idt,{matchId:e})})})})}),x===tle&&o.options.scrollRestoration?y.jsxs(y.Fragment,{children:[y.jsx(zdt,{}),y.jsx(Mdt,{})]}):null]})});function zdt(){var e;const r=dh(),n=E.useRef(void 0);return y.jsx("script",{suppressHydrationWarning:!0,ref:o=>{var a;o&&(n.current===void 0||n.current.href!==((a=r.state.resolvedLocation)==null?void 0:a.href))&&(r.emit({type:"onRendered",...bdt(r.state)}),n.current=r.state.resolvedLocation)}},(e=r.state.resolvedLocation)==null?void 0:e.state.key)}const Idt=E.memo(function({matchId:e}){var r,n,o;const a=dh(),{match:i,key:s,routeId:l}=Bs({select:h=>{const f=h.matches.findIndex(k=>k.id===e),g=h.matches[f],b=g.routeId,x=a.routesById[b].options.remountDeps??a.options.defaultRemountDeps,w=x?.({routeId:b,loaderDeps:g.loaderDeps,params:g._strictParams,search:g._strictSearch});return{key:w?JSON.stringify(w):void 0,routeId:b,match:hdt(g,["id","status","error"])}},structuralSharing:!0}),c=a.routesById[l],u=E.useMemo(()=>{const h=c.options.component??a.options.defaultComponent;return h?y.jsx(h,{},s):y.jsx(Odt,{})},[s,c.options.component,a.options.defaultComponent]),d=(c.options.errorComponent??a.options.defaultErrorComponent)|| $ D;if(i.status==="notFound")return Yk(Kk(i.error)),ple(a,c,i.error);if(i.status==="redirected")throw Yk(ydt(i.error)),(r=a.getMatch(i.id))==null?void 0:r.loadPromise;if(i.status==="error"){if(a.isServer)return y.jsx(d,{error:i.error,reset:void 0,info:{componentStack:""}});throw i.error}if(i.status==="pending"){const h=c.options.pendingMinMs??a.options.defaultPendingMinMs;if(h&&!((n=a.getMatch(i.id))!=null&&n.minPendingPromise)&&!a.isServer){const f=fdt();Promise.resolve().then(()=>{a.updateMatch(i.id,g=>({...g,minPendingPromise:f}))}),setTimeout(()=>{f.resolve(),a.updateMatch(i.id,g=>({...g,minPendingPromise:void 0}))},h)}throw(o=a.getMatch(i.id))==null?void 0:o.loadPromise}return u}),Odt=E.memo(function(){const e=dh(),r=E.useContext(dle),n=Bs({select:c=>{var u;return(u=c.matches.find(d=>d.id===r))==null?void 0:u.routeId}}),o=e.routesById[n],a=Bs({select:c=>{const u=c.matches.find(d=>d.id===r);return Yk(u),u.globalNotFound}}),i=Bs({select:c=>{var u;const d=c.matches,h=d.findIndex(f=>f.id===r);return(u=d[h+1])==null?void 0:u.id}});if(a)return ple(e,o,void 0);if(!i)return null;const s=y.jsx(Pdt,{matchId:i}),l=e.options.defaultPendingComponent?y.jsx(e.options.defaultPendingComponent,{}):null;return r===tle?y.jsx(E.Suspense,{fallback:l,children:s}):s}),jdt=typeof window<"u"?E.useLayoutEffect:E.useEffect;function Ldt(e,r,n={},o={}){const a=E.useRef(typeof IntersectionObserver=="function"),i=E.useRef(null);return E.useEffect(()=>{if(!(!e.current||!a.current||o.disabled))return i.current=n
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
` ).replace( `
` , `
+ ` ).split( `
2025-11-16 23:10:11 +01:00
` )),u=c.reduce((d,h)=>d.concat(...h),[]);return[c,u]}return[[],[]]},[e]);return E.useEffect(()=>{const c=r?.target??cue,u=r?.actInsideInputWithModifier??!0;if(e!==null){const d=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!u)&&Ece(g))return!1;const b=due(g.code,l);if(i.current.add(g[b]),uue(s,i.current,!1)){const x=g.composedPath?.()?.[0]||g.target,w=x?.nodeName==="BUTTON"||x?.nodeName==="A";r.preventDefault!==!1&&(a.current||!w)&&g.preventDefault(),o(!0)}},h=g=>{const b=due(g.code,l);uue(s,i.current,!0)?(o(!1),i.current.clear()):i.current.delete(g[b]),g.key==="Meta"&&i.current.clear(),a.current=!1},f=()=>{i.current.clear(),o(!1)};return c?.addEventListener("keydown",d),c?.addEventListener("keyup",h),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",d),c?.removeEventListener("keyup",h),window.removeEventListener("blur",f),window.removeEventListener("contextmenu",f)}}},[e,o]),n}function uue(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function due(e,r){return r.includes(e)?"code":"key"}const Wgt=()=>{const e=Jr();return E.useMemo(()=>({zoomIn:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomOut:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1/1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomTo:(r,n)=>{const{panZoom:o}=e.getState();return o?o.scaleTo(r,{duration:n?.duration}):Promise.resolve(!1)},getZoom:()=>e.getState().transform[2],setViewport:async(r,n)=>{const{transform:[o,a,i],panZoom:s}=e.getState();return s?(await s.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:s,panZoom:l}=e.getState(),c=a $ (r,o,a,i,s,n?.padding??.1);return l?(await l.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:s}=e.getState();if(!s)return r;const{x:l,y:c}=s.getBoundingClientRect(),u={x:r.x-l,y:r.y-c},d=n.snapGrid??a,h=n.snapToGrid??i;return zb(u,o,h,d)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:a,y:i}=o.getBoundingClientRect(),s=_5(r,n);return{x:s.x+a,y:s.y+i}}}),[])};function pue(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 s=o.get(i.id);s?s.push(i):o.set(i.id,[i])}for(const i of r){const s=o.get(i.id);if(!s){n.push(i);continue}if(s[0].type==="remove")continue;if(s[0].type==="replace"){n.push({...s[0].item});continue}const l={...i};for(const c of s)Ygt(c,l);n.push(l)}return a.length&&a.forEach(i=>{i.index!==void 0?n.splice(i.index,0,{...i.item}):n.push({...i.item})}),n}function Ygt(e,r){switch(e.type){case"select":{r.selected=e.selected;break}case"position":{typeof e.position<"u"&&(r.position=e.position),typeof e.dragging<"u"&&(r.dragging=e.dragging);break}case"dimensions":{typeof e.dimensions<"u"&&(r.measured??={},r.measured.width=e.dimensions.width,r.measured.height=e.dimensions.height,e.setAttributes&&((e.setAttributes===!0||e.setAttributes==="width")&&(r.width=e.dimensions.width),(e.setAttributes===!0||e.setAttributes==="height")&&(r.height=e.dimensions.height))),typeof e.resizing=="boolean"&&(r.resizing=e.resizing);break}}}function Ggt(e,r){return pue(e,r)}function Xgt(e,r){return pue(e,r)}function bh(e,r){return{id:e,type:"select",selected:r}}function Dg(e,r=new Set,n=!1){const o=[];for(const[a,i]of e){const s=r.has(a);!(i.selected===void 0&&!s)&&i.selected!==s&&(n&&(i.selected=s),o.push(bh(i.id,s)))}return o}function hue({items:e=[],lookup:r}){const n=[],o=new Map(e.map(a=>[a.id,a]));for(const[a,i]of e.entries()){const s=r.get(i.id),l=s?.internals?.userNode??s;l!==void 0&&l!==i&&n.push({id:i
M$ { N . x } , $ { N . y } h$ { N . width } v$ { N . height } h$ { - N . width } z ` ,fillRule:"evenodd",pointerEvents:"none"})]})})}ede.displayName="MiniMap",E.memo(ede);const j0t=e=>r=>e? ` $ { Math . max ( 1 / r . transform [ 2 ] , 1 ) } ` :void 0,L0t={[Ng.Line]:"right",[Ng.Handle]:"bottom-right"};function B0t({nodeId:e,position:r,variant:n=Ng.Handle,className:o,style:a=void 0,children:i,color:s,minWidth:l=10,minHeight:c=10,maxWidth:u=Number.MAX_VALUE,maxHeight:d=Number.MAX_VALUE,keepAspectRatio:h=!1,resizeDirection:f,autoScale:g=!0,shouldResize:b,onResizeStart:x,onResize:w,onResizeEnd:k}){const C=kue(),_=typeof e=="string"?e:C,T=Jr(),A=E.useRef(null),R=n===Ng.Handle,D=dr(E.useCallback(j0t(R&&g),[R,g]),ln),N=E.useRef(null),M=r??L0t[n];E.useEffect(()=>{if(!(!A.current||!_))return N.current||(N.current=wgt({domNode:A.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:F,transform:L,snapGrid:U,snapToGrid:P,nodeOrigin:V,domNode:I}=T.getState();return{nodeLookup:F,transform:L,snapGrid:U,snapToGrid:P,nodeOrigin:V,paneDomNode:I}},onChange:(F,L)=>{const{triggerNodeChanges:U,nodeLookup:P,parentLookup:V,nodeOrigin:I}=T.getState(),H=[],q={x:F.x,y:F.y},Z=P.get(_);if(Z&&Z.expandParent&&Z.parentId){const W=Z.origin??I,G=F.width??Z.measured.width??0,K=F.height??Z.measured.height??0,j={id:Z.id,parentId:Z.parentId,rect:{width:G,height:K,...wce({x:F.x??Z.position.x,y:F.y??Z.position.y},{width:G,height:K},Z.parentId,P,W)}},Y=h $ ([j],P,V,I);H.push(...Y),q.x=F.x?Math.max(W[0]*G,F.x):void 0,q.y=F.y?Math.max(W[1]*K,F.y):void 0}if(q.x!==void 0&&q.y!==void 0){const W={id:_,type:"position",position:{...q}};H.push(W)}if(F.width!==void 0&&F.height!==void 0){const W={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:F.width,height:F.height}};H.push(W)}for(const W of L){const G={...W,type:"position"};H.push(G)}U(H)},onEnd:({width:F,height:L})=>{const U={id:_,type:"dimensions",resizing:!1,dimensions:{width:F,height:L}};T.getState().triggerNodeChanges([U])}})),N.current.update({controlPosition:M,boundaries:{minWidth:l,minHeight:c,maxWidth:u,maxHeight:d},keepAspectRatio:h,resizeDirection:f,onResizeStart:x,onResize:w,onResizeEnd:k,shouldResize:b}),()=>{N.current?.destroy()}},[M,l,c,u,d,h,x,w,k,b]);const O=M.split("-");return y.jsx("div",{className:Bn(["react-flow__resize-control","nodrag",...O,n,o]),ref:A,style:{...a,scale:D,...s&&{[R?"backgroundColor":"borderColor"]:s}},children:i})}E.memo(B0t);var F0t=Object.getOwnPropertyNames,H0t=Object.getOwnPropertySymbols,V0t=Object.prototype.hasOwnProperty;function tde(e,r){return function(n,o,a){return e(n,o,a)&&r(n,o,a)}}function z5(e){return function(r,n,o){if(!r||!n||typeof r!="object"||typeof n!="object")return e(r,n,o);var a=o.cache,i=a.get(r),s=a.get(n);if(i&&s)return i===n&&s===r;a.set(r,n),a.set(n,r);var l=e(r,n,o);return a.delete(r),a.delete(n),l}}function q0t(e){return e?.[Symbol.toStringTag]}function rde(e){return F0t(e).concat(H0t(e))}var U0t=Object.hasOwn||(function(e,r){return V0t.call(e,r)});function vh(e,r){return e===r||!e&&!r&&e!==e&&r!==r}var W0t="__v",Y0t="__o",G0t="_owner",nde=Object.getOwnPropertyDescriptor,ode=Object.keys;function X0t(e,r,n){var o=e.length;if(r.length!==o)return!1;for(;o-- >0;)if(!n.equals(e[o],r[o],o,o,e,r,n))return!1;return!0}function K0t(e,r){return vh(e.getTime(),r.getTime())}function Z0t(e,r){return e.name===r.name&&e.message===r.message&&e.cause===r.cause&&e.stack===r.stack}function Q0t(e,r){return e===r}function ade(e,r,n){var o=e.size;if(o!==r.size)return!1;if(!o)return!0;for(var a=new Array(o),i=e.entries(),s,l,c=0;(s=i.next())&&!s.done;){for(var u=r.entries(),d=!1,h=0;(l=u.next())&&!l.done;){if(a[h]){h++;continue}var f=s.value,g=l.value;if(n.equals(f[0],g[0],c,h,e,r,n)&&n.equals(f[1],g[1],f[0],g[0],e,r,n)){d=a[h]=!0;break}h++}if(!d)return!1;c++}return!0}var J0t=vh;function eyt(e,r,n){var o=ode(e),a=o.length;if(ode(r).length!==a)return!1;for(;a-- >0;)if(!sde(e,r,n,o[a]))return!1;return!0}function Bb(e,r,n){var o=rde(e),a=o.length;if(rde(r).length!==a)return!1;for(var i,s,l;a-- >0;)if(i=o[a],!sde(e,r,n,i)||(s=nde(e,i),l=nde(r,i),(s||l)&&(!s||!l||s.conf
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
` ).filter(i=>i),o=Math.min(...n.map(i=>i.length-i.trimStart().length)),a=n.map(i=>i.slice(o)).map(i=>" ".repeat(this.indent*2)+i);for(const i of a)this.content.push(i)}compile(){const r=Function,n=this?.args,o=[...(this?.content??[""]).map(a=> ` $ { a } ` )];return new r(...n,o.join( `
2025-11-16 23:10:11 +01:00
` ))}}const nxt={major:4,minor:0,patch:0},bn=Oe(" $ ZodType",(e,r)=>{var n;e??(e={}),e._zod.def=r,e._zod.bag=e._zod.bag||{},e._zod.version=nxt;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,s,l)=>{let c=Qb(i),u;for(const d of s){if(d._zod.def.when){if(!d._zod.def.when(i))continue}else if(c)continue;const h=i.issues.length,f=d._zod.check(i);if(f instanceof Promise&&l?.async===!1)throw new Xb;if(u||f instanceof Promise)u=(u??Promise.resolve()).then(async()=>{await f,i.issues.length!==h&&(c||(c=Qb(i,h)))});else{if(i.issues.length===h)continue;c||(c=Qb(i,h))}}return u?u.then(()=>i):i};e._zod.run=(i,s)=>{const l=e._zod.parse(i,s);if(l instanceof Promise){if(s.async===!1)throw new Xb;return l.then(c=>a(c,o,s))}return a(l,o,s)}}e["~standard"]={validate:a=>{try{const i=vvt(e,a);return i.success?{value:i.data}:{issues:i.error?.issues}}catch{return xvt(e,a).then(i=>i.success?{value:i.data}:{issues:i.error?.issues})}},vendor:"zod",version:1}}),K5=Oe(" $ ZodString",(e,r)=>{bn.init(e,r),e._zod.pattern=[...e?._zod.bag?.patterns??[]].pop()??Hvt(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}}),tn=Oe(" $ ZodStringFormat",(e,r)=>{X5.init(e,r),K5.init(e,r)}),oxt=Oe(" $ ZodGUID",(e,r)=>{r.pattern??(r.pattern=Avt),tn.init(e,r)}),axt=Oe(" $ 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=mhe(n))}else r.pattern??(r.pattern=mhe());tn.init(e,r)}),ixt=Oe(" $ ZodEmail",(e,r)=>{r.pattern??(r.pattern=Rvt),tn.init(e,r)}),sxt=Oe(" $ ZodURL",(e,r)=>{tn.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:Ovt.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})}}}),lxt=Oe(" $ ZodEmoji",(e,r)=>{r.pattern??(r.pattern=Dvt()),tn.init(e,r)}),cxt=Oe(" $ ZodNanoID",(e,r)=>{r.pattern??(r.pattern=Cvt),tn.init(e,r)}),uxt=Oe(" $ ZodCUID",(e,r)=>{r.pattern??(r.pattern=wvt),tn.init(e,r)}),dxt=Oe(" $ ZodCUID2",(e,r)=>{r.pattern??(r.pattern=kvt),tn.init(e,r)}),pxt=Oe(" $ ZodULID",(e,r)=>{r.pattern??(r.pattern=_vt),tn.init(e,r)}),hxt=Oe(" $ ZodXID",(e,r)=>{r.pattern??(r.pattern=Evt),tn.init(e,r)}),fxt=Oe(" $ ZodKSUID",(e,r)=>{r.pattern??(r.pattern=Svt),tn.init(e,r)}),mxt=Oe(" $ ZodISODateTime",(e,r)=>{r.pattern??(r.pattern=Fvt(r)),tn.init(e,r)}),gxt=Oe(" $ ZodISODate",(e,r)=>{r.pattern??(r.pattern=Lvt),tn.init(e,r)}),yxt=Oe(" $ ZodISOTime",(e,r)=>{r.pattern??(r.pattern=Bvt(r)),tn.init(e,r)}),bxt=Oe(" $ ZodISODuration",(e,r)=>{r.pattern??(r.pattern=Tvt),tn.init(e,r)}),vxt=Oe(" $ ZodIPv4",(e,r)=>{r.pattern??(r.pattern= $ vt),tn.init(e,r),e._zod.onattach.push(n=>{const o=n._zod.bag;o.format="ipv4"})}),xxt=Oe(" $ ZodIPv6",(e,r)=>{r.pattern??(r.pattern=Mvt),tn.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})}}}),wxt=Oe("$ZodCIDRv4",(e,r)=>{r.pattern??(r.pattern=Pvt),tn.init(e,r)}),kxt=Oe("$ZodCIDRv6",(e,r)=>{r.pattern??(r.pattern=zvt),tn.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-11-16 23:10:11 +01:00
` )}else{const C=b[k];h.write( ` const $ { C } = $ { g ( k ) } ; ` ),h.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-11-16 23:10:11 +01:00
path : iss . path ? [ $ { Kb ( k ) } , ... iss . path ] : [ $ { Kb ( k ) } ]
} ) ) ) ; ` ),h.write( ` newResult [ $ { Kb ( k ) } ] = $ { C } . value ` )}h.write("payload.value = newResult;"),h.write("return payload;");const w=h.compile();return(k,C)=>w(d,k,C)};let a;const i=zM,s=!ihe.jitless,l=s&&svt.value,c=r.catchall;let u;e._zod.parse=(d,h)=>{u??(u=n.value);const f=d.value;if(!i(f))return d.issues.push({expected:"object",code:"invalid_type",input:f,inst:e}),d;const g=[];if(s&&l&&h?.async===!1&&h.jitless!==!0)a||(a=o(r.shape)),d=a(d,h);else{d.value={};const C=u.shape;for(const _ of u.keys){const T=C[_],A=T._zod.run({value:f[_],issues:[]},h),R=T._zod.optin==="optional"&&T._zod.optout==="optional";A instanceof Promise?g.push(A.then(D=>R?khe(D,d,_,f):Z5(D,d,_))):R?khe(A,d,_,f):Z5(A,d,_)}}if(!c)return g.length?Promise.all(g).then(()=>d):d;const b=[],x=u.keySet,w=c._zod,k=w.def.type;for(const C of Object.keys(f)){if(x.has(C))continue;if(k==="never"){b.push(C);continue}const _=w.run({value:f[C],issues:[]},h);_ instanceof Promise?g.push(_.then(T=>Z5(T,d,C))):Z5(_,d,C)}return b.length&&d.issues.push({code:"unrecognized_keys",keys:b,input:f,inst:e}),g.length?Promise.all(g).then(()=>d):d}});function _he(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=>Ah(i,o,Ch())))}),r}const Mxt=Oe(" $ ZodUnion",(e,r)=>{bn.init(e,r),en(e._zod,"optin",()=>r.options.some(n=>n._zod.optin==="optional")?"optional":void 0),en(e._zod,"optout",()=>r.options.some(n=>n._zod.optout==="optional")?"optional":void 0),en(e._zod,"values",()=>{if(r.options.every(n=>n._zod.values))return new Set(r.options.flatMap(n=>Array.from(n._zod.values)))}),en(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 => MM ( o . source ) ) . join ( "|" ) } ) $ ` )}}),e._zod.parse=(n,o)=>{let a=!1;const i=[];for(const s of r.options){const l=s._zod.run({value:n.value,issues:[]},o);if(l instanceof Promise)i.push(l),a=!0;else{if(l.issues.length===0)return l;i.push(l)}}return a?Promise.all(i).then(s=>_he(s,n,e,o)):_he(i,n,e,o)}}),Pxt=Oe(" $ ZodIntersection",(e,r)=>{bn.init(e,r),e._zod.parse=(n,o)=>{const a=n.value,i=r.left._zod.run({value:a,issues:[]},o),s=r.right._zod.run({value:a,issues:[]},o);return i instanceof Promise||s instanceof Promise?Promise.all([i,s]).then(([l,c])=>Ehe(n,l,c)):Ehe(n,i,s)}});function LM(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(IM(e)&&IM(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 s=LM(e[i],r[i]);if(!s.valid)return{valid:!1,mergeErrorPath:[i,...s.mergeErrorPath]};a[i]=s.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],s=LM(a,i);if(!s.valid)return{valid:!1,mergeErrorPath:[o,...s.mergeErrorPath]};n.push(s.data)}return{valid:!0,data:n}}return{valid:!1,mergeErrorPath:[]}}function Ehe(e,r,n){if(r.issues.length&&e.issues.push(...r.issues),n.issues.length&&e.issues.push(...n.issues),Qb(e))return e;const o=LM(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 zxt=Oe(" $ ZodEnum",(e,r)=>{bn.init(e,r);const n=avt(r.entries);e._zod.values=new Set(n),e._zod.pattern=new RegExp( ` ^ ( $ { n . filter ( o => lvt . has ( typeof o ) ) . map ( o => typeof o == "string" ? Zb ( 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}}),Ixt=Oe(" $ ZodLiteral",(e,r)=>{bn.init(e,r),e._zod.values=new Set(r.values),e._zod.pattern=new RegExp( ` ^ ( $ { r . values . map ( n => typeof n == "string" ? Zb ( 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}}),She=Oe(" $ ZodTransform",(e,r)=>{bn.init(e,r),e._zod.parse=(n,o)=>{const a=r.transform(n.value,n
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
: host {
display : block ;
position : relative ;
background - color : transparent ;
width : 100 % ;
height : 100 % ;
box - sizing : border - box ;
overflow : hidden ;
border : 0 px solid transparent ;
padding : 0 ;
2025-11-16 23:10:11 +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=H2t.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",phe(r.error)),{viewId:"index"})}render(){const r=this.getProps();this.updateHostCss(),this.root??=Rnt.createRoot(this.shadow),this.root.render(y.jsx(Ent,{...r}))}attributeChangedCallback(r){this.root&&this.render()}}return customElements.define(Nnt.View,Whe),u6.LikeC4View=Whe,Object.defineProperty(u6,Symbol.toStringTag,{value:"Module"}),u6})({});
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.
Integration Components:
Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
dark mode support for Docsy theme compatibility
Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
when LikeC4 is enabled site-wide
Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers
Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection
Usage Pattern:
```html
<div class="likec4-container">
<div class="likec4-header">Diagram Title</div>
<likec4-view view-id="otc-faas" browser="true"></likec4-view>
<div class="likec4-loading">Loading...</div>
</div>
```
Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
--outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent
Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views
The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.
This completes the 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 */