website-and-documentation/static/js/likec4-webcomponent.js

393 lines
3 MiB
JavaScript
Raw Normal View History

var LikeC4Views=(function(d6){"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!
******************************************************************************/
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 u6={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,u6.exports=C1e()),u6.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"),d=Symbol.for("react.memo"),u=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 P(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 P(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 M(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 u:return ie=G._init,I(ie(G._payload),K,j,Y,Q)}}if(ie)return Q=Q(G),ie=Y===""?"."+M(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+M(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+M(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 Fu={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:l3,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},c3(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:PO(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"},c3(e,o,n),n}case"#text":{const o=r;return n={type:"text",value:o.value},c3(e,o,n),n}default:return n=ybe(e,r),n}}function PO(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===Fu.svg?_1:l3;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,PO(e,r.childNodes));if(c3(e,r,s),s.tagName==="template"){const l=r,c=l.sourceCodeLocation,d=c&&c.startTag&&cf(c.startTag),u=c&&c.endTag&&cf(c.endTag),h=e8(e,l.content);d&&u&&e.file&&(h.position={start:d.end,end:u.start}),s.content=h}return e.schema=n,s}function c3(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,d={opening:l};c&&(d.closing=c),d.properties=i,r.data={position:d}}}return o}function cf(e){const r=MO({line:e.startLine,column:e.startCol,offset:e.startOffset}),n=MO({line:e.endLine,column:e.endCol,offset:e.endOffset});return r||n?{start:r,end:n}:void 0}function MO(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=Hu(),Pn=Hu(),IO=Hu(),We=Hu(),Lr=Hu(),df=Hu(),Na=Hu();function Hu(){return 2**++vbe}const r8={__proto__:null,boolean:Vt,booleanish:Pn,commaOrSpaceSeparated:Na,commaSeparated:df,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 uf(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=uf({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 &/=>`.split(""),`
\f\r "&'/=>\``.split("")],[`\0
\f\r "&'/<=>`.split(""),`\0
\f\r "&'/<=>\``.split("")]],unquoted:[[`
\f\r &>`.split(""),`\0
\f\r "&'<=>\``.split("")],[`\0
\f\r "&'<=>\``.split(""),`\0
\f\r "&'<=>\``.split("")]],single:[["&'".split(""),"\"&'`".split("")],["\0&'".split(""),"\0\"&'`".split("")]],double:[['"&'.split(""),"\"&'`".split("")],['\0"&'.split(""),"\0\"&'`".split("")]]};function P2e(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 d=M2e(o,e.properties),u=o.all(a.space==="html"&&e.tagName==="template"?e.content:e);return o.schema=a,u&&(s=!1),(d||!i||!T2e(e,r,n))&&(l.push("<",e.tagName,d?" "+d:""),s&&(a.space==="svg"||o.settings.closeSelfClosing)&&(c=d.charAt(d.length-1),(!o.settings.tightSelfClosing||c==="/"||c&&c!=='"'&&c!=="'")&&l.push(" "),l.push("/")),l.push(">")),l.push(u),!s&&(!i||!_8(e,r,n))&&l.push("</"+e.tagName+">"),l.join("")}function M2e(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:E3.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:E3.unquoted[a][i]}))),l!==n&&(e.settings.quoteSmart&&_3(n,s)>_3(n,e.alternative)&&(s=e.alternative),l=s+gf(n,Object.assign({},e.settings.characterReferences,{subset:(s==="'"?E3.single:E3.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:d2e,doctype:u2e,element:P2e,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:l3,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=md(/[A-Za-z]/),Mo=md(/[\dA-Za-z]/),X2e=md(/[#-'*+\--9=?A-Z^-~]/);function S3(e){return e!==null&&(e<32||e===127)}const S8=md
`:" ")+i.indentLines(i.containerFlow(o,l.current()),r?cL:Cwe))),d(),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"];dL.peek=$we;function Awe(){return{canContainEols:["delete"],enter:{strikethrough:Nwe},exit:{strikethrough:Dwe}}}function Rwe(){return{unsafe:[{character:"~",inConstruct:"phrasing",notInConstruct:Twe}],handlers:{delete:dL}}}function Nwe(e){this.enter({type:"delete",children:[]},e)}function Dwe(e){this.exit(e)}function dL(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 Pwe(e){return e.length}function Mwe(e,r){const n=r||{},o=(n.align||[]).concat(),a=n.stringLength||Pwe,i=[],s=[],l=[],c=[];let d=0,u=-1;for(;++u<e.length;){const x=[],w=[];let k=-1;for(e[u].length>d&&(d=e[u].length);++k<e[u].length;){const C=zwe(e[u][k]);if(n.alignDelimiters!==!1){const _=a(C);w[k]=_,(c[k]===void 0||_>c[k])&&(c[k]=_)}x.push(C)}s[u]=x,l[u]=w}let h=-1;if(typeof o=="object"&&"length"in o)for(;++h<d;)i[h]=uL(o[h]);else{const x=uL(o);for(;++h<d;)i[h]=x}h=-1;const f=[],g=[];for(;++h<d;){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),u=-1;const b=[];for(;++u<s.length;){const x=s[u],w=l[u];h=-1;const k=[];for(;++h<d;){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!==d-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 uL(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)),d=n.enter("codeFenced");let u=l.move(c);if(e.lang){const h=n.enter(`codeFencedLang${s}`);u+=l.move(n.safe(e.lang,{before:u,after:" ",encode:["`"],...l.current()})),h()}if(e.lang&&e.meta){const h=n.enter(`codeFencedMeta${s}`);u+=l.move(" "),u+=l.move(n.safe(e.meta,{before:u,after:`
`,encode:["`"],...l.current()})),h()}return u+=l.move(`
`),i&&(u+=l.move(i+`
`)),u+=l.move(c),d(),u}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 d=c.move("[");return d+=c.move(n.safe(n.associationId(e),{before:d,after:"]",...c.current()})),d+=c.move("]: "),l(),!e.url||/[\0- \u007F]/.test(e.url)?(l=n.enter("destinationLiteral"),d+=c.move("<"),d+=c.move(n.safe(e.url,{before:d,after:">",...c.current()})),d+=c.move(">")):(l=n.enter("destinationRaw"),d+=c.move(n.safe(e.url,{before:d,after:e.title?" ":`
`,...c.current()}))),l(),e.title&&(l=n.enter(`title${i}`),d+=c.move(" "+a),d+=c.move(n.safe(e.title,{before:d,after:a,...c.current()})),d+=c.move(a),l()),s(),d}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||Mr(e)||Wu(e))return 1;if(C3(e))return 2}function T3(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 d=c.charCodeAt(0),u=T3(o.before.charCodeAt(o.before.length-1),d,a);u.inside&&(c=O1(d)+c.slice(1));const h=c.charCodeAt(c.length-1),f=T3(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:u.outside},l+c+g}function Wwe(e,r,n){return n.options.emphasis||"*"}const Ywe={};function A3(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)&&A3(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 u=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:`
`});return h(),u(),f+`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`+(a===1?"=":"-").repeat(f.length-(Math.max(f.lastIndexOf("\r"),f.lastIndexOf(`
`))+1))}const s="#".repeat(a),l=n.enter("headingAtx"),c=n.enter("phrasing");i.move(s+" ");let d=n.containerPhrasing(e,{before:"# ",after:`
`,...i.current()});return/^[\t ]/.test(d)&&(d=O1(d.charCodeAt(0))+d.slice(1)),d=d?s+" "+d:s,n.options.closeAtx&&(d+=" "+s),c(),l(),d}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 d=c.move("![");return d+=c.move(n.safe(e.alt,{before:d,after:"]",...c.current()})),d+=c.move("]("),l(),!e.url&&e.title||/[\0- \u007F]/.test(e.url)?(l=n.enter("destinationLiteral"),d+=c.move("<"),d+=c.move(n.safe(e.url,{before:d,after:">",...c.current()})),d+=c.move(">")):(l=n.enter("destinationRaw"),d+=c.move(n.safe(e.url,{before:d,after:e.title?" ":")",...c.current()}))),l(),e.title&&(l=n.enter(`title${i}`),d+=c.move(" "+a),d+=c.move(n.safe(e.title,{before:d,after:a,...c.current()})),d+=c.move(a),l()),d+=c.move(")"),s(),d}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 d=n.safe(e.alt,{before:c,after:"]",...l.current()});c+=l.move(d+"]["),s();const u=n.stack;n.stack=[],s=n.enter("reference");const h=n.safe(n.associationId(e),{before:c,after:"]",...l.current()});return s(),n.stack=u,i(),a==="full"||!d||d!==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 d=c.index;o.charCodeAt(d)===10&&o.charCodeAt(d-1)===13&&d--,o=o.slice(0,d)+" "+o.slice(c.index+1)}}return a+o+a}function e4e(){return"`"}function wL(e,r){const n=A3(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 u=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=u,h}l=n.enter("link"),c=n.enter("label");let d=s.move("[");return d+=s.move(n.containerPhrasing(e,{before:d,after:"](",...s.current()})),d+=s.move("]("),c(),!e.url&&e.title||/[\0- \u007F]/.test(e.url)?(c=n.enter("destinationLiteral"),d+=s.move("<"),d+=s.move(n.safe(e.url,{before:d,after:">",...s.current()})),d+=s.move(">")):(c=n.enter("destinationRaw"),d+=s.move(n.safe(e.url,{before:d,after:e.title?" ":")",...s.current()}))),c(),e.title&&(c=n.enter(`title${i}`),d+=s.move(" "+a),d+=s.move(n.safe(e.title,{before:d,after:a,...s.current()})),d+=s.move(a),c()),d+=s.move(")"),l(),d}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 d=n.containerPhrasing(e,{before:c,after:"]",...l.current()});c+=l.move(d+"]["),s();const u=n.stack;n.stack=[],s=n.enter("reference");const h=n.safe(n.associationId(e),{before:c,after:"]",...l.current()});return s(),n.stack=u,i(),a==="full"||!d||d!==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 d(u(g,x,w),g.align)}function l(g,b,x,w){const k=h(g,x,w),C=d([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 d(g,b){return Mwe(g,{align:b,alignDelimiters:o,padding:n,stringLength:a})}function u(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})/,d)),c;function d(u){return u+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 ui(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;)P4e(r,e[n]);return r}function P4e(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];M4e(a[s],Array.isArray(l)?l:l?[l]:[])}}}function M4e(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},PL={tokenize:H4e,partial:!0},ML={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 Yu=48;for(;Yu<123;)ol[Yu]=nc,Yu++,Yu===58?Yu=65:Yu===91&&(Yu=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!P8(h)||!BL.call(o,o.previous)||M8(o.events)?n(h):(e.enter("literalAutolink"),e.enter("literalAutolinkEmail"),l(h))}function l(h){return P8(h)?(e.consume(h),l):h===64?(e.consume(h),c):n(h)}function c(h){return h===46?e.check(I4e,u,d)(h):h===45||h===95||Mo(h)?(i=!0,e.consume(h),c):u(h)}function d(h){return e.consume(h),a=!0,c}function u(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)||M8(o.events)?n(s):(e.enter("literalAutolink"),e.enter("literalAutolinkWww"),e.check(z4e,e.attempt(PL,e.attempt(ML,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)&&!M8(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 d,u,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,d=nB.exec(i),f=d&&d.index!==void 0?d.index:i.length,g=i.charCodeAt(f),!d){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(u=Math.ceil(e/4)*4,c.push(-2);e++<u;)c.push(-1);break}case 10:{c.push(-4),e=1;break}default:o=!0,e=1}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:P,autolinkEmail:P,atxHeading:i(Ie),blockQuote:i(ge),characterEscape:P,characterReference:P,codeFenced:i(De),codeFencedFenceInfo:s,codeFencedFenceMeta:s,codeIndented:i(De,s),codeText:i(he,s),codeTextData:P,data:P,codeFlowValue:P,definition:i(me),definitionDestinationString:s,definitionLabelString:s,definitionTitleString:s,emphasis:i(Te),hardBreakEscape:i(Ze),hardBreakTrailing:i(Ze),htmlFlow:i(rt,s),htmlFlowData:P,htmlText:i(rt,s),htmlTextData:P,image:i(Rt),label:s,link:i(Qe),listItem:i(Ke),listItemValue:f,listOrdered:i(Mt,h),listUnordered:i(Mt),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(M),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:d,buffer:s,resume:u,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:gd(Ee.length>0?Ee[0][1].start:{line:1,column:1,offset:0}),end:gd(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 d={type:"element",tagName:"sup",properties:{},children:[c]};return e.patch(r,d),e.applyData(r,d)}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 dB(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 dB(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 dB(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 d_e(e,r,n){const o=e.all(r),a=n?u_e(n):uB(r),i={},s=[];if(typeof r.checked=="boolean"){const u=o[0];let h;u&&u.type==="element"&&u.tagName==="p"?h=u:(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 u=o[l];(a||l!==0||u.type!=="element"||u.tagName!=="p")&&s.push({type:"text",value:`
`}),u.type==="element"&&u.tagName==="p"&&!a?s.push(...u.children):s.push(u)}const c=o[o.length-1];c&&(a||c.type!=="element"||c.tagName!=="p")&&s.push({type:"text",value:`
`});const d={type:"element",tagName:"li",properties:i,children:s};return e.patch(r,d),e.applyData(r,d)}function u_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=uB(n[o])}return r}function uB(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=v3(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 d=[];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)),d.push(b)}const u={type:"element",tagName:"tr",properties:{},children:e.wrap(d,!0)};return e.patch(r,u),e.applyData(r,u)}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:d_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:$3,yaml:$3,definition:$3,footnoteDefinition:$3};function $3(){}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 d=e.footnoteById.get(e.footnoteOrder[c]);if(!d)continue;const u=e.all(d),h=String(d.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:d,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(u){if(u.type==="definition"||u.type==="footnoteDefinition"){const h=u.type==="definition"?o:a,f=String(u.identifier).toUpperCase();h.has(f)||h.set(f,u)}}),l;function c(u,h){const f=u.type,g=l.handlers[f];if(B8.call(l.handlers,f)&&g)return g(l,u,h);if(l.options.passThrough&&l.options.passThrough.includes(f)){if("children"in u){const{children:x,...w}=u,k=Lu(w);return k.children=l.all(u),k}return Lu(u)}return(l.options.unknownHandler||N_e)(l,u,h)}function d(u){const h=[];if("children"in u){const f=u.children;let g=-1;for(;++g<f.length;){const b=l.one(f[g],u);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,Lu(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:`
`}),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 P_e(){if(bB)return F8;bB=1;var e=Object.prototype.hasOwnProperty,r=Object.prototype.toString,n=Object.defineProperty,o=Object.getOwnPropertyDescriptor,a=function(d){return typeof Array.isArray=="function"?Array.isArray(d):r.call(d)==="[object Array]"},i=function(d){if(!d||r.call(d)!=="[object Object]")return!1;var u=e.call(d,"constructor"),h=d.constructor&&d.constructor.prototype&&e.call(d.constructor.prototype,"isPrototypeOf");if(d.constructor&&!u&&!h)return!1;var f;for(f in d);return typeof f>"u"||e.call(d,f)},s=function(d,u){n&&u.name==="__proto__"?n(d,u.name,{enumerable:!0,configurable:!0,value:u.newValue,writable:!0}):d[u.name]=u.newValue},l=function(d,u){if(u==="__proto__")if(e.call(d,u)){if(o)return o(d,u).value}else return;return d[u]};return F8=function c(){var d,u,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(d=arguments[w],d!=null)for(u in d)h=l(x,u),f=l(d,u),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:u,newValue:c(C,b,f)})):typeof f<"u"&&s(x,{name:u,newValue:f}));return x},F8}var M_e=P_e();const H8=m1(M_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,...d){const u=e[++i];let h=-1;if(c){s(c);return}for(;++h<a.length;)(d[h]===null||d[h]===void 0)&&(d[h]=a[h]);a=d,u?I_e(u,l)(...d):s(null,...d)}}function o(a){if(typeof a!="function")throw new TypeError("Expected `middelware` to be a function, not "+a);return e.push(a),r}}function 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(d){const u=d;if(l&&n)throw u;return a(u)}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 d=o(l),u=o(c);return i(d,u)?1:i(u,d)?-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(d8e,e)}const d8e=(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 u8e(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=>Ku(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 j3{constructor(r,n){this.$model=r,this.$element=n,this.id=this.$element.id,this._literalId=this.$element.id;const[o,a]=d6e(this.id);o?(this.imported={from:o,fqn:a},this.hierarchyLevel=r3(a)):(this.imported=null,this.hierarchyLevel=r3(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"),()=>O3([...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()]},L3=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 dd(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);#d=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.#d,`${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=t3(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,...ju(o)])this.#o.get(a).add(n);for(const a of ju(n.source.id)){if(a===o)break;this.#a.get(a).add(n)}for(const a of ju(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(`
`)),d=c.reduce((u,h)=>u.concat(...h),[]);return[c,d]}return[[],[]]},[e]);return E.useEffect(()=>{const c=r?.target??VV,d=r?.actInsideInputWithModifier??!0;if(e!==null){const u=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!d)&&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",u),c?.addEventListener("keyup",h),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",u),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=vd(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(),d={x:r.x-l,y:r.y-c},u=n.snapGrid??a,h=n.snapToGrid??i;return w0(d,o,h,u)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:a,y:i}=o.getBoundingClientRect(),s=Ex(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 $x(e,r){return WV(e,r)}function Px(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:d=Number.MAX_VALUE,maxHeight:u=Number.MAX_VALUE,keepAspectRatio:h=!1,resizeDirection:f,autoScale:g=!0,shouldResize:b,onResizeStart:x,onResize:w,onResizeEnd:k}){const C=R7(),_=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),P=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:M,nodeOrigin:V,domNode:I}=T.getState();return{nodeLookup:F,transform:L,snapGrid:U,snapToGrid:M,nodeOrigin:V,paneDomNode:I}},onChange:(F,L)=>{const{triggerNodeChanges:U,nodeLookup:M,parentLookup:V,nodeOrigin:I}=T.getState(),H=[],q={x:F.x,y:F.y},Z=M.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,M,W)}},Y=b7([j],M,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:P,boundaries:{minWidth:l,minHeight:c,maxWidth:d,maxHeight:u},keepAspectRatio:h,resizeDirection:f,onResizeStart:x,onResize:w,onResizeEnd:k,shouldResize:b}),()=>{N.current?.destroy()}},[P,l,c,d,u,h,x,w,k,b]);const O=P.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 D7({nodeId:e,children:r,className:n,style:o,isVisible:a,position:i=tt.Top,offset:s=10,align:l="center",...c}){const d=R7(),u=E.useCallback(T=>(Array.isArray(e)?e:[e||d||""]).reduce((A,R)=>{const D=T.nodeLookup.get(R);return D&&A.set(D.id,D),A},new Map),[e,d]),h=qt(u,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,`;
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
}
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;
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;
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
}
.`).concat(Gx,` {
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
}
.`).concat(Xx,` {
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
}
.`).concat(Gx," .").concat(Gx,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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,`;
}
.`).concat(Xx," .").concat(Xx,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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,`;
}
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
}
`)},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")})},F7=!1;if(typeof window<"u")try{var Zx=Object.defineProperty({},"passive",{get:function(){return F7=!0,!0}});window.addEventListener("test",Zx,Zx),window.removeEventListener("test",Zx,Zx)}catch{F7=!1}var Vf=F7?{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),d=!1,u=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(u&&Math.abs(h)<1||!u&&Math.abs(f)<1)&&(d=!0),d},Qx=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;}
`)},$De=0,qf=[];function PDe(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=Qx(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 P=o.current||A;return RDe(P,w,x,P==="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):Qx(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()}}},[]),d=E.useCallback(function(x,w,k,C){var _={name:x,delta:w,target:k,should:C,shadowParent:MDe(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function(T){return T!==_})},1)},[]),u=E.useCallback(function(x){n.current=Qx(x),o.current=void 0},[]),h=E.useCallback(function(x){d(x.type,sU(x),x.target,l(x,e.lockRef.current))},[]),f=E.useCallback(function(x){d(x.type,Qx(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",u,Vf),function(){qf=qf.filter(function(x){return x!==i}),document.removeEventListener("wheel",c,Vf),document.removeEventListener("touchmove",c,Vf),document.removeEventListener("touchstart",u,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 MDe(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,PDe);var A0=E.forwardRef(function(e,r){return E.createElement(Kx,pl({},e,{ref:r,sideCar:zDe}))});A0.classNames=Kx.classNames;function zo(e){return Object.keys(e)}function H7(e){return e&&typeof e=="object"&&!Array.isArray(e)}function V7(e,r){const n={...e},o=r;return H7(e)&&H7(r)&&Object.keys(r).forEach(a=>{H7(o[a])&&a in e?n[a]=V7(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 q7(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 dU(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
${s}
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
${l}`}function o9({color:e,theme:r,autoContrast:n}){return(typeof n=="boolean"?n:r.autoContrast)&&Ad({color:e||r.primaryColor,theme:r}).isLight?"var(--mantine-color-black)":"var(--mantine-color-white)"}function FU(e,r){return o9({color:e.colors[e.primaryColor][P0(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=P0(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=P0(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=P0(e,"light"),n=e.defaultRadius in e.radius?e.radius[e.defaultRadius]:Pe(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; }
`}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 ePe({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(u=>{o||(Zf(u,n),s(u),e.set(u))},[e.set,l,o]),d=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 u=h=>{i==="auto"&&Zf(h.matches?"dark":"light",n)};return a.current?.addEventListener("change",u),()=>a.current?.removeEventListener("change",u)},[i,o]),{colorScheme:l,setColorScheme:c,clearColorScheme:d}}function tPe({respectReducedMotion:e,getRootElement:r}){$0(()=>{e&&r()?.setAttribute("data-respect-reduced-motion","true")},[e])}function i9({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:d=q$e(),defaultColorScheme:u="light",getRootElement:h=()=>document.documentElement,cssVariablesResolver:f,forceColorScheme:g,stylesTransform:b,env:x}){const{colorScheme:w,setColorScheme:k,clearColorScheme:C}=ePe({defaultColorScheme:u,forceColorScheme:g,manager:d,getRootElement:h});return tPe({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]})})}i9.displayName="@mantine/core/MantineProvider";function s9({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 rPe={always:"mantine-focus-always",auto:"mantine-focus-auto",never:"mantine-focus-never"};function nPe({theme:e,options:r,unstyled:n}){return hs(r?.focusable&&!n&&(e.focusClassName||rPe[e.focusRing]),r?.active&&!n&&e.activeClassName)}function oPe({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 aPe({rootSelector:e,selector:r,className:n}){return e===r?n:void 0}function iPe({selector:e,classes:r,unstyled:n}){return n?void 0:r[e]}function sPe({themeName:e,classNamesPrefix:r,selector:n,withStaticClass:o}){return o===!1?[]:e.map(a=>`${r}-${a}-${n}`)}function lPe({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 cPe({options:e,classes:r,selector:n,unstyled:o}){return e?.variant&&!o?r[`${n}--${e.variant}`]:void 0}function dPe({theme:e,options:r,themeName:n,selector:o,classNamesPrefix:a,classNames:i,classes:s,unstyled:l,className:c,rootSelector:d,props:u,stylesCtx:h,withStaticClasses:f,headless:g,transformedStyles:b}){return hs(nPe({theme:e,options:r,unstyled:l||g}),lPe({theme:e,themeName:n,selector:o,props:u,stylesCtx:h}),cPe({options:r,classes:s,selector:o,unstyled:l}),qU({selector:o,stylesCtx:h,theme:e,classNames:i,props:u}),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%);
`;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});
`};function nLe(e,r){return!e||fp(e)?"":En(P7(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=PS(r).slice();let o=e;for(;n.length;){const a=n.shift();if(!a.length)break;o=ym(o,a)}return o}function dw(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=dw(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 Od(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(Od(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=>Od(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||Od(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)Od(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 d=r;a||([d,l]=sBe(d,o,n,c,s,l,i,n.actionExecutor)),d=vm(d,o,n,c.flatMap(h=>h.actions),i,void 0),d=aBe(d,o,n,c,s,i,l,a);const u=[...s];d.status==="done"&&(d=vm(d,o,n,u.sort((h,f)=>f.order-h.order).flatMap(h=>h.exit),i,void 0));try{return l===r.historyValue&&nBe(r._nodes,s)?d:Pp(d,{_nodes:u,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?MS(a.output,e.context,r,n.self):void 0);return MS(o.output,e.context,i,n.self)}function aBe(e,r,n,o,a,i,s,l){let c=e;const d=new Set,u=new Set;iBe(o,s,u,d),l&&u.add(e.machine.root);const h=new Set;for(const f of[...d].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(u.has(f)){const b=f.initial.actions;g.
${h.message}`)}if(u){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=dBe(this.root,r.value),o=sw(dw(this.root,n));return uw({_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=uw({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=PS(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=uw({...r,children:o,_nodes:Array.from(sw(dw(this.root,r.value))),historyValue:l},this),d=new Set;function u(h,f){if(!d.has(h)){d.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}u(b,f)}}}}return u(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 d=r.machine.implementations.delays;if(typeof i=="string")throw
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
[data-motion-pop-id="${a}"] {
position: absolute !important;
width: ${d}px !important;
height: ${u}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
${b}px !important;
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
}
`),()=>{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 d=Dm(jVe),u=E.useId();let h=!0,f=E.useMemo(()=>(h=!1,{id:u,initial:r,isPresent:n,custom:a,onExitComplete:g=>{d.set(g,!0);for(const b of d.values())if(!b)return;o&&o()},register:g=>(d.set(g,!1),()=>d.delete(g))}),[n,d,o]);return i&&h&&(f={...f}),E.useMemo(()=>{d.forEach((g,b)=>d.set(b,!1))},[n]),E.useEffect(()=>{!n&&!d.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 MZ(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[d,u]=MZ(s),h=E.useMemo(()=>zZ(e),[e]),f=s&&!d?[]: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],P=Aw(N);f.includes(P)||(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&&!d?!1:h===C||f.includes(D),P=()=>{if(x.has(D))x.set(D,!0);else return;let O=!0;x.forEach(F=>{F||(O=!1)}),O&&(A?.(),_(b.current),s&&u?.(),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:P,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 d=E.useMemo(()=>({...l.current,forceRender:i}),[s]);return y.jsx(fy.Provider,{value:d,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(180deg,
color-mix(in srgb, var(--likec4-palette-fill) 60%, transparent),
color-mix(in srgb, var(--likec4-palette-fill) 20%, transparent) 8px,
color-mix(in srgb, var(--likec4-palette-fill) 14%, transparent) 20px,
transparent 80px
),
linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px)
`,"& .react-flow__attribution":{display:"none"}}),$We=be({flex:0,cursor:"move"}),PWe=be({display:"block",fontFamily:"likec4.element",fontOpticalSizing:"auto",fontStyle:"normal",fontWeight:600,fontSize:"24px",lineHeight:"xs"}),$T="40px",MWe=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 3px rgb(0 0 0 / 10%))
drop-shadow(0 1px 8px rgb(0 0 0 / 5%))
drop-shadow(1px 1px 16px rgb(0 0 0 / 2%))
`},"& 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"}]],PT=Nt("outline","chevron-down","ChevronDown",qWe),UWe=[["path",{d:"M9 6l6 6l-6 6",key:"svg-0"}]],qd=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
`)?r.split(`
`).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(PT,{size:12}):y.jsx(qd,{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"}]],MT=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
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
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
`.replace(/\s+/g," ").trim(),ry:i,rx:a}}function Wee(e,r,n=.185){const o=r,a=Math.round(o/2),i=Ud(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}
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}
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},d)=>{if(e.isEmpty&&o)return null;const u=e.nonEmpty?e.isMarkdown?{dangerouslySetInnerHTML:{__html:e.html}}:{children:y.jsx("p",{children:e.text})}:{children:y.jsx(ft,{component:"span",fz:"xs",c:"dimmed",style:{userSelect:"none"},children:a})};return y.jsx(zr,{ref:d,...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},...u})});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(X3,{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 2px 3px rgb(0 0 0 / 22%))
drop-shadow(0 1px 8px rgb(0 0 0 / 10%))
`});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(d=>y.jsx(vl,{className:et(tJe),onMouseEnter:()=>{i(d),s.highlightNotation(e,d)},onMouseLeave:()=>{i(null),s.highlightNotation(e)},opacity:Vq(a)&&a!==d?.25:1,children:d},d))}),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(40vh, ${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(dJe,{style:{backgroundColor:o},onClick:a=>{a.stopPropagation(),n()},children:"Close compare"})})}),dJe=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 de of Se(le))ae(de)}}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 de=ae.shift();if(!de.length)break;le=fo(le,de)}return le}function jl(ee,te){if(typeof te=="string"){const de=ee.states[te];if(!de)throw new Error(`State '${te}' does not exist on '${ee.id}'`);return[ee,de]}const ae=Object.keys(te),le=ae.map(de=>fo(ee,de)).filter(Boolean);return[ee.machine.root,ee].concat(le,ae.reduce((de,_e)=>{const Be=fo(ee,_e);if(!Be)return de;const Xe=jl(Be,te[_e]);return de.concat(Xe)},[]))}function Bc(ee,te,ae,le){const de=fo(ee,te).next(ae,le);return!de||!de.length?ee.next(ae,le):de}function Ks(ee,te,ae,le){const de=Object.keys(te),_e=fo(ee,de[0]),Be=Ll(_e,te[de[0]],ae,le);return!Be||!Be.length?ee.next(ae,le):Be}function Rh(ee,te,ae,le){const de=[];for(const _e of Object.keys(te)){const Be=te[_e];if(!Be)continue;const Xe=fo(ee,_e),ut=Ll(Xe,Be,ae,le);ut&&de.push(...ut)}return de.length?de: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 iu(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 de of ae)if(le.has(de))return!0;for(const de of le)if(ae.has(de))return!0;return!1}function Bl(ee,te,ae){const le=new Set;for(const de of ee){let _e=!1;const Be=new Set;for(const Xe of le)if(Fc(Wr([de],te,ae),Wr([Xe],te,ae)))if(ta(de.source,Xe.source))Be.add(Xe);else{_e=!0;break}if(!_e){for(const Xe of Be)le.delete(Xe);le.add(de)}}return Array.from(le)}function su(ee){const[te,...ae]=ee;for(const le of it(te,void 0))if(ae.every(de=>ta(de,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 de of te[le.id])ae.add(de);else for(const de of Fl(Gs(le),te))ae.add(de);else ae.add(le);return[...ae]}function ra(ee,te){const ae=Fl(ee,te);if(!ae)return;if(!ee.reenter&&ae.every(de=>de===ee.source||ta(de,ee.source)))return ee.source;const le=su(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 de of ee)if(de.target?.length){const _e=ra(de,ae);de.reenter&&de.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,de,_e){if(!ee.length)return te;const Be=new Set(te._nodes);let Xe=te.historyValue;const ut=Bl(ee,Be,Xe);let gt=te;de||([gt,Xe]=ji(gt,le,ae,ut,Be,Xe,_e,ae.actionExecutor)),gt=So(gt,le,ae,ut.flatMap(nt=>nt.actions),_e,void 0),gt=Hc(gt,le,ae,ut,Be,_e,Xe,de);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,de){if(le.output===void 0)return;const _e=h(de.id,de.output!==void 0&&de.parent?N(d
${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)};
}
${_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)};
}
`.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};
}
${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
}
${_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
}
`.trim(),...VNe(1,drt+1).map(s=>urt(e,r,n,s))].join(`
`)}function hrt(e,r){return En(r.colors,P7(),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(i9,{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:d,onBurgerMenuClick:u,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:P=!1,enableRelationshipBrowser:O=!1,enableCompareWithLatest:F=!!h,nodesDraggable:L=!x,nodesSelectable:U=!x||D||!!s||!!l,enableNotations:M=!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:P,enableRelationshipBrowser:O,enableSearch:q,enableNavigationButtons:V&&!!s,enableDynamicViewWalkthrough:g._type==="dynamic"&&I,enableNotations:M,enableVscode:!!d,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:d,onBurgerMenuClick:u,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(Ox,{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 PR,Rne;function wrt(){if(Rne)return PR;Rne=1;var e=xrt();function r(){}function n(){}return n.resetWarningCache=r,PR=function(){function o(s,l,c,d,u,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()},Pne=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},Mne=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=Mne(e,["children"]);return typeof n!="string"&&(n=vrt()),un.createElement("template",Pne({},o,{dangerouslySetInnerHTML:{__html:n}}))}function Ine(e){var r=e.root,n=e.children;return Ki.createPortal(n===void 0?null:n,r)}function Prt(e){var r=E.forwardRef((function(n,o){var a,i,s=n.mode,l=s===void 0?"open":s,c=n.delegatesFocus,d=c!==void 0&&c,u=n.styleSheets,h=u===void 0?[]:u,f=n.ssr,g=f!==void 0&&f,b=n.children,x=Mne(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(d);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:d});h.length>0&&(D.adoptedStyleSheets=h),T(D)}catch(N){(function(P){var O=P.error,F=P.styleSheets,L=P.root;switch(O.name){case"NotSupportedError":F.length>0&&(L.adoptedStyleSheets=F);break;default:throw O}})({error:N,styleSheets:h,root:_})}}),[o,w,h]),un.createElement(un.Fragment,null,un.createElement(e.tag,Pne({key:A,ref:w},x),(_||g)&&un.createElement($rt.Provider,{value:_},g?un.createElement(zne,{shadowroot:l,shadowrootmode:l},e.render({root:_,ssr:g,children:b})):un.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 MR=new Map;function Mrt(){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 MR.has(s)||MR.set(s,Prt({tag:i,render:n})),MR.get(s)}})}var zrt=Mrt();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: 80px;
min-height: 80px;
}
`.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));
}
`.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(),d=Frt(c,i),u=E.useRef(null),h=jrt(n,o),f=E.useCallback(()=>u.current??void 0,[u]),g=kt(()=>{if(Fx(o)){if(typeof o=="string")return o;if(typeof o=="function")return o()}return""});let b=Fx(o)?g():void 0;return y.jsxs(y.Fragment,{children:[y.jsx("style",{type:"text/css",nonce:b,dangerouslySetInnerHTML:{__html:d}}),y.jsx(Brt,{ssr:!1,...s,styleSheets:h,"data-likec4-instance":c,children:y.jsx("div",{ref:u,"data-mantine-color-scheme":l,className:"likec4-shadow-root",children:y.jsx(i9,{...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:d=!0,showNavigationButtons:u=!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 P=Jje(),[O,F]=E.useState("manual"),[L,U]=E.useState(null),M=kt(Y=>{Y&&Y!==L&&F("manual"),U(Y)}),V=kt(()=>{M(e)});if(!P)return y.jsx(DR,{children:"LikeC4Model not found. Make sure you provided LikeC4ModelProvider."});const I=P.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?P.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=d!==!1,K=Hq(d)?{}:d,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:u,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:()=>M(null),children:[y.jsx(Sne,{view:q,pannable:!0,zoomable:!0,background:"dots",onNavigateTo:M,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(),M(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,
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
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.
Optionally we will have a WebUI/API/CLI`},tags:[],style:{opacity:15,size:"md"},depth:1,x:1920,y:79,width:870,height:995,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:6035,y:444,width:384,height:265,labelBBox:{x:6,y:0,width:92,height:15}},{id:"local.velero",parent:"local",level:1,children:["local.velero.velero"],inEdges:[],outEdges:["3znaik"],deploymentRef:"local.velero",title:"Velero",kind:"namespace",color:"primary",shape:"rectangle",modelRef:"edp.velero.velero",tags:[],style:{opacity:15,size:"md"},depth:1,x:9320,y:444,width:384,height:265,labelBBox:{x:6,y:0,width:49,height:15}},{id:"edgeSdk",parent:null,level:0,children:[],inEdges:["1xqlhup"],outEdges:["14pfq5a","lw6otg"],deploymentRef:"edgeSdk",title:"Edge Cloud SDK",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",icon:"tech:go",description:{txt:"Wrapper around API"},tags:[],style:{opacity:15,size:"md"},x:731,y:497,width:320,height:180,labelBBox:{x:68,y:54,width:214,height:67}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:[],inEdges:[],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:1981,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:9320,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:9370,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:9820,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:10270,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:10720,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",
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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`},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:8428,y:844,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:3432,y:844,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:4802,y:844,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:4352,y:844,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:8900,y:844,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:8900,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:5254,y:844,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:5704,y:844,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:9352,y:844,width:320,height:180,labelBBox:{x:85,y:65,width:150,height:45}},{id:"edgeProviderHost.edp",parent:"edgeProviderHost",level:1,children:[],inEdges:["u9omtf","14pfq5a","c8rye7"],outEdges:[],deploymentRef:"edgeProviderHost.edp",title:"Forgejo for all EDP-tenants",kind:"cluster",color:"primary",shape:"rectangle",modelRef:"edp.forgejo",icon:"tech:git",description:{txt:"edp.buildth.ing"},tags:[],style:{opacity:15,size:"md"},navigateTo:"forgejo",x:1173,y:844,width:365,height:180,labelBBox:{x:46,y:63,width:304,height:48}},{id:"edgeCloud.edgeResources",parent:"edgeCloud",level:1,children:[],inEdges:["1toht4t"],outEdges:[],deploymentRef:"edgeCloud.edgeResources",title:"Edge Cloud Resources",kind:"paas",technology:"Edge Cloud (managed)",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
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:2840,y:79,width:442,height:1682,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:6156,y:1177,width:320,height:180,labelBBox:{x:101,y:64,width:148,height:46}},{id:"local.argocd.argocdRedis",parent:"local.argocd",level:2,children:[],inEdges:["1gfgfhk","qfu5xm","g7xnzs","fon3rk"],outEdges:[],kind:"instance",title:"Redis",technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.argocd.argocdRedis",modelRef:"edp.argoCD.argocdRedis",x:7751,y:1177,width:320,height:180,labelBBox:{x:119,y:64,width:113,height:46}},{id:"local.keycloak.keycloakDB",parent:"local.keycloak",level:2,children:[],inEdges:["4zwy1m"],outEdges:[],kind:"instance",title:"Database",technology:"Postgresql",tags:[],icon:"tech:postgresql",color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.keycloak.keycloakDB",modelRef:"edp.keycloak.keycloakDB",x:3432,y:1177,width:320,height:180,labelBBox:{x:101,y:64,width:148,height:46}},{id:"local.monitoring.distributor",parent:"local.monitoring",level:2,children:[],inEdges:["sb2j38"],outEdges:[],kind:"instance",title:"Distributor",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.monitoring.distributor",modelRef:"edp.monitoring.loki.distributor",x:4802,y:1177,width:320,height:180,labelBBox:{x:112,y:74,width:95,height:24}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:[],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:2890,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:2893,y:1177,width:327,height:180,labelBBox:{x:46,y:53,width:266,height:68}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:["pit45i","e3benz"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},x:2897,y:1531,width:320,height:180,labelBBox:{x:67,y:53,width:185,height:68}},{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:13440,y:150,width:320,height:180,labelBBox:{x:76,y:65,width:198,height:45}}],edges:[{id:"1xqlhup",source:"edgeProvider",target:"edgeSdk",label:"built using",dotpos:"e,937.73,497.79 1034.6,330.38 1021.3,351.53 1007.4,374.14 994.98,395.4 977.41,425.36 959.05,458.44 942.73,488.55",points:[[1035,330],[1021,352],[1007,374],[995,395],[977,425],[959,458],[943,489]],labelBBox:{x:996,y:395,width:67,height:18},parent:null,relations:["1wlvsb5"],color:"gray",line:"dashed",head:"normal"},{id:"u9o
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
This is kubernetes clusters and other infrastructure like nodes and vms, and platform services. All is set up by IaC-pipelines in the Foundry.`},tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:8,width:1994,height:1159,labelBBox:{x:6,y:0,width:181,height:15}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["1dcszi5"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:321,y:150,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cce.edp"],inEdges:["1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:755,y:79,width:954,height:719,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edp-per-tenant.cce.edp",parent:"otc-edp-per-tenant.cce",level:2,children:["otc-edp-per-tenant.cce.edp.externalSecrets","otc-edp-per-tenant.cce.edp.ingressNginx","otc-edp-per-tenant.cce.edp.argoCD","otc-edp-per-tenant.cce.edp.forgejo"],inEdges:["1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce.edp",title:"EDP",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:787,y:132,width:890,height:634,labelBBox:{x:6,y:0,width:27,height:15}},{id:"otc-edp-per-tenant.cce.edp.externalSecrets",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:837,y:204,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:65}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edp-per-tenant.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["1dcszi5"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:353,y:204,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edp-per-tenant.cce.edp.ingressNginx",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:["1ir70dd","1kr1wg1"],kind:"instance",title:"Ingress",description:{txt:"Ingress Controller for incoming http(s) traffic"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.ingressNginx",modelRef:"edp.ingressNginx",navigateTo:"ingressNginx",x:1287,y:204,width:320,height:180,labelBBox:{x:33,y:54,width:255,height:65}},{id:"otc-edp-per-tenant.cce.edp.argoCD",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:["1ir70dd"],outEdges:[],kind:"instance",title:"ArgoCD",description:{txt:"GitOps Service"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.argoCD",modelRef:"edp.argoCD",navigateTo:"argoCD",x:1307,y:536,width:320,height:180,labelBBox:{x:108,y:63,width:105,height:48}},{id:"otc-edp-per-tenant.cce.edp.forgejo",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:["1kr1wg1","1dcszi5"],outE
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:837,y:536,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cloudServices.postgres","otc-edp-per-tenant.cloudServices.redis","otc-edp-per-tenant.cloudServices.objectstorage","otc-edp-per-tenant.cloudServices.elasticsearch"],inEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},depth:1,x:58,y:815,width:1894,height:302,labelBBox:{x:6,y:0,width:127,height:15}},{id:"otc-edp-per-tenant.cloudServices.postgres",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["8msu1q"],outEdges:[],kind:"instance",title:"PostgreSQL",description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
and correctness.`},technology:"PostgreSQL",tags:[],icon:"tech:postgresql",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.postgres",modelRef:"postgres",x:108,y:887,width:354,height:180,labelBBox:{x:46,y:17,width:292,height:139}},{id:"otc-edp-per-tenant.cloudServices.redis",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["120qe5o"],outEdges:[],kind:"instance",title:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.redis",modelRef:"redis",x:592,y:887,width:359,height:180,labelBBox:{x:47,y:26,width:297,height:121}},{id:"otc-edp-per-tenant.cloudServices.objectstorage",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["ealiax"],outEdges:[],kind:"instance",title:"s3 Object Storage",description:{txt:"s3 Object Storage"},technology:"S3 Object Storage",tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.objectstorage",modelRef:"objectstorage",x:1082,y:887,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"otc-edp-per-tenant.cloudServices.elasticsearch",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["1trj5u6"],outEdges:[],kind:"instance",title:"Elasticsearch",description:{txt:`Elasticsearch is a distributed, RESTful search and analytics engine capable of
addressing a growing number of use cases. It centrally stores your data so you can
discover the expected and uncover the unexpected.`},technology:"Elasticsearch",tags:[],icon:"tech:elasticsearch",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.elasticsearch",modelRef:"elasticsearch",x:1532,y:887,width:370,height:180,labelBBox:{x:46,y:17,width:308,height:139}}],edges:[{id:"1ir70dd",source:"otc-edp-per-tenant.cce.edp.ingressNginx",target:"otc-edp-per-tenant.cce.edp.argoCD",label:"https",dotpos:"e,1461.6,536.51 1452.4,383.25 1455,427.28 1458.2,480.64 1461,526.05",points:[[1452,383],[1455,427],[1458,481],[1461,526]],labelBBox:{x:1459,y:448,width:34,height:18},parent:"otc-edp-per-tenant.cce.edp",relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"1kr1wg1",source:"otc-edp-per-tenant.cce.edp.ingressNginx",target:"otc-edp-per-tenant.cce.edp.forgejo",label:"https",dotpos:"e,1125.1,536.62 1328.8,383.47 1268.4,428.89 1194.8,484.19 1133.3,530.44",points:[[1329,383],[1268,429],[1195,484],[1133,530]],labelBBox:{x:1241,y:448,width:34,height:18},parent:"otc-edp-per-tenant.cce.edp",relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"1dcszi5",source:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",target:"otc-edp-per-tenant.cce.edp.forgejo",label:"registers",dotpos:"e,874.42,536.62 645.71,383.47 713.81,429.07 796.79,484.64 866.04,531.01",points:[[646,383],[714,429],[797,485],[866,531]],labelBBox:{x:776,y:448,width:58,height:18},parent:"otc-edp-per-tenant",relations:["g9oj4f"],color:"gray",line:"dashed",head:"normal"},{id:"8msu1q",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.postgres",label:null,dotpos:"e,408.47,886.62 836.84,684.1 743.28,717.71 626.38,763.79 527,815.4 490.05,834.59 451.75,858.08 416.81,881.1",points:[[837,684],[743,718],[626,764],[527,815],[490,835],[452,858],[417,881]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["hks76r"],color:"gray",line:"dashed",head:"normal"},{id:"120qe5o",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.redis",label:null,dotpos:"e,832,886.69 947.09,716.17 913.73,765.59 872.15,827.21 837.87,877.99",points:[[947,716],[914,766],[872,827],[838,878]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1w18ve8"],color:"gray",line:"dashed",head:"normal"},{id:"ealiax",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.objectstorage",label:null,dotpos:"e,1182,886.69 1066.9,716.17 1100.3,765.59 1141.9,827.21 1176.1,877.99",points:[[1067,716],[1100,766],[1142,827],[1176,878]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["15njmlz"],color:"gray",line:"dashed",head:"normal"},{id:"1trj5u6",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.elasticsearch",label:null,dotpos:"e,1604.5,886.79 1103.6,716.4 1143.6,747.92 1192.2,780.08 1242,798.4 1336.1,833 1371.9,783.6 1467,815.4 1512.1,830.47 1557.1,855.46 1596.3,881.27",points:[[1104,716],[1144,748],[1192,780],[1242,798],[1336,833],[1372,784],[1467,815],[1512,830],[1557,855],[1596,881]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1fzhjm9"],color:"gray",line:"dashed",head:"normal"}]},"edp-foundry-central-service":{_type:"deployment",tags:null,links:null,_stage:"layouted",sourcePath:"views/deployment/otc/foundry.c4",description:null,title:"EDP Foundry Central Service",id:"edp-foundry-central-service",autoLayout:{direction:"TB"},hash:"8f8eb235b0e8ff555a22ed61d124ba68e67e5ee2",bounds:{x:0,y:0,width:3894,height:1218},nodes:[{id:"otc-edpFoundry",parent:null,level:0,children:["otc-edpFoundry.cce","otc-edpFoundry.forgejoRunnerInfrastructure","otc-edpFoundry.workflowSetupEDPInfrastructure","otc-edpFoundry.workflowSetupArgoCDInfrastructure"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry",title:"OTC EDP Foundry Central Service clusters",kind:"cloud",technology:"OTC",color:"slate",shape:"rectangle",description:{txt:`OTC environments for the central EDP Foundry services. This is kubernetes clusters and other infrastructure like nodes and vms, and optionally platform servi
A tenant is a folder in Foundry-Config-Forgejo. On merge triggers reconciliation to EDP.
Optionally we will have a WebUI/API/CLI`},tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:8,width:3878,height:1202,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otc-edpFoundry.cce",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.cce.internalServices","otc-edpFoundry.cce.centralObservability"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:58,y:79,width:2360,height:755,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edpFoundry.cce.internalServices",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.internalServices.externalSecrets","otc-edpFoundry.cce.internalServices.ingressNginx","otc-edpFoundry.cce.internalServices.argoCD","otc-edpFoundry.cce.internalServices.forgejo","otc-edpFoundry.cce.internalServices.openbao"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce.internalServices",title:"EDP Foundry Internal Services",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:1028,y:150,width:1340,height:634,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.cce.internalServices.externalSecrets",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:1308,y:222,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:65}},{id:"otc-edpFoundry.cce.centralObservability",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.centralObservability.grafana","otc-edpFoundry.cce.centralObservability.prometheus","otc-edpFoundry.cce.centralObservability.loki"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry.cce.centralObservability",title:"EDP Foundry Central Observability",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:108,y:150,width:870,height:634,labelBBox:{x:6,y:0,width:232,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["628xl1"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"green",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2468,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edpFoundry.cce.centralObservability.grafana",parent:"otc-edpFoundry.cce.centralObservability",level:3,children:[],inEdges:[],outEdges:["qykxlm","yv49z5"],kind:"instance",title:"Grafana",description:{txt:"Data visualization and monitoring"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.centralObservability.grafana",modelRef:"edp.grafana",x:289,y:222,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:47}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edpFoundry.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["628xl1"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2500,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.cce.cent
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:1978,y:554,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edpFoundry.cce.internalServices.openbao",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:["u5oqat"],outEdges:[],kind:"instance",title:"OpenBao",description:{txt:"Secure secret storage"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.openbao",modelRef:"edp.openbao",x:1528,y:554,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow"],inEdges:["84397w"],outEdges:[],deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure",title:"EDP infrastructure Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP infrastructure Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2902,y:150,width:442,height:1010,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupArgoCDInfrastructure.edpworkflow"],inEdges:["1oz2va9"],outEdges:[],deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",title:"EDP ArgoCD Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP Setup ArgoCD Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:3394,y:150,width:442,height:1010,labelBBox:{x:6,y:0,width:149,height:15}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["84397w"],outEdges:["1hnil62"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2961,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1oz2va9"],outEdges:["1gtxobu"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:3466,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["1hnil62"],outEdges:["ekzztw"],kind:"instance",title:"Forgejo Runner Worker",description:{txt:"A worker is a service that runs a job invoked by a runner. A worker typically is a container."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",modelRef:"forgejoRunnerWorker",x:2954,y:554,width:333,height:180,labelBBox:{x:18,y:45,width:297,height:84}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1gtxobu"]
A tenant is a folder in Foundry-Config-Forgejo. On merge triggers reconciliation to EDP.
Optionally we will have a WebUI/API/CLI`},tags:[],style:{opacity:15,size:"md"},depth:3,x:2052,y:8,width:3408,height:1609,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otc-edpFoundry.cce",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.cce.internalServices","otc-edpFoundry.cce.centralObservability"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:2594,y:79,width:1890,height:1488,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edpFoundry.cce.internalServices",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.internalServices.externalSecrets","otc-edpFoundry.cce.internalServices.ingressNginx","otc-edpFoundry.cce.internalServices.argoCD","otc-edpFoundry.cce.internalServices.forgejo","otc-edpFoundry.cce.internalServices.openbao"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce.internalServices",title:"EDP Foundry Internal Services",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:2644,y:883,width:1790,height:634,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.cce.internalServices.externalSecrets",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:2694,y:1287,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:66}},{id:"otc-edpFoundry.cce.centralObservability",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.centralObservability.grafana","otc-edpFoundry.cce.centralObservability.prometheus","otc-edpFoundry.cce.centralObservability.loki"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry.cce.centralObservability",title:"EDP Foundry Central Observability",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:3349,y:150,width:870,height:634,labelBBox:{x:6,y:0,width:232,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["628xl1"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"green",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:5026,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edp-per-tenant",parent:null,level:0,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure","otc-edp-per-tenant.cce","otc-edp-per-tenant.cloudServices"],inEdges:["1asm38z","1or831y","ejqwjt"],outEdges:[],deploymentRef:"otc-edp-per-tenant",title:"OTC EDP per tenant cluster",kind:"cloud",technology:"OTC",color:"slate",shape:"rectangle",description:{txt:`OTC environment for EDP. EDP is the environment a customer gets from us.
This is kubernetes clusters and other infrastructure like nodes and vms, and platform services. All is set up by IaC-pipelines in the Foundry.`},tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:97,width:1994,height:1889,labelBBox:{x:6,y:0,width:181,height:15}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["1dcszi5"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:608,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edpFoundry.cce.centralObservability.grafana",parent:"otc-edpFoundry.cce.centralObservability",level:3,children:[],inEdges:[],outEdges:["qykxlm","yv49z5"],kind:"instance",title:"Grafana",description:{txt:"Data visualization and monitoring"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.centralObservability.grafana",modelRef:"edp.grafana",x:3530,y:222,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:47}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edpFoundry.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["628xl1"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:5058,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cce.edp"],inEdges:["1or831y","ejqwjt","1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:548,y:830,width:1404,height:719,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edp-per-tenant.cce.edp",parent:"otc-edp-per-tenant.cce",level:2,children:["otc-edp-per-tenant.cce.edp.externalSecrets","otc-edp-per-tenant.cce.edp.ingressNginx","otc-edp-per-tenant.cce.edp.argoCD","otc-edp-per-tenant.cce.edp.forgejo"],inEdges:["1or831y","ejqwjt","1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce.edp",title:"EDP",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:580,y:883,width:1340,height:634,labelBBox:{x:6,y:0,width:27,height:15}},{id:"otc-edp-per-tenant.cce.edp.externalSecrets",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:1550,y:1287,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:66}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edp-per-tenant.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["1dcszi5"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunn
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:4044,y:1287,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edpFoundry.cce.internalServices.openbao",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:["u5oqat"],outEdges:[],kind:"instance",title:"OpenBao",description:{txt:"Secure secret storage"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.openbao",modelRef:"edp.openbao",x:3594,y:1287,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow"],inEdges:["84397w"],outEdges:["1asm38z","1or831y"],deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure",title:"EDP infrastructure Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP infrastructure Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:4534,y:150,width:442,height:1035,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupArgoCDInfrastructure.edpworkflow"],inEdges:["1oz2va9"],outEdges:["ejqwjt"],deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",title:"EDP ArgoCD Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP Setup ArgoCD Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2102,y:150,width:442,height:1035,labelBBox:{x:6,y:0,width:149,height:15}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["84397w"],outEdges:["1hnil62"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:4595,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1oz2va9"],outEdges:["1gtxobu"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2163,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["1hnil62"],outEdges:["ekzztw"],kind:"instance",title:"Forgejo Runner Worker",description:{txt:"A worker is a service that runs a job invoked by a runner. A worker typically is a container."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",modelRef:"forgejoRunnerWorker",x:4588,y:554,width:333,height:180,labelBBox:{x:18,y:45,width:297,height:84}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,ch
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:630,y:1287,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cloudServices.postgres","otc-edp-per-tenant.cloudServices.redis","otc-edp-per-tenant.cloudServices.objectstorage","otc-edp-per-tenant.cloudServices.elasticsearch"],inEdges:["1asm38z","8msu1q","120qe5o","ealiax","1trj5u6"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},depth:1,x:58,y:1634,width:1894,height:302,labelBBox:{x:6,y:0,width:127,height:15}},{id:"otc-edp-per-tenant.cloudServices.postgres",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["8msu1q"],outEdges:[],kind:"instance",title:"PostgreSQL",description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
and correctness.`},technology:"PostgreSQL",tags:[],icon:"tech:postgresql",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.postgres",modelRef:"postgres",x:1548,y:1706,width:354,height:180,labelBBox:{x:46,y:17,width:292,height:139}},{id:"otc-edp-per-tenant.cloudServices.redis",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["120qe5o"],outEdges:[],kind:"instance",title:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.redis",modelRef:"redis",x:608,y:1706,width:359,height:180,labelBBox:{x:47,y:26,width:297,height:121}},{id:"otc-edp-per-tenant.cloudServices.objectstorage",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["ealiax"],outEdges:[],kind:"instance",title:"s3 Object Storage",description:{txt:"s3 Object Storage"},technology:"S3 Object Storage",tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.objectstorage",modelRef:"objectstorage",x:1098,y:1706,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"otc-edp-per-tenant.cloudServices.elasticsearch",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["1trj5u6"],outEdges:[],kind:"instance",title:"Elasticsearch",description:{txt:`Elasticsearch is a distributed, RESTful search and analytics engine capable of
addressing a growing number of use cases. It centrally stores your data so you can
discover the expected and uncover the unexpected.`},technology:"Elasticsearch",tags:[],icon:"tech:elasticsearch",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.elasticsearch",modelRef:"elasticsearch",x:108,y:1706,width:370,height:180,labelBBox:{x:46,y:17,width:308,height:139}}],edges:[{id:"17kru01",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.argoCD",label:"https",dotpos:"e,3463.8,1312.3 4054.2,1100.1 3915,1148.1 3708,1220.4 3529,1287.4 3511,1294.1 3492.2,1301.3 3473.6,1308.5",points:[[4054,1100],[3915,1148],[3708,1220],[3529,1287],[3511,1294],[3492,1301],[3474,1309]],labelBBox:{x:3755,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"170pc3l",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.forgejo",label:"https",dotpos:"e,4214,1287.5 4214,1134.2 4214,1178.3 4214,1231.6 4214,1277",points:[[4214,1134],[4214,1178],[4214,1232],[4214,1277]],labelBBox:{x:4215,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"u5oqat",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.openbao",label:"https",dotpos:"e,3877.5,1287.6 4090.4,1134.5 4027.1,1180 3950.1,1235.4 3885.6,1281.7",points:[[4090,1134],[4027,1180],[3950,1235],[3886,1282]],labelBBox:{x:3999,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["1p30hav"],color:"gray",line:"dashed",head:"normal"},{id:"qykxlm",source:"otc-edpFoundry.cce.centralObservability.grafana",target:"otc-edpFoundry.cce.centralObservability.prometheus",label:"get metrics and alerts",dotpos:"e,3597.7,554.51 3664.4,401.25 3645.1,445.56 3621.7,499.31 3601.9,544.91",points:[[3664,401],[3645,446],[3622,499],[3602,545]],labelBBox:{x:3636,y:466,width:138,height:18},parent:"otc-edpFoundry.cce.centralObservability",relations:["13uvtiq"],color:"gray",line:"dashed",head:"normal"},{id:"yv49z5",source:"otc-edpFoundry.cce.centralObservability.grafana",target:"otc-edpFoundry.cce.centralObservability.loki",label:"get logs",dotpos:"e,3926.8,554.51 3785,401.25 3826.6,446.21 3877.2,500.89 3919.7,546.91",points:[[3785,401],[3827,446],[3877,501],[3920,547]],labelBBox:{x:3866,y:466,width:53,height:18},parent:"otc-edpFoundry.cce.centralObservability",relations:["1n1utzc"],color:"gray",line:"dashed",head:"normal"},{id:"84397w",source:"otc-edpFoundry.cce.internalServices.forgejo",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",label:"invokes",dotpos:"e,4871.9,401.35 4384,1358.7 4589.5,1333.3 4917.1,1279 4991,1184.6 5006.1,1165.4 5006.3,601.48 4987,554.4 4964.1,498.68 4921.8,448.48 4879.5,408.45",points:[[4384,1359],[4590,1333],[4917,1279],[4991,1185],[5006,1165],[5006,601],[4987,554],[4964,499],[4922,448],[4880,408]],labelBBox:{x:5002,y:799,width:51,height:18},parent:"otc-edpFoundry",relations:["dola40"],color:"gray",line:"dashed",head:"normal"},{id:"1hnil62",source:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",label:"runs",dotpos:"e,4755,554.51 4755,401.25 4755,445.28 4755,498.64 4755,544.05",points:[[4755,401],[4755,445],[4755,499],[4755,544]],labelBBox:{x:4756,y:466,width:31,height:18},parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",relations:["7kqly3"],color:"gray",line:"dashed",head:"normal"},{id:"ekzztw",source:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow",label:"executes",dotpos:"e,4755,954.66 4755,734.27 4755,796.6 4755,879.99 4755,944.48",points:[[4755,734],[4755,797],[4755,880],[4755,944]],labelBBox:{x:4756,y:799,width:60,height:18},parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",relations:["12hf1w4"],color:"gray",line:"dashed",head:"normal"},{id:"1oz2va9",source:"otc-edpFoundry.c
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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
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
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,
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
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,
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
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.
Optionally we will have a WebUI/API/CLI`},technology:"OTC",title:"OTC EDP Foundry Central Service clusters",id:"otc-edpFoundry"},edgeProvider:{style:{icon:"tech:terraform"},kind:"paas",description:{txt:"Unlocks the terraform ecosystem"},title:"Terraform Edge provider",id:"edgeProvider"},edgeProviderHost:{style:{},kind:"environment",title:"OTC",id:"edgeProviderHost"},edgeSdk:{style:{icon:"tech:go"},kind:"paas",description:{txt:"Wrapper around API"},technology:"Cloud Services",title:"Edge Cloud SDK",id:"edgeSdk"},edgeCloud:{style:{},kind:"environment",title:"Edge cloud",id:"edgeCloud"},"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"},"edgeProviderHost.edp":{style:{icon:"tech:git"},kind:"cluster",title:"Forgejo for all EDP-tenants",id:"edgeProviderHost.edp"},"edgeProviderHost.terralist":{style:{icon:"tech:terraform"},kind:"paas",description:{txt:"Terraform provider private hosting"},techn
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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`
`+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 Me=function(){throw Error()};if(Object.defineProperty(Me.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(Me,[])}catch(Ce){var ke=Ce}Reflect.construct(p,[],Me)}else{try{Me.call()}catch(Ce){ke=Ce}p.call(Me.prototype)}}else{try{throw Error()}catch(Ce){ke=Ce}(Me=p())&&typeof Me.catch=="function"&&Me.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,Mt=e.unstable_scheduleCallback,Ke=e.unstable_cancelCallback,Ge=e.unstable_shouldYield,ct=e.unstable_requestPaint,dt=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 dn(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),Me=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&=~Me}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 iu(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 su(){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(f4t,"")}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(Pnt,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
overflow: hidden `).concat(o,`;
padding-right: `).concat(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
}
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;
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;
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
}
.`).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
}
.`).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
}
.`).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,`;
}
.`).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,`;
}
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
}
`)},Jne=function(){var e=parseInt(document.body.getAttribute(eg)||"0",10);return isFinite(e)?e:0},Jnt=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())}},[])},eot=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;Jnt();var i=E.useMemo(function(){return Knt(a)},[a]);return E.createElement(Znt,{styles:Qnt(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,tot=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&&!tot(e)&&n[r]==="visible")},rot=function(e){return eoe(e,"overflowY")},not=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},oot=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},aot=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},roe=function(e,r){return e==="v"?rot(r):not(r)},noe=function(e,r){return e==="v"?oot(r):aot(r)},iot=function(e,r){return e==="h"&&r==="rtl"?-1:1},sot=function(e,r,n,o,a){var i=iot(e,window.getComputedStyle(r).direction),s=i*o,l=n.target,c=r.contains(l),d=!1,u=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(u&&Math.abs(h)<1||!u&&Math.abs(f)<1)&&(d=!0),d},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},lot=function(e,r){return e[0]===r[0]&&e[1]===r[1]},cot=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;}
`)},dot=0,rg=[];function uot(e){var r=E.useRef([]),n=E.useRef([0,0]),o=E.useRef(),a=E.useState(dot++)[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=$nt([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 P=o.current||A;return sot(P,w,x,P==="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)&&lot(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()}}},[]),d=E.useCallback(function(x,w,k,C){var _={name:x,delta:w,target:k,should:C,shadowParent:pot(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function(T){return T!==_})},1)},[]),u=E.useCallback(function(x){n.current=X4(x),o.current=void 0},[]),h=E.useCallback(function(x){d(x.type,ooe(x),x.target,l(x,e.lockRef.current))},[]),f=E.useCallback(function(x){d(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",u,tg),function(){rg=rg.filter(function(x){return x!==i}),document.removeEventListener("wheel",c,tg),document.removeEventListener("touchmove",c,tg),document.removeEventListener("touchstart",u,tg)}},[]);var g=e.removeScrollBar,b=e.inert;return E.createElement(E.Fragment,null,b?E.createElement(i,{styles:cot(a)}):null,g?E.createElement(eot,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function pot(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const hot=Fnt(Zne,uot);var ioe=E.forwardRef(function(e,r){return E.createElement(Y4,El({},e,{ref:r,sideCar:hot}))});ioe.classNames=Y4.classNames;function Bo(e){return Object.keys(e)}function fot(e){return e.replace(/[A-Z]/g,r=>`-${r.toLowerCase()}`)}function mot(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc\((.*?)\)$/)?.[1].split("*")[0].trim()}function K4(e){const r=mot(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=P.numbers=="binary",Y=P.numbers=="octal",Q=P.numbers=="decimal",J=P.numbers=="hexadecimal";if(L&&N&&b(N.toJSON)&&(N=N.toJSON()),!h(N)){if(x(N))return N.size==0?"new Map()":(M||(P.__inline1__=!0,P.__inline2__=!1),"new Map("+D(Array.from(N),P)+")");if(w(N))return N.size==0?"new Set()":"new Set("+D(Array.from(N),P)+")";if(d(N))return N.length==0?"Buffer.from([])":"Buffer.from("+D(Array.from(N),P)+")";if(c(N))return G=[],P.wrap=!0,q&&(P.__inline1__=!1,P.__inline2__=!0),Z||O(),a(N,ne=>{K=!1,Z&&(P.__inline2__=!1),G.push((M||Z?"":I)+D(ne,P))}),K?"[]":Z?"["+G.join(", ")+"]":"["+W+G.join(","+W)+W+(M?"":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":u(N)?(G=[],P.wrap=!0,O(),n(N,(ne,re)=>{K=!1,G.push((M?"":I)+D(ne,P)+":"+(M?"":" ")+D(re,P))}),K?"{}":"{"+W+G.join(","+W)+W+(M?"":H)+"}"):L?JSON.stringify(N)||"null":String(N)}const ie=P.escapeEverything?A:R;return G=N.replace(ie,(ne,re,ge,De,he,me)=>{if(re){if(P.minimal)return re;const Ie=re.charCodeAt(0),Ze=re.charCodeAt(1);if(P.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||P.escapeEverything?"\\"+De:De;if(C.test(ne))return k[ne];if(P.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,"\\${")),P.isScriptContext&&(G=G.replace(/<\/(script|style)/gi,"<\\/$1").replace(/<!--/g,L?"\\u003C!--":"\\x3C!--")),P.wrap&&(G=U+G+U),G};return D.version="3.0.2",OD=D,OD}$ut();function Put({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 Mut(){const e=uh(),r=(e.options.getScrollRestorationKey||ele)(e.latestLocation),n=r!==ele(e.latestLocation)?r:null;return!e.isScrollRestoring||!e.isServer?null:y.jsx(Put,{children:`(${yut.toString()})(${JSON.stringify(Qse)},${JSON.stringify(n)}, undefined, true)`,log:!1})}const zut=E.memo(function({matchId:e}){var r,n;const o=uh(),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,d=i.options.onCatch??o.options.defaultOnCatch,u=i.isRoot?i.options.notFoundComponent??((r=o.options.notFoundRoute)==null?void 0:r.options.component):i.options.notFoundComponent,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=u?Nut: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(ule.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;d?.(w,k)},children:y.jsx(g,{fallback:w=>{if(!u||w.routeId&&w.routeId!==a||!w.routeId&&!i.isRoot)throw w;return E.createElement(u,w)},children:y.jsx(Out,{matchId:e})})})})}),x===tle&&o.options.scrollRestoration?y.jsxs(y.Fragment,{children:[y.jsx(Iut,{}),y.jsx(Mut,{})]}):null]})});function Iut(){var e;const r=uh(),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",...vut(r.state)}),n.current=r.state.resolvedLocation)}},(e=r.state.resolvedLocation)==null?void 0:e.state.key)}const Out=E.memo(function({matchId:e}){var r,n,o;const a=uh(),{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:fut(g,["id","status","error"])}},structuralSharing:!0}),c=a.routesById[l],d=E.useMemo(()=>{const h=c.options.component??a.options.defaultComponent;return h?y.jsx(h,{},s):y.jsx(jut,{})},[s,c.options.component,a.options.defaultComponent]),u=(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(but(i.error)),(r=a.getMatch(i.id))==null?void 0:r.loadPromise;if(i.status==="error"){if(a.isServer)return y.jsx(u,{error:i.error,reset:void 0,info:{componentStack:""}});throw i.error}if(i.status==="pending"){const h=c.options.pendingMinMs??a.options.defaultPendingMinMs;if(h&&!((n=a.getMatch(i.id))!=null&&n.minPendingPromise)&&!a.isServer){const f=mut();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 d}),jut=E.memo(function(){const e=uh(),r=E.useContext(ule),n=Bs({select:c=>{var d;return(d=c.matches.find(u=>u.id===r))==null?void 0:d.routeId}}),o=e.routesById[n],a=Bs({select:c=>{const d=c.matches.find(u=>u.id===r);return Yk(d),d.globalNotFound}}),i=Bs({select:c=>{var d;const u=c.matches,h=u.findIndex(f=>f.id===r);return(d=u[h+1])==null?void 0:d.id}});if(a)return ple(e,o,void 0);if(!i)return null;const s=y.jsx(zut,{matchId:i}),l=e.options.defaultPendingComponent?y.jsx(e.options.defaultPendingComponent,{}):null;return r===tle?y.jsx(E.Suspense,{fallback:l,children:s}):s}),Lut=typeof window<"u"?E.useLayoutEffect:E.useEffect;function But(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(`
`)),d=c.reduce((u,h)=>u.concat(...h),[]);return[c,d]}return[[],[]]},[e]);return E.useEffect(()=>{const c=r?.target??cde,d=r?.actInsideInputWithModifier??!0;if(e!==null){const u=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!d)&&Ece(g))return!1;const b=ude(g.code,l);if(i.current.add(g[b]),dde(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=ude(g.code,l);dde(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",u),c?.addEventListener("keyup",h),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",u),c?.removeEventListener("keyup",h),window.removeEventListener("blur",f),window.removeEventListener("contextmenu",f)}}},[e,o]),n}function dde(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function ude(e,r){return r.includes(e)?"code":"key"}const Ygt=()=>{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(),d={x:r.x-l,y:r.y-c},u=n.snapGrid??a,h=n.snapToGrid??i;return zb(d,o,h,u)},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 pde(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)Ggt(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 Ggt(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 Xgt(e,r){return pde(e,r)}function Kgt(e,r){return pde(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 hde({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"})]})})}eue.displayName="MiniMap",E.memo(eue);const L0t=e=>r=>e?`${Math.max(1/r.transform[2],1)}`:void 0,B0t={[Ng.Line]:"right",[Ng.Handle]:"bottom-right"};function F0t({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:d=Number.MAX_VALUE,maxHeight:u=Number.MAX_VALUE,keepAspectRatio:h=!1,resizeDirection:f,autoScale:g=!0,shouldResize:b,onResizeStart:x,onResize:w,onResizeEnd:k}){const C=kde(),_=typeof e=="string"?e:C,T=Jr(),A=E.useRef(null),R=n===Ng.Handle,D=ur(E.useCallback(L0t(R&&g),[R,g]),ln),N=E.useRef(null),P=r??B0t[n];E.useEffect(()=>{if(!(!A.current||!_))return N.current||(N.current=kgt({domNode:A.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:F,transform:L,snapGrid:U,snapToGrid:M,nodeOrigin:V,domNode:I}=T.getState();return{nodeLookup:F,transform:L,snapGrid:U,snapToGrid:M,nodeOrigin:V,paneDomNode:I}},onChange:(F,L)=>{const{triggerNodeChanges:U,nodeLookup:M,parentLookup:V,nodeOrigin:I}=T.getState(),H=[],q={x:F.x,y:F.y},Z=M.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,M,W)}},Y=h$([j],M,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:P,boundaries:{minWidth:l,minHeight:c,maxWidth:d,maxHeight:u},keepAspectRatio:h,resizeDirection:f,onResizeStart:x,onResize:w,onResizeEnd:k,shouldResize:b}),()=>{N.current?.destroy()}},[P,l,c,d,u,h,x,w,k,b]);const O=P.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(F0t);var H0t=Object.getOwnPropertyNames,V0t=Object.getOwnPropertySymbols,q0t=Object.prototype.hasOwnProperty;function tue(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 U0t(e){return e?.[Symbol.toStringTag]}function rue(e){return H0t(e).concat(V0t(e))}var W0t=Object.hasOwn||(function(e,r){return q0t.call(e,r)});function vh(e,r){return e===r||!e&&!r&&e!==e&&r!==r}var Y0t="__v",G0t="__o",X0t="_owner",nue=Object.getOwnPropertyDescriptor,oue=Object.keys;function K0t(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 Z0t(e,r){return vh(e.getTime(),r.getTime())}function Q0t(e,r){return e.name===r.name&&e.message===r.message&&e.cause===r.cause&&e.stack===r.stack}function J0t(e,r){return e===r}function aue(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 d=r.entries(),u=!1,h=0;(l=d.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)){u=a[h]=!0;break}h++}if(!u)return!1;c++}return!0}var eyt=vh;function tyt(e,r,n){var o=oue(e),a=o.length;if(oue(r).length!==a)return!1;for(;a-- >0;)if(!sue(e,r,n,o[a]))return!1;return!0}function Bb(e,r,n){var o=rue(e),a=o.length;if(rue(r).length!==a)return!1;for(var i,s,l;a-- >0;)if(i=o[a],!sue(e,r,n,i)||(s=nue(e,i),l=nue(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(`
`))}}const o3t={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=o3t;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),d;for(const u of s){if(u._zod.def.when){if(!u._zod.def.when(i))continue}else if(c)continue;const h=i.issues.length,f=u._zod.check(i);if(f instanceof Promise&&l?.async===!1)throw new Xb;if(d||f instanceof Promise)d=(d??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 d?d.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=xvt(e,a);return i.success?{value:i.data}:{issues:i.error?.issues}}catch{return wvt(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()??Vvt(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)}),a3t=Oe("$ZodGUID",(e,r)=>{r.pattern??(r.pattern=Rvt),tn.init(e,r)}),i3t=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)}),s3t=Oe("$ZodEmail",(e,r)=>{r.pattern??(r.pattern=Nvt),tn.init(e,r)}),l3t=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:jvt.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})}}}),c3t=Oe("$ZodEmoji",(e,r)=>{r.pattern??(r.pattern=$vt()),tn.init(e,r)}),d3t=Oe("$ZodNanoID",(e,r)=>{r.pattern??(r.pattern=Tvt),tn.init(e,r)}),u3t=Oe("$ZodCUID",(e,r)=>{r.pattern??(r.pattern=kvt),tn.init(e,r)}),p3t=Oe("$ZodCUID2",(e,r)=>{r.pattern??(r.pattern=_vt),tn.init(e,r)}),h3t=Oe("$ZodULID",(e,r)=>{r.pattern??(r.pattern=Evt),tn.init(e,r)}),f3t=Oe("$ZodXID",(e,r)=>{r.pattern??(r.pattern=Svt),tn.init(e,r)}),m3t=Oe("$ZodKSUID",(e,r)=>{r.pattern??(r.pattern=Cvt),tn.init(e,r)}),g3t=Oe("$ZodISODateTime",(e,r)=>{r.pattern??(r.pattern=Hvt(r)),tn.init(e,r)}),y3t=Oe("$ZodISODate",(e,r)=>{r.pattern??(r.pattern=Bvt),tn.init(e,r)}),b3t=Oe("$ZodISOTime",(e,r)=>{r.pattern??(r.pattern=Fvt(r)),tn.init(e,r)}),v3t=Oe("$ZodISODuration",(e,r)=>{r.pattern??(r.pattern=Avt),tn.init(e,r)}),x3t=Oe("$ZodIPv4",(e,r)=>{r.pattern??(r.pattern=Pvt),tn.init(e,r),e._zod.onattach.push(n=>{const o=n._zod.bag;o.format="ipv4"})}),w3t=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})}}}),k3t=Oe("$ZodCIDRv4",(e,r)=>{r.pattern??(r.pattern=zvt),tn.init(e,r)}),_3t=Oe("$ZodCIDRv6",(e,r)=>{r.pattern??(r.pattern=Ivt),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;
}
`)}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,
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(u,k,C)};let a;const i=zP,s=!ihe.jitless,l=s&&lvt.value,c=r.catchall;let d;e._zod.parse=(u,h)=>{d??(d=n.value);const f=u.value;if(!i(f))return u.issues.push({expected:"object",code:"invalid_type",input:f,inst:e}),u;const g=[];if(s&&l&&h?.async===!1&&h.jitless!==!0)a||(a=o(r.shape)),u=a(u,h);else{u.value={};const C=d.shape;for(const _ of d.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,u,_,f):Z5(D,u,_))):R?khe(A,u,_,f):Z5(A,u,_)}}if(!c)return g.length?Promise.all(g).then(()=>u):u;const b=[],x=d.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,u,C))):Z5(_,u,C)}return b.length&&u.issues.push({code:"unrecognized_keys",keys:b,input:f,inst:e}),g.length?Promise.all(g).then(()=>u):u}});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 M3t=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=>PP(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)}}),z3t=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 LP(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(IP(e)&&IP(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=LP(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=LP(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=LP(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 I3t=Oe("$ZodEnum",(e,r)=>{bn.init(e,r);const n=ivt(r.entries);e._zod.values=new Set(n),e._zod.pattern=new RegExp(`^(${n.filter(o=>cvt.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}}),O3t=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: 0px solid transparent;
padding: 0;
}`;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=V2t.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??=Nnt.createRoot(this.shadow),this.root.render(y.jsx(Snt,{...r}))}attributeChangedCallback(r){this.root&&this.render()}}return customElements.define(Dnt.View,Whe),d6.LikeC4View=Whe,Object.defineProperty(d6,Symbol.toStringTag,{value:"Module"}),d6})({});
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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 */